Concept
PAST means moving beyond a reference point, continuing movement after reaching and passing by it.
Translation Strategy
To create "past" relationships on screen:
- Reference Point: Define a clear landmark to move past
- Continuation: Show movement that continues beyond the reference
- Visual Trail: Display the path to show movement progression
Key P5.js Methods
Position Tracking:
•
object.x > reference.x - Check if object has moved past reference
• Simple position comparison for clean state tracking
Movement Animation:
•
object.x += speed - Constant movement speed
• Smooth animation with position updates
Drawing Elements:
•
ellipse(x, y, width, height) - Draw moving circle and reference point
•
line(x1, y1, x2, y2) - Draw reference line
Visual Feedback:
• Trail dots to show movement path
• Color changes based on state (approaching/past)
Mouse Interaction:
•
mousePressed() - Start movement animation
Code Structure
Basic Pattern for "Past":
1. Define reference and moving object:
let reference = {x: 200, y: 150, size: 40};
let circle = {x: 50, y: 150, size: 25, isMoving: false, hasPassed: false};
2. Track passing state:
if (!circle.hasPassed && circle.x > reference.x) {
circle.hasPassed = true;
}
3. Animate movement:
if (circle.isMoving) {
circle.x += circle.speed;
}
4. Visual feedback:
// Color changes: orange → yellow → green
if (circle.hasPassed) fill(100, 255, 100);