H · Creative coding & live-coded visuals

A peer sparring partner at a similar level sustains creative-coding motivation better than solo practice

Blender is a free, open-source 3D suite spanning modeling, animation, rendering, compositing, and scripting

Creative coding aims at expression, not function — code as an artistic medium

Generative art is always a collaboration between the artist and the autonomous system

Generative art requires an autonomous system and a degree of unpredictability

Hydra is a browser-based, JavaScript live-coding language for networked video-synth visuals

In creative coding courses the objective is art, but the medium is student-written software

p5.js carries Processing's accessibility goal to the browser as a visual-first creative-coding environment

Sharing work publicly early accelerates skill development through feedback and accountability

The choice of first programming language matters less than the transferable principles it teaches

The main obstacles to getting good are habits and mindset, not the code itself

The official Processing tutorials split into video links and leveled text lessons across four sibling platforms

TouchDesigner is a node-based visual platform for real-time interactive multimedia

Writing custom software enables artistic expression that commercial tools structurally prevent

A blend mode is a per-pixel formula that determines how two image layers combine into a composite result

A for loop repeats a code block under init, test, and update, turning one drawing procedure into a whole pattern

A Hydra array argument sequences values one per BPM cycle, not a smooth ramp or average

A Hydra chain without `.out()` builds a texture that is never rendered — no error, just black

A Hydra patch is a left-to-right chain of dot-joined functions, modeled on modular-synth cabling

Abstraction hides implementation details so programmers focus on what code does, not how

Additive (Linear Dodge) blend mode sums pixel values, producing glowing brightness that clips to white on overflow

Algorave is tool-agnostic: multiple live coding systems produce its music and visuals

cables.gl builds interactive WebGL scenes by connecting operator nodes with virtual cables in a browser-based patch editor

Complementary colors incite each other to maximum vividness when adjacent and annihilate each other to gray when mixed

Computer-generated randomness is always pseudo-random, not truly random

Contrast of hue uses undiluted colors in full intensity; yellow/red/blue is the maximum instance

Creative coding at intermediate level assumes fluency in loops, conditionals, arrays, and objects — not specific language knowledge

Creators need an immediate connection to what they are creating — any delay hides ideas

Developing creative coding craft requires deliberate repetitive practice analogous to a musician playing scales

Drawing with semi-transparent fill and no background clear lets shapes accumulate as a trace

Each Hydra save runs `hush()` then re-evals the whole file on the same GL context — frame buffers survive

Every Hydra patch runs source → geometry/color transforms → .out()

Every Punctual audio or video statement must end with an output operator or its result goes nowhere

Existing class instances in P5LIVE retain old methods after a softCompile; only newly-constructed instances get the updated code

Fine adjacent dots of pure color merge in the eye into a single optical mixture more vibrant than a pigment blend

Generative aesthetics occupy the sweet spot between order and chaos

GLSL swizzling reads or writes a vector's components in any order in one expression

Hydra buffer objects (`s0`, `o0`) are not chainable sources — they must be wrapped in `src(...)`

Hydra can use webcams, screen capture, video files, and images as source buffers alongside generated visuals

Hydra feedback with `src(o0)` blows out to white if the fed-back signal is added or scaled ≥ 1

Hydra FFT bins stay at 0 until a Strudel pattern is tagged `.analyze('hydra')`

Hydra functions fall into five categories: source, geometry, color, blending, and modulation

Hydra has four independent output buffers (o0–o3) that render separately and can be cross-mixed

Hydra models analog video synthesis: each function is a box that generates or transforms a signal

Hydra organises all its operations into five types: source, geometry, color, blend, and modulate

Hydra transform order matters — `.rotate().kaleid()` differs from `.kaleid().rotate()`

Hydra values are unclamped GL floats — pushing one parameter huge blows out or locks the GPU

Hydra's method-chaining API composes visual transforms as a pipeline from source to output

In a P5LIVE COCODING session the code syncs but each peer renders locally, so sketches depending on local mic/webcam/MIDI look different per machine

In Hydra, live/reactive values must be wrapped in a thunk `() => …` — bare values are baked at eval time

In P5LIVE with HY5 loaded, Hydra's noise() is aliased to noize() to avoid collision with p5's built-in noise()

In Punctual 0.5 osc is the sine oscillator and sin is the math sine function of its argument; old sin-as-oscillator code is wrong

In this rig, Hydra's `a` object is a 4-bin shim fed from Strudel, not the native mic FFT

Larry Tesler's modelessness principle — no person should be trapped in a mode — led to cut/copy/paste

Live coding languages are classified by target medium, host platform, and implementation language

Mapping sin(angle) to canvas y-coordinates draws a smooth periodic wave

Modulating the pulse width of a square wave produces chorusing and Doppler-shift timbral effects

Multiply blend mode darkens by multiplying per-channel values, giving white transparency and black full darkening

Neutral gray is achromatic and characterless but takes on a complementary tinge from any adjacent color

p5.js accepts colors as a grayscale number, an RGB triple, or a CSS color-name string

p5.js asset-loading functions (loadFont, loadImage) are asynchronous and must be called in preload() or given a callback to avoid undefined references

p5.js is a state machine where fill, stroke, and transform calls persist until overridden, so wrapping elements in push/pop prevents transform accumulation

p5.js map() rescales a value from one numeric range into another

p5.js sketches that load external files require a local web server to avoid cross-origin errors

