Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

BonsaiJS - A Graphics and Animation Library

JSConf via YouTube

Overview

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.

Syllabus

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?

Taught by

JSConf

Reviews

Start your review of BonsaiJS - A Graphics and Animation Library

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.