One concept per short video, from "what is a pixel shader" to research papers. The Essentials pack comes first: the 28 ideas that most shaders and most Playfield graphs are built from. Each video lists what it covers, the real Playfield nodes it uses, a small thing to build, and which earlier videos it needs.
Shape, colour, space, time, noise, then inputs and feedback. Someone who finishes these can rebuild most classic 2D shaders and most Playfield examples.
Understand that one small function runs for every pixel at once and returns a colour.
Needs: none.
Read and reshape the coordinate every pixel receives.
Needs: E1.
Be comfortable with float/vec2/vec3 and moving components around.
Needs: E2.
Turn a smooth value into a hard or soft edge on purpose.
Needs: E3.
Control how a 0–1 value grows.
Needs: E4.
See a circle as "distance from a point compared to a radius".
Needs: E4.
Understand an SDF as a field (negative inside, zero on the edge, positive outside) and why that is powerful.
Needs: E6.
Know the common 2D SDFs and how to place them.
Needs: E7.
Build complex shapes from simple ones with min and max.
Needs: E8.
Use one value to decide where another appears.
Needs: E9.
Blend colours and layers deliberately.
Needs: E10.
Pick and blend colours in the right space.
Needs: E11.
Map any 0–1 value to rich colour with four vec3 parameters.
Needs: E12.
Make things move with time.
Needs: E6.
Make periodic patterns from sin and fract.
Needs: E13, E14.
Move the space, not the shape.
Needs: E8, E14.
Draw once and repeat infinitely.
Needs: E16.
Think in angle and radius.
Needs: E17.
Fold space to get symmetry for free.
Needs: E18.
Get deterministic "random" numbers from coordinates.
Needs: E17.
Understand smooth noise as interpolated randomness.
Needs: E20.
Stack octaves to get natural detail.
Needs: E21.
Feed noise into the coordinates of noise.
Needs: E22, E13.
Make cells, cracks and organic tilings.
Needs: E21.
Bring outside pixels in and treat them like any other field.
Needs: E10, E23.
Let a shader remember: read last frame, change it slightly, write it back.
Needs: E16, E25.
Finish a look with standard image passes.
Needs: E26.
Drive any parameter from the outside world.
Needs: E14, E26.
Writing GLSL inline, antialiasing, groups and loops, fractals, then passes and the first simulations: ping-pong buffers, Life, reaction-diffusion, particles.
| # | Title | Goal | Covers | Nodes | Build it | Prereq |
|---|---|---|---|---|---|---|
| I1 | Expression Blocks: writing GLSL inline | Drop to code when nodes get clumsy | inputs/outputs, types, comments, when to group instead | Expression Block, Custom Function | Rewrite E18's flower as one block | E28 |
| I2 | Antialiasing with derivatives | Crisp edges at any zoom | fwidth/dFdx, pixel-width smoothstep, why stripes shimmer | Smoothstep, AA Smooth, Expression Block | Zoom-proof checkerboard | E15, I1 |
| I3 | Groups and reusable tools | Package graphs as nodes | typed group sockets, exposed sliders, presets | Group | Make a "neon SDF" group used three times | E27 |
| I4 | Loops in a graph | Repeat a step N times | For Loop, Loop Carry, accumulating colour, cost per iteration | For Loop, Loop Index, Loop Carry, Accumulate Loop | 30 rotating rings accumulated into a tunnel | I1 |
| I5 | Escape-time fractals | Mandelbrot/Julia as iteration | complex multiply, escape radius, smooth iteration count, orbit traps | Mandelbrot / Julia, Complex Mul, Newton Fractal | Julia set driven by the mouse | I4, E13 |
| I6 | Folding and IFS fractals | Fractals by repeated fold, scale and offset | abs-fold, sphere inversion, Apollonian | IFS Fractal, Spherical Fold Fractal, Apollonian Gasket, Circle Inversion | Kaleidoscopic IFS snowflake | E19, I4 |
| I7 | Truchet, hex and non-square tilings | Tile beyond squares | Truchet random rotation, hex grids, staggered rows | Truchet Tiles, Grid Pattern, Hyperbolic Space | Endless maze from Truchet arcs | E17, E20 |
| I8 | Distortion spaces | Bend images with known maps | lens/barrel, fisheye, log-polar (Droste), Möbius | Lens Distortion, Spherical / Fisheye, Log-Polar Space, Möbius Transform | Droste zoom of a photo | E18, E25 |
| I9 | Flow and vector fields | Treat a vec2 field as motion | curl noise, flow direction, advecting UV | Flow Field, Curl noise, Vector Field, Flow | Ink streaks following curl noise | E23, E26 |
| I10 | 2D lighting with SDFs | Light flat scenes | point light falloff, normals from gradients, shadows by marching in 2D | Point Light 2D, Distance Falloff, Normal to Color | Lamp lighting a 2D scene of shapes | E9 |
| I11 | Passes: rendering to a texture | Understand render targets | Pass node, resolution and format, reading a pass in another graph | Pass, Pass output, Read (texture) | Blur a scene once, reuse it twice | E27 |
| I12 | Ping-pong buffers | State that evolves every frame | two targets that swap; float formats; resets | Pass (feedback), Memory step/read, Previous Frame | A heat map that diffuses each frame | I11 |
| I13 | Neighbour reads and convolution | Kernels: blur, edge and Laplacian | 3×3 kernels, texel size, separable blur | Read neighbours (texture), Neighbours, Edges (texture), Sharpen | Sobel edge detector over webcam | I12 |
| I14 | Game of Life and Life-like rules | Discrete cellular automata | birth/survival rules, B3/S23 notation, seeding | Grid Rules, Grid Paint | Paintable Life with a rule picker | I13 |
| I15 | Reaction-diffusion (Gray–Scott) | Continuous chemical patterns | two chemicals, Laplacian, feed/kill map, colouring | Gray-Scott step, Reaction-diffusion example, Grid Rules | Coral that grows from your brush | I14 |
| I16 | Memory and signal nodes | Values that persist on the CPU side | integrate, sample & hold, counters, springs, timers | Memory, Counter, Integrate, Sample & Hold, Timer, Spring | Bouncing ball with real velocity | E28 |
| I17 | Audio analysis done right | Beat-aware visuals | FFT bins and log bands, smoothing, onset detection, dB | Audio Input, Analyze, Envelope (ADSR), BPM Sync | A spectrum ring plus kick-triggered flash | E28, I16 |
| I18 | Particles | Many points with position and velocity | emit, age/life, forces, drawing as sprites | Particles, Emit, Age / Life, Gravity, Wind, Attract / Repel | Fountain shaped by mouse attract | I12, I16 |
| I19 | Waves and Chladni patterns | Standing waves and modes | superposition, nodal lines, (m, n) modes, sand-on-plate look | Chladni Plate, Chladni Superposition, Wave Term, Lissajous Curve | Audio-driven Chladni plate | E15, I17 |
| I20 | Text and data as inputs | Use text and data as fields | text SDF/raster, data textures, CSV values to uniforms | Text, Data, Data Texture | Kinetic type warped by noise | E25 |
| I21 | Glass, refraction and dispersion in 2D | Fake optics cheaply | refract(), IOR, chromatic split, Fresnel | Chromatic Aberration, Spectral Dispersion, Fresnel (Schlick), Gravitational Lens | Glass lens over a photo | I8 |
| I22 | Performance basics | Know what costs time | per-pixel cost × pixels × passes, loop counts, texture fetches, resolution scaling, profiling | Cache, Pass resolution options | Make a heavy graph 3× faster without visible change | I12 |
Three tracks: 3D (A1–A10: rays to fractals), simulation (A11–A17: GI, jump flooding, fluids, boids, slime mould), and live inputs (A18–A22: time, optical flow, tracking, splats, profiling).
| # | Title | Goal | Covers | Nodes | Build it | Prereq |
|---|---|---|---|---|---|---|
| A1 | Rays and cameras | Turn each pixel into a 3D ray | ray origin/direction, FOV, look-at camera | Raymarch 3D (camera) | Ray directions shown as colours | E3, E16 |
| A2 | Sphere tracing | March along a ray using the SDF | step by distance, hit/miss, max steps/distance, Lipschitz | Raymarch 3D, Raymarch Spheres | Silhouette of one sphere | A1, E7 |
| A3 | 3D SDF primitives and operators | Model with distances | box/torus/capsule, smooth union, onion, elongate | Box SDF 3D, Capsule SDF 3D, Smooth union | A toy robot from primitives | A2, E9 |
| A4 | Normals and basic lighting | Shade the hit point | gradient normals (central differences / tetrahedron), Lambert, Blinn-Phong | Normal, Blinn-Phong, Multi-Light | Lit still life | A3 |
| A5 | Shadows and ambient occlusion | Grounded, believable scenes | soft shadows (k·h/t), SDF AO, sky/bounce fill | Soft Shadow, SDF Ambient Occlusion | iq outdoor rig on the robot | A4 |
| A6 | 3D domain operations | Repeat, fold and twist 3D space | repeat 3D, mirror fold, bend/twist, 3D warp | Repeat 3D, Mirror Fold 3D, Bend 3D, 3D Domain Warp, Helix Warp 3D | Infinite corridor of columns | A3, E17 |
| A7 | Materials and PBR | Physically based shading | albedo/roughness/metal, GGX, Schlick, energy conservation | Material Select, Fresnel 3D, Glass 3D | Material swatch board | A5 |
| A8 | Fog, volumes and clouds | Render participating media | exponential fog, volume marching, phase functions | Volumetric Fog, Volume Clouds, Phase (HG) | Sunset clouds over the corridor | A5, E22 |
| A9 | 3D fractals | Distance-estimated fractals | Mandelbulb DE, Menger, KIFS, orbit-trap colouring | Mandelbulb 3D, Menger Sponge, Kaleidoscope 3D | Mandelbulb fly-through | A6, I6 |
| A10 | Depth, focus and lens | Cinematic camera | depth output, depth of field, bokeh, depth compositing | Depth, Depth of Field, Depth Composite, Lens Blur | 2D graphics composited into a 3D scene by depth | A5, I11 |
| A11 | Global illumination lite | Light bouncing cheaply | radiance cascades 2D, bounce colour, GI switch | Radiance Cascades 2D, Repeat Scene | 2D scene lit only by emissive shapes | I10, I12 |
| A12 | Jump flooding and distance transforms | SDFs from arbitrary images | JFA passes, Voronoi from seeds, outlines of masks | Jump flood (texture) | Neon outline around a segmented person | I12, E24 |
| A13 | Fluids I: advection | Move a field along velocity | semi-Lagrangian advection, dye, dissipation | Flow (texture), Pass (ping-pong) | Dye swirling in a fixed curl field | I12, I9 |
| A14 | Fluids II: pressure projection | Incompressible flow | divergence, Jacobi pressure solve, gradient subtract, vorticity confinement | Pass chain, Expression Block | Stam/Harris smoke you push with the mouse | A13 |
| A15 | Boids | Flocking from three rules | separation, alignment, cohesion, neighbour search on GPU | Agents, Boids/Flock, Neighbours, Steer | Flock that avoids the cursor | I18 |
| A16 | Physarum / slime mould | Agents that read and write a trail map | sense-rotate-move-deposit, diffuse and decay, parameter regimes | Slime mold (preset), Sense, Deposit, Trail field, Move | Slime network that connects food dots from an image | A15, I15 |
| A17 | GPU particles at scale | Millions of particles | state in textures, scatter vs gather, sorting/blending costs | Particles (GPU), Scatter, Collide | 1M particles in a curl-noise field | I18, I22 |
| A18 | Time Cube and frame stacks | Time as a dimension | storing N frames, slit-scan, time displacement | Time Cube, Frame Stack, Time Slice | Slit-scan webcam mirror | I12, E25 |
| A19 | Optical flow | Measure motion between frames | brightness constancy, Lucas–Kanade, dense flow, using flow to advect | Optical Flow, Optical Flow step/read, Motion (texture) | Your movement smears paint across the screen | I13, A13 |
| A20 | Tracking and segmentation inputs | Bodies and objects as data | MediaPipe hands/landmarks, blob tracking, segmentation masks, latency | Segment, Blob Track, Mask (texture), MIDI/hand inputs | Particles that spawn from your hand outline | E10, A17 |
| A21 | Gaussian splats in practice | Render captured scenes | what a splat is (mean, covariance, SH colour), sorting, modifiers | Splat Scene, Splat Points, Splat Explode, Splat Wave | Splat scan that dissolves to audio | A10, I17 |
| A22 | Profiling and optimisation | Systematic speed-ups | bound by ALU/texture/bandwidth, divergence, bounding volumes, half-res passes | Cache, Pass resolution, Bounded options | Optimise A14 to 60 fps at 4K | I22, A14 |
The theory under the tools: sampling, the rendering equation, PDE stability, learned CA, modern vision models, Gaussian splatting, neural fields, differentiable rendering.
| # | Title | Goal | Covers | Playfield link | Build it / read | Prereq |
|---|---|---|---|---|---|---|
| R1 | Sampling theory for shader artists | Why aliasing happens | Nyquist, filtering procedurals, box vs Gaussian filters, supersampling | I2 revisited | Analytically filtered checkerboard vs 16× SSAA | I2 |
| R2 | The rendering equation | The theory behind all lighting | radiance, BRDF, Monte Carlo integration, importance sampling | A7 | Path-trace a Cornell box in an Expression Block (PBR book) | A7 |
| R3 | SDF theory | What makes a "correct" SDF | Lipschitz bounds, exact vs bound, the cost of non-Euclidean warps | A6 | Measure step counts with and without a corrected bound | A6 |
| R4 | PDE simulation on grids | Stability and accuracy | CFL, explicit vs implicit, Laplacian stencils, boundary conditions | I15, A14 | Make Gray–Scott unconditionally stable | A14 |
| R5 | Advanced fluids | Beyond Stam | MAC grids, FLIP/PIC, MacCormack advection, multigrid pressure | A14 | Implement MacCormack and compare detail (Bridson notes) | R4 |
| R6 | Continuous and learned CA | From Life to Lenia to Neural CA | kernel convolution CA, growth functions, NCA training | I14, I15 | A Lenia creature in a Pass graph | I15, R4 |
| R7 | Collective behaviour and emergence | Agent models as science | Vicsek model, Physarum as Steiner trees, parameter-space mapping | A15, A16 | Reproduce a Jones 2010 pattern map | A16 |
| R8 | Wave physics and modal analysis | Real vibration | wave equation on a grid, eigenmodes, Chladni from simulation | I19 | Simulate a plate and compare with analytic modes | I19, R4 |
| R9 | Modern optical flow and tracking | Learned vision | RAFT, correlation volumes, temporal consistency | A19 | Compare Farnebäck vs RAFT flow on the same clip | A19 |
| R10 | Segmentation foundation models | Promptable segmentation | SAM/SAM 2 architecture, prompts, video memory | A20 | Click-to-mask a video and propagate it | A20 |
| R11 | Gaussian splatting, the paper | How 3DGS trains and renders | differentiable rasterisation, densify/prune, EWA projection, anti-aliasing (Mip-Splatting) | A21 | Read Kerbl 2023 + Zwicker 2002; derive the 2D covariance | A21, R2 |
| R12 | Neural fields | Networks as continuous functions | NeRF, positional/Fourier encoding, SIREN, hash grids | Ties back to E15 sin and E20 hashing | Fit a tiny MLP to an image and evaluate it in a shader | R1 |
| R13 | Differentiable rendering | Gradients through the renderer | edge sampling, inverse rendering, optimising shader params from a target image | Every slider is a parameter | Fit a cosine palette (E13) to a photo by gradient descent | R2, R12 |
| R14 | Neural SDFs and generative 3D | Learned geometry | DeepSDF, neural SDF raymarching, text-to-3D via splats (DreamGaussian) | A2, A21 | Raymarch a small neural SDF exported as GLSL weights | R12, R11 |
Two to five foundational sources per concept: the original paper where it is readable, and the article people actually learn from. Free copies are preferred.
Shows vectors, dot products and matrices as geometry. That is the model shader writers need.
A free interactive textbook from graphics researchers. Every figure can be manipulated.
The standard graphics-maths reference: rotations, matrices, coordinate spaces.
The usual first lesson in thinking with 1D functions such as step, smoothstep, pow and sin.
A canonical list of shaping curves: almostIdentity, impulse, cubicPulse, gain, parabola.
The reference catalogue of exact 2D SDFs that most shader code copies from.
The main source for smooth unions and the polynomial and exponential smin variants.
A beginner path from circles to distance fields and polar shapes.
The origin of the "over/in/out/atop" alpha algebra. Every blend mode builds on it.
A short, clear account of what alpha means and why premultiplied alpha is correct.
Explains the sampling model behind antialiasing with smoothstep and fwidth.
The a + b·cos(2π(c·t + d)) palette behind Playfield's Palette node.
Explains why gradients look muddy in RGB and how OkLab Mix fixes it.
Covers mixing, HSB and gradients for beginners.
Teaches fract() tiling, cell IDs and offset grids.
Covers correct infinite, limited, mirrored and angular repetition, including the neighbour-cell pitfalls.
A well-commented library of domain operators (pMod, pModPolar, pMirror) used across the demoscene.
The current reference version of Perlin gradient noise. The 1985 original, "An Image Synthesizer" (dl.acm.org/doi/10.1145/325165.325247 check by hand), introduced it.
The clearest explanation of simplex noise.
Shows which GPU hashes (PCG and others) are fast and good. Replaces the fract(sin(...)) folklore.
A gentle path from value noise to gradient noise.
Explains octaves, the Hurst exponent and gain, and why H = 1 looks natural.
The defining article on f(p + fbm(p + fbm(p))).
Shows how to get exact cell-border distances, which is the subtle part of Voronoi.
Covers distance estimation for 3D fractals and why the bulb raymarches well.
A visual explanation of complex multiplication as rotate-and-scale.
The classic DE-fractal series (Menger, KIFS, Mandelbox).
The founding paper of SDF raymarching, including the Lipschitz bound.
The talk that made full-screen raymarching a mainstream technique.
The 3D primitive and operator catalogue (bend, twist, onion, elongate).
The best first tutorial. Covers camera, normals and Phong.
A minimal lighting rig (sun, sky, bounce) that looks good. Directly useful for raymarched scenes.
The k·h/t penumbra trick behind the Soft Shadow node.
The industry-standard GGX / Schlick-Fresnel / split-sum PBR recipe.
The full reference text for rendering theory, needed for the PhD tier.
A practical explanation of textures, filtering, wrap modes and framebuffers in Playfield's own API.
Covers antialiasing procedural patterns with derivatives (fwidth / dFdx).
Explains how hardware bilinear works and a cheap smooth upgrade.
The canonical "render-to-texture, swap, repeat" (ping-pong) explanation. Also used in §15.
How Playfield's Pass layer works under the hood.
The multipass algorithm behind "Jump flood (texture)" and GPU distance fields / Voronoi.
The Gray-Scott tutorial: Laplacian kernel, feed/kill, parameter map.
The paper that mapped the Gray-Scott pattern zoo.
The origin of reaction-diffusion pattern formation.
A free introduction from Wolfram's 1D rules to Life.
The bridge to learned CA (research tier). Lenia (Chan 2018, arxiv.org/abs/1812.05433 checked) covers continuous CA.
Introduced semi-Lagrangian advection and pressure projection, so fluids could run in real time.
The same solver in about 100 lines of C. The best read before implementing.
The rigorous next step: MAC grids, boundaries, vorticity.
A readable WebGL reference implementation of Harris/Stam.
The origin of separation, alignment and cohesion.
The sense-rotate-move-deposit-diffuse-decay agent model behind every slime-mould shader.
The artist-facing explanation of Jones's model that popularised it in shaders.
Covers steering behaviours (seek, flee, flow-field following) with clear vector maths.
Gives the cos(nπx)cos(mπy) ± cos(mπx)cos(nπy) formulas behind the Chladni nodes.
An interactive way to see interference, diffraction and standing waves.
Builds intuition for "sums of sines", which waves, audio spectra and noise all rely on.
The authoritative source on AnalyserNode FFT size, smoothingTimeConstant and dB ranges.
The practical how-to for getByteFrequencyData, which feeds Playfield's Audio Input.
A free, readable DSP text covering FFT, windows, filters and envelopes (beat detection follows from these).
The founding local optical-flow paper.
Dense optical flow, as used in OpenCV and most creative-coding tools.
The model family behind Playfield's hand tracking. Docs: ai.google.dev/edge/mediapipe/solutions/guide checked
The landmark promptable segmentation paper (click-to-segment). SAM 2 (video): arxiv.org/abs/2408.00714 checked
The modern learned-flow baseline (research tier).
The paper that started the field.
The projection maths (3D covariance to 2D ellipse) that 3DGS reuses.
An accessible overview. For depth, follow with the survey by Chen & Wang (2024), arxiv.org/abs/2401.03890 checked.
Shows what the compiler turns your GLSL into (MADs, rcp, free modifiers).
Explains why branch-vs-step myths are often wrong and what really costs time.
Covers divergence and early-out reasoning, which raymarch loops depend on.
A current vendor guide to occupancy, bandwidth and texture costs.
Radiance fields learned from photos. Gaussian splatting reacted to this.
Explains why coordinates need sin/cos encoding, which ties back to the course's sin videos.
Hash grids, a learned relative of noise lattices, made neural fields real-time.
The foundation of gradient-based inverse rendering. Toolkit: Mitsuba 3, mitsuba.readthedocs.io/en/stable checked
Neural SDFs: the network learns the same distance function the course writes by hand.