p5.sound wraps the Web Audio API in a Processing-style interface for audio analysis and playback

p5's WEBGL renderer moves the origin to the canvas center and needs texture()/material before shapes show color

P5LIVE audio-reactivity has three incompatible sources (p5.sound, HY5, embedded Strudel) and none is the rig's 4-bin a.fft contract

P5LIVE runs p5 in global mode; instance-mode sketches (function sketch(p){}) must be rewritten before they work

P5LIVE sandbox and strudel regions must use matched open/close comment delimiters at top level, not inside functions

P5LIVE softCompile only replaces changed functions, leaving global-variable or setup edits to trigger a full hardCompile

Planning a generative artwork on paper before coding reduces debugging time and sharpens the visual intent

Processing provides point, line, rect, ellipse, and bezier as core drawing primitives

Processing requires explicit data types — int, float, and boolean serve different numeric purposes

Processing separates fill, stroke, and strokeWeight into independent state settings

Processing specifies colour as additive RGB values (0–255 per channel) with an optional alpha channel

Processing's if-else structures let programs branch based on relational expressions

Punctual edits quantize to the next cycle boundary with a short crossfade by default, so a change can take up to one cycle to land

Punctual feedback (fb) with gain at or above 1 blooms to white and requires re-evaluation to reset

Punctual is not wired into this livecoding rig — no file hot-reload, no 4-bin a.fft shim; run it at its own URL or in Estuary

Punctual's [...] list is combinatorial (channel-count product) while {...} is pairwise; using [...] where {...} is intended silently multiplies channels

Punctual's $ makes everything to its right the final argument while & is reverse application; confusing them silently reorders the graph

Punctual's cps is fixed at 0.5 when run standalone; it only reflects the ensemble tempo inside Estuary

Punctual's lo/mid/hi analyse the program's own audio output; ilo/imid/ihi analyse microphone input — reading lo with no audio output gives 0

Punctual's three arrow operators have distinct roles: >> routes to output, <> sets crossfade duration, and << is assignment (synonym for =)

Putting yourself in a feedback loop — doing, observing results, adjusting — is how artistic skill with a tool develops

Red-orange is the warmest color and blue-green the coldest, but intermediate hues shift warm or cold only relative to their neighbors

Saturation contrast — pure vs. diluted color — can be achieved by mixing with white, black, gray, or the complementary

Saving incremental versions frees generative artists to experiment boldly without fear

Screen blend mode lightens by inverting, multiplying, and inverting again — giving black transparency and white full brightening

setup() runs once and draw() runs every frame, forming the animation loop

The demoscene evolved from software cracker intro screens into an independent computer art subculture

The eye simultaneously generates the complementary of any color it sees

The first computer-generated gallery artworks (1965) used random number tables to position and style plotted marks

The Hydra rig shim exposes only 4 FFT bins — onset, tempo, RMS and spectral centroid do not exist

The Processing/p5.js canvas places the origin at the top-left with y increasing downward

The signal-flow model makes interconnection primary, unlike the canvas-drawing model of Processing

Twentieth-century avant-garde artists established chance operations as a critique of rational order

Using an audio-only function in a visual context (or vice versa) in Punctual silently returns 0 rather than an error

Weekly curation-and-critique of new-media projects builds a practitioner's reference library and critical vocabulary

Where a variable is declared determines its scope: outside functions is global, inside is local

3D geometry in p5.js needs a light source to convey shape and depth; ambient vs directional/point light differ

A 2D Perlin noise field can displace every point in a regular grid to create organic cloud-like structure

A blurred copy of the image added back via screen or add blend is a cheap bloom/glow effect

A class is a template; an instance is one concrete object created from that template

A clear base pulse must be established before it is broken — an unbroken pulse is static and an unbroken lack of pulse is formless

A color's expressive weight shifts with its position in the composition field — low blue is heavy, high blue is light

A complete visual design can be built from one hue using only lighter and darker variations in HSB

A cosine/gradient palette defines a whole color ramp from a few coefficients and animates it by shifting phase over time

A custom pow(sin(x),n) shaping function replaces noise() to give a smooth periodic radius variation with a distinctive character

A fixed set of self-imposed constraints (one font, one image, one palette) speeds generative iteration

A flat color placed between two parents reads as their mixture when it is a believable middle-ground in hue and lightness

A GLSL shader program splits into a vertex shader run per-vertex and a fragment shader run per-pixel

A light grain pass over the final composite is the most reliable 'make it look intentional' move — it unifies layers and hides banding

A near-monochrome ground with one saturated accent — letting contrast do the work, not hue variety — is the geometric palette recipe

A PerspectiveCamera's frustum determines exactly what is visible and what is clipped in three.js

A reactive Hydra parameter must be written as a () => … thunk — a bare expression is evaluated once at eval time and frozen

A reactive visual parameter that spends most of its time pinned at its min or max fails the sanity check and needs its base, gain, or scale retuned

A rising audio energy arc can be mapped to rising visual motion rate or scale so that both domains accelerate together during a build

A single 'energy' scalar driving multiple motion parameters makes the whole image rise and fall coherently

A slow warp of a simple texture is the richest single source of visual complexity — it beats a complex static texture

A strong focal point is created by contrast, isolation, or convergence — not by competing elements

A Strudel voice must be tagged `.analyze('hydra')` to contribute to the FFT — an untagged voice is inaudible to the visuals even if loud in the speakers

A tan() wave drives motion that shoots off-screen and returns from the opposite side, unlike a bounded sin() wave

A three.js Mesh is the combination of a Geometry (shape) and a Material (appearance) and nothing is drawn until both are combined

A vignette darkens frame edges to concentrate attention inward and give a generative field coherence

A visual pulse is amplitude-following, not beat-locked, and will drift from the musical grid

A whole Hydra chain compiles to one GPU shader that computes every pixel in parallel

a.bins gives Hydra's un-normalised FFT values and a.prevBins gives the previous frame's, enabling delta-based reactivity

a.fft is updated once per rendered frame at ~60 Hz — sub-frame transients are averaged away, making onset detection impossible

a.fft values are not clamped to 0–1 and can exceed 1 under normal use, so bounded visual parameters must be clamped in the sketch

a.setScale() and a.setCutoff() map FFT bin values to 0–1 via a noise gate and a ceiling threshold

a.setSmooth() prevents strobe artifacts by exponentially averaging consecutive FFT frames in Hydra

Adding Perlin noise to a spiral's radius each step produces organic, irregular loop shapes

Adding symmetry to a random grid triggers human pattern recognition and produces apparent faces or structures

Adjacent colors at exactly equal light intensity lose their visible boundary — the edge vanishes

All couplings requiring onset, tempo, beat-phase, or per-instrument signal share one root blocker and are not achievable with the 4-bin bridge

Ambiguous figure-ground — each region readable as either foreground or background — deepens the psychedelic effect

An Archimedean spiral is drawn by incrementing both angle and radius simultaneously in a loop

An effective poster pairs something recognizable with an unexpected presentation to hold the viewer

An exp-curve bass amplitude pump is the supported proxy for a kick-keyed visual sidechain, and it is not the same thing

An iterative random walk accumulates small random steps to produce an organic wandering line

An ofxFloatSlider added to an ofxPanel binds a live variable to a draggable GUI control

Anticipation is a preparatory move before a major action that primes the viewer's expectation

Any Hydra number parameter can be a function evaluated each frame, enabling gestural and data-driven control

Any Hydra parameter can be a function of time, enabling continuous animation without retyping code

Arranging colors exclusively in stripes suppresses shape dominance and foregrounds color interaction

Arrays in Processing store multiple values under one name, accessed by zero-based index

Audio can drive emphasis in a composition but cannot move focus on the beat in the current rig

Audio-reactive texture intensity (band amplitude to grain/warp) is realizable now; onset-triggered glitch bursts are not possible in this rig

Audio-reactive visuals extract DSP data from audio and map it to visual parameters

Audio-visual coherence requires agreement on energy, spectral balance, and section — reactive motion alone does not guarantee it

AV mapping transfer functions are almost always affine (linear) or squared-exponential — linear for continuous motion, exp for onset-ish pop

Bass should drive large, slow visual elements and highs should drive fine, fast detail for maximum AV coherence

Beat detection via amplitude threshold fires a visual event when RMS crosses a set level

beginShape/endShape with vertex() and bezierVertex() builds arbitrary polygons and smooth curves in p5.js

Blending a Hydra shape with its own output and then repeating it yields self-similar fractal structure

blendMode() controls how overlapping layers combine in p5.js (e.g. LIGHTEST keeps the brighter pixel)

Cellular automata generate emergent global patterns from cells that update on local neighbour rules

Classic fractal coloring maps iteration count or distance to a cycled multi-stop ramp with a dark base so bright filaments glow

Colored lights produce complementary-colored shadows, and multiple colored light sources create multiple hued shadows

colorMode(HSB) makes hue, saturation, and brightness independently controllable axes

Compose the big value masses and empty areas first; detail cannot rescue a frame whose masses don't read

Continuous slow zooming is the signature motion of fractal visuals — iteration count and zoom depth are the main expressive controls

Contrast of extension balances color areas by their luminosity: yellow needs three times less area than violet to hold equal visual weight

Contrasting hues of near-equal lightness produce uncomfortable vibrating boundary lines between them

CPU pixel manipulation reads and writes the raw RGBA array directly, unlike a per-pixel GPU shader

createFont() loads a font at a chosen size; loading it large keeps text crisp when scaled

Custom functions in Processing encapsulate reusable code blocks with parameters and return values

Darken Only and Lighten Only take the per-channel min and max of the two layers

Deconstructing a shape into steps enables naturalistic variance at each step

Degradation textures (grain, scanlines, chromatic-aberration, dither) place a piece in a glitch/retro-crt/vaporwave idiom; clean noise/voronoi signals organic

Depth is implied by overlap, scale, parallax, atmospheric fade, and blur-soften on layers

Difference blend mode subtracts layers and takes the absolute value, making matching areas black and differing areas bright

Digital sound synthesis chains unit generators — oscillators, envelopes, effects — in signal processing networks

Displacement-map is static structural coordinate offset; modulation-warp is its animated cousin driving continuous motion

Dissolve blend mode creates a grainy stochastic transition by randomly sampling pixels from each layer based on opacity

Divide blend mode divides the base by the top layer, so a darker top brightens the base and any colour over black becomes white

Dodge modes lighten and burn modes darken as mirror images: dodging equals burning the negative

Domain-warping noise with noise — feeding noise into modulation-warp — produces turbulent, liquid, marbled texture and is the richest cheap texture

