🎨 p5.js Syntax Summary (Sections 1–3)

Your quick guide to drawing, color, and coordinates!

1️⃣ Canvas + Basic Structure

Every p5.js sketch starts with two special functions:

Basic Template

function setup() {
  createCanvas(400, 300);  // your drawing area
  background(220);         // canvas color
}

function draw() {
  // this runs 60 times per second
}

Key Commands

Function What It Does
createCanvas(w, h) Makes your drawing area (width, height in pixels)
background(r, g, b) Fills the canvas with a color
width / height Built-in variables storing canvas size
background(0-255) Fills the canvas with a grayscale color (0, black; 255, white)

Examples

createCanvas(600, 400);   // large canvas
background(0);            // black background
background(200, 100, 0);  // orange-ish

2️⃣ The Coordinate System

p5.js uses a simple grid: