Drawing Circles
16 / 30
Learn to draw basic shapes using distance functions and understand the pixel coordinate system and distance function applications.
A circle is every point at the same distance from the center. Use length() to measure distance, and step() to decide inside or outside.
Compute distance from center
Shift the origin to center, then compute distance:
length(p) = sqrt(p.x² + p.y²) — the standard 2D distance formula.
Use step to separate inside from outside
d < radius means inside the circle. Express it with step:
d < 0.3:step(0.3, d)= 0, so1.0 - 0= 1 (inside — white)d >= 0.3:step(0.3, d)= 1, so1.0 - 1= 0 (outside — black)
Exercise
The exercise starts with circle = 0.0 (solid black). Use 1.0 - step(0.3, d) to compute the circle mask and get a white circle in the center.
Answer Breakdown
step(0.3, d) returns 0 when d < 0.3 (inside) and 1 when d >= 0.3 (outside). Subtracting from 1 flips it: inside = 1 (white), outside = 0 (black).
Radius 0.3 is relative to normalized UV (0–1). Change it to 0.15 for a smaller circle or 0.45 to nearly fill the canvas.