This course aims to teach learners how to develop interactive and visually appealing apps and websites using BonsaiJS, an open-source Graphics and Animation Library built in JavaScript. By the end of the course, students will have a good understanding of BonsaiJS's architecture, including its rendering engine(s) like the SVG renderer and the script execution separation. They will also learn about BonsaiJS's intuitive JavaScript API and how to leverage various "HTML5" technologies such as SVG, CSS3, WebWorkers, and nodejs to create stunning content. The course covers topics such as drawing shapes, applying filters, working with colors and gradients, handling pointer events, animations, and more. The teaching method involves a presentation style lecture with slides and examples. This course is intended for web developers, designers, and anyone interested in creating interactive graphics and animations for the web using JavaScript.
Overview
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
