Главная
Study mode:
on
1
Intro
2
Facts • Graphics library written in JavaScript
3
Setup stage
4
Setup movie.js
5
Let's play!
6
Draw a Bitmap
7
Apply a Filter
8
Grayscale
9
Invert
10
Draw simple shapes
11
More simple shapes
12
Apply colors
13
color function
14
manipulate colors
15
Apply gradients
16
Radial Gradients
17
Change the position
18
Scale & Rotate
19
Listen to pointer events
20
Animate ball
21
Keyframe Animation
22
Morphing
23
Update screen every 16ms
24
Apply audio
25
Custom messages
26
Submovie loading
27
Movie's Timeline
28
Container
29
Overview
30
Messaging Protocol
31
Frame Budget
32
One Renderer per Runner
33
Multiple Renderer
34
Why SVG?
Description:
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.

BonsaiJS - A Graphics and Animation Library

JSConf
Add to list
0:00 / 0:00