Drawing shapes in GLSL — notes from The Book of Shaders Chapter 7

• September 2, 2026
• Shader

My notes continue on The Book of Shaders. This chapter is the first real jump in the series: everything until now shaped a single line (a value depending only on x). Shapes need two dimensions at once, a value that depends on both x and y, so I put together an interactive 2D canvas to actually see it, instead of imagining it.

The two core tricks

Rectangles — step() as logical AND

float left = step(0.1, st.x);
float bottom = step(0.1, st.y);
color = vec3(left * bottom);

Multiplying two 0/1 values together is exactly a logical AND — the result is 1 only where both conditions are true. Do this four times (once per edge, flipping coordinates for the far edges) and you carve out a rectangle.

Circles — distance() as a field

float d = distance(st, vec2(0.5));

This gives every pixel a single number: how far it is from a center point. That continuous field is the 2D version of the ramps from earlier chapters — feed it into step() or smoothstep() exactly like you would with x, and the ramp becomes a hard or soft-edged circle.

The angle wrinkle: atan()

Everything above only needs distance. The moment a shape’s edge needs to vary by direction — flowers, wedges, pinwheels — you need an angle instead, and that’s what atan(dy, dx) gives you: the angle of a pixel around a center point, from -π to π. This tripped me up initially because it mixes two ideas at once (angle and a modulated radius), so I isolated it into its own set of angle-only exercises before combining it with anything else.

Atan Exercises – Flower Challenge!

Why it matters

Distance fields and angle fields are the actual vocabulary of procedural shape drawing — every circle, ring, polygon, or star you’ll build later comes from combining these two ideas with the shaping functions from earlier chapters. Nothing here is new math, just a new dimension to apply it to.

※The interactive widgets on this page were built with AI-assisted coding.