System Variables
System variables are special variables that are created and updated automatically by p5.js for you, so you do not need to declare them using the let keyword, or assign values to them using the assignment (=) operator.
You’ve already been introduced to some system variables related to mouse coordinates:
But there are many other system variables you should be aware of:
-
- width – Width (in pixels) of canvas
- height – Height (in pixels) of canvas
- frameCount – Number of frames processed
- frameRate() – When called with no parameters returns the current fps
- mouseIsPressed – true or false: Is a mouse button pressed?
- mouseButton – Which button is pressed? LEFT, RIGHT, or CENTER
- key – Most recent key pressed (character) on the keyboard
- keyCode – Numeric code (ASCII value) for the key pressed on the keyboard
- keyIsPressed – true or false: Is a key pressed?
We will not use all of these just yet, but I want to make you aware of them so that you don’t try to create your own variables with the same names. Here’s a quick example to demonstrate the width, height, frameCount, and key system variables in action:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function setup() { createCanvas(400, 400) print('Canvas is ' + width + ' x ' + height + ' px') } function draw() { background(220) // Display the current frame number print(frameCount) // Get *remainder* of frameCount % 256 // This will always be in the range 0..255 fill(frameCount % 256) rectMode(CENTER) // Rectangle will always be in middle of // canvas if located at (width/2, height/2). rect(width/2, height/2, mouseX, mouseY) } function keyPressed() { print('You Pressed:', key) } |
Line 3 will print() that the “Canvas is 400 x 400 px” in the Console area. In the draw() function, line 10 will display the current frameCount (i.e., the number of times the draw() function has been called) since the program started running. For performance reasons, it is usually not a good idea to call print() inside the draw() function. Try commenting out line 10 so that you can see the output of the other print() commands more clearly.
Line 14 is very interesting and will take some explanation. The % symbol is another arithmetic operator called modulo. Modulo is related to division (and has the same level of precedence) but it only returns the remainder of a division. For example:
|
1 2 |
print(7 / 2) // 3.5 print(7 % 2) // 1 |
On the first line, the division (/) operator returns what you would expect from your calculator: 3.5. But you might be surprised that the second line does not return 0.5 but 1 instead. The way to think about this is like long division (remember grade 4?).
Back to line 14, by dividing the frameCount by 256 and getting the remainder, the result will always be a number within the range 0..255. Try a few examples on paper to convince yourself. Being able to keep a number within the range 0..255 is very useful when setting the fill() colour.
Line 19, uses width and height to ensure that the center of the rectangle is always at the middle of the canvas. This will work no matter what size the canvas is when created on line 2. Try changing the arguments on line 2 to see this in action.
Finally, on line 23, the key system variable is used to display the exact key the user pressed that caused the keyPressed() event handling function to be called. Notice the difference between the print() on line 3 and line 23. As mentioned before, there are two ways to join data together to display in the console. If you use a comma (,) between items, p5.js will add an extra space between them. Instead, if you use the plus (+) symbol, p5.js will join them together without automatically adding a space.
Random Numbers
So far all of our images and animation have been pretty predictable, and they always do the same thing every time you run them. Wouldn’t it be nice if we could add some randomness to our code? To allow for this, p5.js provides a function called random(). This function can be called with 0, 1, or 2 arguments:
| Example | Description |
| random() | Returns a random floating-point value including from 0.0 up to (but not including) 1.0 |
| random(5) | Returns a random floating-point value including from 0.0 up to (but not including) 5.0 |
| random(1,10) | Returns a random floating-point value including from 1.0 up to (but not including) 10.0 |
Here’s an example to demonstrate:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let randomNumber = 0 function setup() { randomNumber = random() print("Number in range [0.0..1.0): " + randomNumber) randomNumber = random(5) print("Number in range [0.0..5.0): " + randomNumber) // Note: the variable is not always needed print("Number in range [1.0..10.0): " + random(1,10)) } |
Notice that random() always returns a floating-point (decimal) number. Obviously, when dealing with pixels and RGB colour values it only makes sense to use integer (whole number) values. After all, you can’t have 1.5 pixels! Fortunately, most of the p5.js drawing and colouring functions work fine if you pass floating-point values as arguments, they automatically round any floating-point (decimal) values to integers (whole numbers) for you so there is no problem.
However, sometimes we may need to explicitly convert a floating-point value into an integer. To help with this, p5.js provides another function called int() that converts a floating-point argument to an integer. To do this it truncates (cuts-off) the decimal portion of the number, it does not round. For example, int(10.987) would return the integer value 10 (not 11).
Here’s the same code using int():
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let randomNumber = 0 function setup() { randomNumber = int(random()) print("Always 0, since int() truncates: " + randomNumber) randomNumber = int(random(5)) print("Number in range [0..4): " + randomNumber) // Note: the variable is not always needed print("Number in range [1..9): " + int(random(1,10))) } |
Let’s put this together into a visual example! In this code, I’ll use random() to draw random circles with random RGB and alpha values, random diameters, and random coordinates — whew!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
let x = 0 let y = 0 let diameter = 0 let red = 0 let green = 0 let blue = 0 let alpha = 0 function setup() { createCanvas(400, 400) background(255) } function draw() { // Pick random values between 0 and 255 red = random(255) green = random(255) blue = random(255) alpha = random(255) // Pick random value between 0 and 30 diameter = random(30) // Pick random value between 0 and 400 x = random(width) y = random(height) // Use our random values to draw a new random circle noStroke() fill(red, green, blue, alpha) ellipse(x, y, diameter, diameter) } |
As usual, we start by declaring our variables and giving them initial values (so that they are not undefined). The draw() function generates random values between 0.0 (inclusive) and 255.0 (exclusive) for RGB and alpha values, 0.0 (inclusive) and 30.0 (exclusive) for diameter, and center coordinates somewhere within the canvas area, 0.0 (inclusive) to 400.0 (exclusive).
You Try!
- In lesson 1-7, Q4 you created a moving object like a robot, car, or bird. Modify your code such that the object moves in a random direction each time the program is run.
- Modify Q1 such that whenever a key is pressed, your object changes to some random colour.
- Write a program that draws a backyard scene (sky, sun, grass, etc..). Then add code to draw a bug, including legs and antennae. Finally, make the bug jitter around the scene in a new random direction each time the draw() function is called.
- Modify Q3 to add 2 more bugs (they can be similar looking to the first one), that also jitter around in random directions.