Get started with p5.js

1Set up

Select where you're completing this event!

2What is p5.js?

p5.js is a JavaScript library for drawing and animating in the browser. You get a canvas, a rectangle of pixels, and simple functions like ellipse() and rect() to draw on it.

Every p5.js sketch has two special functions:

• setup() runs once when the sketch starts, so it's where you make the canvas.
• draw() runs again and again, about 60 times a second, and each run is one frame, like a page in a flipbook.

The p5.js web editor starts you with this code, and in VS Code you can paste it into sketch.js:

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

function draw() {
  background(220);
}

Here's what each line does:

• createCanvas(400, 400) makes a drawing area 400 pixels wide and 400 pixels tall, and it's in setup() because you only need one canvas.
• background(220) paints the whole canvas one color, and with a single number that color is a shade of gray from 0 (black) to 255 (white), so 220 is light gray. It's in draw() so every frame starts from a clean canvas.

3Draw shapes

First, set up the game screen: change the canvas to createCanvas(480, 360) (wider, like a game) and the background to background(15, 10, 25) (dark purple, for a spooky night), since the rest of the guide uses these values.

Drawing in p5.js works like painting: you pick a color, then draw a shape with it, and shapes drawn later go on top.

• background(r, g, b) fills the whole canvas, so calling it at the start of draw() wipes the last frame.
• fill(r, g, b) sets the color for the next shapes, with each number from 0-255 for red, green, and blue.
• noStroke() turns off outlines.
• ellipse(x, y, w, h) draws a circle or oval centered at (x, y).
• rect(x, y, w, h) draws a rectangle from its top-left corner.

function setup() {
  createCanvas(480, 360);
}

background(15, 10, 25);
noStroke();

fill(255, 240, 200);
ellipse(400, 60, 50, 50);

fill(40, 30, 50);
rect(0, 300, 480, 60);

4Draw your creature

Now make a drawing of your own and put it inside a function with x and y parameters, so you can draw it anywhere, as many times as you want, with one line.

Every shape inside uses x and y as its starting point, so the eyes move with the body.

function drawGhost(x, y) {
  noStroke();
  fill(220, 255, 230);
  ellipse(x, y, 60, 60);

  fill(20);
  ellipse(x - 12, y - 5, 10);
  ellipse(x + 12, y - 5, 10);
}

function draw() {
  background(15, 10, 25);
  drawGhost(240, 180);
  drawGhost(100, 80);
}

5Make it move randomly

random(a, b) gives you a different number between a and b every time you call it, which is the key to anything unpredictable.

First, store the ghost's position in a variable so it can change between frames. { x: 240, y: 180 } is an object, which lets one variable hold both numbers.

Option A: haunted drift

Nudge the ghost a random amount every frame so it shivers and wanders around like it's possessed.

let ghost = { x: 240, y: 180 };

function draw() {
  background(15, 10, 25);
  ghost.x += random(-3, 3);
  ghost.y += random(-3, 3);
  drawGhost(ghost.x, ghost.y);
}

Option B: teleport

This is what Ghost Hunt does: every 60 frames (about one second), the ghost jumps to a random spot. frameCount counts frames since the start, and % gives the remainder of a division, so frameCount % 60 === 0 is true once every 60 frames.

let ghost;
let spawnEvery = 60;

function spawnGhost() {
  ghost = { x: random(40, width - 40), y: random(40, height - 40) };
}

function setup() {
  createCanvas(480, 360);
  spawnGhost();
}

function draw() {
  background(15, 10, 25);
  if (frameCount % spawnEvery === 0) spawnGhost();
  drawGhost(ghost.x, ghost.y);
}

6Click to score

p5.js calls mousePressed() every time you click, and mouseX and mouseY hold where the click happened.

dist() measures the distance between two points. Since the ghost is 60 pixels wide, its radius is 30, so any click closer than 30 pixels to its center is a hit, and an if statement runs code only when that's true.

let score = 0;

