home/ atoms/ sine-animation-time

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.

“by introducing a Time component and offsetting the distance before applying the sine function we can create an infinite Loop of rings that continuously shrink towards the center”
corpus · kishimisu-an-introduction-to-shader-art-coding-video · chunk 2