p5.js track

Creative sketches in the browser

Six modules — p5.js uses a friendly API around canvas 2D (and WebGL mode later). Each lesson has a live iframe demo; tap and drag inside demos where noted.

1

Setup & draw

Sketch lifecycle — resize-aware canvas
2

Primitives

Rect, ellipse, line — coordinates
3

Color modes

HSB rings — perceptual play
4

Transforms

translate, rotate, push/pop
5

Mouse & pointers

pmouse, presses — trails
6

Arrays & loops

Many particles — data + draw()