Vidcode: Code the Eclipse
Educator Resources
60-90 minutes
JavaScript
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
//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?
Sign up to our Hour of Code Newsletter for additional resources and updates!