PFVA:002 Animating With Code




You can imagine variables as named containers or boxes. You take a box, write a label on the side of it (books, clothes, x, y etc.), and then you put something in the box. You can open the box and see what is there or decide to change the contents of the container.

  • You need to declare a variable before using it
    • let x;
  • You can assign (store) a value to a variable using =
    • let x = 100; // you can assign the value when you declare it
    • x = 200; // or you can do it later
  • Learn more about variables in JavaScript

In JavaScript (and therefore in p5.js), you do not have to define a data type for your variables. They can all be declared as let, you can also use var, but I would recommend in this class that we use let, unless you have a good reason not to.

Conditional Statements if()

A big part of your programs are going to be about controlling what to do when some value updates. This is called flow control. One very powerful and useful tool for that is the if statement.

if (condition) {
  //  block of code to be executed if the condition is true


Some examples of drawing things with the random() function.

2nd Assignment

This is one of the mandatory assignments that you need to complete to pass this class.

  • Use the random() function and the 2D shapes to draw some interesting patterns.
  • Try using the random on different things: size, position, color etc.
  • Add your code to our OpenProcessing classroom.