Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/uxebu/bonsai
BonsaiJS is a graphics library and renderer
https://github.com/uxebu/bonsai
Last synced: 25 days ago
JSON representation
BonsaiJS is a graphics library and renderer
- Host: GitHub
- URL: https://github.com/uxebu/bonsai
- Owner: uxebu
- License: other
- Created: 2012-06-27T13:35:13.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2017-12-18T22:54:13.000Z (almost 7 years ago)
- Last Synced: 2024-10-08T03:34:09.055Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://bonsaijs.org
- Size: 11.1 MB
- Stars: 1,964
- Watchers: 97
- Forks: 188
- Open Issues: 93
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
- awesome-web-animation - Bonsai - BonsaiJS is a graphics library and renderer. (SVG)
README
# 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]*](http://whatijustlearned.wordpress.com/2011/04/22/bonsai-heaven-and-earth-in-one-container/)
### Introduction
Bonsai is a JavaScript graphics library. For the finer details, see the [documentation](http://docs.bonsaijs.org) (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}`:
```js
var r = new Rect(0, 0, 100, 200).addTo(stage);
```Fill it:
```js
r.fill('red');
```Change your mind... make it darker:
```js
r.fill( color('red').darker() );
```Animate it:
```js
r.animate('400ms', {
x: 50,
y: 50,
width: 200
});
```See more here: [Bonsai Documentation/Overviews](http://docs.bonsaijs.org) or
join the IRC channel [#bonsaijs on freenode](http://webchat.freenode.net/?channels=bonsaijs) and ask for help.