beginners

Sixteen sessions of drawing, and two things have interrupted us more than anything else. Neither is about art. Both are about the gap between the code you write and the code p5.js already has.

This last session covers both, then looks back at the ground we have crossed.

Words p5.js has already taken

p5.js gives you hundreds of functions, and a lot of them are ordinary English words. hue, red, green, blue, alpha, saturation, brightness, text, line, key, push, pop, step, size, scale. Every one of those is already a function.

Name a variable after one of them and you have taken the name away from p5.js.

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 360, 100, 100);
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  let hue = 200;
  fill(hue, 80, 90);
  circle(300, 300, 200);
}

• The sketch still runs. The circle appears exactly as intended, which is why this one is so easy to miss.
• The message lands in the Console under the editor: Function "hue" on line 9 is being redeclared and conflicts with a p5.js function, with a link to the reference for the real hue().
• Take the line number with a pinch of salt. Here it says line 9 while let hue = 200; is sitting on line 10. Search for the name rather than counting lines.
• The fix is always the same. Rename your variable. hueValue, myHue, h, anything not already spoken for.
• This bites hardest in colour sketches, because the colour words are the obvious names and p5.js has taken nearly all of them.
• Two of this series’ own sketches hit it. Session 12 wanted hue for a colour and Session 13 wanted step for an angle. Both were renamed.

The habit worth forming is small: read the Console even when the sketch looks fine. Nothing was visibly wrong with that circle, and p5.js was still telling us we had taken one of its names.

Telling which p5.js you are running

The other interruption is older code. p5.js 2.0 renamed and removed things, and the internet is full of tutorials written before it.

You will meet this most often with curveVertex(), which drew a curve through a set of points. Here is a sketch of exactly the kind you will find all over the web. It was correct for years.

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
  fill(250, 250, 50);
}

function draw() {
  background(0);
  beginShape();
  curveVertex(150, 450);
  curveVertex(150, 450);
  curveVertex(300, 150);
  curveVertex(450, 450);
  curveVertex(450, 450);
  endShape();
}

• Nothing is drawn, and the console says ReferenceError: curveVertex is not defined. The sketch is not wrong, it is old.
• curveVertex() became splineVertex() in p5.js 2.0. Change those five calls and the curve appears.
• The repeated first and last points are obsolete too. splineVertex() runs through every point you give it, so three calls do what five used to.
• That is the difference between the two. A warning lets the sketch run anyway, as the hue one did. An error stops it dead and leaves the canvas empty.
• An error also marks the offending line in the editor, and p5.js adds a plain English explanation underneath the red block. The warning did neither.

So how do you know which p5.js you are working in, and whether a tutorial you have found is older than it?

• The version is written on the editor toolbar, top right, next to the settings cog.
• This series lived through the change. Look at the screenshots in Sessions 1 to 10 and the toolbar reads p5.js 1.11.13. From Session 11 onwards it reads 2.3.2, because the editor moved to version 2 partway through.
• That is exactly when curveVertex() stopped working for us, in the middle of writing Session 11. Nothing in Sessions 1 to 10 broke, but that was luck rather than design.
• A ReferenceError naming a function you copied from a tutorial almost always means that function was renamed or removed, not that you typed it wrong.
• The current reference at p5js.org is the thing to check. If a function is not there, it does not exist any more.
• The old reference is still online at v1.p5js.org, which is useful for working out what a piece of old code was trying to do.

Sixteen sessions, looking back

• The canvas and shapes, Sessions 1 to 3. The editor, setup() and draw(), coordinates, and the built-in shapes.
• Repetition, Sessions 4 to 6. for loops, while loops, grids, and conditions to vary what lands in them.
• Moving the origin, Sessions 7 to 9. translate(), rotate(), push() and pop(), and your own functions.
• Chance, Session 10. random(), floor(), and switch, the point where sketches stopped being predictable.
• Your own shapes, Session 11. beginShape(), vertex() and splineVertex().
• Colour, Sessions 12 and 13. RGB, HSB, opacity, hex, and palettes held in arrays.
• Getting it out, Session 14. saveCanvas() on a key press, and what pixel density does to the file you get.
• Motion, Session 15. Dropping noLoop(), clearing the canvas, and five balls bouncing off the walls.
• Interaction, Session 16. mouseX, mouseY and mousePressed().

Nothing in that list is advanced. It is the whole vocabulary of an enormous amount of generative art, and every piece of it fits in one page of code.

What comes next

A second series is coming, on harder ground: Perlin noise, flow fields, recursion, and the algorithms that make generative work look organic rather than assembled.

Until then, the most useful thing you can do is stop following. Take the Session 14 grid, change the palette, change the shapes, break it, and see what falls out. That is the whole discipline.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default.

---

That is the series. Thank you for building along with it.

In Session 14 the sketch listened to you once. You pressed a key, it saved a file, and that was the end of the conversation. This session leaves the line open: the sketch watches the mouse on every frame and answers immediately.

mouseX and mouseY

mouseX and mouseY hold the pointer’s position on the canvas, and p5.js refreshes them before every pass of draw(). Read them, and whatever you draw follows the mouse.

A ring of bars radiating from the centre. Move left and right to change how many there are, up and down to change how long they are.

The five colours are Vibrant Color Fiesta, another set from the trending palettes on Coolors.

let palette;

function setup() {
  createCanvas(600, 600);
  frameRate(30);
  angleMode(DEGREES);
  noStroke();
  palette = ['#FFBE0B', '#FB5607', '#FF006E', '#8338EC', '#3A86FF'];
}

function draw() {
  background(0);
  push();
  translate(300, 300);
  let count = floor(mouseX / 20) + 3;
  let barLength = mouseY / 3 + 80;
  let angle = 360 / count;
  for (let i = 0; i < count; i++) {
    rotate(angle);
    fill(palette[i % palette.length]);
    rect(0, -10, barLength, 20);
  }
  pop();
  fill(255);
  circle(mouseX, mouseY, 12);
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    saveGif('mouse-bars', 20);
  }
}

• mouseX and mouseY are just numbers, updated for you before every frame. Nothing else about them is special.
• count turns mouseX into a number of bars, three at the far left rising to thirty-three at the far right.
• barLength turns mouseY into a length, 80 pixels at the top of the canvas and 280 at the bottom.
• palette[i % palette.length] cycles the five colours, the trick from Session 13, so bar six starts the palette again.
• The white dot is drawn at mouseX, mouseY after pop(), so the translate() does not drag it away from the pointer.

The dot is there because the pointer itself is not part of the canvas. Drawing a circle at mouseX, mouseY is the simplest possible proof that the two numbers really are where your hand is.

mousePressed()

Reading the mouse is one thing. Reacting to a click is another, and it needs a function p5.js calls for you, the same arrangement as keyPressed().

Every click drops a ring at that point, and every ring grows until it leaves the canvas.

let palette;
let clickX = [];
let clickY = [];
let ringSize = [];
let ringColour = [];
let clicks = 0;

function setup() {
  createCanvas(600, 600);
  frameRate(30);
  noFill();
  strokeWeight(6);
  palette = ['#FFBE0B', '#FB5607', '#FF006E', '#8338EC', '#3A86FF'];
}

function draw() {
  background(0);
  for (let i = 0; i < clicks; i++) {
    ringSize[i] = ringSize[i] + 4;
    stroke(ringColour[i]);
    circle(clickX[i], clickY[i], ringSize[i]);
  }
  push();
  noStroke();
  fill(255);
  circle(mouseX, mouseY, 12);
  pop();
}

