Vidcode: Code the Eclipse

Educator Resources

60-90 minutes

JavaScript


STUDENTS: START YOUR HOUR OF CODE TUTORIAL HERE

The Activity

2017 gave us one of the most spectacular natural phenomena of our lives, and now we're going to simulate the solar eclipse with JavaScript! Looking at the eclipse as a system of moving parts, we can decompose the problem into bite-sized chunks, using objects with methods, loops, and conditionals to make an interactive app that models our observations.

Employs the “Parts, Purposes, Complexities” thinking routine from Harvard Graduate School of Education’s Project Zero.

Big Idea: To solve a problem, break it down into smaller parts!

  • Next Generation Science Standards

    NGSS-MS-ESS1-1 Develop and use a model of the Earth-sun-moon system to describe the cyclic patterns of lunar phases, eclipses of the sun and moon, and seasons.

    NGSS-HS-ESS1-4 Use mathematical or computational representations to predict the motion of orbiting objects in the solar system.

    NGSS-MS-ETS1-1. Define the criteria and constraints of a design problem with sufficient precision to ensure a successful solution, taking into account relevant scientific principles and potential impacts on people and the natural environment that may limit possible solutions.

    NGSS-MS-ETS1-2. Evaluate competing design solutions using a systematic process to determine how well they meet the criteria and constraints of the problem.

    NGSS-MS-ETS1-3. Analyze data from tests to determine similarities and differences among several design solutions to identify the best characteristics of each that can be combined into a new solution to better meet the criteria for success.MS-ETS1-4. Develop a model to generate data for iterative testing and modification of a proposed object, tool, or process such that an optimal design can be achieved.

    NGSS-MS-ETS1-4. Develop a model to generate data for iterative testing and modification of a proposed object, tool, or process such that an optimal design can be achieved.

LESSON PLAN

Time: 75 minutes

  • 10 minutes background

  • 45 minutes coding

  • 10 minutes sharing

  • 10 minutes reflection

Background (10 minutes)

Principles

  • Easy enough for beginners to access

  • Ramps up slowly

  • Spiral design

  • Promotes “deep learning”

  • Promotes positive identity, role models

  • Math should be prominent, but not annoying.

Code Challenge (45 minutes)

  • // Part: Earth

    function earth(){

    movie = video();

    movie.source = "night-stars.mp4";

    this.shadow = tint("black",0);

    // Purpose: be lit or shaded

    this.dim = function(perc){

    this.shadow.amount = perc;

    }

    }

    // Part: Sun

    function sun(x,y) {

    this.x = x;

    this.y = y;

    this.body = circle(this.x,this.y, 100, "#eff28c", "clear");

    this.label = text("sun",this.x-40, this.y-40);

    this.label.color = "#1d0c7b";

    this.corona = blur(0);

    // Purpose: totality

    this.total = function(){

    mySun.body.radius = 110;

    this.corona.amount = 20;

    }

    // Purpose: partiality

    this.partial = function(){

    mySun.body.radius = 100;

    this.corona.amount = 0;

    }

    }

    Vidcode Lesson Plans

    www.vidcode.io

    [email protected]

    //Part: Moon

    function moon(x,y) {

    this.body = circle(x,y,100, "blue", "clear");

    this.label = text("moon");

    this.label.y = y-40;

    this.label.color = "white";

    // Purpose: transit

    this.goto = function(x){

    this.body.x = x;

    this.label.x = x-60;

    }

    }

    // Instantiate parts

    var myEarth = new earth();

    var mySun = new sun(300,150);

    var myMoon = new moon(0,150);

    // Complexities

    repeat(function() {

    // The Moon is controlled by the mouse

    myMoon.goto(mouse.x)

    // The amount the Earth is lit depends on the positions of the Sun and

    Moon

    myEarth.dim(100 - Math.abs(myMoon.body.x-mySun.body.x)/2);

    // If the Sun and Moon are lined up, we have a total eclipse

    if (myMoon.body.x === mySun.body.x){

    mySun.total();

    }

    else{

    mySun.partial();

    }

    }, 1);

Sharing (10 minutes)

Be Prepared to share what you created and share/explain how it worked.

Reflection (10 minutes)

  • What things did other students create that you'd like to know how to do?

  • What things did you create that you are proud of figuring out?

image-asset-1.jpg

Sign up to our Hour of Code Newsletter for additional resources and updates!