Above — Preposition Programming

Fig. 1 Y-axis height comparison — smaller Y is higher on screen

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

ABOVE means at a higher level than something else. On screen, that is a smaller Y value, because Y increases downward from the top edge.

Translation strategy

Ways to express above in a sketch:

Static placement: Give one element a smaller Y than another
Dynamic motion: Move an element to sit higher 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 above 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: 80, r: 20 };
let b = { x: 260, y: 160, r: 20 };

2. Test the relationship
let above = a.y < b.y;

3. Place relative to a target
let aboveY = targetY - 50;

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