Live Visualist — zero to performing live-coded & generative visuals

This path is for anyone who has never written a line of graphics code and wants to arrive at a single, unambiguous destination: performing a live-coded visual set — generative, audio-reactive, shaped in real time from a blank canvas — for an actual audience, streamed or projected.

The arc runs in four segments, each ending with a whole, shareable task rather than an exercise.

The first segment, “See & sketch,” trains the eye before touching the canvas. You begin with two orientation modules — one grounding you in visual foundations as a practice (keeping a colour notebook, sketching before coding), the other in the rationale for coding visuals at all. The compulsory visual-theory modules that follow — Point and Line as Pictorial Elements, Reading and Grouping with Gestalt Perception, and Training the Eye: color relativity and interaction — are not decorative; they are the difference between assembling shapes accidentally and composing intentionally. The segment closes with your first running p5.js sketch.

The second segment, “Generative canvas,” builds the toolkit that makes those compositional instincts executable in code. Colour moves from theory (Itten’s contrasts, numeric encoding) into generation (HSB palettes). Motion moves from the 12 principles of animation through eased transforms into Perlin noise fields. The segment culminates with Hydra: live-coding video-synth visuals, where you perform-code your first live visual patch — shareable as a remixable link.

The third segment, “Reactive & procedural,” is where the visuals start listening. You wire audio analysis (loudness, spectrum, beat) through to visual parameters, build full audio-reactive Hydra patches with feedback and WebRTC sources, then earn the GPU: from the orientation “the fragment shader as a per-pixel color function” through animated procedural patterns to the full Shaders and GPU-parallel visuals pipeline. The segment ends with Synthesizing Form, Color, and Line into a Personal Visual Language — bringing the Bauhaus theory and the GPU craft into a single authored voice.

The fourth and final segment, “Perform the set,” removes the training wheels. Beat detection, generative A/V mapping, and optionally physics-based agent systems deepen the reactive vocabulary. The required capstone is Performing live-coded visuals: Estuary, CineCer0, and cycle-sync — a timed live set in a collaborative browser environment. Streaming Your First Set with OBS closes the loop to a real audience.

The path deliberately skips music production and composition — there is no synthesis, no sound design, no groove-making here; those live in the live-coder path (Tidal/Strudel/SuperCollider). It skips deep hardware signal chains, projection mapping, and large-venue LED/DMX rigs — those belong to the vj path. It skips the full AI/diffusion visual stack beyond a single orientation module, which hands off to the AI-AV path (ComfyUI/Deforum/StreamDiffusion).

The only assumed prerequisite backs just two optional culture modules (algorave and demoscene history); general cultural background on computer music lineage is useful but non-blocking. All intra-path dependencies are included and ordered. If you are deciding: if you want to make music, start with the live-coder path first, then return here for the visual layer.