Movement & direction

Movement & direction

Across

Click or tap to animate the circle from one side to the other, crossing the barrier between them.

Fig. 1 Linear crossing — interpolation from one side to the other

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

ACROSS means from one side to the opposite side, often crossing over or through something in between.

Translation strategy

Ways to express across in a sketch:

  • Start and end: Place clear points on opposite sides
  • Interpolation: Advance progress from 0 to 1 across the span
  • Barrier: Optional obstacle the path must cross
Key p5.js methods
Key methods

Motion
• lerp() — smooth travel between endpoints
• Progress variable updated each frame

Drawing
• rect() — barrier; ellipse() — mover

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

1. Define the crossing
let start = { x: 50, y: 150 };
let end = { x: 350, y: 150 };
let progress = 0;

2. Interpolate position
let x = lerp(start.x, end.x, progress);
let y = lerp(start.y, end.y, progress);

3. Advance while moving
if (isMoving && progress < 1) progress += 0.02;

4. Mark completion
if (progress >= 1) hasCrossed = true;