function mousePressed() {
  if (dist(mouseX, mouseY, ghost.x, ghost.y) < 30) {
    score++;
    spawnGhost();
  }
}

fill(255);
textSize(16);
text('Score: ' + score, 12, 26);

7Add a timer

millis() is how many milliseconds have passed since the sketch started (1000 ms = 1 second), so you can save it when the round begins and subtract to see how long the round has lasted.

let duration = 30;
let startTime;

startTime = millis();

let elapsed = (millis() - startTime) / 1000;
let timeLeft = max(0, duration - elapsed);

textAlign(RIGHT, TOP);
text('Time: ' + ceil(timeLeft), width - 12, 10);

8Put it together

One last idea: a state variable decides what the screen shows: 'start' shows a title, 'play' runs the game, and 'over' shows your score, with a click moving between them.

Here's the complete game, piece by piece. Clear the editor, then copy each piece in, top to bottom:

let ghost;
let score = 0;
let duration = 30;
let startTime;
let state = 'start';
let spawnEvery = 60;

function setup() {
  createCanvas(480, 360);
  spawnGhost();
}

function draw() {
  background(15, 10, 25);

  if (state === 'start') {
    textAlign(CENTER, CENTER);
    fill(255);
    textSize(22);
    text('Click to start', width / 2, height / 2);
    return;
  }

  if (state === 'over') {
    textAlign(CENTER, CENTER);
    fill(255);
    textSize(22);
    text('Game over\nScore: ' + score + '\nClick to retry', width / 2, height / 2);
    return;
  }

  let elapsed = (millis() - startTime) / 1000;
  let timeLeft = max(0, duration - elapsed);
  if (timeLeft <= 0) {
    state = 'over';
    return;
  }

  if (frameCount % spawnEvery === 0) spawnGhost();
  drawGhost(ghost.x, ghost.y);

  textAlign(LEFT, TOP);
  fill(255);
  textSize(16);
  text('Score: ' + score, 12, 10);
  textAlign(RIGHT, TOP);
  text('Time: ' + ceil(timeLeft), width - 12, 10);
}

function mousePressed() {
  if (state === 'start' || state === 'over') {
    state = 'play';
    score = 0;
    startTime = millis();
    spawnGhost();
    return;
  }
  if (dist(mouseX, mouseY, ghost.x, ghost.y) < 30) {
    score++;
    spawnGhost();
  }
}

function spawnGhost() {
  ghost = { x: random(40, width - 40), y: random(40, height - 40) };
}

function drawGhost(x, y) {
  noStroke();
  fill(220, 255, 230);
  ellipse(x, y, 60, 60);
  fill(20);
  ellipse(x - 12, y - 5, 10);
  ellipse(x + 12, y - 5, 10);
}

9Make it unique

Now it's time to do your own thing! We want you to learn and try new things on your own, and it's no fun if you copy it from the guide or from AI. Here are some ideas to get you started:

Features to add

Here are some additional features you can add! There's no code to copy here: each one points you to the p5.js docs and an example you can open, play with, and figure out for your own game. Want to see them all in action? Try the expanded demo, or pick apart the Circle Clicker example.

10Already done?

Your base game works? Try these extra things to get a sticker sheet and more money for candy!

Finish 1 bonus: this sticker sheet

Finish both: the sticker sheet and $10 total for candy!

Open the bonus page for hints, docs, and tools for each challenge.

Explore the p5.js docs

The p5.js reference lists every function with examples you can try, so look up these 5 and use 1-2 of them in your game:

• loadImage() and image(): draw your own picture instead of shapes.
• rotate(): spin or tilt your creature.
• noise(): smooth, floaty movement that's less jittery than random().
• lerpColor(): fade between two colors, like a sky turning blood red.
• keyIsDown(): add keyboard controls.

11Checklist & submit

• It's made with p5.js and is a full playable game
• It has a start screen, gameplay, and a game-over screen
• It's Halloween themed, with your own spooky creatures
• It looks like your own game, not a copy of the guide
• You wrote it yourself, using AI only to unblock a single line