What I Learned
Seb’s workshop is action-packed with a ton of code samples and demos. Here are a few things we covered:
Particles. Yup, Seb is the Particle King. For the past few years, he has always shown off how versatile particle systems were in Flash. It was great to get a refresher course on how to do them with Canvas, and some of the techniques he showed off are simple yet powerful ways to achieve really rich visuals. Here are a few of my particle experiments:
After the basic introduction on how particles work, I quickly built a confetti fountain.
From there, I accidentally created a particle WiFi signal. A big part of the workshop revolves around exploration time.
Soon after the basic particle system introduction, we began working on more complex things like explosions. A great tip on how to get the trails is to repaint the canvas with a slightly transparent fill versus a full clear.
After particles, Seb went into more complex uses for drawing such as drawing trees. It may not sound very interesting at first, but it’s a key skill to learn because it teaches you recursion and how the rotation system works in Canvas. With Canvas, you actually rotate the entire coordinate system when you perform a rotation, kind of how it works in Processing. Seb does a good job of explaining this concept; it helps to think of it as a real canvas so you can rotate it to help make drawing easier. Canvas has a save and restore system so you can save the previous coordinate state, rotate to do your drawing, then restore it to the original state. This is probably the steepest learning curve when drawing with Canvas versus Flash’s system.
From there, we moved onto the building blocks of asteroids, which is a Seb staple from his Flash presentation days and probably the best real-world and fun thing do to with a drawing API. Here is my attempt at making some graphics for asteroids:
Seb presents you with round asteroids, and it’s your job to make them look more random and irregular. It takes awhile to get used to Canvas’s orientation system, but the best part of the exploration time is accidentally coming up with cool things.
Another cool exercise was creating a thruster effect for the ship. Seb has an interesting use for Modulus in order to control and reset the length of the flame as the thruster burns at full blast.