Fork The Cyclic Vacuum Cannon on GitHub

Code Journal → Cyclic Vacuum Cannon

Part 4 - Noun Puff Animation

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

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

  • Quick recap & a few small corrections
  • Load in Tweenjs and create a 'materialize' and 'dematerialize' sequence for the Noun object
  • Build a crude system to test the Noun's new materialize/dematerialize sequences
  • 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

In this episode I begin to build the "Noun" object, which the Cyclic Vacuum Cannon will eventually use as fodder. In the process I demonstrate one way to bridge the gap between hand drawn material and javascript.

  • Brief code cleanup and refactoring session
  • Draw some 'Noun' assets in Flash
  • Rip those assets to a sprite sheet using a free app called Zoë
  • Take a quick look at how the Createjs
  • libraries approach inheritance in javascript while coding up the beginnings of the 'Noun' object

Part 1 - Setup

In this episode I do some project setup dirty work.

  • Set up an open source repo
  • Introduce the tools I'll be using
  • Put together a workspace and workflow so I can start building the fun stuff!

Part 0 - Discovery

In this initial epside I break a concept drawing of the Cyclic Vacuum Cannon into its constituent parts, take a crack at naming them, and think out loud about their responsibilities & relationships.

This process of imagining a potential cast of objects helps me get a better understanding of what I'm in for design-wise. It also helps me decide where to start building.

Caveat: This was the pilot episode.

As a result it looks a little shoddy & slow compared to the others. I intend to go back and redo it once I'm a little further along in the project, but in the meantime please cut it some slack for being the runt of the litter. Thanks!

Wtf is a Cyclic Vacuum Cannon?

Good question! Here's the original drawing that sparked the idea: it depicts a swirling vortex of detritus contained by a membrane. As the contents of the membrane make their way around on a circular breeze they come in contact with a launch pad that shoots them outward with great force. The recoil of each launch propels the cannon in the opposite direction (picture a 2 year old firing a 12 gauge). I imagine the Cyclic Vacuum Cannon as a thruster that can be strapped on to things to make them move around, or as a weapon, or both.

Thieving Warp Crucible

Here's a Cyclic Vacuum Cannon replete with boots, bones, fetuses, and a handful of other objects swirling in its interior. Using its "Theiving Warp Crucible" (the spiral shaped object in its center) the cannon snatches objects from elsewhere in its vicinity, bringing them in to feed its cache of circulating fodder. Every cannon needs cannon balls; this one is no exception.

You might be having tea with your aunt one afternoon when you find yourself suddenly teleported into the core of the cannon. After a few moments tumbling around with a rag-tag assortment of other stolen objects you'd be fired out as propellant, or if you were lucky, as a glorious combat warhead.

Who would use one, and how?

I think you mean, who would not use one? I've assembled a grid of a candidates to help spark your imagination.

Got an empty beer bottle lying around? Slap a thruster on it and remote pilot it into a melee.

A half-eaten drumstick? Affix a cannon to the gristly bit at the top and turn it into a jaunty dueling pistol.

That lethargic cheetah living in your hall closet? He'll take 3; a thruster for each hind paw and a missile launcher for the end of his tail. Think of how invigorated he will feel!

Now Cummon, Really?

Of course I'm not going to try and build this thing for real, silly! The components necessary to fashion a thieving warp crucible haven't come down in price nearly enough yet. Instead I will build a half-baked mockup of it using pens, paper, javascript, and a few generous daubs of naive arm-chair physics. It should be a lot of fun.


I'll publish the progression of this project in bite-sized screencasts and git pushes. Stay tuned for updates: @presstube.

♥ James

Ogle Forth...

Mystery-filled loot bags

Real robots count from zero, not one

Nonsense Oriented Programming

What's the meaning of this?

We've been drawing since the first grunting ogre of a man stuck his sausagey index into the sand. Programming has been around for less than a century. I'm interested in what the two have in common.

I have been posting work at Presstube since 1999. If you're hunting for an old project, the best place to look would be the old site or the blog. If you've got a lonely terminal, give it a screensaver to help take its mind off things for a while. If you still can't find what you're looking for, email me and I'll be happy to point you in the right direction. Read more ⇢

Outside of Presstube, I spend a lot of time making things with my good friend, Amit Pitaru. You can see more of our work at Pitaru Paterson.

My solo and collaborative art works with Amit have been exhibited at the Centre Pompidou, Paris; Museum of Contemporary Art, Taipei; Institute of Contemporary Art, London; Seoul Museum of Art, Korea; Israel Museum, Jerusalem; GGG Gallery, Tokyo; Kunsthalle Wien, Austria; Centro de Cultura Contemporanea de Barcelona; London Design Museum and Museo Tamayo, Mexico City.

To support my Presstube & Pitaru Paterson habits I take on contracts as a creative director and as a front-end developer. I've done work for Bjork, Nike, Apple, Sony, Adidas, VH1, Motorola, Burton, and many more. If you'd like to work together, get in touch.

I was born in 1980 in London, England, but have been in Canada since 1988. I currently live in Montreal with my wife and son.

James Paterson

Follow Me on Pinterest

Email me

Hosted by the totally radically awesomely great ⇢ Tilted