Techniques 154
Procedures you can implement
2D array grid of objects Store a rectangular grid of custom objects in a 2D array and visit every cell with two nested for-loops, using the row/column indices as constructor arguments.
Accept-reject sampling Build any custom probability distribution by repeatedly drawing a candidate value and a second qualifying value, keeping the candidate only if it passes.
Angular velocity and angular acceleration The rotational analogue of the position/velocity/acceleration chain: accumulate angular acceleration into angular velocity, then angular velocity into angle, every frame.
Apollonian Gasket Recursively solve the Descartes Circle Theorem for a fourth mutually tangent circle given three existing ones, inscribing new circles into every gap until they fall below a minimum radius.
Array-driven per-instance animation Hold many independent instances' state in one array and update/draw each with the same loop each frame, instead of one variable per instance.
Array-of-objects pattern Declare an array of a custom class, allocate it, then instantiate every element in a loop, so one class definition drives many independent on-screen instances.
Arrive steering behavior A variant of seek that decelerates smoothly inside a slowing radius instead of overshooting the target.
Baked keyframe easing Precompute a custom easing curve into a CSS @keyframes rule with a Sass loop, so a hand-written easing formula can animate at 60fps without any JavaScript.
Bézier curve Curved line defined by anchor points pulled toward one or two invisible control points, drawn in p5.js with quadraticVertex()/bezierVertex().
Bezier curve continuity (bezier()/bezierVertex()) Bezier curves via bezier()/bezierVertex() chain smoothly only when each joint's flanking control points and shared endpoint lie on one straight line.
Bezier torsion animation Fake a 3D bar twisting around its axis in flat 2D by morphing each vertical edge between a straight line and a bezier curve in sync with an oscillating vertex.
Bloom post-processing pipeline Add a glow/bloom effect to a three.js scene by chaining a render pass and UnrealBloomPass through an EffectsComposer instead of rendering meshes directly.
Cantor set Recursively removing the middle third of a line, and of every remaining segment, to build the classic Cantor fractal.
Catmull-Rom spline (curve()) Processing's curve()/curveVertex() draw a Catmull-Rom spline through points, using an extra control point on each end to set tangent direction.
Circle Circle Collision Two circles collide when the distance between their centers is less than the sum of their radii.
circle packing Repeatedly try to add new circles at random positions and grow every existing circle each frame, rejecting or capping growth on overlap, to densely fill a canvas or an image/text outline.
Circle Point Collision A point is inside a circle when its distance to the circle's center is less than the circle's radius.
Clipped-rectangle fill slide Animate a shape's fill sliding in and out by moving a plain rectangle behind a static SVG clipPath mask, rather than animating the mask itself.
Collision Detection with Moving Objects To know which way a moving rectangle should bounce, test its NEXT position against the obstacle separately on the X axis and the Y axis, reversing only the axis whose next position would collide.
Complementary colour scheme A two-colour scheme built from hues on opposite sides of the colour circle (roughly 180 degrees apart).
Confetti particle system Simulate a confetti burst by giving each particle a launch velocity, then combining decay (friction), gravity, tilt rotation and noise-driven wobble every frame.
Continuous (steady-state) evolutionary ecosystem Replace generational GA with per-frame probabilistic birth/death: a creature's lifespan is its fitness, dying removes it from ever reproducing.
Contour (shape hole) Cutting a hole out of a custom p5.js shape by nesting a second vertex outline between beginContour() and endContour().
contrast Computing the W3C WCAG text-contrast ratio from two HSLuv lightness values by converting each to relative luminance and applying (l1+0.05)/(l2+0.05).
Conway's Game of Life 2D binary cellular automaton on a Moore (8-cell) neighborhood with birth/survival/death rules driven by the live-neighbor count.
Dash-offset particle trail Fake moving particles along a 3D curve by drawing a dashed THREE.MeshLine and animating its dashOffset uniform instead of moving discrete objects.
Diffusion-Limited Aggregation Grow a fractal by letting random walkers wander until they stick to a seed cluster, then replacing each stuck walker with a new one so the tree keeps branching outward.
Direction field from noise Mapping a 2D noise sample at each grid cell straight onto a full-turn angle turns a noise field into a grid of directional arrows.
Distance-threshold point connections Precomputing a dense point set, then connecting every pair within a distance threshold with an alpha that fades as distance grows.
Edge Collision Detection When a moving object's position passes a boundary, multiply the velocity component perpendicular to that boundary by -1 so the object reflects back into bounds.
Example: Trail Push the current position onto the end of a list every frame and drop the oldest entry once the list exceeds a fixed length, then draw every stored point with size scaled by its age.
external number source as randomness oracle Reading digits from an existing external source (e.g. a phone directory) and using their odd/even parity as a one-bit rule deciding each grid cell's mark or colour.
Eyes Point a pupil toward the mouse by taking the vector from eye to mouse, clamping its length to a fixed radius, and adding that clamped vector back to the eye's center.
Falling Sand Simulate loose grains on a 2D cell grid: each frame, move a grain straight down into an empty cell, or diagonally down-left/down-right if straight down is blocked.
FFT spectrum analysis for sound-reactive visuals Feed a live or file-based audio stream into an FFT analyzer to get a smoothed array of frequency-band energies (or an Amplitude/RMS follower for one loudness value) each frame.
Flocking Each agent continuously turns toward its single closest neighbor by a fixed angle increment, producing an emergent flock-like swirl from many instances.
Flow field Build a grid of direction vectors (from noise, or from an attractor like the mouse), then advect many particles through it and draw their traced paths.
Flow-field angle quantisation Snap each flow-field cell's continuous angle to the nearest multiple of a fixed increment, trading smooth curves for sculpted, angular ones.
Fluid drag force A resistive force scaling with the square of speed, applied only while an object is inside a defined fluid region.
Focus-distance depth of field Blur everything outside a chosen in-focus distance using a normalized 0-1 focusDistance mapped between a camera's near and far clipping planes.
Frame-based state animation loop Represent a scene's changing parts as sketch-level variables, redraw from them every frame, then reassign them so the next frame differs.
Frame-to-frame delta tracking (pmouseX/pmouseY) Compare the current per-frame position to the previous frame's stored value (pmouseX/pmouseY) to derive speed and direction of motion without any explicit physics state.
Friction force A force opposing motion, built as a unit vector opposite velocity scaled by a friction coefficient times an (assumed) normal force.
Genetic algorithm Population -> fitness -> weighted selection -> crossover+mutation -> repeat, evolving a population of candidate solutions toward a target.
Golden rectangle A rectangle whose width is 1.61803398875 (the golden ratio) times its height.
Gravitational attraction An inverse-square attraction force between two masses, direction from the vector between their positions and magnitude from Newton's law of gravitation.
Grid-Based Collision Detection Represent obstacles as a 2D boolean array (true = blocked) and a player's position as a row/column index.
High-resolution raster export via oversized canvas Size a canvas (or off-screen PGraphics) in pixels equal to the target print size in inches times the printer's target dpi, and if too large to build directly, tile it into scaled.
Hill climbing for image-to-primitive approximation Approximate a photo by adding one randomly-mutated geometric shape at a time, keeping only mutations that reduce RMSE error against the target image.
HSL lerp colour gradient Drawing a smooth colour gradient by independently lerping the hue, saturation and lightness of two colours across a loop's interpolation fraction i/(steps-1).
image tile cut-and-multiply reassembly Letting the user pick one rectangular crop from a source image, then tiling the whole canvas with (optionally jittered) copies of just that region.
Incremental HSL colour scheme Generating an array of related colours by picking a random starting hue/saturation/lightness and a random per-step change, then computing color_i = start + i*change in a loop.
Instanced-mesh particle animation Animate tens of thousands of three.js particles in one draw call by writing a per-instance transform matrix into an InstancedMesh each frame.
Interactive selection Replace a GA's mathematical fitness function with fitness assigned by human observers (viewing time, clicks, ratings), keeping the same selection/reproduction loop.
Isometric ThreeJS Camera Replacing Three.js's perspective camera with an OrthographicCamera and symmetric aspect-scaled bounds, positioned on the diagonal, to get a classic isometric view.
Kernel convolutions Compute each output pixel as a weighted sum of an input pixel and its neighbors under a small kernel matrix, producing blur, sharpen or edge-detect effects.
keystroke-speed-driven font scaling Sizing each typed letter by how long the pause before it was, so fast typing renders small and hesitation renders large — and every letter keeps the size it was typed at.
Koch snowflake Recursively divide every line segment into thirds and replace the middle third with an outward equilateral bump, applied to a triangle's three sides, to grow the Koch snowflake fractal.
L-system Rewrite a start string by repeatedly substituting each symbol per a fixed rule set, then draw the final string with a turtle to grow fractal trees and plants.
Layered particle compositing Group particle sets into ordered layers, fully simulating each layer before drawing the next, to build a composition from background to foreground.
layered random image collage Compositing several independent layers of source images, each placed in random count, offset, scale and rotation, and drawn back-to-front so later layers sit on top.
Let Objects Handle Themselves Give each agent its own class with move() and display() methods encapsulating its full behavior, then loop over an array of instances calling move() and display() on each.
Levy flight A random walk whose step length is usually small but occasionally very large, reducing the oversampling that plagues a plain random walker.
Line segment extrusion from a unit vector Building a 2D line segment of a given length by extruding a center point in both directions along a unit vector derived from an angle.
Live text-entry echo with textWidth cursor Accumulate typed characters into a String in keyPressed(), support backspace by trimming it, and draw a caret line at textWidth(buffer) so it tracks the true rendered width of what's been typed.
low-alpha accumulation trail Stamping many low-alpha shapes at every visited position without clearing the canvas turns visit frequency into a free greyscale density map.
luminance-driven pixel mapping Converting every source-image pixel to a single greyscale luminance value, then mapping that value onto a rendered mark's stroke weight, size or rotation to rebuild the image out of many small shapes.
Marching Squares Trace contour lines through a scalar field by thresholding a 2D grid of samples and looking up which edges of each 2x2 cell the isoline crosses.
Matrix transformation stack (pushMatrix/popMatrix) translate()/rotate()/scale() move the coordinate grid, not the shapes on it; pushMatrix()/popMatrix() save and restore that accumulated matrix like a stack.
Maze Generator Carve a maze by walking a grid of walled cells with randomized depth-first search: remove the wall into a random unvisited neighbour and recurse.
Metaballs Draw a gooey, organic blob between two circles as a single SVG path, by finding their tangent connector and rounding it into bezier-handled arcs.
Modular grid system Dividing a canvas into equally-sized rows and columns (modules) separated by a uniform margin/gutter, then placing or spanning content across one or more modules.
Mouse-driven interactive drawing Gate a per-frame draw call on mousePressed and skip clearing the background, so marks left at mouseX/mouseY accumulate into a persistent drawing surface.
Mouse-driven layered parallax Fake 3D depth in a flat SVG scene by translating stacked layers by different amounts, proportional to each layer's simulated depth, as the mouse moves.
Mouse-scrubbed video playback Map the cursor's horizontal position to a normalized 0-1 ratio and use it to jump() a loaded Movie directly to that fraction of its duration() every frame, turning mouseX into a scrub bar.
Mouse/keyboard event callback model Processing queues mouse and keyboard state changes and fires dedicated once-per-event callback functions at the end of each draw() frame, separate from continuously-polled state like mouseX or key.
Multi-key state tracking Track several keys at once with one sketch-level boolean per key, set in keyPressed/keyReleased and read continuously in draw().
NES Filter Recolor every pixel of an image to whichever entry in a fixed palette is closest in RGB space, by treating R,G,B as X,Y,Z coordinates and taking the minimum 3D Euclidean distance.
Networked shared drawing canvas Broadcast each sketch's current and previous mouse coordinates over a raw socket to a paired client or server, so two Processing instances draw the same lines on both screens in near-real time.
Neuroevolution Evolve a population of neural networks with a genetic algorithm instead of training one network by backpropagation: fitness accumulates from behavior, selection is fitness-weighted.
Newtonian force accumulation Sum every active force into one acceleration each frame, integrate into velocity and position, then clear acceleration for the next frame.
Noise-based terrain mesh Sampling 2D noise at every vertex of a triangle-strip grid and using the value as both height (z) and a colour ramp produces an interactive, orbit-able terrain-like mesh.
Noise-driven curve Feeding a slowly-increasing x-coordinate into p5's noise() function generates a smoothly-wandering y-value curve, unlike raw random() which jumps every sample.
Normalized UV grid iteration Nested loops that build a grid of points normalised to 0..1 (UV space) instead of raw pixel positions, guarded against a grid of size 1.
Off-screen PGraphics layer compositing Draw into one or more separate PGraphics surfaces bracketed by beginDraw()/endDraw(), then composite them onto the main window with image().
Oscillator phase-circle diagram Animating a point around a reference circle at the same frequency/phase as the sine curve it generates, connected by guide lines.
P3D lighting and camera control P3D's four light types (ambient/directional/spot/point) shade 3D geometry; camera()/perspective()/ortho() reposition the eye and switch projection modes.
Packet sniffing as a generative data source Run a packet sniffer against live LAN traffic and turn each observed sender/receiver IP address into a persistent, decaying visual node, so ambient network traffic becomes a nonrandom.
Particle system lifecycle An emitter spawns particles with a lifespan into an array each frame; each particle updates, fades and is removed once its lifespan is exhausted.
Path following Predict a vehicle's future position, find the nearest point on the path, and seek a target a little ahead of that point only if the vehicle has strayed too far.
PDF vector export (beginRecord/endRecord) Write a sketch's vector geometry directly to a PDF file, either by setting PDF as size()'s renderer for a headless render, or by bracketing on-screen drawing with beginRecord(PDF.
Pendulum motion A torque-driven angular restoring force (gravity times sine of the swing angle, divided by arm length) that produces a swinging pendulum independent of the bob's mass.
Per-letter animated typography Decompose a string into individually positioned, independently animated Letter objects instead of drawing it as one string.
Per-pixel image filtering Loop over every pixel of a loaded image, read its color, transform it, and write it back, to build custom image filters.
Perceptron The simplest neural network: weight each input, sum the weighted inputs plus a bias, pass the sum through a sign activation function.
Perlin Noise Flow Field Steer many particles along Perlin-noise-derived direction vectors sampled from a fixed grid, producing organic curved-line drawings.
Perlin noise walker Drive a position with p5's noise() function by continuously advancing a separate time-offset variable, then mapping the 0-1 output to the desired range.
Phyllotaxis Place each successive dot at a fixed golden-ratio-derived angle increment and an increasing radius, converting the resulting polar coordinate to Cartesian.
Pixel array 1D indexing formula Processing exposes the screen or an image's pixels as one flat 1D color array; the pixel at (x,y) is found by computing the offset x + y*width.
Pixel font (VLW format) Pre-render a font to a bitmap-per-character .vlw file with Processing's Create Font tool, then load it with loadFont() for fast, size-locked text on the P2D/P3D renderers.
Pixel Spinner Treat an image as nested square rings (like running-track lanes) and rotate the pixels of each ring by one position per frame.
Pixel-sampled point rendering Sample a location's color from a source image's pixel array and draw a shape there in that color, turning a bitmap into a lookup table for procedural marks.
Poisson-disc Sampling Distribute points across a canvas so they land randomly but never closer together than a minimum distance, using a background grid and an active-point list.
position-to-hue colour mapping Feeding spatial coordinates (mouse or grid position) directly into HSB hue/brightness arguments to get a continuous, walkable colour field.
probabilistic color palette Hand-picked color set where each color carries a selection probability, so shapes are colored by weighted random draw rather than a fixed rule.
PShape retained-mode geometry PShape stores a shape's geometry, and optionally its color, as a reusable object built once with createShape(), instead of re-issuing drawing calls every frame.
PVector vector arithmetic Packages a point's x,y(,z) into one PVector with add/sub/mult/div/mag/normalize methods, so motion code treats location and velocity as single vectors.
radial line fan Drawing a circle's silhouette as N straight lines radiating from its centre, rather than as a stroked arc, so resolution and thickness become tunable parameters.
Random Colors Loop over every pixel position and draw a point there with an independently-random RGB color, producing full-frame colour static.
Random walk Each frame, nudge a point's X and Y by a small random amount, letting it wander the canvas; the same technique can perturb color instead of position.
Random-to-order point interpolation Lerping every point's position between an independent random coordinate and its slot on a perfect circle, driven by one shared fader value.
Randomized repeat-motif grid poster Filling a randomly-sized grid with one repeated motif, then substituting one or two cells with a distinguished variant, recreating Paul Rand's Earth Day poster style.
Ray Marching Render a scene defined by signed distance functions by stepping camera rays forward by the SDF's own returned distance until they hit a surface or run out of steps.
Ray-cast hidden-line removal Determine which parts of a 3D scene's paths are visible from the camera by ray-testing each point for occlusion, then draw only unoccluded segments as 2D vector lines.
Reaction diffusion Simulate two diffusing, reacting chemicals across a 2D grid using the Gray-Scott model to grow organic Turing-pattern textures.
Rectangle Point Collision A point is inside a rectangle when it lies between the rectangle's left/right edges and between its top/bottom edges.
Rectangle Rectangle Collision Detection Two axis-aligned rectangles overlap when each pair of opposing edges interpenetrates on both axes simultaneously.
Recursive branch tree A function that draws one arc/branch then calls itself twice at half the radius from each end grows a fractal branch tree whose depth is just the recursion-stop level.
Recursive fractal tree (deterministic) A branch() function that draws a line, then recursively calls itself twice at a reduced length and a fixed +/- angle to build a tree.
Recursive function A function that calls itself, with a base/exit case, used to build self-similar fractal structures from a few lines of code.
rotating line brush A drag-to-draw tool that translates to the cursor, rotates by an accumulating angle each frame, and draws a single line outward — so consecutive strokes sweep around the pen tip.
Rule of Thirds Dividing the canvas into three equal bands (optionally with margins between and around them) to position content evenly instead of centering it.
Scrolling text ticker Slide a text string left across the window each frame and reset it off-screen-right once textWidth() confirms it has fully exited on the left.
Seamless noise loop Blend two time-shifted simplex-noise samples across a fixed duration so a noise-driven animation loops seamlessly for GIF/MP4 export.
seeded random layout regeneration Re-applying a stored random seed at the top of every draw() so a random layout redraws identically frame after frame, and drawing a fresh seed only on a user action.
Seek steering behavior An agent rotates its heading a fixed amount per frame toward the angle to a target point (nearest neighbor or the mouse), then moves forward along that heading.
Shared material store Cut per-instance render cost by looking up one cached material per colour from a store instead of creating a new material for every mesh instance.
shortest-path hue interpolation Temporarily switching colorMode to RGB before calling lerpColor makes a colour gradient take the direct path between two hues instead of the long way round the hue wheel.
Simple harmonic motion Map an ever-increasing angle through sin() or cos(), scaled by an amplitude, to get smooth back-and-forth oscillation with a controllable period.
Sine-cosine polygon construction Place a shape's vertices by holding the radius constant and stepping the angle evenly around a circle, then convert each point to Cartesian coordinates.
Sine-driven ping-pong loop Driving an animated value with Math.sin so it eases back to its starting point, either continuously in -1..1 or as a 0..1 ping-pong tied to a sketch's playhead/duration.
Snapping to an Edge After detecting a collision, set the moving object's position exactly flush against the surface it hit (rather than leaving it embedded or floating).
Software mirror (pixelated video-to-grid mapping) Capture live video at a deliberately low resolution matching a screen grid's cell count, then colour (or size) each grid cell from the corresponding low-res video pixel.
space colonization Grow a branching tree by having scattered attraction points pull the nearest branch tip toward themselves, spawning a new branch segment each iteration and removing points once they are reached.
Sphere packing for scatter placement Scatter many differently-sized 3D objects across a scene with no overlap by packing spheres of varying radii into a bounding cube and placing one object per sphere.
Spiral Sweep an angle through many small increments over multiple full turns while linearly increasing the radius, plotting cos/sin(angle)*radius each step to draw a spiral outward from the center.
Spring force (Hooke's law) A restoring force proportional to how far a spring's current length deviates from its rest length, pulling or pushing the bob back toward equilibrium.
Star polygon A star shape produced by the sine/cosine vertex loop while alternating the radius between a low and a high value at each vertex.
Steering force Reynolds's core steering formula: subtract an agent's current velocity from a desired velocity to get the force that nudges it toward that desire.
Stochastic fractal tree Randomizing each branch's angle (and optionally its branch count) so the tree's exact shape differs every run while keeping the same recursive structure.
stretched image grid tiling Drawing the same source image, stretched to fill each cell, across a grid whose cell count is itself an input parameter.
stroke cap for the lines to square Switch a flow-field line's stroke cap from round to square to introduce a rough, charcoal-pencil-like texture.
SVG dash-offset counter-scroll wave loop Make a scrolling SVG wave read as stationary by animating stroke-dashoffset in the opposite direction and at the same speed as the path's own translation.
Tetradic colour scheme A four-colour scheme with hues spaced evenly (90 degrees apart) around the colour circle.
Text along a curve Place each character of a string along a circular arc by converting accumulated arc length into an angle and rotating into position.
toroidal random walk A discrete 8-direction random walk whose position wraps back onto the opposite edge instead of stopping or clipping at the canvas boundary.
Translate-rotate-translate rotation Rotating a Canvas 2D shape about its own center by translating to the pivot, rotating the context, then offsetting by the shape's half-dimensions before drawing at the origin.
Triadic colour scheme A three-colour scheme with hues spaced evenly (120 degrees apart) around the colour circle.
turtle graphics Drive the plotter by issuing forward/turn/circle turtle commands that accumulate into a drawable path, rather than specifying coordinates directly.
Verlet integration An integration method that derives velocity implicitly from the difference between an object's current and previous position instead of storing a velocity variable.
Wave Function Collapse Procedurally generate a grid image by repeatedly collapsing the lowest-entropy cell to one compatible tile and propagating the resulting adjacency constraints outward.
Weighted Voronoi Stippling Relax a set of points toward each Voronoi cell's brightness-weighted centroid over several iterations so the final points read as a stipple drawing of the source image.
Wolfram CA Evolve a single row of binary cells generation by generation by looking up each cell's 3-cell neighbourhood in an 8-bit rule number to decide its next state.
Worms Grow a continuously-filled ribbon by advancing a head point along a slowly-turning heading, offsetting left/right edge points perpendicular to that heading.
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
2D dynamic clouds · 3D Julia set fractals · 3D orbit traps · Analytic checkers pattern filtering · APCA · Approximating the distance to implicits · area of a 3D polygon · area of general polygons · ASE colour palette export · Attractor-driven line advance · Averaging RGB Colors the Right Way · Better fog · bezier · Binary-search raycasting for SDFs · Biplanar mapping · blend · Box ambient occlusion · Budhabrot fractals · Bump-maps · Canvas/Denim Texture · Cellular Automata · Chaikin curves · Chaos Game · Circle and sphere intersection · Circle Packing Using Stochastic Search · Circumcircle and circumsphere construction · Clipping a polygonal facet with an arbitrary plane · clipping line to polygons · Cohen-Sutherland line clipping · Colors · Comet-tail particle trail · Computing the SDF of fractals · constant acceleration (trapezoidal velocity) motion planning · Contact shadow · Continuous iteration count · Converting PDFs and SVGs to High-Resolution Images · correctLightness · Creating a plane/disk perpendicular to a line segment · CSG (Constructive Solid Geometry) Operations · cubehelix · deltaE · Depth sorting by average Y position · determining inside/outside test · distance between points, lines and planes · Distributing Points on a Sphere · Domain Repetition · Domain warping · Dragon Curve · Environmental-maps (spherical and cube) · equidistant contour resampling · facet approximation to a sphere and cylinder · FBM · FBM detail in SDFs · Feedback effect · Flood-Fill Art Using Random Walks · Fractional brownian motion · Gift Wrapping Algorithm · golden ratio color generator · Gradient noise derivatives · IFS fractals · Image-Based Palettes Using k-Means Clustering · intersection of a line and a facet · Inverse bilinear interpolation · Iridescent material shader · Iterative plane-folding crystal SDF · k-means · Lifetime-driven saturation fade · Line-line intersection · lrgb · luminance · Lyapunov fractals · Mandelbulb fractal · Menger fractal · Mesh crumpling · modelling with spheres · Monochrome Color Schemes · Multires ambient occlusion · Noise-based vertex displacement · Normal-maps · Numerical normals for SDFs · Onset (Beat) Times · Outdoors lighting · Page-fit scaling and rotation · Parameter sweep · parametric curves on the GPU · Particle-spring soft-body skeleton · Patchwork · path drawing order optimization · Path-tracing in one hour · Patterns · Per vertex AO · Perpendicular stroke offset · Pingpong · Plane deformations · Popcorn images · Procedural orbit traps · pseudorandom parameter variation of a digitised reference composition · Radial burst particle launch · Ray Casting 2D · Ray-Surface intersection functions · Raymarching terrains · Reflect and refract · Removing from an ArrayList · Screen space ambient occlusion · SDF Bounding Volumes · Seamless Patterns · Shapes · Sigmoid functions · Simple color palettes · Simple global ilumination · Simple Stippling Using Circle Packing · Simple water · Smooth minimum for SDFs · Smooth voronoi · Smoothstep functions · Soft Shadows · Soft Shapes · Sphere ambient occlusion · splitting polygons · Super Blocks · Surface (polygon) simplification · Surface Relaxation and Smoothing of polygonal data · temperature · tests for clockwise and concavity · Texture repetition · The area of multiple intersecting circles · The Game of Life · The intersection of a line and a sphere · the intersection of a line with a plane · The intersection of two and three planes · Tile Stitching · Triangle Meshes (OBJ & STL) · Value noise derivatives · Value Sketches Using k-Means Clustering · varying the scale of the force · Vector-based Texturing · Voronoi edges · Voronoi effect · Voronoise · Water color · watercolor simulation · Xor operator for SDFs
Primitives 13
The ingredients techniques are built from
Amplitude-modulated oscillator Multiplying a low-frequency 'info' sine wave by a high-frequency 'carrier' sine wave produces a curve whose envelope traces the info signal.
dragon curve Recursive turtle-drawn fractal curve built by turning left or right at each step based on a bit trick on the step index; axi's canonical turtle example.
Gaussian distribution Random numbers clustered around a mean, most tightly within one standard deviation, exposed in p5 via randomGaussian(mean, sd) rather than derived from scratch.
Linear Interpolation Blending between a start and end value by a normalized parameter t — start*(1-t) + end*t — the foundational primitive behind most animation and range-mapping in creative code.
Lissajous curve Plotting x = sin(angle·freqX+phi) and y = sin(angle·freqY) against a shared swept angle traces the closed Lissajous figure whose loop count is set by the freqX:freqY ratio.
mapRange Remap a number from one numeric range to another via inverseLerp+lerp, exposed as canvas-sketch-util's mapRange helper.
Power ease-in-out curve A single exponent-controlled formula that produces a symmetric ease-in-out curve: raise the doubled first/second half of the input to a power g.
Quadtree Recursively subdivide a rectangular region into four quadrants once it holds too many points, so range queries and collision checks only touch nearby points instead of every point.
Reuleaux polygon Build a curvilinear, constant-width polygon by replacing each side of an odd-sided regular polygon with a circular arc centred on the opposite vertex.
Signed distance field A function that returns the shortest distance from any point in space to a shape's surface, negative inside and positive outside, used to define geometry without vertices.
simplex noise Sampling canvas-sketch-util's simplex noise at UV coordinates scaled by a frequency, with an amplitude multiplier, extended to a third argument (time) to animate it.
Vector normalization and limiting Reduce a vector to a unit direction by dividing by its magnitude, then rescale or clamp it to a working length.
Worley Noise Shade every pixel by its distance to the nearest of a set of scattered feature points, producing a cellular/organic tessellation pattern.
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
Circle packing · easing functions · Ellipsoid SDF · Hilbert Curve · k-means clustering · Matrices · Perlin noise · pipes · Poisson Disk Sampling · rounded boxes · Smooth Rounded Boxes · Uniforms
Concepts 7
Ideas that change how you work
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
1% of disorder · 3D SDFs · algorithmic authorship for copyright registration · Analogous colour scheme · Artificial intuition · bounded indeterminacy · CIELUV · CIEXYZ colour space · CMYK colour model · Conway · Curve of constant width · delegated execution · Elementarism · Eulers numbers · Figure and ground · Filterable procedurals · Filtering procedural textures · Fourier series · Genotype/phenotype separation · HCL · HSB vs. RYB · HSI · HSL colour model · idea as artwork · Interior SDFs · Lch · Machine Imaginaire · Monochrome colour scheme · Munsell Color System · Neoplasticism · Oklab · Oklch · Renderer choice (default/P2D/P3D/PDF) · RGB colour model · Shaping functions · sRGB colour space · Thinking with quaternions · Value/Tonal Keys · Wolfram classification of cellular automata
Works 3
Specific pieces, and the rules behind them
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
1% de désordre · Achsenparalleler Irrweg · Audiograph · Bellwoods · ComplexCity · Composition in Line · Computer Composition with Lines · Cover for Pierre Barbaud's La Musique Algorithmique · Dragon skin · Elevated · Ellsworth Kelly Animated · FOLIO · Gardinen · Gaussian-Quadratic · Ghost Planets · Hommage à Dürer · Infinite pipes · Kugel in der Kugel · Leaf Notes · LUMOS · Mashing Mesh · Meridian · Mikadospielhaufen / Falterschwarm · Ninety Parallel Sinusoids With Linearly Increasing Period · Painting with gradients · Pattern Language · Red and Blue Chair · Rietveld Schröder House · Schotter · Sierra · Some caterpillars evolve · Spuren von Bedeutung · Subscapes · The Sferic Project · Wayfinder
Artists 7
Practitioners and their methods
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
A. Michael Noll · Bart van der Leck · Ben Fry · Casey Reas · Gerrit Rietveld · Jen Lowe · John F. Simon Jr. · Manohar Vanga · Matt DesLauriers · Michael Fogleman · Sol LeWitt · Theo van Doesburg · Varun Vachhar
Tools 4
Libraries, languages and devices
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
axi · Box2D · chroma.js · Gcode Export · gifenc · Handy · lcms-wasm · ln · Matter.js · ml5.js · Molnart · nice-color-palettes · p5.js · png-tools · primitive · Processing · Processing.js · RESEAUTO · Toxiclibs.js · Wave Function Collapse (Coding Train implementation) · ZUSE Graphomat Z64
Movements 17 planned
Scenes, periods and schools
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
3N · De Stijl
Media 7 planned
Output forms and their constraints
HTML Canvas (Canvas2D) · Fragment shader · G-code · Pen plotter · SVG · WebGL · WebGPU
Texts 5
Books, papers and essays worth reading
Generative Computergraphik Georg Nees' 1969 doctoral dissertation at TH Stuttgart under Max Bense, described by ZKM's archival record as the first PhD thesis in the field of computer art.
Generative Design: Creative Coding for the Web The companion code repository for Bohnacker, Groß, Laub & Lazzeroni's book, republished chapter-by-chapter as runnable, copiously-commented p5.js sketches.
Programming Design Systems Free online book by Rune Madsen teaching graphic-design fundamentals (shape, colour, layout) through p5.js code.
Sentences on Conceptual Art Sol LeWitt's 1969 set of 35 numbered sentences arguing the idea, not the executed object, is the artwork, and that once decided the process must run mechanically to completion.
The Coding Train Daniel Shiffman's YouTube-led coding-challenge site: hundreds of paired video/GitHub/p5-editor lessons walking through specific generative-art algorithms.
Named by one source so far, so not yet written up — each becomes a page as soon
as a second independent source covers it.
Beginner's Guide to Creative Coding w/ Processing · De Stijl Manifesto I · Fifteen Ways to Draw a Line · Genetic Programming: Evolution of Mona Lisa · math-as-code · Neo-Plasticism in Pictorial Art · Pen Plotter Programming: The Basics · Seventy-Five Ways to Draw a Circle · The Book of Shaders · The Nature of Code
Prompts 1
Briefs to practise against