function mousePressed() {
  clickX[clicks] = mouseX;
  clickY[clicks] = mouseY;
  ringSize[clicks] = 10;
  ringColour[clicks] = palette[floor(random(palette.length))];
  clicks = clicks + 1;
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    saveGif('click-rings', 20);
  }
}

• mousePressed() is called for you, once, each time the button goes down. You declare it and never call it, exactly like keyPressed().
• Each click records four things: where it happened, a starting size of 10, a colour picked at random from the palette, and one more on the clicks count.
• draw() adds four pixels to every ring on every frame, so the old ones keep growing while the new ones appear behind them.
• noFill() and stroke() are what make these outlines rather than solid discs.
• The white dot needs a fill and no stroke, the opposite of the rings, so push() and pop() wrap it and put the settings back.

One naming trap worth knowing about. JavaScript arrays have a push() method of their own, which would be the usual way to add to lists like these. This sketch uses a counter and direct indexing instead, because push() already means something else entirely in p5.js, saving the drawing state, and two unrelated things sharing a name is a trap rather than a lesson.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default.

---

Next session is the last of this series, and it looks back over all seventeen.

Every sketch in this series had ended with noLoop() in setup(). It draws once and stops. Take it out and draw() repeats instead, over and over, for as long as the sketch is open.

On its own that changes nothing you can see. The same circle drawn in the same place thirty times a second looks exactly like a circle drawn once. Movement only appears when something is different between one pass and the next, and the simplest thing to make different is a position.

draw() runs over and over

A circle, a position, and two pixels added to that position on every pass. The canvas is painted black once, in setup(), and never touched again.

let x = 40;
let y = 300;
let speed = 2;

function setup() {
  createCanvas(600, 600);
  frameRate(30);
  noStroke();
  background(0);
  fill('#FB8B24');
}

function draw() {
  if (x < width - 40) {
    x = x + speed;
  }
  circle(x, y, 80);
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    saveGif('ball-trail', 10);
  }
}

• noLoop() is gone, so draw() repeats instead of running once.
• frameRate(30) sets how often it repeats, thirty times a second, smooth but still slow enough to follow.
• x = x + speed is the whole of the movement. Each pass adds 2 to the position, then the circle is drawn at the new spot.
• background(0) is in setup(), so the black is painted once and never repainted. Every circle that gets drawn stays on the canvas.
• The if stops the ball when its edge reaches the right wall. width is the canvas width, and 40 is half the ball.
• saveGif('ball-trail', 10) records the sketch itself. Session 14 saved a still with saveCanvas(), this saves the movement.
• The trigger is the same keyPressed() you already used for saving. Press g and p5.js captures the next ten seconds as a GIF.
• Take those four lines out once you have the file, or it records again every time you press play.

That bar is not a ball that moved. It is around 260 separate circles, each drawn two pixels further right than the one before, all still sitting there. It is the clearest picture you will get of what draw() is actually doing.

Clearing the canvas each frame

Move one line and the whole thing changes. background(0) comes out of setup() and goes to the top of draw(), so the canvas is wiped before every circle.

let x = 40;
let y = 300;
let speed = 2;

function setup() {
  createCanvas(600, 600);
  frameRate(30);
  noStroke();
  fill('#FB8B24');
}

function draw() {
  background(0);
  if (x < width - 40) {
    x = x + speed;
  }
  circle(x, y, 80);
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    saveGif('ball-clear', 10);
  }
}

• The only difference between this and the last script is which function background(0) sits in. In setup() it paints once. In draw() it repaints before every circle.
• Nothing is moving even now. Each frame is a fresh circle in a slightly different place, thirty times a second, and your eye does the rest.
• The ball still stops at the wall. With the trail gone there is nothing left on the canvas but a ball sitting against the edge, waiting.

Which raises the obvious question. What if it did not stop?

Five balls, bouncing

One ball needs an x, a y, and a speed on each axis. Five balls need five of each, so all four go into arrays, the same way the palette did in Session 13.

Five fiery colours, one per ball. One starts in the middle of the canvas, the other four in the corners, and every one of them is handed a random direction to set off in.

let palette;
let x = [];
let y = [];
let xSpeed = [];
let ySpeed = [];
let ballSize = 80;

function setup() {
  createCanvas(600, 600);
  frameRate(30);
  noStroke();
  palette = ['#5F0F40', '#9A031E', '#FB8B24', '#E36414', '#0F4C5C'];
  x = [300, 40, 560, 40, 560];
  y = [300, 40, 40, 560, 560];
  for (let i = 0; i < 5; i++) { xSpeed[i] = randomSpeed(); ySpeed[i] = randomSpeed(); }
}

function randomSpeed() {
  let s = random(1.5, 3.5);
  if (random(1) < 0.5) { s = -s; }
  return s;
}

function draw() {
  background(0);
  let r = ballSize / 2;
  for (let i = 0; i < 5; i++) {
    x[i] = x[i] + xSpeed[i];
    y[i] = y[i] + ySpeed[i];
    if (x[i] < r) { x[i] = r; xSpeed[i] = random(1.5, 3.5); ySpeed[i] = randomSpeed(); }
    if (x[i] > width - r) { x[i] = width - r; xSpeed[i] = -random(1.5, 3.5); ySpeed[i] = randomSpeed(); }
    if (y[i] < r) { y[i] = r; ySpeed[i] = random(1.5, 3.5); xSpeed[i] = randomSpeed(); }
    if (y[i] > height - r) { y[i] = height - r; ySpeed[i] = -random(1.5, 3.5); xSpeed[i] = randomSpeed(); }
    fill(palette[i]);
    circle(x[i], y[i], ballSize);
  }
}

function keyPressed() {
  if (key === 'g' || key === 'G') {
    saveGif('bouncing-balls', 10);
  }
}

• x[i] and y[i] hold ball number i’s position.
• xSpeed[i] and ySpeed[i] hold how far that ball moves on each axis per frame. Five balls, four arrays, one loop.
• r is half a ball’s width. Positions are measured from the centre of a circle, so a ball has reached the left wall when its centre is r away from it, not 0.
• Each bounce puts the ball back exactly on the wall first, so it cannot get stuck outside the canvas.
• Then it hands out new speeds, one back into the canvas and one along the wall.
• randomSpeed() is a function of our own, the idea from Session 9. It picks a number between 1.5 and 3.5, then makes it negative half the time.

A real bounce sends a ball away at the mirror of the angle it arrived at. This one does not. It picks a fresh random direction pointing back into the canvas, which is why the five never settle into a rhythm and why the whole thing reads more like scattering than like billiards. That is a choice rather than a mistake, and it is worth knowing which one you are looking at.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default.

---

Next session, we hand the controls over to the mouse: sketches that answer back to where the pointer is and where it clicks.

Thirteen sessions in, everything we have drawn has lived and died inside the browser. This one gets a sketch out as a file you can keep, and the sketch we save uses nearly everything the series has covered.

A sketch made of everything so far

A grid, a palette, two triangles per cell, and chance deciding every colour. The palette is Cherry Blossom Bloom, ten colours this time instead of nine.

