Below — Preposition Programming

Fig. 1 Y-axis height comparison — larger Y is lower on screen

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

BELOW means at a lower level than something else. On screen, that is a larger Y value, because Y increases downward from the top edge.

Translation strategy

Ways to express below in a sketch:

Static placement: Give one element a larger Y than another
Dynamic motion: Move an element to sit lower on the canvas
Conditional test: Use elementA.y > elementB.y to detect the relationship

Key p5.js methods

Key methods

Canvas coordinates
• createCanvas() — origin (0, 0) is top-left
• Y increases downward; X increases to the right

Comparison
• elementA.y > elementB.y — A is below B

Drawing
• ellipse(), line() — marks and level guides

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

Code pattern

Code pattern

1. Store positions
let a = { x: 120, y: 160, r: 20 };
let b = { x: 260, y: 80, r: 20 };

2. Test the relationship
let below = a.y > b.y;

3. Place relative to a target
let belowY = targetY + 50;

4. Hit-test for dragging
if (dist(mouseX, mouseY, a.x, a.y) < a.r) a.dragging = true;