CP1: Animation in P5JS – Frame Count & Timing

Описание: There are a few different ways we can control the timing of events, each with their own benefits and drawbacks.

FRAME COUNT
The built-in variable "frameCount" tells us how many frames have passed since the program started. This can be nice for rough timing but the frame rate of our sketch can vary depending on the tasks your computer is doing (including things not in your sketch like updating software!). This means timing can go faster/slower as your sketch runs, resulting in uneven motion.

MILLISECOND TIMER
If we want more accurate timing, we can use another built-in variable: millis(). This functions gives us the amount of time that has passed since the program started, measured in milliseconds. A millisecond is 1000th of a second (1000ms = 1 second, 500ms = 1/2 second, etc). This code is much less intuitive but lets us do careful and regular timing of events by comparing the current time with the last time the event happened. When that interval passes a certain amount, we can trigger an event.

👩‍💻 https://editor.p5js.org/jeffThompson/...

ALL THE VIDEOS IN THIS UNIT
🎥    • CP1: Week 09 (Animation)  

CHALLENGES
❓ Can you make the interval used in either the frameCount or millis() examples vary using the mouse position?
❓ Can you make the millis() timer have different on/off durations?
❓ Can you create two separate timers using millis()? Hint: you'll need two separate variables for 'prevMillis' and 'interval'. Try checking out Steve Reich's amazing composition 'Music for 18 Musicians' as inspiration for what you can do with slightly-varying intervals!