Open this sketch in P5 Web Editor →

Try It

Click to launch a projectile toward the impact point. Watch what happens after the collision!

Concept

The preposition "after" indicates that something happens following a specific event or action. It establishes a sequence where one action occurs subsequent to another. In this visualization, particles scatter in different directions after a collision occurs, demonstrating the consequences that follow an impact.

Visual Translation Strategy

To represent "after" relationships through movement:

Key P5.js Methods

Movement and Physics:
• atan2() - calculates angle for projectile movement
• cos() and sin() - for directional movement
• dist() - measures distance for collision detection
• TWO_PI - for evenly distributed scatter angles

Visual Elements:
• fill() - color coding for different states
• ellipse() - draws projectile, impact point, and particles
• beginShape() - creates movement trails
• vertex() - builds trail paths

State Management:
• Boolean flags to track collision state
• Array methods for particle management
• Velocity dampening for realistic physics

Code Structure

Basic Pattern for "After" Effects:

1. Setup initial state: Position projectile and target
let projectile = { x: 50, y: 150, isMoving: false };
let impact = { x: 200, y: 150, hasHappened: false };

2. Move toward collision: Update projectile position
let angle = atan2(dy, dx);
projectile.x += cos(angle) * speed;
projectile.y += sin(angle) * speed;

3. Detect collision: Check for impact
if (distance < projectile.speed + impact.size/2) {
  impact.hasHappened = true;
  // Start "after" effects here
}

4. Trigger scatter effects: Particles move after impact
for (let particle of particles) {
  if (impact.hasHappened) {
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.vx *= 0.98; // Slow down over time
  }
}