Each comic is rendered onto a glossy 3D page which can be turned remotely using the Myo Armband.
This is the initial 3D view the user sees. The camera zooms in and pans down to view the comic on the table.
The comics are dynamically loaded in batches based on series. Users can press the space bar or gesture to switch the series they're on.
We created a Marvel Character Guidebook which features all of your favorite heroes and villains.
The Myo Armband allows users to flip pages effortlessly using basic gestures.
A whole new way to enjoy your favorite comics.
It can be difficult to read comic books in today's increasingly paperless world. Of course, there are plenty of e-readers to choose from, but nothing captures the essence of a good superhero story quite like an actual comic sitting right in front of you. That's why we decided to create Superflick, an easy-to-use, three-dimensional comic book reader that is populated with all of your favorite Marvel classics, from the X-Men to Spider-Man and even the Avengers. To help enhance your superhero experience, Superflick lets you turn the glossy 3D pages of each comic book yourself, using the Myo Armband. Simply slip on the device, and you will be ready to flick pages at your leisure without having to navigate a mouse or find the right keys to press. Each comic series also comes with its own theme song, which plays in the background depending on what you're reading.
And because we know that it can be hard to keep up with Marvel's thousands of heroes and villains, we've added a 3D character book filled with all of them!
What did we use to build Superflick?
Superflick was built in Node.js with three.js (for the 3D rendering), turn.js (for the dynamic page turning), myo.js (which allowed us to control the pages using the user's armband), and Tween.js (for the 3D animation). We used Disney's Marvel Comics API to dynamically fill our virtual book with hundreds of comics, superheroes, and stories. We designed a 3D environment for the virtual book with three.js, and procedurally animated it in Tween.js, to create an inviting space for readers. The page turning operations were built from scratch using data from the Myo Armband's sensors, and we designed them to make the reading experience as effortless and distraction-free as possible.
We faced many challenges along the way.
Neither of us had ever done any web-based 3D animation or used any Myo technology before, so it was difficult to get them set up at first, since we had to find ways to implement both together. Using Node.js was a big help; because we had some experience using it, we were eventually able to use it to implement all of the functionality that we wanted. The Marvel Comics API was very easy to use thanks to the documentation, but combining it with our 3D comic book proved difficult for quite some time. However, we finally found a way to repair the problems we were having with the procedural animation and created a stable reader.
Here's a sneak peek into the future of Superflick...
At its core, Superflick is designed to make reading more magical. We wanted to virtually recreate the nostalgic feeling you get when reading a good comic book with your own two hands. However, the applications for Superflick don't stop there!
As a 3D e-reader, Superflick has the potential to host much more than books. Creators can develop entirely new forms of media, such as moving picture books for children, interactive reading previews for online marketplaces, sandboxes for the works of authors and illustrators, and so much more!