Since — Preposition Programming

Fig. 1 Accumulating trail — length grows continuously from the start point

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

SINCE marks the start of a period that continues to the present. Accumulate state from that reference point onward.

Translation strategy

Ways to express since in code:

Reference moment: Record start time or position on click
Continuous growth: Append data each frame after the start
Visual duration: Trail length reflects elapsed time or frames

Key p5.js methods

Key methods

Accumulation
• Arrays of trail points; push() each step
• frameCount — throttle point frequency

Drawing
• beginShape(), vertex() — connect the trail

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

Code pattern

Code pattern

1. Store start and trail
let origin = { x: 0, y: 0 };
let trail = [];
let growing = false;

2. Begin on click
origin.x = mouseX; origin.y = mouseY; trail = []; growing = true;

3. Add points since start
if (growing && frameCount % 3 === 0) trail.push({ x, y });

4. Draw the accumulated path
beginShape(); for (let p of trail) vertex(p.x, p.y); endShape();