Technical Lessons
Documentation of p5.js functions used in this lesson. Bolded items are essential.
- mouseX, mouseY reference
- random() reference
- for() reference
- map() reference
- lerp() reference
- rectMode() reference
- rotate(), scale(), translate(), push(), pop() reference
Example programs showing the topics discussed in this lesson:
- Variables example
- Iteration example
- Nested (a.k.a. Embedded) Iteration example
- Rotation, Translation examples
Variables
- variables are declared, assigned, accessed, and re-assigned.
- variables (Reference example; Coding Train video (12m); Tutorial 1, Tutorial 2.)
- variables: simple demonstration sketch (one number to control many things at once)
One variable can be used to control many different kinds of things. In this example sketch, the mouseX variable is used to control the position and size of the circle in several different ways:
A subtle point. Globally-scoped variables are those which are declared outside the draw() and setup() functions, and which can therefore be modified anywhere in the program, and have values that persist across animation frames. (Example: click counter sketch)
Randomness
The random() function, documented here, produces random numbers within a specified range. For example:
- var x = random(100); // This generates a random number between 0 and 100, and assigns the variable x to have this value.
- var y = random(100, 200); // This generates a random number between 100 and 200, and assigns the variable y to have this value.
- More information is in this Coding Train video about random()
- Here’s a sketch that produces a random composition whenever the user clicks:
Iteration
- for loops (iteration): Simple example sketch; Reference; Tutorial; Coding Train video (14m)
- nested loops (embedded iteration): Example; Coding Train video (9m)
Precise positioning
Using coordinate transformation commands, it is possible to to rotate(), scale() and translate() graphic elements where you want them. Note: You’ll need to use push() and pop() to keep yourself sane!
- rectMode(): Reference; Golan demo video (2m). Changes a rectangle’s origin or registration point.
- transforms: Coding Train video 1 (22m); Coding Train video 2; Xin Xin video (7m)
- transforms + iteration: Xin Xin video (8m)
- Golan’s demo sketch, below:
Interpolation
- lerpColor(): Reference
- lerp(): Reference; Coding Train video (10m)
- map(): Reference; Example; Coding Train video (10m).
- map() and constrain(): Golan video (10m)