nvdnkpr / bonsai

BonsaiJS is a graphics library and renderer

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.