Let's review what we learned about animaiton #

Variables #

In javascript, we can store values in variables. JS variables can store many types of data like numbers (integers/floating points), words/characters (strings), and true or false (booleans).

let integer = 42

let float = 3.14159

let string = "It was a dark and stormy night..."

let boolean = true

p5 variables #

We also got into some useful variables that p5 keeps track of for us

• MouseX / MouseY - These values give us the value of the x and y coordinates of the mouse in the canvas
• deltaTime - The amout of time elapsed since the last frame
• frameCount - The number of frames since the program started running

Conditionals #

In javascript, we can add a logical flow to our programs by using if statements. By giving true or false values to these statements, we can tell our programs to carry out certain actions. As a base example, take this sketch below. By changing the value in the if statement, we can change if the sketch is colored red or blue.

We can also make this if statement responsive to a variable. In this sketch, we can generate a random number between 0.0 and 1.0 and inform the background of the sketch based on if the random number is greater or less than 0.5.

Functions #

In class we learned about we can make reusable instructions in our code by using functions. These blocks of code can be defined and named like variables, then called later in our programs.

p5 gives us some funcitons that we can fill in like the setup and draw functions, but it also gives us hand functions like keyPressed, and mouseClicked. These funcitons get called whenever a key is pressed or the mouse is clicked on the canvas. These types of funtions are sometimes referred to as 'event' funcitons.

In addition to event funcitons like keyPressed, p5 gives us a lot of the funcitons we've already been using like ellipse(), rect(), and line(). In addition, we can use funcitons like sin() and cos() to create sinusoidal animations in p5 like so:

Loops #

Another key ingredient to what we learned is the concept of for loops. For loops let us repeat a block of code several times without having to repeat ourselves as many times. In this example, we can draw over a hundred circles with only one written

for(let i = 0; i < 100; i++){
    console.log(i) // prints the value of i to the console
}

Lets break down what we're looking at. In the first line of this for loop, there are three statements: (let i = 0; i < 100; i++). In the first statement, "let i = 0", we're making a variable named i and setting it to zero. The second statement, "i < 100" is checked every iteration of the loop to see if i is less than 100. If this statement is true, the for loop will perform another iteraton. And the last statement i++ will increment i by 1 every iteration. In this way, we are making the loop repeat a hundred times as i increments from 0 to 99. We can check this by putting a console.log() statement in the for loop to print out all of the values of i. TL;DR - a for loop can be a useful short cut for telling a program to do some thing x number of times.

In this example, we can use a for loop to draw and animate hundreds of circles that look like an undulating line: