Try It

Click to start the circle moving along the curved path.

Concept

ALONG means moving in a line or following the length, direction, or course of something. This involves following a path, edge, or boundary rather than crossing it.

Translation Strategy

To create "along" relationships on screen:

Key P5.js Methods

Path Definition:
• Store arrays of points to define complex paths
curveVertex(x, y) - Create smooth curved paths
bezier() - Define Bezier curve paths

Path Following:
• Track current position along path with index or progress value
lerp(start, stop, amount) - Interpolate between path points

Drawing Elements:
ellipse(x, y, width, height) - Draw moving objects
beginShape() and endShape() - Draw complex paths
vertex(x, y) - Define path points

Mathematical Curves:
sin() and cos() - Create circular or wave paths
• Parametric equations for complex curves

Mouse Interaction:
mousePressed() - Start or control path following
• Button controls for animation

Code Structure

Basic Pattern for "Along":

1. Define path: Create array of points or mathematical curve
let pathPoints = [{x: 50, y: 150}, {x: 150, y: 100}, {x: 250, y: 200}, {x: 350, y: 150}];

2. Track progress: Use index or progress value
let currentIndex = 0;
let progress = 0; // 0 to pathPoints.length - 1

3. Calculate position: Interpolate between path points
let pointA = pathPoints[Math.floor(progress)];
let pointB = pathPoints[Math.ceil(progress)];
let t = progress - Math.floor(progress);
let x = lerp(pointA.x, pointB.x, t);

4. Update movement: Advance along path
if (isMoving) { progress += speed; }