Under Construction

How would you draw the Big Dipper on a computer?

p5.js Web Editor


Take a walk outside tomorrow afternoon. Depending on your location and the weather, you may enjoy the sunshine on your face. What would happen if you headed back outside after sunset? With some exceptions, you’d probably notice it’s cooler at night than in the daytime. Our sensations of heat and cold depend primarily on the temperature of the air, how much radiation we absorb from the sun, and the wind.

But why male models?

— Derek Zoolander

A mathematician would look at the situation and develop a general description, or model. She would say something like the following: “My sensation of heat changes and it depends on temperature, radiation, and wind.”


Sensations and other quantities that change are known as variables. You may be acquainted with variables like and 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, or vary.

Math students often have trouble distinguishing between variables and the values they represent. 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.

In our model of sensation, heat is dependent upon the values of three variables that are independent, or taken as an input to the model. A mathematician would represent the heat model as a function using notation like .


At some point, you may have been asked to read a brief scenario and make up, or formulate, a model. Perhaps you wound up with a function like describing an object’s displacement with respect to time. You could define the same function in JavaScript like so.

function d(t) {
  return 5*t;

We have some idea that d represents displacement and t represents time, but where did that come from?

You may recall from kinematics that the displacement of an object moving with constant velocity is modeled by the function where represents velocity. If you ran in a straight line at meters per second for seconds, you would move a total of meters.

When you know the velocity is , it’s tempting to just write as much. Don’t. Magic numbers that show up in code make it difficult to understand what’s going on. It may seem like overkill for quick sketches, but future you will appreciate the extra few seconds it took to be a little more descriptive.

function displacement(time) {
  let velocity = 5;
  return velocity*time;

The preceding code snippet declares that we want to use the variable velocity before we assign it the value . velocity itself doesn’t change, but the label is helpful in understanding what we intend to happen.

time is part of our function definition, called a parameter. If we called displacement(5) somewhere in the sketch, the argument would be assigned to the parameter time. Parameters don’t change; the arguments we assign to them do.

The following sketch declares the variable currentTime and assigns it the value . It then passes currentTime as an argument to displacement() where it is assigned to the parameter time. The print() function is used to print the value returned by displacement(). We then assign a new value to currentTime and repeat.

Protip: Printing values is a useful technique for debugging.

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

  let currentTime = 0;
  print(displacement(currentTime)); // 0
  currentTime = 1;
  print(displacement(currentTime)); // 5
  currentTime = 2;
  print(displacement(currentTime)); // 10

function draw() {

function displacement(time) {
  let velocity = 5;
  return velocity*time;

Rewrite displacement() so that velocity is a parameter, then update your calls to displacement().

Variables Review

What are variables? Describe how they relate to arguments and parameters.


When you take that walk outside tomorrow night, try to spot a constellation. How would you describe its position? You might start by saying, “Well, the constellation is in the sky over there, and I know the stars are really in outer space.”

A mathematician would look at the situation and say something like, “I know the photons from those stars just arrived at my eye after traveling for a long time. From my perspective, the stars appear to be arranged in such-and-such shape. I bet I could describe each star’s position precisely—let me get a pencil.”

You could begin by sketching the constellation on a piece of paper and adding some axes. Starting from the origin, you could trace the horizontal and vertical position to the first star you drew. If you did, you’d have and components of the vector pointing from the origin to the star.


You’ve probably used graph paper to draw ordered pairs of the form , so you have a solid foundation for working with vectors. As we progress, you will see that these geometric objects make modeling and animation much simpler.

Let’s say the point has coordinates relative to the origin. We would express the same idea as using vector notation. has components and . You can create vectors in p5.js like so.

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

function draw() {
  let firstPoint = createVector(100, 50);
  point(firstPoint.x, firstPoint.y);

Create a few vectors and use them to draw points in a straight line.


Drawing collections of objects can get tricky fast. If you try to draw Orion’s Belt in the middle of the canvas, you may find yourself calculating and re-calculating offsets until you get them in the perfect arrangement. What if you then wanted to shift everything to the left a little, or make the stars move across the nighttime sky?

Shifting, or translation, is a useful geometric transformation that adds a fixed amount to a vector. Perhaps we want to translate by some amount . Mathematically, we would carry out vector addition .

Vectors support a number of useful operations in addition to addition—we’ve barely scratched the surface!

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

function draw() {
  let alnitak = createVector(50, 100);
  let alnilam = createVector(100, 75);
  let mintaka = createVector(150, 50);
  translate(100, 100);
  point(alnitak.x, alnitak.y);
  point(alnilam.x, alnilam.y);
  point(mintaka.x, mintaka.y);

Try passing a range of different arguments to translate().

Translations allow you to focus on the arrangement of objects relative to each other. They really start to shine when combined.

Vectors Review

How does vector translation work?

Domain and Range

Have you ever looked up at a sky full of stars? If you can find a spot free of light pollution you may even be able to observe our galaxy in all its splendor. The sight is truly awesome and it raises some big questions.

Are we alone in the cosmos? Will we ever travel to another star system? And just how full is the sky, anyway? Let’s start with that last one.


You’ve probably drawn countless graphs in math classes over the years. About the simplest thing you could draw is a single, solitary point like the one below.

How much of the graph does the point take up? Certainly not much. To be precise, the point only takes up, well, a single point. Looking from left to right, it appears the -values, or domain, of the graph is just . The -values, or range, is just . Let’s expand the graph a little.

It appears our domain and range have both grown! The domain is now and the range is . Graphs that are comprised of collections, or sets, of individual points are known as discrete graphs. But what happens when we connect the dots?


The graph below connects the points and with a straight line.

If you zoom in and move from left to right, you would find that the graph is filled in somewhere at every -value between and . You could do the same from top to bottom. When a graph’s domain and range take on every value in a given interval, we say it is continuous. In this case, the domain is and the range is .


The sky is full of more stars than you could hope to count. When you take that walk tomorrow night, gaze upon them and map out your own constellation. Do a little research and figure out the proper name of each star. Then try drawing your constellation with code. The sketch below gives an example of drawing the Big Dipper.

// Declaring variables up here allows us to use them
// throughout the sketch.
let spacing;
let alkaid, mizar, alioth, megrez, phecda, merak, dubhe;

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

  spacing = createVector(10, 10);
  alkaid = createVector(0, 0);
  mizar = createVector(5*spacing.x, spacing.y);
  alioth = createVector(7*spacing.x, 3*spacing.y);
  megrez = createVector(9*spacing.x, 5*spacing.y);
  phecda = createVector(9*spacing.x, 8*spacing.y);
  merak = createVector(14*spacing.x, 9*spacing.y);
  dubhe = createVector(16*spacing.x, 6*spacing.y);

function draw() {

  translate(100, 200);
  point(alkaid.x, alkaid.y);
  point(mizar.x, mizar.y);
  point(alioth.x, alioth.y);
  point(megrez.x, megrez.y);
  point(phecda.x, phecda.y);
  point(merak.x, merak.y);
  point(dubhe.x, dubhe.y);

  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);

Look up line() in the p5.js reference.

Domain and Range Review

What are the different ways you could describe the domain and range of your constellation?

Project Ideas

Interactivity Make your constellation follow your mouse pointer.

Analysis Use the print() function to log your 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.