Open this sketch in P5 Web Editor →

Try It

Click anywhere to start a trail that grows continuously since your click point.

Concept

The preposition "since" indicates the starting point of a time period that continues to the present moment. It establishes a reference point from which something has been ongoing or accumulating. In this visualization, a spiral trail grows continuously since the moment you click, demonstrating how something can build up over time from a specific starting point.

Visual Translation Strategy

To represent "since" relationships through movement:

Key P5.js Methods

Trail Generation:
• cos() and sin() - create spiral patterns
• frameCount - controls timing for adding trail points
• push() - adds new points to trail since start
• shift() - manages trail length over time

Visual Elements:
• beginShape() - draws continuous trail path
• vertex() - connects trail points
• ellipse() - marks start and current end points
• strokeWeight() - emphasizes trail visibility

State Management:
• Boolean flags for growth state
• Reference point tracking
• Continuous accumulation patterns

Code Structure

Basic Pattern for "Since" Growth:

1. Setup reference point: Store starting location and state
let startPoint = { x: 0, y: 0 };
let trail = [];
let isGrowing = false;

2. Start tracking from click: Establish reference point
function mousePressed() {
  startPoint.x = mouseX;
  startPoint.y = mouseY;
  trail = []; // Reset trail
  isGrowing = true;
}

3. Add points since start: Continuous accumulation
if (isGrowing && frameCount % 3 === 0) {
  let radius = trailLength * 2;
  let x = startPoint.x + cos(angle) * radius;
  let y = startPoint.y + sin(angle) * radius;
  trail.push({ x: x, y: y });
}

4. Draw growing trail: Visualize accumulation since start
beginShape();
for (let i = 0; i < trail.length; i++) {
  vertex(trail[i].x, trail[i].y);
}
endShape();