Simple Rectangle
24 / 30
Learn to draw rectangles using conditional statements and understand coordinate ranges and boundary detection.
Circles use distance to define their boundary. Rectangles use x and y ranges — both axes must be inside their limits at the same time.
Use step to check ranges
Check whether vUv.x is between 0.2 and 0.8:
step(0.2, vUv.x)= 1 whenvUv.x >= 0.2step(vUv.x, 0.8)= 1 whenvUv.x <= 0.8- Multiplied together: 1 only when
0.2 <= vUv.x <= 0.8
Apply the same logic to y, then multiply both masks:
Exercise
The exercise starts with x = 0.0, y = 0.0 (solid black). Build the step masks for both axes to reveal a rectangle in the region x: 0.2–0.8, y: 0.3–0.7.
Answer Breakdown
Each step is a 0/1 boundary test. Two tests per axis define two edges. Multiplying x and y means all four edges must be satisfied — the product is 1 only inside the rectangle.
Change the boundary values to move or resize the rectangle. Try step(0.4, vUv.x) * step(vUv.x, 0.6) to make it narrower.