Domain-warping noise with noise is the core organic visual move — turbulent, liquid, marbled

Drawing a semi-transparent black rectangle each frame creates a motion trail by gradual fade

Driving a shape's radius or count from audio is realizable now; making a shape appear on-the-kick is not

Driving several unrelated visual parameters from the same FFT band reads as everything-pumping-together mud — one band should map to one dominant target

Driving visual motion from band energy rather than Hydra's clock produces a tighter in-time feel because energy rises and falls with the groove

Each hue has characteristic psychological and symbolic expressive values that shift with context but retain a core identity

Easing moves a value toward a target by a fraction of the remaining distance each frame

EEVEE is Blender's real-time renderer that uses rasterization, trading physical accuracy for speed

Every three.js program is built from a Scene and Camera passed to a Renderer that draws them to a canvas

Every visual animation is a parameter driven by a function of time — the character of motion is entirely in that function

Extracting magic numbers into named variables makes a generative sketch explorable by tuning

FBM sums octaves at doubling frequency and halving amplitude — more octaves add finer natural detail across scales

Feedback gain near 1 causes runaway whiteout — leave headroom and decay each frame

Feeding an output buffer back as its own input makes tiny changes compound into emergent patterns

FFT decomposes audio into frequency bins that can be mapped to individual visual elements

Follow-through means secondary parts of an object continue moving after the main body stops

Fractal visuals have two build routes: domain repetition with raymarching for 3D lattices, or feedback zoom for a cheap 2D self-similar tunnel

frameCount % width produces seamlessly looping horizontal motion in p5.js

Generative Design organises its p5.js sketches as Principles (P) then Methods (M) then Applications (A)

Geometric motion should be restrained and mechanical-but-eased so the eye can follow every edge

Geometric visuals are built by combining one SDF shape with boolean operations, then imposing symmetry, then composing the frame

Geometric visuals are built on precision — outline-stroke shapes, high value-contrast, no noise, on a flat ground

Glitch motion is frantic and discontinuous — jumps, freezes, and strobe-flash accents rather than smooth transitions

Glitch palette is high-contrast and electric — black plus saturated green/magenta/cyan and white, with broken color from channel offset on-brand

Hard color boundaries read as spatial separation; soft boundaries signal proximity or penetration

Hard Light and Overlay are commuted versions of the same formula: Hard Light treats the blend layer as Overlay treats the base layer

Harmonious dyads, triads, tetrads, and hexads can be constructed by inscribing geometric figures in the 12-hue color circle

Hue/Saturation/Color/Luminosity blend modes swap perceptual dimensions between layers rather than mixing channel values

Hydra accepts a function in place of any numeric parameter, evaluated every frame

Hydra blend operations are per-pixel arithmetic on R, G, B values, not layer compositing

Hydra can embed multiple sources inline in one chain instead of routing each to a separate output

Hydra can use another browser tab or window as a live video source, then process it like any signal

Hydra color transforms multiply, shift, or key the RGBA channels of a texture

Hydra geometry transforms reposition, scale, or tile a texture without changing its colors

Hydra is a browser-based live coding environment for visual synthesis, enabling collaborative networked visual performance

Hydra models WebRTC browser streams as patchable modules, enabling live routing of video between remote peers

Hydra processes a webcam by initialising it into s0 and using it inside src()

Hydra reads only the browser's default microphone input, not desktop audio; DAW output requires virtual audio routing

Hydra shares sketches as links that reopen the editable code, building a traceable remix lineage

Hydra sources inside Estuary are chained with dot-notation and sent to outputs with .out()

Hydra visuals are built by chaining functions, and the order of the chain changes the output

Hydra's `a` object exposes real-time FFT bins so any parameter can be driven by an audio frequency band

Hydra's a.fft array holds per-bin amplitude values produced by FFT analysis of the microphone input

Hydra's a.onBeat() callback fires whenever a.vol crosses a configurable threshold

Hydra's a.setSmooth sets smoothing for all bands globally — to smooth one target differently, write a per-value lerp in the thunk

Hydra's blend family composites two sources by arithmetic on their pixel colors

Hydra's modulate() uses one texture's red/green channels as coordinate offsets to warp another

Hydra's six built-in source functions each generate a distinct base texture type

Hydra's speed global scales the global time variable that drives parameter animation

Immediate-mode 2D canvas redraws the whole frame each tick from explicit vector calls while retaining program state between frames

Immediate-mode canvas treats text as a first-class visual element and can convert glyph outlines to point clouds

In an open-architecture patch, objects are wired with cords carrying the video signal, and any break stops the output

In minimal compositions, value contrast (not hue) carries the image — any saturation becomes the accent

In minimal visuals, placement and timing are the content — there is nothing else to hide behind

In p5.js WEBGL mode the coordinate origin is at the canvas center, not the top-left

In the 4-bin rig, audio bands can drive color brightness, saturation, or palette phase but not onset-triggered color events

In the glitch style, digital degradation is the material — corruption, pixel-sorting, and RGB split are the primary tools, not side effects to avoid

In this rig, audio-reactive visual motion is envelope-following only — beat-locking and onset-triggering are not available

Keeping code and output permanently synchronized eliminates the mental model gap that causes creative blindness

Layer blend modes are non-destructive and dynamic; painting tool blend modes permanently alter pixels

lerpColor() over a for-loop of stacked lines builds a smooth gradient in p5.js

