Concept
BELOW means positioned at a lower level than something else. In screen coordinates, this translates to having a larger Y value, since Y increases downward from the top of the screen.
Translation Strategy
To create "below" relationships on screen:
- Static Below: Position one element with a larger Y coordinate than another
- Dynamic Below: Make elements move to positions below other elements
- Conditional Below: Check if one element is below another using coordinate comparison
Key P5.js Methods
Coordinate System:
•
createCanvas(width, height) - Creates coordinate system where (0,0) is top-left
• Y coordinates: 0 = top, height = bottom
Position Comparison:
•
elementA.y > elementB.y - Check if A is below B
•
mouseY - Mouse Y coordinate for interaction
Drawing Elements:
•
ellipse(x, y, width, height) - Draw circles at specific positions
•
rect(x, y, width, height) - Draw rectangles
Collision Detection:
•
dist(x1, y1, x2, y2) - Calculate distance between points for collision detection
Mouse Interaction:
•
mousePressed() - Detect when mouse is clicked
•
mouseDragged() - Detect when mouse is dragged
•
mouseReleased() - Detect when mouse is released
Code Structure
Basic Pattern for "Below":
1. Store positions: Keep track of element coordinates
let targetX = 150, targetY = 100;
2. Calculate "below" position: Add offset to Y coordinate
let belowY = targetY + 50; // 50 pixels below target
3. Apply relationship: Position element using calculated coordinates
ellipse(targetX, belowY, 30, 30);
4. For mouse interaction: Use mouse events for dragging
if (dist(mouseX, mouseY, circle.x, circle.y) < radius) {
circle.dragging = true; }