Simple Math & Animation

In addition to storing static values in variables that will get used throughout a code sketch, another use of variables is to store the results of mathematical calculations, for use later in your code.

We have already seen the use of the p5 variables mouseX and mouseY to animate a p5 sketch. But what if you wanted to create generative code, that will cause a sketch to appear and form over time?

The answer of course, is the use of variables to hold the output of mathematical calculations.

We will get into math more deeply next week, for this week, I will assume you understand how addition/subtraction, and multiplication/division work.

You are going to get good at math again! I promise.

Assign Results from Calculations to Variables

To assign the results of a mathematical calculation to a variable, you simply need to use the assignment operator (i.e. the equals sign, =) with the calculation.

For example, the following assigns the result of 2 + 2 to the variable, four;

let four = 2 + 2;

The above would be said as; “The variable four gets the result of two plus two.”

This is obviously quite boring, and superfluous, as we know that 2 + 2 equals 4. However, there may come a time when you have many variables in relation to each other, where a change in one, needs to be propagated throughout the system. In such a system, you may have multiple variables, that are each used in the calculations.

In the following example, we declare and assign an initial variable smileySize. From this, all other aspects of the smiley face’s shape and size are calculated. If this first variable (smileySize) is changed (which you should do in the example code below), then the rest of the sketch adjusts. This occurs since the rest of the variables are based off this initial size variable.

In Practice, in order to Animate

These same principles can be applied to animation. This will allow us to work towards our generative art sketch.

As an example, let’s define two variables globally, which will store position data.

let posX = 0;
let posY = 0;

Then, inside of the draw() function loop, let’s use them to represent the position parameters for an ellipse function.

After that, we will add 1 to each variable, and then re-assign that result BACK to the variable.

function draw() {
    ellipse( posX, posY, 30, 30 );

    // update posX & posY every frame
    // add 1, then re-assign back to self
    posX = posX + 1;
    posY = posY + 1;
}

Now, every frame, the value of posX & posY will get larger by 1. Thereby, moving the position of the ellipse every frame of the draw() loop. The complete code and output for this example might look like;

Another Example

Examine the following example for how variables are used to create a “Creepy Spinning Variable Person”.

Notice that the following sketch uses;

• Variables that serve as references for other values.
  • Such as headWidth & headHeight, in lines 13 & 14
• Variables that are mathematically transformed and re-assigned to themselves every frame.
  • Such as headAngle, headRotationRate, & armAngle in lines 24, 27, & 29.
• p5 reserved word variables, that are serving to alter the sketch.
  • Such as windowWidth & windowHeight in line 7.
  • mouseY adjusting the headRotationRate in line 24.
  • mouseX & mouseY setting the person position in line 38.
  • mouseX setting the left arm rotation angle in line 67.

{ TODO: } | More on Variables in JS

Please read the following, which provides additional information on declaring and using variables in JavaScript.

• w3schools variable tutorial
• multi-word conventions

Shiffman on Using Your Own Variables

Here is Dan Shiffman on how to declare and assign your own variables.