BonsaiJS - A Graphics and Animation Library

Explore the capabilities of BonsaiJS, an open-source graphics and animation library, in this RejectJS 2013 conference talk. Dive into the unique architecture of BonsaiJS, including its separation of rendering and script execution. Learn about the rendering engines, such as the SVG renderer, and the environment-agnostic script runner that operates in various contexts. Discover how to set up a stage, draw bitmaps and simple shapes, apply filters and gradients, manipulate colors, and create animations. Gain insights into handling pointer events, incorporating audio, and managing custom messages. Understand the messaging protocol, frame budget, and the advantages of using SVG. By the end of this talk, acquire a comprehensive overview of BonsaiJS's intuitive JavaScript API and its potential for creating interactive graphics using open web technologies.

Intro
Facts • Graphics library written in JavaScript
Setup stage
Setup movie.js
Let's play!
Draw a Bitmap
Apply a Filter
Grayscale
Invert
Draw simple shapes
More simple shapes
Apply colors
color function
manipulate colors
Apply gradients
Radial Gradients
Change the position
Scale & Rotate
Listen to pointer events
Animate ball
Keyframe Animation
Morphing
Update screen every 16ms
Apply audio
Custom messages
Submovie loading
Movie's Timeline
Container
Overview
Messaging Protocol
Frame Budget
One Renderer per Runner
Multiple Renderer
Why SVG?