Limiting to 2–4 hues with role assignments reads as intent rather than randomness

Map the low-mid band to organic warp/flow depth so the field swells and eddies with the music's body

Mapping audio low-mid to fractal zoom rate or feedback gain risks runaway whiteout — keep gain in check

Mapping bass to feedback-trail zoom or symmetry scale makes the tunnel pulse with the low end

Mapping high-mid band to rotation speed or line thickness gives geometric visuals a crisp, articulate audio response

Mapping the highs band to glitch intensity makes corruption spike with hats and transients — the closest proxy to onset-triggered glitching

Mapping time to space allows designers of time-based systems to see their entire history at once

Minimal motion is a single well-timed easing-curve drift — one move is the whole event

mouseX, mouseY and pmouseX, pmouseY give current and previous cursor positions for interaction

Multiplying a single generative element by many instances reveals emergent system behavior

Music feedback-loop and visual feedback-trail are the same self-feedback mechanism — a signal fed back into itself with less-than-one gain — expressed in two domains

Natural motion follows arcs rather than straight lines, giving animation flow and biological authenticity

Negative space is a deliberate compositional choice, not a deficiency — emptiness amplifies the subject

Nested loops over a grid of tiles are the foundation of parametric tiling patterns in p5.js

Noise-field is coherent — nearby points are similar yet non-repeating — making it the foundational texture primitive for organic imagery

norm(), lerp(), and map() convert and interpolate values between numeric ranges

ofImage loads and draws image files with a two-call setup/draw pattern

ofImage.grabScreen() captures the current frame to a PNG in bin/data

ofSoundPlayer loads and plays a sound file from bin/data with load() then play()

One coherent noise source well-warped beats many uncorrelated textures fighting — texture should support form, not compete with the focal-point

One or two motions at a time — a still figure on a flowing ground reads far better than everything moving

Opaque flat colors can create a convincing illusion of transparency when precisely calibrated as a middle mixture

openFrameworks addons are added via projectGenerator or an addons.make file

Organic geometry builds natural-looking forms from strictly geometric primitives

Organic palettes use analogous color harmony — neighboring hues with low contrast and smooth gradients

Overlay blends Multiply and Screen conditionally on the base layer: darks get darker, lights get lighter, midtones are unaffected

Overt audio-reactivity breaks the stillness of a minimal visual — subtle smoothed bass or no reactivity at all

p5.FFT provides both frequency-domain analyze() and time-domain waveform() readings

P5LIVE is not part of the 4-bin Strudel+Hydra rig — a.fft[] does not exist in P5 and must never be emitted there

P5LIVE realizes particle systems with real per-element p5.Vector state, making the concept portable from GLSL-fake to genuinely simulated

Perlin noise produces smooth, continuous pseudo-random values, unlike the erratic jumps of raw random()

Physics simulation models position with velocity plus acceleration, where each value updates the next

Pinning a free-running audio tremolo and a visual brightness-pulse to the same rate value makes them move in lockstep without a shared transport

Pixel art as a discipline developed within the demoscene alongside the related artscene subculture

Pixel mapping replaces each pixel of a source image with a drawn element sized or coloured by that pixel's value

Placing focal elements on the thirds lines or intersections reads as dynamic; centering reads as static

Points on a circle's circumference are computed from center, radius, and angle using sin/cos

Polar coordinates (r, angle) map to Cartesian (x, y) as x = cx + r*cos(a), y = cy + r*sin(a)

Polar warp reinterprets Cartesian coordinates as (radius, angle), turning stripes into rings and scrolling into rotation

Polar-warp plus radial-symmetry forms the mandala/kaleidoscope skeleton of a psychedelic visual

Processing classes bundle related fields and methods into reusable, instantiable objects

Processing displays text using pre-converted VLW bitmap fonts loaded with loadFont() and textFont()

Processing event functions like mousePressed() interrupt draw() cleanly, running once per event

Processing keyboard events use keyPressed and key variables, with keyCode for special keys

Processing maintains drawing style state until explicitly changed

Processing's beginShape/endShape with bezierVertex() enables smooth custom vector paths

Processing's PGraphics is an independent off-screen drawing layer with its own coordinate system and settings

Processing's setup() runs once and draw() repeats each frame to create animation

Psychedelic palettes are highly saturated complementary/triadic hues always in motion via palette-cycle — color must never settle

Punctual runs audio and visuals in one program, eliminating the need for an external AV bridge — audio reacts to its own sound natively

Punctual uses a normalised -1 to 1 coordinate space with (0,0) at the centre of the screen

Punctual uses the same signal notation for audio and visuals, routed by the >> target

push() and pop() isolate transformations so they do not accumulate globally in p5.js

Raising a uniform random value to a power skews its distribution toward one end of its range

random() produces uniform random values while noise() produces smooth correlated pseudo-random values

randomSeed() makes a p5.js sketch's random output deterministic so results can be saved, shared, and re-created

Reading a.fft[4] or higher returns undefined, causing NaN arithmetic and a frozen or black Hydra frame

Recording performed gestures as animation data creates more natural motion than keyframing

Recursive functions in Processing call themselves to generate self-similar, branching forms

Recursive grid subdivision generates fractal-like layouts by splitting cells into sub-grids

Regular or varied spacing of repeated visual units creates rhythm across the frame even in a still image

Rendering a looping animation to video: save each frame and call exit() at a target frameCount

