home/ modules/ shaders-and-gpu-visuals

Shaders and GPU-parallel visuals

L3Craft 6h H · Creative coding & live-coded visuals 7 atoms

Learning objectives

learner can explain the shader-as-pixel-color-function model and GPU massively-parallel execution
learner can write p5.js filter shaders that post-process the canvas via framebuffer textures
learner can work in normalised shader coordinate spaces and distribute results across RGB channels

Capstone — one whole task that evidences the objectives

Write a GPU post-processing shader pipeline: a p5.js filter shader that reads the canvas through a framebuffer and applies a per-pixel effect authored in a normalised coordinate space with RGB-channel distribution.

Prerequisite modules

In a live AV set, the moment your visuals need bloom, chromatic aberration, or audio-reactive distortion over the whole frame, CPU pixel loops die — at club resolution and 60fps, only the GPU keeps up. This module builds toward writing your own post-processing pipeline: a p5.js filter shader that treats the finished canvas as a texture and re-colors every pixel in parallel, the same machinery Hydra compiles your chains into behind the scenes.

The arc starts conceptually inside tools you already know from the prereq modules. First, internalise that a whole Hydra chain compiles to one GPU shader deciding every pixel’s color simultaneously — that mental model (“what color should this pixel be?”) is what you’ll be authoring directly. Then a supported first exercise: recreate a simple effect in Punctual, leaning on its normalised centre-origin coordinate space and on distributing a list of values across red, green, and blue channels — the exact coordinate and channel habits fragment shaders demand, in a forgiving live environment. From there, move to p5.js: use the filter-shader recipe (tex0, vTexCoord, gl_FragColor) as your JIT how-to for reading the canvas per-pixel, and the framebuffer-as-GPU-texture concept to understand why the canvas can be sampled without leaving the GPU. One convention to watch as you make that move: p5.js filter shaders hand you vTexCoord in a 0-to-1 range with the origin at a corner, whereas Punctual’s warm-up space runs -1 to 1 with (0,0) at the centre — the normalised-coordinate habit transfers, but the range and origin differ. The capstone is then unsupported: author the full pipeline yourself.

The five required atoms gate the capstone directly — without the parallel-execution model, the filter-shader mechanics, the framebuffer texture path, normalised coordinates, or RGB distribution, the pipeline either won’t run or won’t be authored idiomatically. Supporting atoms enrich by contrast: Processing’s CPU-side off-screen layers show what the GPU path replaces, and cables.gl shows the same WebGL machinery patched visually. Drill the tex0/vTexCoord skeleton until it’s automatic — it recurs in every filter shader you’ll ever write.