Behind — Preposition Programming

Fig. 1 Draw order — the back shape is rendered before the front shape

Try it — drag, click, or tap inside the figure.

Open in p5 Web Editor Fork and experiment with this sketch

Concept

BEHIND means at the back, partially hidden by something in front. In 2D, draw order sets layering—shapes drawn earlier appear behind shapes drawn later.

Translation strategy

Ways to express behind in a sketch:

Draw order: Render the back object before the front object
Overlap test: Use distance and radii to detect intersection
Depth cues: Optional size, opacity, or hatch to suggest depth

Key p5.js methods

Key methods

Layering
• Draw the back shape first, the front shape second

Overlap
• dist() — center-to-center distance
• distance < rA + rB — circles overlap

Drawing
• ellipse(), text() — shapes and overlap readout

Pointer input
• mousePressed(), mouseDragged(), mouseReleased() — drag objects
• dist() — test whether the pointer is inside a circle

Code pattern

Code pattern

1. Store two circles
let back = { x: 120, y: 150, r: 55 };
let front = { x: 200, y: 150, r: 55 };

2. Draw back, then front
ellipse(back.x, back.y, back.r * 2); // behind
ellipse(front.x, front.y, front.r * 2); // in front

3. Detect overlap
let d = dist(back.x, back.y, front.x, front.y);
let overlapping = d < back.r + front.r;

4. Estimate overlap amount
let overlap = back.r + front.r - d;