Glossary

Declares a variable that can be reassigned later. Most common way to store a value. Block-scoped — only exists inside the {} where it's declared.

Declares a variable that cannot be reassigned. Use for values that won't change, like the canvas size or a fixed color name.

An ordered list of values. Items are separated by commas: let colors = ['pink', 'blue', 'yellow']. Items are numbered starting at 0.

Access an item by its position. colors[0] returns the first item. Index starts at 0, so the last item is at array.length - 1.

The number of items in an array. Often used in loops: for (let i = 0; i < array.length; i++).

Adds an item to the end of an array and returns the new length. Common when building up a list incrementally.

Creates a new array by running a function on every element. Example: names.map(n => n.toUpperCase()) returns all names uppercased.

Creates a new array containing only the elements where the function returns true. Example: nums.filter(n => n > 10).

Runs a function once for every element, in order. Unlike map, it doesn't return anything — use it for side effects like drawing.

Returns a portion of the array as a new array without modifying the original. arr.slice(0, 3) returns the first 3 items. Used after shuffle() to pick a random subset.

Returns true if the item is found in the array, false otherwise.

Sorts the array in place (modifies the original). By default sorts alphabetically. Pass a comparator function for numeric sort: arr.sort((a, b) => a - b).

Reduces an array to a single value by accumulating. Useful for summing values: nums.reduce((sum, n) => sum + n, 0).

A collection of named values (properties). Example: let dot = { x: 100, y: 200, size: 40 }. Used to group related data together.

Access a value from an object by name. Example: dot.size returns 40. Can also assign: dot.size = 60.

Returns an array of all the property names in an object. Useful for iterating over an object's keys.

Runs different code depending on whether a condition is true or false. else if chains multiple conditions.

Repeats code a set number of times using a counter variable. Most common pattern: for (let i = 0; i < total; i++) { }.

Loops through every item in an array (or other iterable) without needing an index counter. for (let item of array) { }.

Ternary operator — a compact one-line if/else. Returns a if condition is true, b if false. Example: x > 0 ? 'positive' : 'zero'.

Defines a reusable block of code. Call it by name to run it. Functions can accept inputs (parameters) and send back a result (return).

Arrow function — a compact way to write a function. Common in array methods: array.map(item => item * 2).

Exits a function and sends a value back to the caller. Example: function double(n) { return n * 2; }.

A function passed as an argument to another function, to be called later. Common in forEach, map, filter, and async operations like loadJSON.

Returns a random decimal between 0 (inclusive) and 1 (exclusive). Multiply to get a larger range: Math.random() * 360. In p5, use random() instead — it's the same idea with a simpler API.

Rounds a number down to the nearest integer. In p5, floor(n) does the same thing without the Math. prefix. Combine with random() to get a random integer: floor(random(10)).

Rounds a number up to the nearest integer. In p5, use ceil(n). Opposite of Math.floor().

Rounds to the nearest integer — up if the decimal is 0.5 or above, down otherwise. In p5, use round(n).

Return the smallest or largest of a set of numbers. Math.max(5, 3, 9) returns 9. Useful for clamping values. In p5, use constrain() to clamp within a range.

Converts a string like "42" to the integer 42. Returns NaN if the string doesn't start with a valid number.

Splits a string into an array using a separator. 'a,b,c'.split(',') returns ['a', 'b', 'c'].

Return a new string converted to all uppercase or all lowercase characters.

A collection of unique values — duplicates are automatically removed. Create with new Set([...array]). Check membership with set.has(item).

Prints a value to the browser's developer console (F12 or Cmd+Opt+I). Essential for debugging — check what a variable actually contains.

Runs once when the sketch starts. Put createCanvas() here along with any one-time initialization code.

Runs repeatedly — 60 times per second by default. The main animation loop. Everything that changes or updates goes here.

Runs before setup() and waits for all loading to finish. Use it for loadImage(), loadJSON(), and loadTable() so assets are ready when the sketch starts.

Creates the drawing surface with the given width and height in pixels. Call it inside setup(). Returns a reference to the canvas element.

Forces the canvas to use a 1:1 pixel ratio. Required for p5.riso — without it, dithering and halftone effects calculate pixel offsets incorrectly on retina screens.

Built-in variables holding the canvas width and height in pixels. Use these instead of hardcoding numbers so your sketch adapts if the canvas size changes.

