Time-based relationship

Time-based relationship

Until

Click or tap to start the countdown. It runs until the target value is reached, then stops.

Fig. 1 Progress toward a limit — the process stops when the target is reached

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

Open in p5 Web Editor Fork and experiment with this sketch

Concept

UNTIL means continuing up to a boundary, then stopping when that condition is met.

Translation strategy

Ways to express until in code:

  • Target value: Define the endpoint (100%, zero, destination)
  • Loop while not done: Increment progress each frame until the cap
  • Termination: Flip isRunning off when the target is reached
Key p5.js methods
Key methods

Progress
• map() — progress to bar width or label
• if (progress >= target) — stop condition

Drawing
• rect(), text() — bar and readout

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

1. Track progress
let progress = 0, target = 100, running = false;

2. Increment while running
if (running && progress < target) progress += speed;

3. Stop at the boundary
if (progress >= target) { running = false; progress = target; }

4. Map to visuals
let w = map(progress, 0, target, 0, barWidth);