let palette;
function setup() {
  createCanvas(800, 800);
  noLoop();
  noStroke();
  palette = [
    '#590D22', '#800F2F', '#A4133C', '#C9184A', '#FF4D6D',
    '#FF758F', '#FF8FA3', '#FFB3C1', '#FFCCD5', '#FFF0F3'
  ];
}
function draw() {
  background(0);
  let cells = 14;
  let cellSize = 50;
  for (let row = 0; row < cells; row++) {
    for (let col = 0; col < cells; col++) {
      let x = 50 + col * cellSize;
      let y = 50 + row * cellSize;
      fill(palette[floor(random(palette.length))]);
      triangle(x, y, x + cellSize, y, x, y + cellSize);
      fill(palette[floor(random(palette.length))]);
      triangle(x + cellSize, y, x + cellSize, y + cellSize, x, y + cellSize);
    }
  }
}
function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('cherry-blossom-grid', 'png');
  }
}

• cells is 14 and cellSize is 50, so the grid covers 700 by 700.
• Starting x and y at 50 leaves an even black margin on all four sides of the 800 canvas.
• Each cell is two triangles split corner to corner, and each triangle draws its own colour from the palette, so a cell is rarely one flat shape.
• Nothing in draw() is new. Nested loops from Session 4, random() and floor() from Session 10, triangle() from Session 3, and the palette from Session 13.

Saving it with a key press

The last four lines are the whole point of the session.

• keyPressed() is a function p5.js calls for you, once, each time a key goes down. You never call it yourself, you only declare it.
• key holds the character that was typed. Checking 's' and 'S' means it saves whether or not shift is held.
• saveCanvas('cherry-blossom-grid', 'png') writes the canvas out under that name. 'jpg' and 'webp' work too.
• Click the canvas once before pressing the key. Until the sketch has focus, the key press goes to the editor instead and nothing happens.

Depending on your browser, the file either lands in your downloads folder straight away or opens a save dialogue.

What you actually get

The canvas is 800 by 800. The file is 1600 by 1600.

• p5.js matches the pixel density of your display by default, and on a high density screen that doubles every dimension of the saved file.
• pixelDensity(1) in setup() switches that off and gives you a file exactly the size of your canvas.
• Calling pixelDensity() with no value tells you what density you are currently on.

This matters the moment you want to print something. Run it, press s, and check the dimensions of what comes out before you plan around them.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default.

---

Next session, we make a sketch move: animation, frame by frame.

Session 12 covered RGB and HSB, two ways of describing a colour to p5.js. There is a third, and it is the one you will meet most often outside the editor.

Hex: one more way to write a colour

A hex code looks like #0077B6. The hash is followed by six characters, read as three pairs: 00 for red, 77 for green, B6 for blue. Each pair is one channel written in base 16, which counts 0 to 9 then A to F, so FF is 255 and 00 is 0. It is the same RGB colour, written shorter.

p5.js takes a hex code as a string, quotes included, anywhere it takes a colour. Here is one blue three times over, written three different ways.

function setup() {
  createCanvas(600, 300);
  noLoop();
  noStroke();
}
function draw() {
  background(0);

  // RGB: red, green, blue, each 0 to 255
  fill(0, 119, 182);
  circle(150, 150, 140);

  // Hex: the same colour as a string, three pairs after the hash
  fill('#0077B6');
  circle(300, 150, 140);

  // HSB: hue, saturation, brightness
  colorMode(HSB, 360, 100, 100);
  fill(200.8, 100, 71.4);
  circle(450, 150, 140);
}

• fill(0, 119, 182) and fill('#0077B6') are the same colour. 77 in hex is 119, B6 is 182.
• The quotes matter. '#0077B6' is a string, and p5.js reads a string as a colour. Without them it is not valid code.
• The third circle switches over with colorMode(HSB, 360, 100, 100), then names that same blue as hue 200.8, saturation 100, brightness 71.4.
• The decimals are not fussiness. Converting a colour into HSB rarely lands on whole numbers, and rounding them would leave the third circle a shade off the other two.

Hex is worth knowing because it is what the rest of the world uses. Design tools export it, CSS uses it, and every palette site hands you a row of hex codes ready to paste.

Gathering colours into a palette

Generative art rarely picks colours one at a time. It works from a chosen set, and holding that set in an array means you write the codes once and refer to them by position afterwards.

The nine below are Ocean Blue Serenity, taken from the trending palettes on Coolors, which is where I go when I want a set of colours that already agree with each other.

One script does both halves of the job. setup() creates the palette, draw() uses it, one swatch per colour.

let palette;
function setup() {
  createCanvas(650, 350);
  noLoop();
  noStroke();
  palette = [
    '#03045E', '#023E8A', '#0077B6', '#0096C7', '#00B4D8',
    '#48CAE4', '#90E0EF', '#ADE8F4', '#CAF0F8'
  ];
}
function draw() {
  background(0);
  for (let i = 0; i < palette.length; i++) {
    fill(palette[i]);
    rect((i * 70) +10, 50, 70, 250);
  }
}

• let palette; sits outside setup(), so every function in the sketch can see it.
• Filling it inside setup() means it is built once, when the sketch starts, not on every frame.
• Square brackets make an array. The nine hex codes go in as strings, separated by commas.
• palette[0] is the first colour and palette[8] the last, because arrays count from 0.
• palette[i] in the loop is the using half. Swatch one takes colour one, swatch two takes colour two, straight through to the ninth.
• palette.length is 9, so the loop covers the whole palette without you counting anything.

A circle divided among the palette

A palette of nine and a circle of 360 degrees fit together neatly: nine wedges of 40 degrees each, one colour per wedge.

let palette;
function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  noStroke();
  palette = [
    '#03045E', '#023E8A', '#0077B6', '#0096C7', '#00B4D8',
    '#48CAE4', '#90E0EF', '#ADE8F4', '#CAF0F8'
  ];
}
function draw() {
  background(0);
  let wedgeAngle = 360 / palette.length;
  for (let i = 0; i < palette.length; i++) {
    fill(palette[i]);
    arc(300, 300, 400, 400, i * wedgeAngle, (i + 1) * wedgeAngle, PIE);
  }
}

• arc(x, y, w, h, start, stop) draws a slice of an ellipse, set by the two angles.
• PIE closes that slice back to the centre, which is what makes a wedge rather than a curved line.
• angleMode(DEGREES), from Session 7, lets the angles be written as 0 to 360 instead of radians.
• wedgeAngle is 360 / palette.length, so the wedges divide the circle evenly whatever size the palette is. Nine colours give 40 degrees each.
• Wedge i runs from i * wedgeAngle to (i + 1) * wedgeAngle, so each one starts exactly where the last finished.

Nine colours, nine wedges, the whole palette visible at once. Change one hex code and one slice of the circle changes with it.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default.

---

Next session, we get a sketch out of the browser: saving your work as an image file.

In Session 11 we built our own shapes with vertex() and splineVertex(). This session leaves shape aside and looks at colour itself.

RGB, a recap

Every colour we’ve used so far has been RGB: red, green, and blue, each from 0 to 255. Mixing the three gives you any colour on screen, but picking a specific hue this way takes some guessing, there’s no single number that means “orange.”

HSB: hue, saturation, brightness

HSB describes colour differently: hue is the colour itself, one number around a wheel from 0 to 360. Saturation is how vivid it is, 0 is grey, 100 is fully saturated. Brightness is how light or dark it is. colorMode(HSB) switches p5.js over to reading colours this way.

