Exploring Generative Canvas Art with TweenMax JS and KineticJS

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


Post to Twitter Post to Facebook

This entry was posted in GreenSock Tweening Platform Tips. Bookmark the permalink.
  • Joe Hakooz

    Looks pretty smooth on Android. I really need to look into KineticJS. Just finished combing TweenMaxJS and Box2d (thanks to your help Carl) and it’s pretty nice. But Box2d is a beast to grasp!

  • Randy Skretka

    No show in ie9. Won’t take time right now to investigate but rather a downer.

  • sorry to hear that. thanks for reporting though. if you have any insight please let me know.

  • Niklas

    I can see this whitout any problems in IE9.
    I’ve actually noticed that most animations whether it’s flash or js are a lot smoother in IE than in the webkit browsers. So is the case here as well. Hmmm…

  • Chris Gannon

    It works for me using Win Vista IE9 using:

    Browser Mode: IE9, IE8 and IE7 (amazingly)
    Document Mode: IE9 Standards

    However your ‘Snorkl.tv – make the awesome!’ banner at the top appears twice (one above the other) in all the modes mentioned above.  If I switch to Browser Mode: IE9 Compatibility Mode the generative art looks less refined – maybe it loses alpha – not sure.

  • thanks for the info Chris. Weird you are getting the header repeat. After 150,00 visits this the first I’ve heard of it (after further inspection less than 10% of my audience uses IE). Guess I better get an IE. thanks again.


  • Chris Gannon

    To be fair I only tested it in IE to help – I use Chrome which obviously displays everything nicely 🙂

    Here’s the top bar – just so you don’t think I’m going mad! https://dl.dropbox.com/u/18779477/Images/snorkl.PNG

  • Daniel

    Carl I need your help, sorry for post this here but I am in a hurry,
    How can I change this code into AS3:

    //create container
    container=this.createEmptyMovieClip(“mc_container”, 100)
    ////create loader
    var loader:MovieClipLoader=new MovieClipLoader()
    //add position for slider
    container._x = 0 ;
    container._y = 0 ;

    //////////loaded slider
    function onLoadInit(target:MovieClip){
        //target.loadDate(“xml/slider1.xml”); ///start slider with slider1
        target.loadDate(“xml/slider2.xml”); ///start slider with slider2