Module 06

Motion & time-based effects

u_time is your only clock

Every animated effect in this course boils down to feeding u_time into something. sin(u_time) oscillates back and forth forever. fract(u_time) saws from 0 to 1 and snaps back, on a loop. There's no timeline, no keyframes — just a number that keeps climbing, and functions that turn "climbing" into "moving."

Screen-space distortion

The trick behind heat haze, water ripples, and most "wobbly screen" effects is the same: don't distort the color, distort the coordinate you sample with. Offset uv (or, as in this lesson's lab, the centered p) by a small amount driven by noise or a sine wave before you use it for anything else, and everything downstream — a gradient, a texture, another shape — inherits the wobble for free. You'll add exactly this to the lab on the right.

One-point reflection

Named and popularized in Fabrizio Espíndola's Visualizing Equations series: mirroring a pattern around a single point using sin/cos (or, in polar terms, folding an angle back on itself). Convert a point to polar coordinates — r = length(p), a = atan(p.y, p.x) — then fold the angle into repeating wedges with mod, and mirror each wedge onto its neighbor with abs(). The result is a kaleidoscope: one small pattern, reflected around a center point until it fills the whole circle.

Predict the output

After folding an angle with a = mod(a, wedgeAngle); a = abs(a - wedgeAngle * 0.5);, what have you actually done to the pattern?