Fix the laggy animation when the system runs code

[hyejinim]

Revert the framerate and find another way to show animations (do not change every frame)

[hyejinim]

Try p5js play library https://creative-coding.decontextualize.com/making-games-with-p5-play/

• createSprites(x, y, w, h)
• drawSprites()
• spr.attractionPoint(speed?, x, y)

[hyejinim]

1. Add interpolation --> Not sure
2. Create two canvas so apply different frameRates for webcam and animation --> Not recommended
3. Apply different frameRates for webcam --> Not possible
4. Apply different frameRates for animation --> Can use animation.frameDelay from p5.play https://stackoverflow.com/questions/59823610/animated-png-frame-rate-in-p5js
5. Use frameCount

[hyejinim]

two options: InvokeRepeating() or Coroutines with yield WaitForSeconds.

[hyejinim]

https://stackoverflow.com/questions/36505178/processing-how-can-i-draw-only-every-x-frames

[hyejinim]

if (frameCount % 20 == 0) { // update every 20 frames spr.position.x = frames[frameNum].x; spr.position.y = frames[frameNum].y; spr.scale = frames[frameNum].scale; frameNum++; }