Let’s put twelve circles in a row and give each one a hue a little further around the wheel than the last.

function setup() {
  createCanvas(650, 200);
  colorMode(HSB, 360, 100, 100);
  noLoop();
  noStroke();
}
function draw() {
  background(0, 0, 0);
  for (let i = 0; i < 12; i++) {
    let hueValue = i * 30;
    fill(hueValue, 80, 90);
    circle(50 + i * 50, 100, 40);
  }
}

• colorMode(HSB, 360, 100, 100) sets the scale for each value: hue up to 360, saturation and brightness up to 100.
• hueValue climbs by 30 on every pass of the loop, so twelve circles cover the whole wheel.
• Saturation and brightness stay fixed at 80 and 90, so nothing changes from circle to circle except the colour itself.

This is why HSB suits generative art so well: cycling through colour is just counting, rotating a single number around the wheel, instead of juggling three RGB values at once.

Opacity: the alpha channel

Both RGB and HSB accept a fourth number in fill(): alpha, or opacity. 0 is fully invisible, the maximum (255 in RGB, 100 in HSB) is fully opaque.

Two overlapping circles, neither of them solid, show what that actually does.

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
}
function draw() {
  background(0);
  fill(200, 50, 50, 150);
  circle(240, 300, 300);
  fill(50, 100, 200, 150);
  circle(360, 300, 300);
}

• The fourth number in fill() is the alpha. Both circles use 150 out of 255, so both are translucent rather than solid.
• Where the two circles overlap, the red and the blue blend into a third colour.
• The black background shows faintly through both, because neither one covers it completely.

Alpha works exactly the same way in colorMode(HSB), just add it as the fourth value there too.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default.

---

Next session, we take colour further: building a reusable palette, stored in an array, instead of picking values one at a time.

In Session 10 we let random() decide where, what colour, and what shape to draw. This session steps back to something more basic: shapes p5.js doesn’t already have a name for.

Building a shape from points

rect(), ellipse(), and triangle() cover a lot of ground, but not everything. Let’s build a shape p5.js has no built-in name for, one point at a time.

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
  fill(250, 250, 50);
}
function draw() {
  background(0);
  beginShape();
  vertex(300, 90);
  vertex(360, 240);
  vertex(510, 240);
  vertex(390, 330);
  vertex(435, 480);
  vertex(300, 390);
  vertex(165, 480);
  vertex(210, 330);
  vertex(90, 240);
  vertex(240, 240);
  endShape(CLOSE);
}

• beginShape() opens the shape and starts collecting points. Nothing appears on the canvas yet.
• vertex(x, y) adds one corner. They connect in the order you call them, so the order is the drawing.
• endShape(CLOSE) finishes the shape and joins the last point back to the first.

Ten points, and a star comes out. Move any one of them and the star becomes something else entirely, which is the appeal of building shapes this way.

splineVertex(): the same points, a curved line

Same ten points, same star, but this time the edges bend instead of running straight.

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
  fill(250, 250, 50);
}
function draw() {
  background(0);
  beginShape();
  splineVertex(300, 90);
  splineVertex(360, 240);
  splineVertex(510, 240);
  splineVertex(390, 330);
  splineVertex(435, 480);
  splineVertex(300, 390);
  splineVertex(165, 480);
  splineVertex(210, 330);
  splineVertex(90, 240);
  splineVertex(240, 240);
  endShape(CLOSE);
}

• splineVertex(x, y) replaces vertex(x, y), one call per point as before, but the line between the points curves through them instead of running straight.
• The curve passes through every point you give it, so the ten points stay exactly where they were.
• endShape(CLOSE) still closes the shape, this time joining the last point back to the first with a curve.

The star softens into something closer to a flower. Nothing changed but the word vertex.

One warning if you go looking for more on this. Before p5.js 2.0 the function was called curveVertex(), and it worked differently: the first and last points had to be repeated, because those calls only steered the curve and were never drawn. The same star looked like this:

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
  fill(250, 250, 50);
}
function draw() {
  background(0);
  beginShape();
  curveVertex(300, 90);
  curveVertex(300, 90);
  curveVertex(360, 240);
  curveVertex(510, 240);
  curveVertex(390, 330);
  curveVertex(435, 480);
  curveVertex(300, 390);
  curveVertex(165, 480);
  curveVertex(210, 330);
  curveVertex(90, 240);
  curveVertex(240, 240);
  curveVertex(300, 90);
  curveVertex(300, 90);
  endShape(CLOSE);
}

Run that in the current editor and you get ReferenceError: curveVertex is not defined. Worth knowing, because a lot of the p5.js writing online still uses the old name.

The scripts in this session were written for p5.js 2.3.2, the version the web editor runs by default. If you are following an older tutorial, some function names will differ. The one that matters here is flagged above.

---

Next session, we leave shapes behind for colour itself: RGB, HSB, and how to make a sketch shift smoothly through the spectrum.

In Session 9 we used a function to place flowers exactly where we wanted, corner by corner. Now let’s hand that decision over to chance.

random()

random(min, max) returns a decimal number somewhere between the two.

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  let x = random(100, 500);
  let y = random(100, 500);
  drawFlower(x, y);
}

function drawFlower(x, y) {
  push();
  translate(x, y);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();
}

Every time this sketch runs, the flower lands somewhere new. drawFlower() doesn’t care where its numbers come from, fixed or random, it just uses whatever it’s given.

A random number of flowers, each with its own colour

Random position was just the start. Let’s bring random() into colour and count too.

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  let count = floor(random(4, 8));
  for (let i = 0; i < count; i++) {
    let x = random(80, 520);
    let y = random(80, 520);
    let r = int(random(255));
    let g = int(random(255));
    let b = int(random(255));
    drawFlower(x, y, r, g, b);
  }
}

function drawFlower(x, y, r, g, b) {
  push();
  translate(x, y);
  for (let i = 0; i < 24; i++) {
    rotate(20);
    fill(r, g, b);
    ellipse(60, 0, 75, 15);
  }
  fill(255, 0, 0);
  circle(0, 0, 35);
  pop();
}

• count decides how many flowers to draw this run, 4 to 7.
• x and y place each one at random, same as before.
• r, g, and b are three random numbers between 0 and 255, one flower’s own colour.
• int() rounds each down to a whole number, since colour values only work as whole numbers.

switch: mapping a number to a choice

Randomness isn’t just useful for position and colour, it can decide what to draw too. This time each cell gets two independent rolls: one switch for colour, one for shape.

function setup() {
  createCanvas(600, 600);
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  let cols = 6;
  let cellSize = width / cols;

  for (let row = 0; row < cols; row++) {
    for (let col = 0; col < cols; col++) {
      let x = col * cellSize;
      let y = row * cellSize;
      let half = cellSize / 2;

      let colourChoice = floor(random(3));
      switch (colourChoice) {
        case 0:
          fill(187, 20, 20);
          break;
        case 1:
          fill(255, 163, 34);
          break;
        case 2:
          fill(0, 0, 178);
          break;
      }

      let shapeChoice = floor(random(8));
      switch (shapeChoice) {
        case 0:
          rect(x, y, cellSize, half);           // top half
          break;
        case 1:
          rect(x, y + half, cellSize, half);    // bottom half
          break;
        case 2:
          rect(x, y, half, cellSize);           // left half
          break;
        case 3:
          rect(x + half, y, half, cellSize);    // right half
          break;
        case 4:
          triangle(x, y, x + cellSize, y, x, y + cellSize);               // top-left corner
          break;
        case 5:
          triangle(x, y, x + cellSize, y, x + cellSize, y + cellSize);    // top-right corner
          break;
        case 6:
          triangle(x, y, x, y + cellSize, x + cellSize, y + cellSize);    // bottom-left corner
          break;
        case 7:
          triangle(x + cellSize, y, x + cellSize, y + cellSize, x, y + cellSize); // bottom-right corner
          break;
      }
    }
  }
}

