ShaderBattle

Medium 2DAnimated

Analog clock

A round clock face with 12 tick marks and three hands (sped up).

Play this challenge All challenges
The target picture for the shader challenge "Analog clock"
Recreate this picture. You pass at a 99% match, then try to write it in fewer characters than the par.

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 1031 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

Hand angles
second: time * 0.5, minute: time * 0.05, hour: time * 0.005
Hand tips
length 0.34 / 0.3 / 0.2 along float2(sin(angle), cos(angle))
Hand look
1.0 - smoothstep(w, w + 0.006, distance to segment), w = 0.004 second (red float3(0.9,0.2,0.2)), 0.01 minute, 0.012 hour (both float3(0.1,0.1,0.12))
Face
radius 0.4 (edge 0.4 → 0.41), float3(0.93,0.92,0.88) on float3(0.08,0.09,0.13)
Ticks
step(0.96, cos(atan2(p.x, p.y) * 12.0)) * step(0.33, r) * step(r, 0.38), dark float3(0.1,0.1,0.12)

Helper functions provided

The toolbox has: sdSeg(). 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

More 2d challenges