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, so 1.0 - 0 = 1 (inside — white)
  • d >= 0.3: step(0.3, d) = 1, so 1.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.

GLSL Code Editor

Correct Code Preview

Current Code Preview