Concept
OVER means moving above something, typically crossing from one side to the other while maintaining a higher position than the obstacle below.
Translation Strategy
To create "over" relationships on screen:
- Elevated Path: Create movement that passes above obstacles or boundaries
- Arc Motion: Use curved paths that go up and over obstacles
- Clearance: Maintain sufficient distance above the obstacle during crossing
Key P5.js Methods
Arc Movement:
•
sin() and
cos() - Create parabolic or arc paths
•
y = startY - sin(progress * PI) * arcHeight - Simple arc formula
Path Calculation:
•
lerp(start, stop, amount) - Interpolate horizontal movement
•
map(value, start1, stop1, start2, stop2) - Map progress to arc height
Drawing Elements:
•
ellipse(x, y, width, height) - Draw moving objects and obstacles
•
rect(x, y, width, height) - Draw obstacles to cross over
•
bezier() - Draw smooth curved paths
Height Calculation:
• Calculate minimum clearance above obstacles
• Use obstacle height + clearance for arc peak
Visual Indicators:
• Shadow or projection to show height relationship
• Guide lines to show crossing path
Mouse Interaction:
•
mousePressed() - Start crossing animation
• Button controls for arc movement demonstration
Code Structure
Basic Pattern for "Over":
1. Define crossing path: Set start, end, and obstacle positions
let obstacle = {x: 200, y: 180, width: 60, height: 40};
let startPoint = {x: 80, y: 200};
let endPoint = {x: 320, y: 200};
2. Calculate arc height: Determine clearance over obstacle
let obstacleTop = obstacle.y;
let clearance = 30;
let arcHeight = startPoint.y - obstacleTop + clearance;
3. Animate arc movement: Calculate position on arc
let x = lerp(startPoint.x, endPoint.x, progress);
let arcProgress = sin(progress * PI);
let y = startPoint.y - arcProgress * arcHeight;
4. Track crossing phases: Monitor position relative to obstacle
let isOverObstacle = (x > obstacle.x && x < obstacle.x + obstacle.width);
let isAboveObstacle = (y < obstacle.y);