Movement & direction

Movement & direction

Around

Click or tap to set an orbit center. The circle travels around it on a circular path.

Fig. 1 Circular orbit — angle advances around a center point

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

AROUND means moving on a curved path about something—orbiting or encircling a center.

Translation strategy

Ways to express around in a sketch:

  • Circular motion: Advance an angle each frame
  • Orbit radius: Keep fixed distance from the center
  • Obstacle context: Path goes around a shape rather than through it
Key p5.js methods
Key methods

Trigonometry
• cos(), sin() — x = cx + cos(a)*r
• TWO_PI — one full revolution

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

1. Set center and radius
let center = { x: 200, y: 150 };
let r = 80, angle = 0;

2. Position on the orbit
let x = center.x + cos(angle) * r;
let y = center.y + sin(angle) * r;

3. Advance the angle
if (isOrbiting) angle += 0.05;

4. Set center on click
center.x = mouseX; center.y = mouseY;