Reserve raymarched 3D for when depth adds meaning; a flat SDF composition is often stronger

RGB is a poor space for color reasoning because interpolation muddies through gray

rotate() and scale() in Processing transform geometry in local coordinate space, not screen space

Rotating a diameter chord around a circle while varying its length by noise produces a wave-clock pattern

Routing the highs band to kaleidoscope symmetry count produces a coherent coupling — fast bright content increases visual complexity

Sampling an image's pixels and sorting the resulting colours by hue, saturation, or brightness extracts its palette

saveFrame() exports sequential still images that can be assembled into video

SDFs and immediate-mode drawing are two distinct shape paradigms: field-based vs path-based

Section-level visual intensity must be edited to match the music arrangement because no section signal crosses the AV bridge

Semi-transparent marks accumulate in visual density where shapes overlap most

Shadertoy and Three.js trace their origins directly to demoscene real-time graphics practice

Showing concrete runtime values alongside abstract code eliminates the need to mentally simulate execution

sin() and cos() convert angles to unit-circle coordinates, enabling circular motion and oscillation

Size-restricted intros (64K and 4K) force procedural generation over raw data storage

Slow in and slow out — more frames near key poses and fewer in the middle — creates natural easing

Soft Light is a gentler Overlay where pure black or white inputs do not produce pure black or white outputs

Sound reaches Hydra through exactly one path: a 4-element FFT array filled from Strudel's Web-Audio analyser — no MIDI, OSC, or per-instrument bus exists

Spout (Windows) and Syphon (macOS) share live video between applications on one machine

Squaring a band value produces a soft onset-ish punch that pops on loud hits without requiring true onset detection

Squash and stretch give animated objects the illusion of weight and volume

Staging presents an idea so that it reads clearly to the audience

Strobe/flash is a high-impact accent that must be used sparingly because of photosensitivity risk, never as a default

Strudel and Hydra have no shared clock — Hydra's bpm and Strudel's transport are independent and will drift

Symmetry (reflection, radial, tiling) turns a small motif into a full frame at minimal cost

Syphon (Mac) and Spout (Windows) share live video streams between apps as VPT sources or outputs

Tempo-locked visual changes are not achievable in this rig because the bridge exposes only FFT energy with no beat-phase or onset

The 10-PRINT Commodore 64 one-liner generates complex maze-like patterns from a single coin-flip per character cell

The 4-bin layout is the shared surface between music frequency-budgeting and visual spectral-band-split: a well-budgeted mix yields a legible band-split visual for free

The area and recurrence (quantity) of a color determines its visual dominance independently of its hue

The AV shim exposes four per-band tuning controls — setScale, setCutoff, setSmooth, setBins — that adjust how a.fft responds without changing the sketch

The base term in a mapping transfer function is the visual floor at silence — it must produce an intentional frame when a.fft is zero

The Nature of Code is a 12-chapter, 67-video p5.js track on simulating natural systems in code

The seed mapping uses bass for brightness, high-mid for rotation speed, and low-mid for warp depth — three of four bands are assigned, highs are unused

The sine function produces smooth repeating variance usable as a custom noise alternative

The three primary colors correspond to the three fundamental shapes: yellow to triangle, red to square, blue to circle

The three.js scene graph is a hierarchy where child object transforms are always relative to their parent

There are exactly 17 distinct symmetry groups for periodically tiling the plane

Timing in animation is controlled by the number of frames between poses: more frames = slower, fewer = faster

TouchDesigner organises every node into six operator families named by data type: TOPs, CHOPs, SOPs, MATs, DATs, COMPs

translate() and rotate() transform the drawing origin; pushMatrix/popMatrix save and restore it

translate() shifts Processing's coordinate origin, and pushMatrix/popMatrix save and restore transform state

Two near-frequency spatial oscillators beating against each other produce moire shimmer interference

Two-dimensional arrays in Processing store grid data as arrays of arrays

Value contrast (light vs dark) is the strongest visual cue, outranking saturation and hue

Vector PDF output preserves resolution at any scale while raster output has fixed pixel resolution

Video feedback pointing a camera at its own output produces self-similar, fractal-like patterns from simple recursion

Visual balance distributes visual weight so symmetric reads as stable and asymmetric as dynamic

Visual phrasing groups change into statement-variation-return arcs so the image has structure rather than uniform churn

Visualizing live voltage and current data directly on a circuit diagram eliminates mental simulation in electronics

Voronoi cell look varies between distance-to-nearest-point and distance-to-second-nearest — each gives a distinct aesthetic

Warm colors advance and cold colors recede, but this depth effect reverses depending on the background

Warm hues advance and feel active; cool hues recede and feel calm

When no clock signal crosses the audio-visual bridge, the performer matches visual phrase length to musical phrases by feel and manual edit timing

Wiring a sensor to an actuator with a straight or crossed connection produces approach or avoidance behavior

2D Perlin noise maps x,y coordinates to smooth organic texture fields

A camera-screen feedback loop is a physical system that iterates a differential equation

A driver computes a property's value from other properties via a function or Python expression

A Hydra sketch with no .out() is guaranteed blank, so .out() presence is the [NOW] proxy for a black-frame check

A Hydra sketch with no time or reactive term is static by construction, the [NOW] proxy for a frozen-frame check

A p5.js filter shader reads the canvas via tex0 and vTexCoord to apply per-pixel post-processing

A performer's live audio plus tracked position can drive visuals anchored to their body in real time