• colourChoice picks one of three fixed colours, red, orange, or blue, before anything is drawn.
• shapeChoice picks one of eight shapes: a half-rectangle (top, bottom, left, or right) or a triangle filling one corner (top-left, top-right, bottom-left, or bottom-right).
• half is just cellSize / 2, used to size and position the rectangle halves.

Colour and shape are chosen independently, so any of the three colours can land on any of the eight shapes. Run it again and the grid looks completely different: same three colours, same eight shapes, but a different roll for every cell.

---

In Session 11 we’ll look at building shapes from scratch with our own points, instead of relying on the built-in ones.

Last session ended with four nearly identical blocks of code, one per flower, differing only in two numbers. Functions are how we stop writing that twelve times over.

Naming a block of code

A function is a block of code with a name. You write it once, then call that name whenever you want it to run.

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  drawFlower();
}

function drawFlower() {
  push();
  translate(300, 300);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();
}

drawFlower() is the whole push()/pop() block from last session, just given a name. draw() doesn’t need to know what’s inside it, it just calls drawFlower() and trusts it to handle the rest.

Parameters

Right now drawFlower() always draws in the same spot, (300, 300), because that’s hardcoded inside it. Parameters let us pass a value in each time we call the function, so it can behave differently on demand.

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  noStroke();
}

function draw() {
  background(0);
  drawFlower(150, 150);
  drawFlower(450, 150);
  drawFlower(150, 450);
  drawFlower(450, 450);
}

function drawFlower(x, y) {
  push();
  translate(x, y);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();
}

Same four-corner result as last session, but now it’s one function and four short calls instead of four copies of the same dozen lines. If we ever want to change how the flower looks, petal colour, count, size, we change it in one place and every call updates.

---

In Session 10 we let random() decide where, and how many times, drawFlower() gets called.

Last session’s flower lived on its own in the centre of the canvas. This time we want four of them, one in each corner. That’s where translate() and rotate() start to show their real behaviour: every change to the canvas carries over into everything drawn after it.

Translating from corner to corner

We want four flowers, one in each corner of the square: 150, 150, then 450, 150, then 450, 450, then 150, 450. The simplest option is to repeat last session’s script four times, changing only the translate() coordinates. Let’s try that and see what actually happens.

function setup() {
  createCanvas(1200, 1200);
  angleMode(DEGREES);
  noLoop();
  noStroke();
}

function draw() {
  background(220);
  fill(0);
  rect(0, 0, 600, 600);

  translate(150, 150);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);

  translate(450, 150);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);

  translate(450, 450);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);

  translate(150, 450);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
}

Only the first flower lands where intended, at 150, 150. Each translate() after it moves from wherever the origin already sits, not from the canvas corner. The second call adds 450, 150 onto the first flower’s position and lands at 600, 300; the third and fourth compound further still, and the last flower ends up almost off the canvas. Every translate and rotate call carries the ones before it.

push() and pop()

push() saves the current drawing state, position, rotation, fill, stroke, like a bookmark. pop() returns to that bookmark. Anything between the two, any translate() or rotate(), is undone the moment pop() runs.

function setup() {
  createCanvas(1200, 1200);
  angleMode(DEGREES);
  noLoop();
  noStroke();
}

function draw() {
  background(220);
  fill(0);
  rect(0, 0, 600, 600);

  push();
  translate(150, 150);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();

  push();
  translate(450, 150);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();

  push();
  translate(450, 450);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();

  push();
  translate(150, 450);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(60, 0, 90, 35);
  }
  fill(255, 0, 0);
  circle(0, 0, 25);
  pop();
}

Each push() / pop() pair works in its own bubble. Whatever happens to the canvas inside it gets discarded the moment pop() runs, so the next block starts fresh from the canvas’s real origin. That’s why all four flowers land exactly on their corners this time.

It works, but look at what we just did: the exact same dozen lines, copied four times, with only the translate coordinates changed.

---

In Session 9 we fix that: functions let us name this block of code once and call it as often as we like.

Grids gave us control over position. This session is about control over orientation: moving where you draw from, then turning what you draw.

Moving the origin with translate()

let cx;
let cy;

function setup() {
  createCanvas(600, 600);
  noLoop();
  stroke(255, 255, 255);

  cx = width / 2;
  cy = height / 2;
}

function draw() {
  background(0);
  translate(cx, cy);
  ellipse(0, 0, 150, 150);
}

• cx and cy store the centre point of the canvas, calculated once in setup() so we don’t repeat width / 2 and height / 2 every time we need them.
• translate(cx, cy) moves the origin there, so ellipse(0, 0, 150, 150) lands dead centre instead of in the top-left corner.

Rotating around the origin

let cx;
let cy;

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  stroke(255, 255, 255);
  cx = width / 2;
  cy = height / 2;
}

function draw() {
  background(0);
  translate(cx, cy);
  circle(0, 0, 15);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(255, 255, 255);
    rect(100, 0, 60, 60);
    fill(255, 0, 0);
    circle(100, 0, 15);
  }
}

• angleMode(DEGREES) tells p5.js to read angles in degrees rather than radians.
• rotate(45) turns the canvas a little further each time round, eight times in total, adding up to a full 360-degree turn.
• Each square is drawn at the same offset point, (100, 0), but lands somewhere new around the centre because the canvas has already been rotated by a different amount.
• The small red circle marks that anchor point on each square.
• The white circle at (0, 0) is just a reference dot showing where the origin sits after translate().

We’ve already got everything we need: a centre point, a loop, and a rotation. From here it’s just a matter of swapping the shapes for something that reads as petals instead of squares.

Building the flower

let cx;
let cy;

function setup() {
  createCanvas(600, 600);
  angleMode(DEGREES);
  noLoop();
  noStroke();
  cx = width / 2;
  cy = height / 2;
}

function draw() {
  background(0);
  translate(cx, cy);
  for (let i = 0; i < 8; i++) {
    rotate(45);
    fill(0, 0, 255);
    ellipse(130, 0, 200, 75);
  }
  fill(255, 0, 0);
  circle(0, 0, 60);
}

Same loop and rotation as before, but the squares are gone. Each turn of the loop draws a wide, flattened blue ellipse offset from the centre, which reads as a petal once there are eight of them overlapping around a point. The red circle goes last, sitting on top in the middle as the flower’s core.

---

In Session 8 we look at push() and pop(): saving and restoring the canvas position.

In Session 4 we built a grid where every cell looked exactly the same. That uniformity is useful, but it is also a little rigid. In this session we use conditions to make choices, so different cells can look different depending on a rule we define.

What an if statement does

Think about a traffic light. It does not show all three colours at once. It looks at the current state and picks one. An if statement works the same way: it checks whether something is true, and only runs its code if it is.

if (i % 2 === 0) {
  fill(200, 50, 50);
}

