Vidcode: Code the Eclipse

Educator Resources


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.

Sample Solutions:


  • 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.

Chrome is the recommended browser to use for this Hour of Code.


Guides & Lesson plans


Sample Code

// 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 = function(){
    mySun.body.radius = 110;
    this.corona.amount = 20;
  // Purpose: partiality
  this.partial = function(){
    mySun.body.radius = 100;
    this.corona.amount = 0;

//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.updatePos = 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
   // 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 (Math.abs(myMoon.body.x - mySun.body.x)<5){;
}, 1);




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.


What is Computer Science Education Week?

Computer Science Education Week is a chance to inform students about and celebrate computer science (CS). Only 5% of schools nation-wide offer students the opportunity to take a rigorous CS course.  CS Education Week is meant to provide a time for schools, teachers, and communities to set aside a small amount of time devoted to exposing students to a greater realm of CS opportunities than they experience every day. For students in a CS class, CS Education Week is a way to enrich the course content with information from colleges and companies, and where students can meet professionals from outside the school who use CS to solve problems.