Time based interactions
⌛ Time based interactions
https://editor.p5js.org/clement.zheng/full/DI4X05oWR
Click on the canvas to start the timer. Timer runs out after four seconds.
millis(): returns the number of milliseconds (thousandths of a second) since starting the sketch https://p5js.org/reference/#/p5/millis
Continuous motion using frameCount
frameCount: number of frames that have been displayed since the sketch started https://p5js.org/reference/#/p5/frameCount
frameRate(fps): sets the target frame rate to the specified fps value https://p5js.org/reference/#/p5/frameRate
https://editor.p5js.org/didny/sketches/-MrMmrg0f
Using setInterval and setTimeout to create events
setInterval(function, delay): calls a function repeatedly with a fixed delay between each call https://p5js.org/reference/#/p5/setInterval
setTimeout(function, delay): calls a function once after a delay https://p5js.org/reference/#/p5/setTimeout
Animating Graphics
Velocity and Acceleration
- move ball with velocity
-
move ball with acceleration
- move ball from point A to point B
- move ball in a circular path
- ball to follow mouse
Boundary
- bounce ball off the wall
Animating Face
https://www.youtube.com/watch?v=DMg-WRfNB60&list=PLRqwX-V7Uu6ZV4yEcW3uDwOgGXKUUsPOM&index=1&t=0s