Skip to content


Subversion checkout URL

You can clone with
Download ZIP
First it steals.. Then it jettisons.
Pull request Compare This branch is 15 commits behind master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Cyclic Vacuum Cannon

Part 2 - Drawing Nouns

The Cyclic Vacuum Cannon is a contraption that steals objects from elsewhere in time and space, then spits them out to propel itself forward and/or blast enemies. It's a concept from my sketchbook that I've been wanting to bring to life for a while, so I chose it as the inaugural project for my Code Journal.

♥ James (@presstube)

Part 2: Drawing Nouns → Watch Screencast

Part 2 - Drawing Nouns

In this episode I take some initial steps towards bridging the gap between hand-drawn material and javascript/canvas:

  • Use Flash to draw some noun assets
  • Use Zoë to rip those assets to a sprite sheet
  • Code that sprite sheet up into the beginnings of a Noun object using Easeljs
  • Take a quick look at the way that the Createjs libraries approach inheritance in js
  • Do a small code cleanup & refactoring session

Part 1: Setup → Watch Screencast

Part 1 - Setup

In this Part I do some chores that are necessary before we can get to the fun stuff:

  • Create an open source repo here at GitHub
  • Briefly introduce my choice of tools
  • Put together a workspace & workflow so we can start building!

Part 0: Brainstorming → Watch Screencast

Part 0 - Brainstorming

In this Part I break a concept drawing of the cannon into its constituent parts, take a first crack at naming them, and think out loud about their responsibilities & relationships. Starting a project this way helps me get a better understanding of what I'm in for, and decide where to start building.

Coming up next...

In the next Part I'll go a bit further towards bringing the Noun object to life by giving it 'materialize' and 'dematerialize' sequences. I'll also take a look at how to use Chrome's profiling tools to make sure objects are being properly garbage collected.

About Presstube Code Journal

Part 1 - Setup

I love watching people work. It's one of my favorite ways to learn. In case there's anyone out there who feels the same way I've decided to start a code journal where I step through the creation of projects from their pre-code planning phase, all the way through to their finished form.

I plan to release each journal entry as a short, 10-15 minute screencast, each of which will correspond to a git branch so you can follow along, and/or take off in your own direction.

I have several groups of people in mind while making this journal:

  1. Like-minded curious folk, coders and non-coders alike, who might find it interesting to peer over someone else's shoulder while they make something weird and personal.

  2. People who are a lot better at this stuff than I am who might get a chuckle or a sigh out of the clunky way I'm doing something and point me in the right direction on how to improve. Suggestions & critique will be incorporated into future entries. Pass that tasty knowledge juice on!

  3. People who are new to programming and might like to be exposed to some fun, deliberately impractical, highly visual code.

Get in touch!

Questions, comments, requests, hopes, fears, daydreams, nightmares, hatred, filth?

Visit Presstube

Something went wrong with that request. Please try again.