Time-based relationship
During
Click or tap to begin the journey from A to B. Particles emit continuously during the trip.
Try it — drag, click, or tap inside the figure.
Open in p5 Web Editor Fork and experiment with this sketchConcept
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
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
2. Move while active
3. Emit during movement
4. Update particles each frame
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;