I continue to be blow away by how fast the GreeenSock Animation Platform is (js speed test), but often canvas performance disappoints and I get ridiculous CPU spikes. Most likely it is due to operator error. I found KineticJS to do a fantastic job of making it real easy to get up and running with canvas while achieving fantastic results.
After just a few minutes of trying to marry TweenLite with the basic KineticJS Circle Tutorial I stumbled into an amazing generative art experience. Take a look inside to get a feel for how a seemingly complex effect can be achieved by just combining a few very simple steps.
5 Steps to Create An Interesting Visual Effect
The effect above runs super smooth in Chrome, Safari, and FireFox. IE9+ should have no problem but I haven’t tested it. Please feel free to test and post your results in the comments. My iPhone 4S does a noble job as well.
Download Source
- FinalEffect_InteractiveDemo.html: the full-blown interactive demo above.
- FinalEffect.html: standalone version of the final effect seen in step 5 which makes the code much easier to understand