JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    BonsaiJS is a graphics library and renderer
    Filed under  › 

    • 🔾47%Overall
    • 1,974
    • 23.1 days
    • 🕩215
    • 👥6

    Bonsai

    (previously known as bikeshedjs)

    The art of bonsai tells a story through living illusion. A bonsai artist searches for ways to express his personal creativity by mixing form and thought in a miniature world. [source]

    Introduction

    Bonsai is a JavaScript graphics library. For the finer details, see the documentation (currently in construction).

    Bonsai's main features include:

    • Architecturally separated runner and renderer
    • iFrame, Worker and Node running contexts
    • Shapes
    • Paths
    • Assets (Videos, Images, Fonts, SubMovies)
    • Keyframe and regular animation (easing functions too)
    • Shape/path morphing
    • and much more...

    An example

    Draw a 100x200 rectangle to the stage at {0,0}:

    var r = new Rect(0, 0, 100, 200).addTo(stage);
    

    Fill it:

    r.fill('red');
    

    Change your mind... make it darker:

    r.fill( color('red').darker() );
    

    Animate it:

    r.animate('400ms', {
      x: 50,
      y: 50,
      width: 200
    });
    

    See more here: Bonsai Documentation/Overviews or join the IRC channel #bonsaijs on freenode and ask for help.

    Show All