Animating shaders with the sine function and iTime creates smooth, looping motion without discontinuities
iTime is a built-in Shadertoy global that increases continuously (seconds since start). Feeding iTime into sin() or cos() produces a value that oscillates smoothly between −1 and 1, making it ideal for animation. Multiplying iTime by a frequency constant controls the speed; adding iTime as an offset to a spatial calculation (e.g., sin(d * 8.0 - iTime)) creates motion: patterns that move or pulse. Because sine is periodic, the animation loops naturally. This is the simplest and most common animation technique in shader art — more complex animations can combine multiple sine waves with different frequencies and phases.
Examples
float d = length(uv);
float rings = sin(d * 8.0 - iTime); // rings moving inward
fragColor = vec4(vec3(rings * 0.5 + 0.5), 1.0);
Assessment
Explain why sin(d * 8.0 - iTime) causes rings to appear to move inward toward the center (not outward). Then modify the expression to make rings expand outward, and separately to make them pulse in place without moving.