Lesson 2.2

Declaring Variables

Watch Variables in p5.js (Make your own)

Video for 2.2

You can create your own variables!

We declared and initialized the variable but it doesn’t do anything yet.

We substitute the hard coded 10 with the variable name. But it still doesn’t do anything. We need to find a way to change it with each call to draw().

Example 2.2.1: How can we change the variable? We change it by assigning the variable a new value – the old value + 1. That is, we increment the variable. Now it moves to the right!

Example 2.2.1

Example 2.2.2: We can change the color and position at the same time.

Example 2.2.2

Example 2.2.3: or the color,position, and size at the same time.

Example 2.2.3

Example 2.2.4: We can make any object move - like rectangles.

Example 2.2.4

Exercise 2.2a: Use mousePressed() to draw as set of circles.

Exercise 2.2a

Exercise 2.2b: Use draw() to dynamically draw the function.

Exercise 2.2b

Exercise 2.2c: The following lines intersect at the rectangle and should follow the mouse coordinates.

Exercise 2.2c

Exercise 2.2d: The following lines intersect at the rectangle and should follow the mouse coordinates.

Exercise 2.2d

Exercise 2.2e: The ellipse should follow the mouse coordinates and show those coordinates.

Exercise 2.2e