UV coordinates map texture space onto geometry. In a fullscreen quad shader, U=red (horizontal), V=green (vertical). The black corner is (0,0), the white corner is (1,1).
Section 03
Sine Wave World
sin() is the atom of visual programming. From it: waves, rotations, oscillations, organic motion — and every VJ effect you've ever loved.
sin(uv.x × 6.28 + time × 1.0) × 0.30 + 0.00
0.30
2.0
1.0
0.00
Key insight: Every shader effect — water reflections, audio visualizers, organic motion — is built from sin/cos combinations. The interference pattern of two overlapping waves creates beating, modulation, and the appearance of complex life.
Section 04 — Centerpiece
GLSL Live Editor
Write fragment shaders. See the result instantly. Compilation errors display inline. This is how VJs and shader artists work in TouchDesigner, VVVV, and Shadertoy.
Presets:
fragment.glsl● COMPILED
Ready. Edit the shader above — results compile in real-time.
Available uniforms:uniform float time;uniform vec2 resolution;uniform vec2 mouse;
float noise(vec2 st) { vec2 i = floor(st); vec2 f = fract(st); float a=random(i), b=random(i+vec2(1,0)), c=random(i+vec2(0,1)), d=random(i+vec2(1,1)); vec2 u = f*f*(3.0-2.0*f); returnmix(a,b,u.x)+(c-a)*u.y*(1.0-u.x)+(d-b)*u.x*u.y;
}
mat2 rotate2d(float a) { returnmat2(cos(a),-sin(a),sin(a),cos(a)); }
This is how every realtime visual artist works: edit code, see result, iterate. Professional VJs write shaders like this in TouchDesigner, VVVV, or directly in GLSL. The feedback loop between code and image is itself the art form.
Section 05
Feedback Machine
Click the canvas to inject a spark. Watch it propagate, multiply, and evolve through recursive self-reference — the engine behind most mesmerizing VJ visuals.
Nam June Paik discovered visual feedback loops in 1963 — a camera pointed at its own monitor. Every mesmerizing VJ tunnel or aurora since then descends from that moment.
Section 06
Node Graph Mind
Visual programming in motion — drag nodes, watch data particles flow along connections. This is how TouchDesigner, VVVV, and Max/MSP work.
Visual programming environments like TouchDesigner, VVVV, and Max/MSP represent every parameter as a signal and every connection as a stream of data. The graph IS the program — no text required. Drag a node above to explore.
Section 07
Noise World
Procedural noise is the foundation of: clouds, terrain, organic textures, water surfaces, particle behavior — everything that looks "natural" in realtime graphics.
Noise Type
Color Mode
4
0.50
0.30
4.0
Procedural noise is the mathematical soul of the natural world in graphics. Ken Perlin invented his noise function in 1983 for the film TRON. It's been generating "natural-looking" randomness ever since — in every major render engine and realtime graphics framework.
Section 08
BPM Sync Machine
Map visual events to musical time. This is what VJs do live — sync the image to the beat so visuals feel intentional, not decorative.
1
120 BPM
120
Visual Events
VJs map visual events to musical time. The sync between image and sound is what makes live visual performance feel intentional. At 120 BPM, a quarter note = 500ms. Every flash, scale, and spawn is a precise decision about when to punctuate the music with light.
Section 09
Artists + Glossary
The practitioners who defined realtime visual art — and the vocabulary they built it with.
Navigation by breathing — her 1995 VR work used respiratory and balance sensors to move through a living landscape. Presence as presence.
Glossary of Realtime Visuals
Alpha Channel
The 4th RGBA channel encoding transparency (0=invisible, 1=opaque). Foundation of compositing.
Blend Mode
Mathematical operation combining source and destination pixels: Add, Multiply, Screen, Overlay, etc.
Buffer
A region of GPU memory holding pixel data. Framebuffers hold the rendered image; ping-pong buffers enable feedback.
Canvas
HTML element providing a 2D or WebGL drawing surface. The browser's gateway to GPU rendering.
Feedback Loop
Feeding the output of a process back into its input. In visuals: the previous frame becomes the next frame's input, creating recursive self-reference.
Fragment Shader
A GPU program that runs once per pixel, returning a color. The engine of all realtime visual effects.
GLSL
GL Shading Language — C-like language for writing vertex and fragment shaders that run on the GPU.
GPU
Graphics Processing Unit — massively parallel processor running thousands of shader threads simultaneously, one per pixel.
Interpolation
Smoothly transitioning between values. mix(), lerp(), and smoothstep() are the interpolation tools of shader art.
Luma Key
Compositing technique that makes pixels transparent based on brightness (luminance). Used to blend video layers.
Node Graph
Visual programming paradigm where operations are boxes and data flows along connecting wires. Used in TouchDesigner, Blender, VVVV.
Noise Function
A function producing "structured randomness" — random enough to look natural, smooth enough to animate. Perlin, Simplex, Worley are major types.
Oscillator
A signal that cycles periodically — sin(time) is the simplest oscillator. The heartbeat of animated shaders.
Particle System
Simulation of many independent agents each with position, velocity, and lifespan. Computed on CPU or GPU via compute shaders.
Pixel
Picture element — the smallest addressable unit of a display. A fragment shader decides the color of every pixel, every frame.
Rasterization
Converting vector geometry into a grid of pixels. The core step of the GPU pipeline before fragment shaders run.
Shader
A program that runs on the GPU. Vertex shaders position geometry; fragment shaders color pixels. Together they define all realtime visuals.
SDF (Signed Distance Field)
A function returning the signed distance from a point to a shape's surface. Negative = inside, positive = outside. Enables resolution-independent shapes in shaders.
Uniform
A variable passed from CPU code into a shader — same value for every pixel. Used for time, resolution, mouse position, and custom parameters.
UV Coordinates
2D coordinates (0→1 in each axis) describing position on a surface. The address system every shader uses to know where it's computing.
Vertex Shader
GPU program that runs once per vertex, transforming 3D positions to 2D screen space. Runs before the fragment shader.
WebGL
Web Graphics Library — browser API exposing OpenGL ES 2.0 for GPU-accelerated 2D and 3D rendering in HTML canvas elements.