Time-based relationship

During

Click or tap to begin the journey from A to B. Particles emit continuously during the trip.

Fig. 1 Overlapping process — particles emit throughout the journey

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

DURING means throughout the span of another process. Run secondary logic on each frame while the primary action is still underway.

Translation strategy

Ways to express during in code:

  • Overlapping activity: Emit or update while a flag is true
  • Primary process: A journey or timer that must stay active
  • Frame timing: Use frameCount or modulo for emission rate
Key p5.js methods
Key methods

Timing
frameCount — periodic emission
random() — vary particle velocity

Motion
atan2(), cos(), sin() — traveler direction

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

1. Define the journey
let traveler = { x: 50, y: 150, targetX: 350, targetY: 150, moving: false };

2. Move while active
if (traveler.moving) { /* update x, y toward target */ }

3. Emit during movement
if (traveler.moving && frameCount % 8 === 0) {
  particles.push({ x: traveler.x, y: traveler.y, vx, vy });
}

4. Update particles each frame
particle.x += particle.vx; particle.life -= 0.01;