2D toolkit · lesson 4 of 8 · Intermediate · about 5 min
Turning a quarter turn
You will build: Draw a horizontal bar with a square on its right end, turned by a quarter turn using p = float2(-p.y, p.x). The square should end up at the bottom.
Rotation is the same trick again: change the pixel's position first. The easiest turn is a quarter turn, because it only swaps the two numbers and flips one sign:
p = float2(-p.y, p.x); // a quarter turn
Check with one point. A pixel at (1, 0) becomes (-0, 1) = (0, 1). A point on the right is now treated as a point at the top. A pixel at (0, 1) becomes (-1, 0): top becomes left.
Drag the angle to 90 in the diagram. The gold outline (where you see the shape) turned the opposite way to what the pixels' positions did. That is normal: when you turn the lookup, the picture turns the other way. This surprises everybody the first time.
The shape here is a bar with a small square on its right end, so you can tell which way it turned.
The numbers you need
Everything the picture depends on is given, so the challenge is the code, not guessing.
- Bar
sdBox(p, float2(0.3, 0.06))- End square
sdBox(p - float2(0.3, 0.0), float2(0.1, 0.1))- Both together
d = min(bar, square)- Colors
fill float3(0.95, 0.75, 0.2), background float3(0.08, 0.08, 0.12)- Edge
m = 1.0 - smoothstep(0.0, 0.01, d)
Try it in your own language
The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start codingGo deeper
Concept explainers with a live example: rotation matrix.