A small random deviation prevents emergent systems from collapsing into a uniform state

Abstract AV visuals create a utopian space by giving entities behaviors that defy physics — metamorphosis, merging, spawning

An agent without the L3 perception bridge must not claim to have evaluated perceived audio or visual output

An audio ADSR envelope and a visual physics simulation share the same integrate-over-time structure — both accumulate an impulse into a changing state

An RGB Matrix function projects patterns and text onto a grid of RGB fixture heads, scriptable in JavaScript

Any numeric parameter in Hydra can be replaced with a function, enabling audio or MIDI to modulate visual parameters

Appeal is the charm and charisma that makes an animated subject engaging to watch

Braitenberg Vehicles show lifelike behaviour emerging from direct sensor-to-motor coupling

cables.gl operators are programmable in JavaScript with typed ports, extending the patch beyond the built-in op library

Cellular automata with continuous state values (0–255) produce fluid wave-like patterns

Chance operations use randomness as a deliberate artistic tool, not as an absence of control

CineCer0 live-codes video, image, and text as composable function chains in the browser

CineCer0's natural/every/round/chop functions align video playback to Estuary's cycle grid

CineCer0's ramp function linearly interpolates a style parameter over a given number of cycles

Circle packing fills a region by growing circles until they touch, then freezing each on collision

Circle-circle collision is detected by comparing center distance to sum of radii

Connecting nodes with springs that pull toward a rest length produces force-directed layouts and elastic motion

Conway's Game of Life produces biological patterns from two simple rules about neighbor count

Cross-dissolving two layers per pixel with lerpColor() and a coordinate-dependent wave makes non-uniform wave transitions

Defining a small set of behavioral rules for elements produces emergent visual complexity through their interactions

Diffusion-limited aggregation grows organic dendritic clusters by snapping each new particle onto the nearest existing one

Digital physics simulations (rigid body, fluid, cloth) are effective for interactive installations because humans are calibrated to physics-based motion

Effective chance in art is never blind — it is planned, constrained, and then surprising within those constraints

Emergence is complex organized behavior arising from many simple local interactions

Envelope following maps smoothed audio amplitude over time to continuously control visual parameters

Every evaluation heuristic is either a static [NOW] check or a [L3] check blocked on a perception bridge that does not yet exist

Exaggeration pushes an action beyond the literal while staying true to reality

Feeding the previous frame back with an FFT-driven amount makes visual trails grow with the audio build

Fractals are shapes that exhibit self-similar structure across multiple scales

Frame differencing detects motion by comparing pixel values between consecutive video frames

Geometry Nodes builds geometry procedurally as a node tree flowing from Group Input to Group Output

Gibber maps audio objects directly to visual properties using bias and scalar for range control

Hydra can use other browser windows as live video sources via WebRTC peer-to-peer streaming

Hydra modulate functions use one source's colors to warp another source's geometry

Hydra video feedback is created by routing output into a named buffer and reading that buffer back

Hydra's loadScript() imports arbitrary JavaScript libraries (Three.js, Tone.js, p5.js) into the live editor

Image convolution applies a kernel matrix to each pixel's neighbourhood to produce blur and sharpen filters

In live cinema, software is used as a real-time instrument for expression, not as a tool to produce a finished product

In this livecoding rig a file save is the performance action: Strudel hot-swaps gaplessly and Hydra re-evals on the same GL context

Kinetic typography treats letterforms as visual elements that move, scale, and respond to input

Langton's Ant produces ordered structure from two purely local per-step rules

Linear Light combines Linear Dodge and Linear Burn and simplifies to base + 2·top − 1, decreasing contrast

Lissajous figures are closed curves traced by combining two perpendicular sinusoids at integer frequency ratios

Live coding's real-time loop between coder and machine is itself a creative method, not just a format

Logarithmic and 1/3-octave FFT scaling match frequency display to human pitch perception

Many self-timed audio voices and many self-timed visual agents are the same concurrent-agents structure expressed in two domains

Mapping source brightness to tile size rasterizes an image into a halftone-like grid where dark areas make smaller tiles

Node-and-wire diagrams are not just tools but a diagrammatic aesthetic that restructures how an artist perceives and generates form

Nodes that mutually repel each other self-organise into an even spatial distribution without explicit placement logic

p5.Framebuffer is an off-screen GPU surface you can draw to and then reuse as a texture

Parameterising phase offset across objects produces overlapping-action animation generatively without per-object keyframing

Parameterized randomness lets artists control how much chance enters a system via explicit ranges

Perlin noise mapped to angles at each grid cell creates a smooth flow field that steers particles or arrows organically

Points on a sphere's surface are computed from two angles using nested sin and cos

Pre-rendered audio analysis APIs supply timestamped beats and pitch for offline sync

Processing class inheritance lets subclasses extend and override their parent's behaviour

Processing communicates with hardware boards over USB serial to read sensors and send control signals

Processing supports 3D via P3D and OPENGL renderers, specified as a third size() argument

Processing's blend() and filter() apply compositing modes and pixel filters to images

Processing's pixels[] array gives direct read-write access to every pixel of the display window

Providing a list of values to a Punctual shape distributes results across red, green, and blue channels

QLC+ RGB Scripts are self-executing JavaScript objects implementing rgbMapStepCount and rgbMap functions

Ramping brightness down and blending toward a solid empties the canvas gracefully instead of a hard hush cut

