#Cyclic Vacuum Cannon#

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 4: Noun Puff Animation → Watch Screencast##

In this episode I put the finishing touches on the Noun object by adding a hand-drawn 'puff' animation to its materialize/dematerialize sequences. Then I rig up that puff animation so that its playback and timing are controlled by the code-based tweens that are already in place. "Tween, meet your long-lost father, In-Between..."

• Draw the puff animation frame-by-frame in Flash
• Code up the puff animation and control its playback by piggybacking the tweens we're already using to materialize and dematerialize the Noun
• Create a system that spawns and destroys Nouns automatically in a little cloud in the center of the screen
• Load up Underscorejs because I'll be using the library extensively moving forward

##Part 3: Materializing Nouns → Watch Screencast##

In this episode I start building a 'materialize' and 'dematerialize' sequence for the Noun object:

• Quick recap of the previous episode and make a few small corrections
• Load in Tweenjs and create a 'materialize' and 'dematerialize' sequence for the Noun object
• Build a crude test system that allows me to put the new materialize/demateriaze sequences through their paces
• Take a look at how to use Chrome's profiling tools to make sure that objects are getting properly garbage collected

##Part 2: Drawing Nouns → Watch Screencast##

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##

In this episode 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##

In this episode 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 episode I'll draw a 'puff' animation and bind it directly to the materialize/dematerialize tweens. I'll also be creating a automated cloud of Nouns that are winking in and out of existence. Gonna be fun!

##About Presstube Code Journal##

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?

• → Twitter
• → Facebook
• → Google+
• → Pinterest
• → Email