Animated procedural patterns with sine, time, and smoothstep

This module builds the bread-and-butter move of live-coded visuals: a fragment shader that breathes. In a VJ or algorave rig, an animated procedural tile is what fills the screen between bolder moves — it must loop seamlessly (no pops when the projector wraps it), pulse in time, and hold up at any resolution. Everything here runs on a stock Shadertoy-style setup: one fragment shader, iTime, UV coordinates, nothing else.

The arc starts fully supported. First, get a single color channel pulsing: feed time into sine, then apply the bias-and-gain mapping so the −1..+1 oscillation lands cleanly in 0–1 instead of clamping black for half the cycle. Next, swap the constant frequency for a UV coordinate — the moment a time oscillator becomes a spatial pattern is the conceptual pivot of the whole module. From there, two refinement passes: use smoothstep with adjustable limits to carve the smooth sine field into deliberate light/dark regions with anti-aliased edges instead of jagged step cuts, and add a second sine octave at double frequency and half amplitude to break the pattern’s machine-like regularity. The capstone then removes the scaffolding: you design your own tile that must exhibit all four techniques at once and loop without a visible seam.

The required atoms are exactly the capstone’s load-bearing skills — drop any one and the tile fails visibly (black flicker, flat field, jagged edges, or sterile regularity). The supporting atoms widen the palette rather than gate it: aliased high-frequency sine for pseudo-random seeding, the step→smoothstep replacement at SDF boundaries, and 1/x neon falloff are ready-made detours once the core tile works. Note the deliberate split between the two smoothstep atoms: the required smoothstep-anti-aliasing is the general concept the capstone gates — smoothstep as a two-threshold transition that anti-aliases procedural edges — while the supporting smoothstep-antialiasing is a narrower procedure (swapping step() for smoothstep() at an SDF boundary to get fringe and glow effects), useful only if your tile detours through SDF shapes. The two are near-duplicates at the corpus level and are candidates for consolidation into one canonical atom. Bias/gain mapping and smoothstep threshold tuning recur in nearly every edit, so drill them inside the whole task until they are reflexive.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

oscillation

let y = height/2 + sin(frameCount * 0.05) * 100

_{p5live-0004 · CC0-1.0}

float rings = abs(sin(length(uv)*20.0 - u_time*2.0));

_{glsl-0039 · public-domain}