Realistic flocking simulation requires only three local rules: separation, alignment, cohesion

Recursive draw functions produce fractal branching structures where each call draws one branch and spawns smaller sub-branches

Recursive fractal structures are coded as objects that instantiate child copies of themselves

Robust beat detection uses a decaying cutoff plus a hold window to debounce triggers

Secondary action is an additional motion that reinforces and adds dimension to the main action

Separating treemap layout calculation from rendering makes the algorithm reusable across any graphics library

Shadertoy fragment shaders run in three.js on a fullscreen quad by mapping iTime and iResolution uniforms into the render loop

Simultaneous contrast can be neutralized by adding the missing complementary explicitly, or by introducing light-dark contrast between the hues

Solid drawing treats forms as three-dimensional objects with volume and weight

Sparse, particle-based audio produces more event-legible visualisations than dense continuous music

Stepping kaleidoscope symmetry up on a downbeat gives a visual drop paired with an audio peak

Swapping the FFT index driving a visual parameter aligns the visual energy with the new section's audio driver

The color occupying the larger area in a composition acts as background; the smaller area advances — and these roles can reverse as area proportions shift

The expressive meaning of each color is the complement of its complementary's meaning — mixed colors inherit blended meanings

The eye spontaneously groups scattered same-color areas into a visible shape — these 'simultaneous patterns' are independent organizational elements in composition

The ofxAssimpModelLoader addon loads and draws 3D model files in openFrameworks

The overarching taste check compares each intended intent-vector field against a perceived estimate within tolerance

The squarified treemap algorithm keeps each cell near-square by filling rows until adding the next item would worsen the aspect ratio

The strongest section changes fire an audio and a visual transition on the same downbeat

Three.js AnimationMixer plays and blends AnimationClips on a 3D object by being updated each frame with a delta time

Three.js post-processing chains render passes through an EffectComposer that processes them in order of addition

Toggling a color inversion or hard posterize on the drop downbeat is a single-frame visual hit

Treemap boxes can be styled with callback functions that receive value and index, enabling data-driven colour

Tying scroll or scale speed to a rising FFT band accelerates the visual motion through a build

Varying the initial spatial distribution of agents changes the global form that emerges from identical local rules

Vivid Light combines Color Dodge and Color Burn around middle grey, increasing perceived contrast

Estuary is a zero-install browser platform for collaborative live coding in networked ensembles

Exposing the underlying algorithm of canonical 20th-century artworks reveals shared generative logic across art history

Humans acting unconsciously in a system can serve as autonomous generative agents

Live AV systems range from fully autonomous algorithmic performance to semi-autonomous systems guided from a higher level

Texture uses Euclidean distance to automatically wire typed values to functions, making visuospatial layout syntactically significant

A bounded self-analysing drone with non-zero-base colour and a short crossfade is the safe Punctual recovery program

A failed P5LIVE compile leaves the last good frame visible rather than blanking the canvas

A Hydra chain rendered to o1..o3 stays invisible unless that buffer is selected with render()

A minimal cleared-and-isolated setup()/draw() skeleton is the safe P5LIVE recovery sketch because it avoids every common failure at once

A P5LIVE edit that won't take effect is usually a recompile-scope issue — class-method or global-state edits do not hot-swap live instances

A Punctual parse or compile error leaves the previous working program running rather than tearing it down

An unbounded loop or heavy per-frame work freezes the P5LIVE tab because p5 runs single-threaded on the main thread

Array arguments in Hydra step at the global bpm rather than animating smoothly

background() must be the first call in p5.js draw() to clear each frame; placing it after shapes wipes them

Every Hydra chain must end with .out() or .out(oN) to be visible on the canvas

Hydra errors either throw to the #err element or silently render a black/frozen/blown-out canvas

Hydra feedback with too much gain causes whiteout; add decay terms or reduce feedback amount

Hydra reactive values must be wrapped in () => thunks; bare expressions are evaluated once at boot

Hydra's audio FFT array has exactly 4 bands (indices 0..3); reading index 4 or higher produces NaN

Many p5.js bugs produce no exception and manifest only as wrong canvas output

Most Punctual bugs produce no error — a wrong-domain function silently returns 0 and missing >> yields no output

p5.js claims the name noise() so Hydra's noise function must be called noize() inside P5LIVE

P5LIVE has three distinct audio reactivity sources and no automatic 4-bin a.fft rig bridge

Punctual 0.5 removed the 0.4 output operators >> video, >> hsv, >> red, and >> left; old code silently fails or parse-errors

Punctual changes take effect at the next cycle boundary by default — use <> 0 for near-immediate switching

Punctual has no coherent noise, voronoi, kaleidoscope, or pointer primitive — these must be faked with available functions

Punctual uses three distinct arrows: << (define), >> (output), and <> (crossfade) — mixing them causes errors or wrong behavior

Punctual's lo/mid/hi analyse the program's own audio output — they are zero if no audio statement is running

Square brackets in Punctual create combinatorial expansion — use curly braces or colon-ops for pairwise behavior

Strudel voices must call .analyze('hydra') for audio data to reach Hydra's a.fft array

The Hydra panic default is a bounded, reactive osc sketch with non-zero base terms and clamped FFT reads

Transforms in p5.js draw() must be enclosed in push()/pop() or they accumulate across every frame

WEBGL mode in p5.js centers the origin and requires texture() for color, silently breaking 2D assumptions