setup and draw
Before we look at system variables, let's review
setup is called once when the page loads.
Anything that only needs to happen once should be done in
setup such as creating the canvas element or inizializing variables.
setup is done, draw will loop continuously (unless
noLoop is called) until the browser window is closed.
Every line inside of the
draw function will be called in order everytime it runs, by default at 60 FPS (frames-per-second).
A quick note on
For a variable to be used by both
draw, it must be declared outside of both functions, usually at the beginning of our program.
Read more on scope.
Static system variables
Some basic variables will stay the same throughout the lifetime of your sketch
height are static variables that are set to the width and height of the sketch, which is
100 x 100 by default or whatever is set in
Try changing the values in
createCanvas to see the canvas change sizes.
Whatever arguments are used for
createCanvas also become the values of
Those values can be used to draw shapes relative to the size of the canvas. Try changing the values in
createCanvas again and see the ellipse shape change as well.
The ellipse is drawn in the middle of the canvas and fills up the width of the canvas. The x position is calculated by dividing width in half, while the y position is calculated by dividing height in half. The size of the ellipse is the same as the width of the canvas.
Let's rewrite this example using variables to make it clear what we're doing.
Even though the variables are not necessary for the code to work, it makes it clear that we are defining the x position of the ellipse based on the width of the canvas, and likewise with y position and diameter of the circle.
This example uses rectangles to make a checker pattern.
I'm setting x and y to start and then changing them for the second rectangle. The width and height variables stay the same. I can redefine my x and y variables or width and height as many times as I need to.
height to draw a simple grid.
Dynamic system variables
Some system variables change over time.
mouseY change everytime you move your mouse. They represent the position of the mouse in the p5 canvas.
To capture those values over time, we need to use a draw loop to capture the movement of our mouse by running the program every frame.
In the previous example, the ellipse and line move differently but always share one point.
The line has two points, one is tethered to the bottom right corner of the canvas. The ellipse has a point for the center and then a size, so the whole shape moves with the mouse.
p5 also has
pmouseY values that keep track of where you mouse was last.
frameCount value is of frames frames the program has run, or how many times it has been drawn. It goes up by one for every frame. It's sort of like our earlier example where we incremented
x++ every frame.
Note that all of those variables work without us writing something like
var frameCount = 0; or definining the variables.
This is part of what p5 does for us, it creates functions like
ellipse and variables like
width which make it easier to interact with the environment and focus on our code and composition over techinical aspects of the browser and the Canvas API.