Arcade

Shader Toy

Phase 07 · Immersive WebPlayable

Match a target image by tuning the uniforms of a real fragment shader.

0 / 5 cleared

Target

Yours

Match0%

The fragment shader

uniform float uHue;
uniform float uSplit;

void main() {
  vec3 sky    = hue(uHue);
  vec3 ground = hue(mod(uHue + 0.5, 1.0));
  float above = step(uSplit, uv.y);
  gl_FragColor = vec4(mix(ground, sky, above), 1.0);
}

Level 1 · Horizon

Two bands of colour and a line between them. Two numbers decide both.

uHue0.000position on the colour wheeluSplit0.500height of the horizon

Both squares are real WebGL running the shader printed above; the only difference between them is the numbers. Match is measured by comparing every pixel of the two 128×128 buffers, so it is the picture being scored, not the sliders. Nothing animates: time is fixed, which is what makes the match reproducible.