Concept
ABOVE means positioned at a higher level than something else. In screen coordinates, this translates to having a smaller Y value, since Y increases downward from the top of the screen.
Translation Strategy
To create "above" relationships on screen:
- Static Above: Position one element with a smaller Y coordinate than another
- Dynamic Above: Make elements move to positions above other elements
- Conditional Above: Check if one element is above 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 above 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 "Above":
1. Store positions: Keep track of element coordinates
let targetX = 150, targetY = 100;
2. Calculate "above" position: Subtract offset from Y coordinate
let aboveY = targetY - 50; // 50 pixels above target
3. Apply relationship: Position element using calculated coordinates
ellipse(targetX, aboveY, 30, 30);
4. For mouse interaction: Use mouse events for dragging
if (dist(mouseX, mouseY, circle.x, circle.y) < radius) {
circle.dragging = true; }