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 when vUv.x >= 0.2
  • step(vUv.x, 0.8) = 1 when vUv.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.

GLSL Code Editor

Correct Code Preview

Current Code Preview