The host: p5.js and JavaScript

The examples are p5 sketches: they run in p5's global mode, and a cell holds whatever JavaScript a cell can hold. This page lists the p5.js and JavaScript names they call, a line each on what the snippets use it for, and how many examples reach for it.

Three shapes of address, because p5's reference is not uniform:

• a p5 function, value or cast has a page of its own, and the name links to it;
• a p5 constant — CENTER, CORNER, WEBGL, PI, RGB, HSB — has none: p5 documents it inside the function that takes it, so those rows carry no link;
• a p5.Element method — html(), value(), checked(), option() — is documented on the class page, which is where its row goes.

p5.js

The sketch and its canvas

Name	What the examples use it for	Examples
createCanvas	makes the canvas the sketch draws into; the quadrille is laid out in its pixels	115
height	the canvas height in pixels	7
frameCount	how many frames have been drawn; 0 inside setup()	5
noLoop	draws one frame and stops; redraw() asks for another	2
width	the canvas width in pixels, read when the cell count is derived from it	2
redraw	runs draw() once more after noLoop()	1

Colour

Name	What the examples use it for	Examples
background	paints the whole canvas — the backdrop an empty cell shows	99
color	makes a p5.Color from a CSS string or from channels under the current colorMode; a cell can hold one	64
fill	sets the fill colour of the shapes and text drawn after it	11
noStroke	draws shapes with no outline	7
blue	a p5.Color’s blue channel	6
red	a p5.Color’s red channel, as the examples compare or sort by it	6
brightness	a p5.Color’s brightness, under the current colorMode	4
green	a p5.Color’s green channel	4
noFill	draws shapes with no fill, only their outline	4
stroke	sets the outline colour	4
strokeWeight	sets the outline width in pixels	4
colorMode	changes how colour numbers are read — RGB or HSB — and their range	3
alpha	a p5.Color’s opacity	1
saturation	a p5.Color’s saturation, under the current colorMode	1

Shapes and transforms

Name	What the examples use it for	Examples
circle	a circle from its centre and diameter	4
pop	restores what push() saved	4
push	saves the transform and style state; drawQuadrille does it around every cell	4
rect	a rectangle from its corner (or its centre under rectMode)	3
rotateY	rotates the geometry drawn after it about the y axis, WEBGL only	2
triangle	a triangle from three points	2
ellipseMode	whether an ellipse’s coordinates are its centre (CENTER) or its corner	1
image	draws a p5.Image scaled into the box it is given	1
rotateX	rotates the geometry drawn after it about the x axis, WEBGL only	1
sphere	a 3D sphere, WEBGL only	1
torus	a 3D torus, WEBGL only	1

Text

Name	What the examples use it for	Examples
text	draws a string with the current fill, size, font and alignment	18
textFont	the font text() uses — a loaded font or a CSS family	3
textSize	the glyph size in pixels	3
loadFont	loads a font file asynchronously, to hand to textFont	2
textAlign	the horizontal and vertical anchor of text(); CENTER centres it in the cell	2

Images, fonts and offscreen graphics

Name	What the examples use it for	Examples
loadImage	loads an image asynchronously (await it); an image is a valid cell value	18
createGraphics	an offscreen p5.Graphics with its own canvas, which drawQuadrille can draw into	3
createVideo	loads a video element, drawn where an image would go	2

Input

Name	What the examples use it for	Examples
key	the last key pressed, as a string; keyPressed() reads it	14
mouseY	the pointer’s y in canvas pixels	3
mouseX	the pointer’s x in canvas pixels	2
mouseIsPressed	true while a mouse button is down	1

DOM controls

Name	What the examples use it for	Examples
value	reads (or sets) a control’s value	15
position	places the element at (x, y) in the frame, usually under the canvas	12
createCheckbox	a labelled checkbox; checked() reads it and changed() fires on a toggle	9
createSelect	a dropdown; option() adds entries and selected()/value() read the choice	9
checked	reads (or sets) a checkbox	9
option	adds an entry to a dropdown	9
selected	reads (or sets) the selected entry of a dropdown	7
input	calls a function on every keystroke in an input	6
createSlider	a range slider; value() reads the number it holds	4
style	sets a CSS property on the element	4
createColorPicker	a colour input; value() returns the chosen colour	2
createP	appends a paragraph below the canvas; the examples print their state into it	2
changed	calls a function when the control’s value changes	2
hide	hides the element	2
html	sets the element’s inner HTML — how a sketch writes its state under the canvas	2

Maths and randomness

Name	What the examples use it for	Examples
random	a random number in [min, max); seedable with randomSeed	12
int	p5’s integer conversion: int(3.7) is 3	6
map	rescales a value from one range into another	6
sin	the sine of an angle in radians	3
constrain	clamps a value between two bounds	2
floor	rounds down	1
min	the smaller of two values	1

Lights and 3D

Name	What the examples use it for	Examples
ambientLight	lights every surface equally, so no side is dark	1
directionalLight	a light coming from one direction, like the sun	1
orbitControl	lets the pointer orbit a WEBGL camera	1

Constants

Name	What the examples use it for	Examples
CENTER	the mode value that makes a coordinate a centre — read by rectMode, ellipseMode and textAlign	4
RGB	the colour mode colorMode() switches to	2
WEBGL	the 3D renderer, passed as createCanvas’s third argument	2
CORNER	the mode value that makes a coordinate a corner	1
HSB	the hue/saturation/brightness colour mode	1
PI	π, 3.14159…	1

JavaScript

Arrays

Name	What the examples use it for	Examples
Array.push	appends to an array and returns its new length	4

Built-in objects

Name	What the examples use it for	Examples
Map	a keyed collection — one entry per key, iterated in insertion order	1
Math.abs	absolute value	1
String	converts a value to a string	1
Symbol	a unique, immutable key — a value type a cell can hold	1

The console

Name	What the examples use it for	Examples
console.assert	prints only when the condition is false — a one-line invariant check	1
console.log	prints to the browser console, for what is easier to read there than on the canvas	1