New App Development with Crafty.js


I’ve been spending the last months working on a new app that is almost ready for release. It’s based on a kids book that incorporates satellite imagery with some colored pencil character renderings. The project began as an eBook publication, but we found that there were too many limitations with the format, and we couldn’t create a truly interactive project. So I decided to spend the extra time to build an app for a better experience.

The idea was to redraw the book with full backgrounds, and incorporate the satellite imagery into the artistic renderings through a perspective shift pan. After proving this concept, we needed to make the drawings come to life through animation and interaction. I landed on crafty.js, a HTML5 gaming engine which I employed to handle sprite animation, gesture recognition and collision detection. After a few months of some traditional animation, a few hundred colored pencil drawings and a couple of framework rewrites, the app is just about ready for release into the app store.

NASA Science: A Journey of Discovery

Over the last year or so I’ve had the opportunity to work in the capacity of a multimedia developer on a really cool project with an excellent team of people. It’s an app to bring forward some of the NASA Science missions that are current, relevant and above all, awesome. The missions selected for the initial release highlight each of the four NASA directorates – Planetary Science, Earth Science, Astrophysics and Heliophysics. Each section is content heavy, so you will need to experience it on your own. Enjoy the app, and find some technical aspects of the development after the jump.

UPDATE: A Journey of Discovery holds two awards now! A Gold Communicator Award for education and a Silver W3 Award.

w3_silver_statue CommGold1 2

Continue reading

Beach Picknic

I created a fun little video using cutout animation with Flash during my last four weeks at VFS. Since I had worked with the program before as a multimedia developer, I had an unfair advantage and the rest of my class wanted to see me dead. I drew out this nose character in class one day with a tablet, and scrapped my original film idea to create one around him.

Details on the film after the cut:

Continue reading

Earthly Remains

In 2010, while at Vancouver Film School, I classically animated this rad film. This is just a teaser due to pending festival submissions. The clips are also backwards. VFS just posted the film on their youtube channel. Here’s the full video below.

See a full breakdown of the process after the cut:

Watch it in HD, it’s worth it.

Continue reading

2010 Reel

Clips from:
Earthly Remains – 2010 (Conte and pencil on paper, compositing in Toon Boom Harmony)
Beach Picknic – 2010 (Cutout and paperless animation in Flash CS3 on Wacom Cintiq)
Spilled Milk – 2003 (modeling, texture and animation in Maya 5)

Earthly Remains – Teaser

Six two second clips… in reverse… from my classically animated film completed at Vancouver Film School.

The film was animated classically on paper, matched to stop motion animation of paper mache, scanned and painted digitally as a matte, and finally colored by hand with conte and chalk pastel. Everything was shot in camera RAW on a Canon Rebel XSI, and composited in AfterEffects and Toon Boom Harmony.