Spatial relationship
Through
Drag the circle through the barrier. Labels track whether it is outside, inside, or has finished crossing.
Try it — drag, click, or tap inside the figure.
Open in p5 Web Editor Fork and experiment with this sketchConcept
THROUGH means moving from one side of something to the other, passing inside or across its boundary. Track entry, interior, and exit as separate states.
Translation strategy
Ways to express through in a sketch:
- Crossing detection: Notice when the object enters and leaves a barrier
- State flags: Store
entered,inside, andexited - Motion required: The relationship depends on movement, not static placement
Key p5.js methods
Key methods
Barrier
• rect() — draw the region to cross
State
• Booleans for each phase of the crossing
• dist() — optional edge proximity
Pointer input
• mousePressed(), mouseDragged(), mouseReleased() — drag objects
• dist() — test whether the pointer is inside a circle
Barrier
• rect() — draw the region to cross
State
• Booleans for each phase of the crossing
• dist() — optional edge proximity
Pointer input
• mousePressed(), mouseDragged(), mouseReleased() — drag objects
• dist() — test whether the pointer is inside a circle
Code pattern
Code pattern
1. Define the barrier
2. Track crossing state
3. Update on movement
4. Label the phase
1. Define the barrier
let barrier = { x: 180, y: 50, w: 40, h: 200 };2. Track crossing state
let entered = false, exited = false;3. Update on movement
let inside = x > barrier.x && x < barrier.x + barrier.w;if (inside && !entered) entered = true;if (!inside && entered) exited = true;4. Label the phase
let status = exited ? "passed through" : inside ? "inside" : "approaching";