03 Time, interaction and repetition

uniform: passing time in

JavaScript passes the seconds in every frame. Pause, then drag the time, and the picture jumps.

Speed1.00

-44

Ripple density5.00

112

Jump to time · s0.00

010

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float wave = sin(length(p) * 5.000 * 6.283185 - uTime * 1.000);
  float t = wave * 0.5 + 0.5;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), t);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uResolution) / min(uResolution.x, uResolution.y);
  float wave = sin(length(p) * 5.000 * 6.283185 - uTime * 1.000);
  float t = wave * 0.5 + 0.5;
  vec3 color = mix(vec3(0.06, 0.10, 0.14), vec3(0.48, 0.83, 0.69), t);
  gl_FragColor = vec4(color, 1.0);
}

JS side

gl.uniform2f(uResolution, …, …)
gl.uniform1f(uTime, 0.00)

// every frame (requestAnimationFrame)
const seconds = elapsed + jump
gl.uniform1f(uTimeLocation, seconds)
gl.drawElements(...)

A shader cannot keep time or remember the last frame. JS passes a new uTime each frame; the same time always gives the same picture.

Try it

Pause, then change “Jump to time”: the picture jumps with it
Make the speed negative: the ripples go backwards