Starlight

Under Construction

How would you draw the Big Dipper on a computer?

p5.js Web Editor

Variables

You may be acquainted with variables like from solving equations or graphing points and lines. Try to think of variables as containers, or buckets, or boxes—as you prefer. The big idea is that they change.

Mathematics

Math students often have trouble distinguishing between variables and the values they contain. may represent the number at a particular point along the graph of a line, so it’s easy to conclude (incorrectly) that , now and always.

Computation

Variables Review

Vectors

Operations

Transformations

Vectors Review

2D Primitives

Ellipse

Line

2D Primitives Review

Domain and Range

Discrete

Continuous

Domain and Range Review

let delta;
let alkaid, mizar, alioth, mgrez, phecda, merak, dubhe;
let diameter;

function setup() {
  createCanvas(400, 400);

  delta = createVector(width/40, height/40);
  alkaid = createVector(0, 0);
  mizar = createVector(5*delta.x, delta.y);
  alioth = createVector(7*delta.x, 3*delta.y);
  megrez = createVector(9*delta.x, 5*delta.y);
  phecda = createVector(9*delta.x, 8*delta.y);
  merak = createVector(14*delta.x, 9*delta.y);
  dubhe = createVector(16*delta.x, 6*delta.y);
  diameter = 6;
}

function draw() {
  background(0);

  translate(width/4, height/2);
  noStroke();
  fill(255);
  ellipse(alkaid.x, alkaid.y, diameter, diameter);
  ellipse(mizar.x, mizar.y, diameter, diameter);
  ellipse(alioth.x, alioth.y, diameter, diameter);
  ellipse(megrez.x, megrez.y, diameter, diameter);
  ellipse(phecda.x, phecda.y, diameter, diameter);
  ellipse(merak.x, merak.y, diameter, diameter);
  ellipse(dubhe.x, dubhe.y, diameter, diameter);

  stroke(255);
  strokeWeight(2);
  line(alkaid.x, alkaid.y, mizar.x, mizar.y);
  line(mizar.x, mizar.y, alioth.x, alioth.y);
  line(alioth.x, alioth.y, megrez.x, megrez.y);
  line(megrez.x, megrez.y, phecda.x, phecda.y);
  line(phecda.x, phecda.y, merak.x, merak.y);
  line(merak.x, merak.y, dubhe.x, dubhe.y);
}

Project Ideas

Interactivity Make the constellation follow your mouse pointer.

Analysis Use the print() function to log the constellation’s domain and range.

Animation Fill out the nighttime sky and make a shooting star follow your mouse pointer.


This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.