Concept
The preposition "until" indicates that an action continues up to a specific point, then stops when that condition is reached. This shows the temporal boundary where something ongoing comes to an end.
Translation Strategy
To create "until" relationships in programming:
- Progress Tracking: Monitor how close a process is to its target
- Conditional Termination: Stop the process when the target is reached
- State Transitions: Change from "running" to "stopped" at the endpoint
Key P5.js Methods
Progress Management:
•
map(value, start1, stop1, start2, stop2) - Convert progress to visual width
• Conditional logic:
if (progress >= targetValue) - Check until condition
• State tracking with boolean variables
Visual Elements:
•
rect(x, y, width, height) - Draw progress bar container and fill
•
text() - Display progress percentage and status
•
line() - Draw target indicator
Interaction:
•
mousePressed() /
touchStarted() - Start/restart process
• Keyboard controls (R to reset, SPACE to toggle)
Process Control:
• Incremental progress updates each frame
• Automatic termination when target reached
Code Structure
Basic Pattern for "Until":
1. Setup variables: Track progress toward target
let progress = 0;
let isRunning = false;
let targetValue = 100; // Continue until 100%
2. Update progress: Increment while running
if (isRunning && progress < targetValue) {
progress += fillSpeed;
}
3. Check termination: Stop when target reached
if (progress >= targetValue) {
isRunning = false; // Stop the process
progress = targetValue; // Cap at target
}
4. Visual feedback: Show progress and completion
let fillWidth = map(progress, 0, targetValue, 0, 300);
rect(50, 150, fillWidth, 40); // Progress bar