% is the remainder operator. i % 2 gives you the remainder when i is divided by 2. When i is 0, 2, or 4 the remainder is 0, so the condition is true and the fill turns red. When i is 1, 3, or 5 the remainder is 1, the condition is false, and the fill is not changed.

Here is a row of circles using that condition. Every circle starts at size 40. The if makes every other one larger. When the condition is false, nothing changes.

function setup() {
  createCanvas(600, 200);
  noLoop();
}
function draw() {
  background(0);
  fill(200, 50, 50);
  noStroke();
  for (let i = 0; i < 6; i++) {
    let d = 40;
    if (i % 2 === 0) {
      d = 80;
    }
    ellipse(75 + i * 90, 100, d, d);
  }
}

// what each line does inside the loop:
// let d = 40             <- start with a default diameter every time
// if (i % 2 === 0)       <- check: is this an even position?
//   d = 80               <- yes: override the diameter
//                        <- no: d stays at 40, nothing else happens
// ellipse(...)           <- draws using whichever d was set

The if / else statement

A plain if only acts when the condition is true, and does nothing when it is false. if / else covers both cases explicitly: one outcome when the condition is true, a different one when it is not.

function setup() {
  createCanvas(600, 200);
  rectMode(CENTER);
  noLoop();
}
function draw() {
  background(0);
  noStroke();
  for (let i = 0; i < 6; i++) {
    if (i % 2 === 0) {     // even position
      fill(200, 50, 50);   // red
      rect(75 + i * 90, 100, 60, 60);
    } else {               // odd position
      fill(50, 100, 200);  // blue
      ellipse(75 + i * 90, 100, 60, 60);
    }
  }
}

// what each line does inside the loop:
// if (i % 2 === 0)        <- check: is this an even position?
//   fill(200, 50, 50)     <- yes: red fill
//   rect(...)             <- and draw a square
// else                    <- no, it must be odd
//   fill(50, 100, 200)    <- blue fill
//   ellipse(...)          <- and draw a circle

Every shape is handled by one branch or the other. Not just the colour changes — the shape itself changes. Each branch is completely independent.

The if / else if / else statement

Two outcomes cover a lot, but sometimes you need more. else if lets you chain conditions. The sketch checks each one in order and runs the first branch that is true. If none match, else catches everything else.

function setup() {
  createCanvas(600, 200);
  noLoop();
}
function draw() {
  background(0);
  noStroke();
  for (let i = 0; i < 6; i++) {
    if (i % 3 === 0) {
      fill(200, 50, 50);
    } else if (i % 3 === 1) {
      fill(255);
    } else {
      fill(50, 100, 200);
    }
    ellipse(50 + i * 90, 100, 60, 60);
  }
}

// what each line does inside the loop:
// if (i % 3 === 0)        <- check: is the remainder 0? (i = 0, 3)
//   fill(200, 50, 50)     <- yes: red
// else if (i % 3 === 1)   <- no. check again: is the remainder 1? (i = 1, 4)
//   fill(255)             <- yes: white
// else                    <- remainder must be 2 (i = 2, 5)
//   fill(50, 100, 200)    <- blue
// ellipse(...)            <- draw using whichever fill was set

i % 3 cycles through 0, 1, and 2. The six circles get three colours in sequence, repeating twice across the row.

Into the grid

Now take all three forms of condition into a larger grid. This is a 21x21 grid on an 800x800 canvas with 50 pixels of margin on every side. Each cell starts with a black rectangle inset 5 pixels from the grid lines. A condition then decides what goes on top — six outcomes, black and white only.

function setup() {
  createCanvas(800, 800);
  noLoop();
}
function draw() {
  background(0);

  let margin = 50;
  let cols = 21;
  let cellSize = (width - margin * 2) / cols;
  let inset = 5;

  // white grid
  stroke(255);
  strokeWeight(1);
  noFill();
  for (let i = 0; i <= cols; i++) {
    line(margin + i * cellSize, margin, margin + i * cellSize, height - margin);
    line(margin, margin + i * cellSize, width - margin, margin + i * cellSize);
  }

  noStroke();
  for (let row = 0; row < cols; row++) {
    for (let col = 0; col < cols; col++) {
      let x = margin + col * cellSize;
      let y = margin + row * cellSize;
      let x1 = x + inset;
      let y1 = y + inset;
      let x2 = x + cellSize - inset;
      let y2 = y + cellSize - inset;

      // black rectangle in every cell
      fill(0);
      rect(x1, y1, cellSize - inset * 2, cellSize - inset * 2);

      // condition decides what goes on top
      let c = col % 6;
      if (c === 0) {
        fill(255);
        rect(x1, y1, cellSize - inset * 2, cellSize - inset * 2);  // full white
      } else if (c === 1) {
        fill(255);
        triangle(x1, y1, x2, y1, x1, y2);   // top-left triangle
      } else if (c === 2) {
        fill(255);
        triangle(x1, y1, x1, y2, x2, y2);   // bottom-left triangle
      } else if (c === 3) {
        fill(255);
        triangle(x2, y1, x1, y2, x2, y2);   // bottom-right triangle
      } else if (c === 4) {
        fill(255);
        triangle(x1, y1, x2, y1, x2, y2);   // top-right triangle
      }
      // c === 5: full black, nothing added
    }
  }
}

// inside the nested loop:
// x1, y1               <- top-left corner of the inset area
// x2, y2               <- bottom-right corner of the inset area
// fill(0) + rect        <- black rectangle, drawn in every cell
// let c = col % 6       <- cycles through 0, 1, 2, 3, 4, 5 across columns
// if c === 0            <- full white: white rect covers the black one
// if c === 1            <- white triangle in the top-left corner
// if c === 2            <- white triangle in the bottom-left corner
// if c === 3            <- white triangle in the bottom-right corner
// if c === 4            <- white triangle in the top-right corner
// c === 5               <- full black: nothing added, black rect stays

col % 6 cycles through six values. With 21 columns, the pattern repeats three full times across the grid, with the first three outcomes appearing once more in the final columns. The grid runs the same nested loop from Session 4. The only new ingredient is the condition that decides what each cell contains.

---

In Session 7 we look at translate() and rotate(): translate() changes where you draw from, rotate() turns the canvas itself, and together they build a flower from rotated petals.

In Session 4 the for loop knew in advance how many times to run. Sometimes you don’t know. You just want to keep going until something stops you.

The while loop

Think of filling a shelf with books. You don’t count them in advance. You pick one up from the pile, check whether there’s space, place it on the shelf, and repeat. The moment the shelf is full, you stop.

A while loop works the same way. It checks a condition before each run. If the condition is true, it runs. If it is false, it stops.

function setup() {
  createCanvas(400, 400);
  noLoop();
}
function draw() {
  background(0);
  fill(200, 50, 50);
  noStroke();
  let x = 50;
  while (x < width) {
    ellipse(x, 200, 40, 40);
    x += 70;
  }
}

x starts at 50. After each circle, x increases by 70. The loop keeps going as long as x is less than the canvas width. When x reaches or passes 400, the condition is false and the loop stops. How many circles? p5.js works it out at runtime. You just described when to stop.

Shrinking rectangles

A while loop becomes more interesting when multiple things change with each step. Here four variables update together: x and y move the starting corner diagonally, w and h shrink the size. The condition is spatial: stop when x is 80 pixels from the right edge.

