Stardust

Under Construction

How would you draw a meteor shower on a computer?

p5.js Web Editor

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.

Discrete

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.

What happens when we connect the dots?

Continuous

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 .

Constellation

The sky is full of more stars than you could hope to count. Take a walk outside tonight and try to spot a constellation.

How would you describe the constellation’s position? You might start by saying, “Well, it’s 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.”

The sketch below gives an example of drawing the Orion’s Belt. The statement let x = 5; declares that you’d like to use a variable named x and assign it the value .

Protip: Good variable names can make it much easier to understand what’s happening in your code.

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

function draw() {
  background(0);
  stroke(255);

  let alnitakX = 100;
  let alnitakY = 250;
  let alnilamX = 200;
  let alnilamY = 175;
  let mintakaX = 300;
  let mintakaY = 100;

  strokeWeight(5);
  point(alnitakX, alnitakY);
  point(alnilamX, alnilamY);
  point(mintakaX, mintakaY);

  strokeWeight(1);
  // look up "line" in the p5.js reference
  line(alnitakX, alnitakY, alnilamX, alnilamY);
  line(alnilamX, alnilamY, mintakaX, mintakaY);
}

Map out your own constellation on paper then in code. Research the proper names of the stars or come up with new ones.

Domain and Range Review

What are the domain and range of the stars in your constellation? How about when you connect them?

Variables

Take another walk outside tomorrow afternoon. Depending on your location and the weather, you may enjoy the sunshine on your face. Close your eyes and compare the feeling with the previous evening.

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

Mathematics

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 hold values that can 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 .

Computation

At some point, you may have been asked to read a brief scenario and make up, or formulate, a model.

Perhaps you were in science class and formulated a model like describing an object’s displacement with respect to velocity and time. If you ran in a straight line at meters per second for seconds, you would find yourself meters away from your starting position.

You could define the corresponding function in JavaScript like so.

function d(v, t) {
  return v*t;
}

v and t are part of our function definition, called parameters. If we called d(5, 10) somewhere in the sketch, the argument would be assigned to the parameter v and would be assigned to the parameter t.

Parameters don’t change; the arguments we assign to them do.

The following sketch of a meteor declares the variable x and assigns it the value . This statement is like asking JavaScript to create a new box labelled “x” and put a in it to start.

x is increased, or incremented, by when draw() executes. You could imagine this statement as taking the value held in the “x” box, adding to it, and putting the new value back in the box.

The print() function is used to keep a running log of the current value of x.

Protip: Printing values is a useful technique for debugging.

// Variables you declare up here can be used
// throughout the sketch.
let x = 0;

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

function draw() {
  background(0, 25);
  stroke(255);
  fill(255);

  print(x);

  x += 1;
  let y = 200;
  circle(x, y, 10);
}

Look up fill() and circle() in the p5.js reference.

Variables Review

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

Linear Functions

The meteor’s trajectory is a little flat at the moment. It’d be neat to give it give it some sort of orientation. Looking back at our code, the variable y seems to be held constant. Let’s tweak that.

Equations

Functions

// Variables you declare up here can be used
// throughout the sketch.
let x = 0;

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

function draw() {
  background(0, 25);
  stroke(255);
  fill(255);

  print(x);

  x += 1;
  circle(x, f(x), 10);
}

function f(x) {
  return 2 * x + 100;
}

Linear Functions Review

Project Ideas

Extension Add another meteor (or two).

Animation Make the meteor glow red as it enters the atmosphere.


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