p5.js Sketch Foundations

Project structure

The template is set up like a small, readable p5.js app. In the Codevre browser IDE (a browser editor for coding online), open:

• /index.html — loads p5 + your sketch entry file
• /src/sketch.js — your p5.js sketch: setup(), draw(), and interaction
• /style.css — page styling (optional, but handy for presentation)

Sketch basics: setup() and draw()

In p5, setup() runs once (good for creating a canvas and setting initial values). Then draw() runs repeatedly (like a loop) to animate and render your sketch.

// /src/sketch.js

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Runs once
}

function draw() {
  // Runs every frame
  background(15);
}

Shapes: drawing your first composition

p5 includes simple primitives (rectangles, ellipses, lines) that you can combine into a strong visual base. Here’s a compact “foundations” composition:

function draw() {
  background(10);

  // A grid-like anchor
  stroke(255, 40);
  for (let x = 0; x < width; x += 40) line(x, 0, x, height);
  for (let y = 0; y < height; y += 40) line(0, y, width, y);

  // Main forms
  noStroke();
  fill(120, 140, 255);
  rect(width * 0.2, height * 0.25, width * 0.25, height * 0.25, 18);

  fill(255, 180, 90);
  ellipse(width * 0.65, height * 0.55, min(width, height) * 0.25);

  // Accent line
  stroke(255);
  strokeWeight(2);
  line(width * 0.2, height * 0.75, width * 0.85, height * 0.25);
}

Color: fill, stroke, alpha, and palettes

Color in p5 is quick: use fill() for interiors, stroke() for outlines, and add an alpha channel for soft layering. For repeatable style, define a tiny palette.

const PALETTE = {
  bg: [11, 16, 32],
  ink: [245, 245, 255],
  blue: [110, 125, 255],
  orange: [255, 175, 80],
  pink: [255, 120, 180]
};

function draw() {
  background(...PALETTE.bg);

  // translucent wash
  noStroke();
  fill(...PALETTE.blue, 90);
  ellipse(width * 0.35, height * 0.45, 260, 260);

  fill(...PALETTE.orange, 120);
  rect(width * 0.55, height * 0.35, 240, 240, 22);

  // crisp outline accent
  stroke(...PALETTE.ink);
  strokeWeight(3);
  noFill();
  circle(width * 0.5, height * 0.55, 380);
}

Interaction: mouse + keyboard fundamentals

Interaction is built-in: use mouseX, mouseY, and event functions like mousePressed() and keyPressed(). Here’s a simple pattern: click to drop “seeds,” press S to save an image.

let seeds = [];

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(12);

  // draw seeds
  noStroke();
  for (const p of seeds) {
    fill(p.c[0], p.c[1], p.c[2], 180);
    ellipse(p.x, p.y, p.r);
  }

  // cursor preview
  stroke(255, 120);
  noFill();
  circle(mouseX, mouseY, 40);
}

function mousePressed() {
  const c = random([
    [110, 125, 255],
    [255, 175, 80],
    [255, 120, 180]
  ]);

  seeds.push({
    x: mouseX,
    y: mouseY,
    r: random(18, 64),
    c
  });
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    saveCanvas('p5-sketch', 'png');
  }
  if (key === 'c' || key === 'C') {
    seeds = [];
  }
}

Make it responsive: handle resizing cleanly

If your sketch uses the full window, add windowResized() so the canvas matches the browser size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Exporting and sharing your sketch

You’ve got a few easy options depending on how you want others to experience your work:

• Save a PNG: use saveCanvas('name','png') (like the S key example above)
• Share the project link: in Codevre, share the project URL so others can run/remix in-browser
• Export as a standalone web page: keep index.html + your /src files together and host them anywhere

FAQ: p5.js in a browser IDE

What do setup() and draw() do in p5.js?

setup() runs once to initialize your canvas and variables. draw() runs every frame to render animation and interaction.

How do I export a p5.js sketch as an image?

Use saveCanvas('filename','png'). Many sketches map this to a key press (like S) so it’s easy to save a still.

Why use Codevre for p5.js?

Codevre is a fast browser IDE for p5.js where you can code online, preview instantly, and share a link so others can run or remix your sketch in a browser editor.

Next steps

From here, try noise-driven motion, generative grids, particles, or typography sketches. p5 stays fast when you keep your code modular and your sketch goals small and clear—especially while coding online in a Codevre browser code editor.