function setup() {
  createCanvas(400, 400);
  noLoop();
}
function draw() {
  background(0);
  noFill();
  stroke(200, 50, 50);
  strokeWeight(2);
  let x = 20;
  let y = 20;
  let w = 120;
  let h = 120;
  while (x < width - 80) {
    rect(x, y, w, h);
    x += 30;
    y += 30;
    w -= 4;
    h -= 4;
  }
}

Each rectangle steps 30 pixels down and to the right, and shrinks by 4 pixels on each side. No fill, just an outline: every rectangle layers over the last, and the overlapping edges create a staircase pattern across the canvas. Four things changing at once, one condition controlling when it stops.

Infinite loops

Every while loop needs something inside it that eventually makes the condition false. In the example above, x += 30 is that thing. Without it, x never changes, the condition stays true, and the sketch freezes. p5.js stops responding and you have to reload the page. Before running any while loop, check that the update is there.

---

In Session 6 we look at conditions: how to make different things happen in different parts of the canvas.

In Session 3 we placed each shape manually, one line of code at a time. A loop lets you describe a shape once and repeat it as many times as you want.

The for loop

Think of stamping a shape along a line. You pick it up, press it down, move it along, and repeat. A for loop does exactly that in code.

for (let i = 0; i < 5; i++) {
  // this runs 5 times
}

Three parts, separated by semicolons. let i = 0 sets the starting point. i < 5 is the condition: keep going as long as it is true. i++ increases i by 1 after each run. When i reaches 5 the condition is false and the loop stops.

function setup() {
  createCanvas(600, 400);
  noLoop();
}
function draw() {
  background(0);
  fill(200, 50, 50);
  noStroke();
  for (let i = 0; i < 6; i++) {
    ellipse(100 + i * 75, 200, 40, 40);
  }
}

Six equal circles, evenly spaced across a black canvas. Each one is placed at 100 + i * 75: when i is 0 that is 100, when i is 1 that is 175, and so on.

i is not just a counter. It is a variable, and you can use it to change any property of the shape. Here it drives the size: each circle is 15 pixels wider than the last.

function setup() {
  createCanvas(600, 400);
  noLoop();
}
function draw() {
  background(0);
  fill(200, 50, 50);
  noStroke();
  for (let i = 0; i < 6; i++) {
    ellipse(50 + i * 90, 200, 15 + i * 15, 15 + i * 15);
  }
}

When i is 0 the diameter is 15. When i is 5 the diameter is 90. The same variable controls where each circle sits and how large it is.

Once you are comfortable with a single loop, you can combine shapes inside it to build more complex patterns. The loop still runs the same way. Everything inside repeats for each value of i.

function setup() {
  createCanvas(600, 400);
  noLoop();
}
function draw() {
  background(0);
  strokeWeight(6);
  for (let i = 0; i < 5; i++) {
    noFill();
    stroke(200, 50, 50);
    ellipse(110 + i * 95, 200, 150, 150);

    noStroke();
    fill(200, 50, 50);
    ellipse(110 + i * 95, 160, 30, 30);
    ellipse(110 + i * 95, 195, 25, 25);
    ellipse(110 + i * 95, 225, 20, 20);
    ellipse(110 + i * 95, 250, 15, 15);

    fill(0, 0, 0);
    ellipse(110 + i * 95, 165, 15, 15);
    ellipse(110 + i * 95, 200, 12.5, 12.5);
    ellipse(110 + i * 95, 230, 10, 10);
    ellipse(110 + i * 95, 255, 6, 6);
  }
}

One loop, many shapes per iteration. The single value of i positions everything in the group at once.

Nested loops

A single loop repeats something in a line. Two loops nested together repeat it across a grid: the outer loop moves down the rows, the inner loop moves across each column.

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER);
}
function draw() {
  background(0);
  let cellSize = 80;
  for (let row = 0; row < 5; row++) {
    for (let col = 0; col < 5; col++) {
      let x = 40 + col * cellSize;
      let y = 40 + row * cellSize;
      fill(200, 50, 50);
      noStroke();
      rect(x, y, 60, 60);
      fill(255);
      ellipse(x, y, 40, 40);
      fill(0);
      ellipse(x, y, 20, 20);
    }
  }
}

• cellSize controls the spacing between cells.
• x and y are calculated fresh for each cell.
• Inside each cell: a red square, a white ring, and a black centre, all stacked at the same point using rectMode(CENTER) from Session 3.

Every cell is identical, the grid handles the repetition.

Size variation

The loop variable does not have to control position. Here row drives the size of the black circle: the further down the canvas, the bigger it grows inside its cell.

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  noLoop();
}
function draw() {
  background(0);
  let spacing = 80;
  for (let row = 0; row < 5; row++) {
    for (let col = 0; col < 5; col++) {
      let x = 40 + col * spacing;
      let y = 40 + row * spacing;
      let sizeA = 10 + row * 12;
      fill(200, 50, 50);
      noStroke();
      rect(x, y, 70, 70);
      fill(0, 0, 0);
      noStroke();
      ellipse(x, y, sizeA, sizeA);
    }
  }
}

The top row has circles barely visible. By the bottom row they nearly fill the cell. Every cell in the same row is identical. One variable, sizeA, drives the whole variation across the grid.

---

In Session 5 we look at while loops: a different way to repeat, useful when you do not know in advance how many times something should run.

The Japan flag needed just one shape. This session we draw another flag, and for that we will add three more shapes to your toolkit.

The rect() function

rect(x, y, width, height) draws a rectangle. By default, x and y are the top-left corner. Width and height set how far it stretches from there.

function setup() {
  createCanvas(400, 400);
  noLoop();
}
function draw() {
  background(220);
  fill(200, 50, 50);
  noStroke();
  rect(75, 75, 250, 150);
}

A 250 by 150 rectangle, starting 75 pixels from the left edge and 75 from the top.

rectMode(CENTER)

By default, rect() positions from the top-left corner. rectMode(CENTER) changes that: x and y become the centre point, the same way ellipse() works. That makes it easier to position several shapes relative to each other on the canvas. To switch back: rectMode(CORNER).

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER);
}
function draw() {
  background(220);
  noStroke();

  fill(255, 255, 255);
  rect(200, 100, 250, 75);

  fill(200, 50, 50);
  rect(200, 175, 250, 75);
}

Two rectangles centred on the same vertical axis. White on top, red below. The flag is starting to take shape.

The line() function

line(x1, y1, x2, y2) draws a straight line between two points. A line has no fill, only a stroke. stroke() sets its colour and strokeWeight() sets its thickness.

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER);
}
function draw() {
  background(220);
  noStroke();

  fill(255, 255, 255);
  rect(200, 100, 250, 75);

  fill(200, 50, 50);
  rect(200, 175, 250, 75);

  stroke(0, 0, 0);
  strokeWeight(10);
  line(75, 60, 75, 350);
}

The flagpole is a vertical black line, 10 pixels wide, running along the left edge of the flag.

The triangle() function

triangle(x1, y1, x2, y2, x3, y3) connects three points. Each pair of numbers is one corner.

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER);
}
function draw() {
  background(220);
  noStroke();

  fill(255, 255, 255);
  rect(200, 100, 250, 75);

  fill(200, 50, 50);
  rect(200, 175, 250, 75);

  stroke(0, 0, 0);
  strokeWeight(10);
  line(75, 60, 75, 350);

  fill(17, 69, 126);
  noStroke();
  triangle(75, 62.5, 75, 212.5, 200, 137.5);
}

