Medium WaterAnimated
Raindrops on a pond
Randomly placed drops spawn expanding, fading rings on dark water.
How this challenge works
You write a fragment shader that draws the picture above, live in your browser. A match bar shows how close you are, and the score combines accuracy, code size (the par is 541 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.
The numbers you need
- Grid
g = uv * float2(4.0, 3.0), cell = floor(g), f = frac(g) - 0.5- Drop time
tt = frac(time * 0.4 + hash(cell)) (0..1 age)- Drop position
o = (float2(hash(cell + 1.0), hash(cell + 2.0)) - 0.5) * 0.5; d = length(f - o)- Ring
ring = sin(d * 60.0 - tt * 25.0) * exp(-d * 8.0) * (1.0 - tt) * step(d, tt * 0.6)- Color
float3(0.02, 0.1, 0.2) + float3(0.3, 0.7, 0.9) * (0.5 + 0.5 * ring) * ... see hint
Helper functions provided
The toolbox has: hash(). Add them above your frag function with one click.
Solve it in your language
Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start coding