Most p5 sketches start with the same basic structure:
function setup() {
}
function draw() {
}
As you can see, the code is organized into two main fuctions, setup() and draw(). The code inside setup() executes once when the sketch loads. Code placed inside draw() runs repeatedly in a loop after that.
Ok, now that we've covered the basic structure of a sketch the first thing we're going to want to do is create a canvas to draw to:
function setup() {
createCanvas(100, 100);
}
function draw() {
}
This code creates a canvas with width 100 and height 100. By default, it will be positioned in the upper left of the screen.
The syntax for createCanvas(x, y) requires 2 arguments:
w: width of the canvas in pixels (number)h: height of the canvas in pixels (number)
See the result below. It's pretty boring, but don't worry, things are going to get more exciting soon.
There are many simple shapes that we can draw using p5. Let's start with a rectangle:
function setup() {
createCanvas(100, 100);
}
function draw() {
rect(10, 10, 25, 25);
}
The syntax for rect(x, y, w, h) requires 4 arguments:
x: x coordinate for the rectangle in pixels (number)y: y coordinate for the rectangle in pixels (number)w: width of the rectangle in pixels (number)h: height of the rectangle in pixels (number)
By default, rectangles are positioned in relation to the upper left corner of the canvas. So the upper left corner of our rectangle will be 10 pixels down and right from the top left corner of the canvas. Width and height work the same way, so our rectangle will extend 25 pixels down and right from it's upper left corner. Here it is, below:
You probably noticed that the rectangle that we drew was pretty boring. Let's add some color to spice the whole thing up. We are going to do this in a few places:
function setup() {
createCanvas(100, 100);
}
function draw() {
background("lightyellow");
stroke("blue");
fill("orange");
rect(10, 10, 25, 25);
}
We added a few different things here: a background, a stroke, and a fill.
backgroundsets the color for our canvasstrokesets the outline color for our rectangle (and any other shapes we might draw)fillsets the inside color for our rectangle (and any other shapes we might draw)
There are multiple ways to specify colors, but for now we're just using named colors. Note, these need to be contained inside some quotation marks, like so: "color_name". Here's the result, below:
Ok, now we're going to turn this whole thing up a notch by making it interactive. The first thing we're going to do is make the canvas a little bigger:
function setup() {
createCanvas(300, 300);
}
function draw() {
background("yellow");
stroke("blue");
fill("orange");
rect(10, 10, 25, 25);
}
Next, we're going to introduce some variables. Variables are great for storing values for later use. p5 has some really useful built-in variables that track the position of our mouse: mouseX and mouseY.
Let's use mouseX and mouseY to dynamically set the x and y coordinates for the rectangle, like so:
function setup() {
createCanvas(300, 300);
}
function draw() {
background("lightyellow");
stroke("blue");
fill("orange");
rect(mouseX, mouseY, 25, 25);
}
Here it is below! Try moving your mouse around over the canvas. Note: the sketch will track your mouse position across the entire screen, so if your mouse is not above the canvas you likely will not see the rectangle.