Fills the entire canvas with a color. Pass a grayscale value (0–255), RGB values, or a CSS color string. Called at the start of draw() to clear the previous frame.

Sets how many times draw() runs per second. Default is 60. Lower values slow down animation; useful for debugging or intentional effects.

Draws a circle centered at (x, y) with diameter d. Uses the current fill() and stroke() settings.

Draws an ellipse centered at (x, y) with width w and height h. If w === h, it's a circle.

Draws a rectangle. By default, (x, y) is the top-left corner. Add a 5th argument for rounded corners. Change reference point with rectMode(CENTER).

Draws a line between two points. No fill — only uses stroke() and strokeWeight().

Draws a triangle connecting three points. Each pair of arguments is an (x, y) coordinate for one vertex.

Sets the fill color for shapes drawn after this call. Pass three values for RGB (0–255), one value for grayscale, or a color() object. On a Riso layer, the single value controls ink density (0–255), not color.

Disables fill so shapes are drawn as outlines only. Reverts to filled when you call fill() again.

Sets the outline color for shapes and lines. Accepts the same arguments as fill().

Disables outlines on shapes. Common when drawing filled shapes cleanly without a border.

Sets the thickness of lines and shape outlines in pixels. Default is 1. Call before drawing to affect subsequent shapes.

Creates a color object that can be stored in a variable and reused. Useful for referencing RISO channel colors: let c = riso.channelColor.

Draws text at position (x, y). Styling is controlled by textSize(), textFont(), and fill().

Sets the font size in pixels for subsequent text() calls.

Sets the font. Pass a CSS font family name as a string, or a font loaded with loadFont().

Sets horizontal and vertical alignment for text(). Horizontal: LEFT, CENTER, RIGHT. Vertical: TOP, CENTER, BOTTOM.

Returns the pixel width of a string at the current text size. Useful for positioning labels precisely relative to their content.

Save and restore the current drawing state (fill, stroke, transforms). Everything between push() and pop() is isolated — changes don't leak out.

Moves the drawing origin by (x, y) pixels. Subsequent drawing is offset by this amount. Stack with push()/pop() to scope the effect.

Rotates all subsequent drawing by the given angle (in radians by default). Use radians(degrees) to convert. Combine with translate() to rotate around a point.

Changes how rect() interprets its position. CORNER (default) uses top-left; CENTER uses the center point. Useful for centering shapes before rotating them.

Loads an image file and returns a p5.Image object. Must be called inside preload() so the image is ready before setup() runs.

Draws an image on the canvas at position (x, y). Optionally pass width and height to resize: image(img, x, y, w, h).

Resizes a p5.Image in place. Pass 0 for either dimension to scale it proportionally: img.resize(400, 0) sets width to 400 and auto-calculates height.

Applies a grayscale filter to the canvas or image. Required before dithering — dither functions expect a grayscale (black-and-white) image as input.

Built-in variables tracking the current mouse cursor position relative to the top-left corner of the canvas. Updated automatically every frame.

A function you define that p5.js calls automatically whenever the mouse button is pressed. Use it to trigger actions on click.

A function you define that p5.js calls whenever a key is pressed. Check the key variable inside it to see which key was pressed.

A built-in string variable holding the most recently pressed key character. Example: if (key === 's') saveCanvas().

Stops draw() from repeating — the sketch freezes on the current frame. Use when you want a static output or manual control over redrawing.

Resumes draw() after it was stopped with noLoop().

Runs draw() once manually. Use with noLoop() to redraw only when something changes — like after a keypress.

Returns a random number between min and max. Pass just one value for 0 to that value. Pass an array to pick a random element from it: random(['a','b','c']).

Locks the random number sequence to a specific seed so results are reproducible. Same seed = same "random" values every time. Call at the top of draw() and press space to pick a new seed for a new composition.

Returns a new array with the same elements in a randomized order. Controlled by randomSeed(). The original array is not modified. Use with slice() to pick a random subset without repeats.

Re-maps a value from one range to another. Example: map(temp, 0, 100, 0, width) converts a temperature to a canvas x-position. The workhorse of data-driven design.

Clamps a value so it never goes below min or above max. Prevents values from flying off the canvas or exceeding valid ranges.

