Responsive Animation with <canvas/>

By

Have you ever wanted to know how to draw things using Javascript? Render responsive animations that react to user input? Well, it's easier than you think. I'd like to give you the tools you need to make a flocking animation of your own or a moving node graph.

You're going to need a basic understanding of Javascript—how to work with the DOM and write basic scripts.

As a class we'll all walk through the basics of drawing using <canvas/> and work up to creating a moving, interactive animation.

PS, I will also be driving a shuttle car back and forth from the BART 2-3 times in order to shuttle all class members to the loft. Wesk Oakland is not know for being safe—even groups of 3 can be at risk. I will message all class members my phone number and let you know when/how to get a car ride to the space.

Prerequisites
You should be fairly comfortable with Javascript. Working with arrays, loops, and interacting with the DOM are not going to be covered in the class. However, we will be using those tools to learn about how to animate using and using Javascript to do that.
Schedule
  • Animate with <canvas/>

    Speakeasy Loft

    305 Zephyr Dr
    Oakland, CA

    We'll cover:

    • The basics of setting up a <canvas/> object to manipulate.
    • Native Javascript canvas API methods. How to draw shapes and lines, change their fill, and stroke ultimately render the kind of things we want.
    • Animate these shapes at an interval and writing responsive code that takes user input and alters the animation accordingly.
    • The basics of vector and velocity and how we'll use them.
    • A system you can use the keep track of objects you're rendering on the canvas.
    • How to alter objects vector and velocity over time, and create realistic motion using code.
    • Getting started with Paper.js.
    • Creating a network of objects and animate them together using Paper.js.
    • Responsive animation (user input, and objects in the canvas reacting to one another).
    Sep
    12
    Wed, September 12th, 2012

    6:00 pm - 9:00 pm PDT

    Add to Cal

Dustin Hoffman

I've been animating using code since I first learned to code in Flash with Actionscript 2.0. From AS2 to Processing, and now <canvas/>, I have become increasingly familiar with the ins-and-outs of writing code to draw and animate the things I want.

You can see my personal portfolio at Breefield.com, and see my "Flock" demo featured on CreativeJS.com.

View Full Profile

100% Positive Reviews (3 Reviews)

    Speakeasy Loft

    305 Zephyr Dr

    Oakland, CA

    7 / 10 Students

    • 2

      Classes

    • 7

      Students

    • 5

      Watchlist