Medium Game effectsAnimated
Flag waving in the wind
Make the plane wave like a flag pinned at its left edge: no motion at the pole, bigger waves further along, striped red and cream and shaded by the folds.
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 399 characters in Unity (Built-in)) and GPU speed. Work in HLSL, GLSL, WGSL, Metal or Godot and export the result when you are done.
What it is built from
- Pinned edge
a = (pos.x + ?) / ?: 0 at the left edge, 1 at the right (the plane is ? wide)- Wave
pos.y += ? * sin(pos.x * ? - time * ?) * a (minus time: the wave travels to the right)- Stripes
step(0.5, frac(uv.y * ?)) picks red or cream- Colors
red float3(0.85, 0.15, 0.2), cream float3(0.98, 0.95, 0.88)- Light
normalize(float3(?, ?, ?)) with i_faceNormal; brightness ? + ? * diffuse
The exact numbers are left out (shown as ?), but every colour is given. Measure the rest with the pixel readout on both pictures and Diff.
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