Starter
p5.js — Starter
Absolute beginners welcome. These ten articles take you from "what even is p5.js?" to building interactive sketches you can share with anyone.
01
What is p5.js?
The origins of creative coding and why p5.js makes it accessible.
02
Setting Up Your Environment
Three ways to get started: online editor, CDN, and local setup.
03
Your First Sketch
setup(), draw(), and why the loop matters.
04
Canvas & Coordinates
How pixels are positioned and why (0,0) is top-left.
05
Drawing Shapes
Rectangles, ellipses, lines, triangles, and custom polygons.
06
Color & Style
RGB, HSB, alpha, stroke, and fill.
07
Variables & Animation
Using numbers that change every frame to create motion.
08
Mouse Interaction
mouseX, mouseY, mousePressed, and click events.
09
Keyboard Input
Detecting key presses to control your sketch.
10
Saving & Sharing
Export frames, host on the p5.js editor, and embed anywhere.