Movement & direction

Movement & direction

Past

Click or tap to launch the circle past the reference point. Status updates once it moves beyond it.

Fig. 1 Reference crossing — state updates once the mover passes the landmark

Try it — drag, click, or tap inside the figure.

Open in p5 Web Editor Fork and experiment with this sketch

Concept

PAST means beyond a reference point—movement continues after passing it.

Translation strategy

Ways to express past in a sketch:

  • Reference landmark: Mark the point or line being passed
  • Comparison: Flip state when position crosses the reference
  • Trail: Optional dots or line showing the path taken
Key p5.js methods
Key methods

Detection
• object.x > reference.x — simple past test on X

Motion
• Increment position each frame while moving

Pointer input
• mousePressed() — start motion or set a target
• mouseX, mouseY — click position
Code pattern
Code pattern

1. Define reference and mover
let ref = { x: 200, y: 150 };
let mover = { x: 50, y: 150, speed: 3, hasPassed: false };

2. Move forward
if (isMoving) mover.x += mover.speed;

3. Detect past
if (!mover.hasPassed && mover.x > ref.x) mover.hasPassed = true;

4. Label the state
let status = mover.hasPassed ? "past" : "approaching";