Concept
UNDER means passing below something, going beneath an obstacle or barrier. It involves movement that goes below and across something, creating an arc path that dips under the obstacle.
Translation Strategy
To create "under" relationships on screen:
- Downward Arc Movement: Create bezier curve paths that dip below obstacles
- Depth Visualization: Show how far below ground level the movement goes
- Bridge/Tunnel Metaphor: Use overhead obstacles that must be passed beneath
Key P5.js Methods
Bezier Curve Movement:
•
bezierPoint() - Calculate positions along curved path
• Control points determine the depth of the arc that goes under
Path Calculation:
•
lerp(start, stop, amount) - Smooth interpolation along path
• Progress tracking from 0 to 1 for complete traversal
Drawing Elements:
•
ellipse(x, y, width, height) - Draw moving circle and path points
•
rect(x, y, width, height) - Draw bridge/barrier obstacle
•
beginShape()/endShape() - Draw the complete arc path
Depth Calculation:
• Calculate depth below ground level during passage
• Visual indicators show how far "underground" the movement goes
Visual Feedback:
• Highlighting when passing directly under the obstacle
• Depth measurements and progress indicators
Interaction:
•
mousePressed() /
touchStarted() - Start animation
• Keyboard controls for different arc depths (1, 2, 3)
• SPACE to toggle path visibility, R to reset
Code Structure
Basic Pattern for "Under":
1. Define obstacle and path: Set bridge position and trajectory
let obstacle = { x: 200, y: 120, width: 80, height: 60 };
let startPoint = { x: 50, y: 200 };
let endPoint = { x: 350, y: 200 };
let controlPoint = { x: 200, y: 260 }; // Dip below ground
2. Calculate bezier path: Create smooth arc that goes under
movingCircle.x = bezierPoint(startPoint.x, startPoint.x, endPoint.x, endPoint.x, t);
movingCircle.y = bezierPoint(startPoint.y, controlPoint.y, controlPoint.y, endPoint.y, t);
3. Track progress: Monitor movement along the curve
if (isMoving && progress < 1) {
progress += 0.015;
// Update position using bezier calculation
}
4. Detect "under" state: Check when passing beneath obstacle
let isUnderObstacle = (movingCircle.x > obstacle.x - obstacle.width/2 &&
movingCircle.x < obstacle.x + obstacle.width/2);