Tostitos Pocketdancer

Here’s a screen capture of a fun project I worked on last December. It’s a mobile web app for Tostitos called Pocketdancer where you can upload your photo and watch it come to life and dance to hip hop and disco music. You can also let a friend join you for a dance battle. You can view the full pocketdancer app on your Android or iPhone over at http://bringthepartynow.com

Spine is a 2D animation software that exports animation files for multiple runtimes and file formats and it considerably helped to build out this project. There are a few javascript rendering engines out there that integrate with spine, and Pixi.js is one of them. Unfortunately, Pixi doesn’t support all Spine features and I also wasn’t able to make it run with a 2D canvas and digging into the Pixi source code is not such an easy thing to do.

When it comes to 2D canvas, my rendering engine of choice is EaselJS but I couldn’t find any spine renderer built from it so I ended up borrowing a small chunk of code from Pixi and was able to make a spine animation run very smoothly on my iPhone4 with easelJS.

Here’s a small demo of a Spine animation from the Tostitos project rendered with EaselJS.

Download the source code on GitHub