Returns the distance in pixels between two points. Useful for proximity checks or for scaling effects based on how far something is from the mouse.

Trigonometric functions that return values between -1 and 1. Angle is in radians. Used for circular motion, waves, and oscillating effects.

Perlin noise — returns smoothly varying random values between 0 and 1. Unlike random(), neighboring values are similar, producing organic textures and flows.

Loads JSON data from a URL or local file. Use in preload() to ensure data is ready, or pass a callback as the second argument for loading after setup.

Loads a CSV file and returns a p5.Table object. Use in preload(). The 'header' flag tells p5 the first row contains column names.

Returns the number of data rows in a loaded CSV table (not counting the header row).

Returns a single row from the table by index as a p5.TableRow object. Then use row.getString(col) or row.getNum(col) to read values.

Read a value from a specific column in a table row. getString returns text, getNum returns a number. Pass the column name (from the header row) as a string.

Downloads the current canvas as an image file. Format can be 'png' or 'jpg'. Often triggered with a keypress: if (key === 's') saveCanvas('output', 'png').

Built-in angle constants: PI ≈ 3.14159 (half circle), TWO_PI = full circle, HALF_PI = quarter circle. Use with sin(), cos(), and rotate().

Alignment constants used with textAlign() and rectMode(). Written in caps — they're p5.js-specific named values.

Creates a new ink layer (channel) using a RISO ink color name. Example: let pink = new Riso('FLUORESCENTPINK'). You draw to this object using the same methods as p5.js.

Clears all Riso layers at the start of each draw() call. Must be the first thing in your draw loop — forgetting it causes layers to accumulate and fill solid.

Composites all Riso layers together onto the main canvas and displays the result. Must be the last thing in your draw loop — forgetting it means nothing appears on screen.

Downloads each Riso layer as a separate grayscale PNG file, ready for RISO print production. Each file is named by its ink color. Usually triggered with a keypress.

A built-in array containing all active Riso layer objects. Useful when you want to loop over every layer without listing them individually.

Sets ink density for shapes drawn to this layer. Pass a value from 0 (no ink) to 255 (full ink). Lower values simulate lighter ink coverage or halftone effects.

Sets the stroke (outline) density for this layer. Same 0–255 range as layer.fill().

Disables stroke or fill on the layer — same as in p5.js, but scoped to the Riso layer's drawing context.

All standard p5.js shape functions are available on Riso layers. Drawing here goes to the layer's channel, not the main canvas. Only appears after drawRiso().

Draws an image onto a Riso layer. Typically used with pre-dithered or halftoned images to place them in a specific ink color channel.

Draws text onto a Riso layer. Combine with layer.fill() to control ink density and with layer.textSize() and layer.textFont() to style.

Save and restore drawing state within a Riso layer's context. Works the same as p5's push()/pop(), but scoped to that layer.

Apply transforms within a Riso layer's drawing context. Useful for positioning or rotating elements independently per layer.

Erasing mode cuts through previously drawn areas on the layer — like a knockout or mask. Call layer.noErase() to return to normal drawing mode.

A p5.Color object representing the RGB screen preview color of this Riso layer. Useful for matching label colors, UI elements, or drawing swatches.

A string with the name of this layer's RISO ink color (e.g., 'FLUORESCENTPINK'). Useful for labeling exports or displaying the active ink names.

Converts a grayscale image to a black-and-white dithered image. Returns a new p5.Image — draw it onto a Riso layer with layer.image().

Algorithms: 'atkinson' — high contrast, clean edges; 'floydsteinberg' — smooth gradients; 'bayer' — ordered grid pattern; 'none' — hard threshold only.
Threshold: 0–255 — controls the cutoff between black and white.

Converts a grayscale image to a halftone dot pattern. Returns a p5.Image to draw onto a Riso layer.

Shape: 'circle', 'square', 'line', 'ellipse', 'cross'.
Frequency: density of dots (higher = more dots, smaller).
Angle: rotation of the dot grid in degrees.
Intensity: controls dot size relative to brightness.

A built-in array of all 81 available RISO ink colors. Each item has a .name (string) and a .color (p5.Color). Use random(RISOCOLORS) to pick one at random.

.name is the RISO ink name as a string (e.g., 'FLUORESCENTPINK'). .color is the screen-preview RGB color. Pass .name to new Riso() to create a layer in that color.