Designing Interactivity with HTML5 Workshop, Day 1
Updated: Fixed Links 12/19
The slides from Day 1 of my January Workshop at MassArt are posted up. I’m the process of converting them into a more useful tutorial format, but Day 1 provides a basic intro to Canvas.
Use the arrow keys to go between slides and feel free to try some of the exercises – many of the exercises have solution buttons.
View the deck: Designing Interactivity with HTML5 Canvas, Day 1
One thing to note, for brevity’s sake, the slides use the WebKit only e.offsetX and e.OffsetY, see the note on this.
Jump to some specific slides (you’ll need to click ‘Solution’ for some of the exercises)
- Canvas Examples
- Basic Canvas Setup (Slides 16-24)
- Drawing a square at the cursor
- Drawing Lines
- Listening for Arrow Keys (You’ll need to click in the canvas itself)
- Drawing Colored Circles with Arrow Keys (Arrows to Draw, space to change color)
- Ball Flying through the air
- Loading Images for Canvas
- Drawing Simple Images
- Image Stamper
- Image Following Mouse
- Twinkly lights particle system
- Animated Starfield
I’m cleaning up Day 2 and will be posting that soon as well (Paper.js, Box2dWeb/BoxBox, and a little bit of Three.js)