Hard RaymarchAnimated
Marching squares
Draw the contour of a moving scalar field with the marching-squares idea: for each cell, look at the 4 corners and draw a segment across it.
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 643 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
- Field
field(q) = sin(q.x * 0.9 + time) + sin(q.y * 1.1 - time * 0.8) + sin((q.x + q.y) * 0.6 + time * 0.5); surface where field = 0- Grid
g = uv * float2(24.0, 18.0), id = floor(g), f = frac(g)- Corners
inside bits: field(id) < 0, field(id + (1,0)) < 0, field(id + (0,1)) < 0, field(id + (1,1)) < 0- Fill
draw the inside region: bilinear interpolate the four corner values with lerp using f, and test < 0 (smooth contour, same result marching squares aims for)- Colors
inside float3(0.2, 0.7, 0.9), outside float3(0.07, 0.08, 0.14), plus the grid lines: step(f.x, 0.03) + step(f.y, 0.03) (saturate) as float3(0.2) added at 0.15 strength- Mix
col = lerp(outside, inside, 1.0 - smoothstep(-0.05, 0.05, v)) where v = the interpolated value
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