Search code examples
javascriptkineticjs

kinetic js speed with many objects


I have a little html canvas app where I use kinetic js to animate a couple hundred small circles moving along individual lines. It works ok, but sometimes can be a little slow. I'd like to be able to scale it up to a few thousand, and have it update each circle on each frame. How can I make it faster? Are there better alternatives to kinetic js for this purpose? Thanks.

here's a sample: http://www.cs.middlebury.edu/~gkrathwohl/running/ncaa.html


Solution

  • You're not having the user interact with your runner circles.

    Since you don't need interactivity provided by Kinetic.Circles, you can gain magnitudes of speed improvement by drawing all your runners on 1 single Kinetic.Shape instead of creating hundreds (thousands) of individual Kinetic.Circles.

    The Kinetic.Shape gives you a context on which you can much more quickly draw non-interactive circles using native context.arc(x,y,radius,0,PI2).

    If you later need interactivity, you can quickly test the mouse position vs each runner object mathematically.

    Good luck with your project!