System Variables

setup and draw

Before we look at system variables, let's review setup and draw.

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.

After 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).

function setup() { createCanvas(400, 400); background(255); fill('plum'); rect(150, 150, 100, 100); // only gets drawn once } function draw() { // background(255); // remove comment fill(255); ellipse(frameCount, 200, 100); }

A quick note on scope

For a variable to be used by both setup and draw, it must be declared outside of both functions, usually at the beginning of our program.

var x = 0; // global variable function setup() { x = width / 2; // visible in setup } function draw() { ellipse(x, 50, 50); // visible in draw }

Read more on scope.

Static system variables

Some basic variables will stay the same throughout the lifetime of your sketch

width and 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 createCanvas.

Try changing the values in createCanvas to see the canvas change sizes.

function setup() { createCanvas(200, 200); background(220); }

Whatever arguments are used for createCanvas also become the values of width and height.

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.

function setup() { createCanvas(200, 200); background(220); ellipse(width / 2, height / 2, width); }

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.

function setup() { createCanvas(200, 200); background(220); var x = width / 2; var y = height / 2; var d = width; // diameter ellipse(x, y, d); }

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.

function setup() { createCanvas(200, 200); background(220); noStroke(); fill('plum'); var x = 0; var y = 0; var w = width / 2; // width var h = height / 2; // height rect(x, y, w, h); x = width / 2; y = height / 2; rect(x, y, w, h); }

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.

Let's use width and height to draw a simple grid.

function setup() { createCanvas(640, 360); background("white"); stroke("plum"); strokeWeight(2); // line down the middle of the canvas from top to bottom var x1 = width / 2; var y1 = 0; var x2 = width / 2; var y2 = height; line(x1, y1, x2, y2); // line across the middle of the canvas from left to right x1 = 0; y1 = height / 2; x2 = width; y2 = height / 2; line(x1, y1, x2, y2); }

Dynamic system variables

Some system variables change over time. mouseX and 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.

function draw() { background("white"); strokeWeight(2); fill("plum"); // draw line between the mouse position and origin point var x = mouseX; var y = mouseY; line(x, y, 0, 0); // draw circle at mouse position ellipse(x, y, 40); }

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 pmouseX and pmouseY values that keep track of where you mouse was last.

function draw() { background("white"); strokeWeight(2); fill("plum"); // draw ellipse at previous mouse position var x = pmouseX; var y = pmouseY; var s = 40; // size ellipse(x, y, 40); // draw line between current and previous mouse position line(mouseX, mouseY, pmouseX, pmouseY); // draw ellipse at current mouse position x = mouseX; y = mouseY; ellipse(x, y, s / 2); // half the size }

The 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.

function draw() { background(220); // using frameCount as the ellipse size var x = width / 2; var y = height / 2; var s = frameCount; // size ellipse(x, y, s); }

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.