The blue wedge has three corners: top-left at (75, 62.5), bottom-left at (75, 212.5), and the tip pointing right at (200, 137.5). Almost a flag. But the pole has disappeared behind the triangle, because the triangle was drawn after it. p5.js executes draw() in sequence, top to bottom. Whatever is written last appears on top.

Draw order

Moving the line to the end of draw() puts it on top of everything else.

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER);
}
function draw() {
  background(220);
  noStroke();

  fill(255, 255, 255);
  rect(200, 100, 250, 75);

  fill(200, 50, 50);
  rect(200, 175, 250, 75);

  fill(17, 69, 126);
  noStroke();
  triangle(75, 62.5, 75, 212.5, 200, 137.5);

  stroke(0, 0, 0);
  strokeWeight(10);
  line(75, 60, 75, 350);
}

The pole now sits in front of the flag, exactly where it should be.

Czech flag

As scripts grow it gets easy to lose track of what each part does. Comments let you add notes directly in the code. p5.js ignores them when the sketch runs. They are there for you, not the computer. Put // before any text to make it a comment. A comment on its own line is enough to label a whole block.

function setup() {
  createCanvas(400, 400);
  noLoop();
  rectMode(CENTER);
}
function draw() {
  background(220);
  noStroke();

// White top stripe
  fill(255, 255, 255);
  rect(200, 100, 250, 75);

// Red bottom stripe
  fill(200, 50, 50);
  rect(200, 175, 250, 75);

  // Blue triangle
  fill(17, 69, 126);
  noStroke();
  triangle(75, 62.5, 75, 212.5, 200, 137.5);

  // Flagpole
  stroke(0, 0, 0);
  strokeWeight(10);
  line(75, 60, 75, 350);
}

---

In Session 4 we look at loops: how to repeat a shape across the canvas without writing the same line of code a hundred times.

Session 1 set up the editor and introduced the default template. In this session you write something real: a shape, a colour, a canvas that is yours.

Canvas size

You already know the canvas is your piece of paper. Those two numbers inside createCanvas() are its width and height in pixels. Change them and the paper changes size.

function setup() {
  createCanvas(600, 300);
  noLoop();
}

function draw() {
  background(220);
}

A wider canvas, 600 pixels across and 300 tall. We need to change the default canvas size: the Japan flag we are drawing in this session is wider than it is tall. Let’s use 600 by 300.

How coordinates work

Every point on the canvas has an x position and a y position. x goes left to right. y goes top to bottom. The top left corner is (0, 0).

Think of a grid pinned at the top left of your piece of paper. As you move right, x increases. As you move down, y increases. The centre of a 600 by 300 canvas is (300, 150).

Colour: fill and stroke

Before you draw a shape, you tell p5.js what colour to use. fill() sets the colour inside the shape. stroke() sets the colour of the outline. Both take RGB values: three numbers between 0 and 255, one for red, one for green, one for blue.

fill(220, 0, 0);   // red fill
stroke(0);         // black outline

To remove the outline entirely:

noStroke();

These settings stay in effect until you change them. Set the colour before the shape you want to colour.

Your first shape: ellipse

ellipse(x, y, w, h) draws an ellipse. x and y are the centre point. w is the width, h is the height. When width and height are equal, you get a circle.

The Japan flag is a useful shape to aim for: a red circle, centred on a white canvas. It uses everything covered above.

function setup() {
  createCanvas(600, 300);
  noLoop();
}

function draw() {
  background(255);
  fill(220, 0, 0);
  noStroke();
  ellipse(300, 150, 180, 180);
}

• background(255) fills the canvas white.
• fill(220, 0, 0) sets the colour to red before the ellipse is drawn.
• noStroke() removes the outline.
• ellipse(300, 150, 180, 180) places a 180 by 180 circle at the centre of the 600 by 300 canvas.

Run it. That is your first real sketch.

Saving your sketch

File > Save, or Cmd/Ctrl + S. Give the sketch a name by clicking the pencil icon next to the title at the top. Once saved, it appears in your account under File > Open.

---

In Session 3 we add more shapes and look at what happens when you combine them on the canvas.

If you have ever wondered whether you need to be a developer to make generative art, you do not. This series goes through p5.js step by step, a tool built for designers and creatives, not computer scientists. A second series covers more complex territory, and from there the work is yours to take wherever you want.

p5.js is a JavaScript library for creative coding. It was created by Lauren Lee McCarthy in 2013 as a reinterpretation of Processing, the Java-based environment that Ben Fry and Casey Reas built in 2001 to make programming accessible to artists and designers. p5.js brings the same idea to the browser.

You can use p5.js in two ways: through the web editor at editor.p5js.org, or by setting up a local environment on your computer. This series uses the web editor throughout. No installation, no configuration - open the browser and start.

The web editor

Go to editor.p5js.org. The editor loads with a default sketch already open.

You can run sketches without an account, but you cannot save them. To save your work, click “Sign up” in the top right. You can create a free account with a username and password, or log in directly with GitHub or Google.

Once you have an account, use File > Save (or Cmd/Ctrl + S) to save. Each saved sketch gets a name - you can rename it by clicking the pencil icon next to the sketch name at the top.

To start a fresh sketch, go to File > New. The File menu is also where you save your work, duplicate an existing sketch, or download it to your computer.

The default template

Every new sketch opens with this code:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

Think of it like sitting down to draw. Before anything else, you reach for a piece of paper. That is what createCanvas(400, 400) does: it puts a 400 by 400 pixel canvas in front of you. setup() is where that happens. It runs once when the sketch starts, and it is where you get everything ready before the drawing begins.

draw() is the drawing itself. It runs on a loop after setup, 60 times per second by default. Right now the only thing in it is background(220), which paints the whole canvas grey. The number is a greyscale value: 0 is black, 255 is white, 220 is a light grey.

Press play and you will see exactly that: a plain grey square, your blank page, ready.

The noLoop() function

Because draw() loops by default, the sketch keeps running even when nothing is changing. For a static generative art you usually want the sketch to run once and stop. Add noLoop() inside setup():

function setup() {
  createCanvas(400, 400);
  noLoop();
}

Every sketch in this series uses noLoop() unless the post is specifically about animation.

You could also put all your drawing code inside setup() and skip draw() entirely for static work, since setup is executed only once. I prefer not to. I keep setup() for configuration and draw() for the artwork, whether it moves or not. That consistency makes it easier to read your own code later, and noLoop() costs nothing.

Variables

A variable is a container. It holds a piece of information so you can use it later, or use it in multiple places. Think of it like storing your name or your age: the label stays the same, the value inside it can change.

For drawing, variables are how you store things you want to reuse. The diameter of a circle, the position of a shape on the canvas, a colour value. Instead of typing 400 in five different places, you store it once:

let canvasSize = 400;

Now you can use canvasSize anywhere in the sketch. Change the number once and it updates everywhere.

Data types

p5.js uses the same basic types as JavaScript. Three are enough for now. Numbers are any numeric value: 400, 3.14, 0. Strings are text wrapped in quotes: "hello", "red". Booleans are true or false, used for on/off decisions. You do not need to declare the type when you create a variable - JavaScript works it out from the value you assign.

---

That is the foundation. In Session 2 we write the first real sketch from scratch: a shape, a colour, and a canvas that is yours.