Websites can be fun, sometimes.
Websites that let you design monsters are fun for sure.
Websites that give birth to real monsters on your desk are the most fun of all!
This article is written by Romain Altain Aldea with contributions from Yoann Guény and Jean-Frédéric Passot.
>>> ctrl+[P]aper - Create and get your very own paper toyz
After a long and intense year dedicated to our beloved clients’ assignments, December brought the need for us to work on our own, creative, challenging, and hopefully fun project. As it is often (always?) the case with internal projects, the absence of external constraints combined with the limited time available, turns out to be the greatest constraint of all. So we had to write a precise brief with well defined objectives.
The bottom line was that we had to find an idea that would be well balanced
between original design and challenging technics. But even more importantly, since the New Year was just round the corner, we wanted an additional dimension to any ordinary website: it had to leave something that would remain even after you turn off your computer, hopefully something personal, and
that could bring a smile to your face.
The Concept – Self designed paper toyz
The idea of a paper toy generator came along quite naturally. These cute, imaginative and fragile paper desk ornaments have been around for quite some time now, but remain very popular with designers, gamers, and all sorts of geeks. In other words, funny paper creatures are popular with people like us.
And while the idea of an online generator was not unseen before, we couldn’t find anything like what we had in mind: a full 3D and fun experience offering easy to use cool templates and free drawing tools.
Creating the site
When it came to get our hands on, we decided to add spice to the project: wasn’t it time for us to take a closer look at the much talked about Web GL technology? As a digital studio created in 2000, Grouek has built a strong command of the Flash environment, but of course technology evolves, new possibilities appear, and it is both our passion and our duty to embrace them.
So although our development team had no previous experience whatsoever with this particular technology, after a couple of days of preliminary tests and Web GL for dummies tutorials, we all decided to go for it. Of course, limited browser compatibility was an issue, but hey, this is all about experimenting, so we indulged ourselves on this one, and we got going.
Creating / selecting the visuals
Graphically, we set ourselves a double objective: to give a friendly and welcoming look to the experience, as well as to offer a vast variety of templates so that everyone could combine and design the paper toy of their dreams.
The landscape of our paper monster island was directly designed in Blender, whereas the colours, the rocks and the trees were designed in Photoshop and then mapped into 3D elements.
Now one of the funniest parts of the project was to decide upon which t-shirt themes to design and make available from the library. Star Wars, Nyancat, Obey, Batman, The Rolling Stones, … as well as Chuck Norris, of course! One important logo featured in the gallery is the “I love Flash” symbol that comes first in the list, because embracing html 5 and Web GL today, and other solutions tomorrow, doesn’t have to go against any other existing technology.
When you decide to embark upon a 3D website, whatever technology you choose, you instantly become obsessed with performance optimisation. Designers and producers try to push design and experience as much as they can, and developers do their best to hold them to preserve smoothness with the FPS rate constantly showing on their screens.
And so we had to lower the number of functionalities we had thought of, make the scene smaller than we had wished, but at the same time we came up with pretty smooth and neat camera rotations and scene transitions, while keeping the FPS above 30 on all machines available in the studio.
We also decided to let everyone enter his or her name, city and country. This was not to store the data, but simply to give the feeling of the universal appeal of our 3D world on people from all around the planet.
Finally, we gave a special attention to the PDF generated with each creation, detailing each step to follow so that everyone could easily give birth to the paper monster.
3D and technics
Concerning Web GL, we had two options: either design or own 3D engine, or use an existing one.
The first solution, although challenging and appealing, would have required a lot of time, while not guaranteeing a decisive benefit for us.
So we decided to go for an existing library. This helped save time so that we could focus our energy on the specific functionalities.
Among the main reasons behind this choice, was that Three.js allows a quick and easy start, and also that its main functionalities (scene, camera, renderer, etc.) work in a similar way as what we were used to with AS3 and Away3D, for example.
The music on the site is made of two different loops that convey two distinct feelings. The first one is dynamic and joyful to go with the virtual visit of the landscape. Then, when accessing the workshop to craft your paper toy, a more peaceful and down tempo music takes place to match the creation process.
Putting it all together
Before launching, we only had to complete the site with a video introduction that would present the basic steps of creating, printing and giving shape to the paper toy.
And right after launching, since we were pleased with the immediate success of the website and the number of users sharing their creations and the website, we integrated a ticker on the footer that shows all twits related to the experience. This functionality gives an additional dynamic dimension to the website that is animated and co-created by its users.
A few months after launch, over 2000 monsters created by users from 82 countries can be skimmed through the virtual gallery. And since we started to notice pictures of actual monsters popping up on Twitter, we decided to collect them and repost them on a dedicated Pinterest board.
At this point, we really closed the loop of the project, with our initial objective that was to bridge the virtual and the analogue worlds.
Finally, this is probably what we are the most proud of: combining virtual and analogue, one of the hottest technologies with scissors and glue sticks, “I love Flash” tees and html5!
- Originally meant to be developed with Stage 3D (Flash), when Romain the executive producer suggested to the tech team to rather consider Web GL, they looked at him amused, and then quickly went back to their computers without even caring to say no.
- The sound track of the introduction video is a tribute to Amy Winehouse: “Rehab”, by Shawn Lee and the Ping Pong Orchestra.
Creative Direction: Jean-Frédéric Passot
Overall Art Direction & Design: Coralie Castot
Templates and themes illustration: jnth zkrt
Lead Creative Technologist: Yoann Guény
Web GL development: Guillaume Lanier
HTML development and integration: Guillaume Lanier; Arthur Muchir
Motion design: jnth zkrt
Sound and music design: jnth zkrt
Digital production: Clémentine Maquin
Digital production assistant: Matthieu Buc
Creative and Executive Production: Romain Altain Aldea
Additional Thanks: Sacco, Bénéat Soucheleau, Sonia and Sarah Adjeroud, Chuck Norris.
Dedicated with love to Sonia Borsarelli, your spirit lives through these gentle and caring creatures.
About the author
Romain Altain Aldea
Executive producer and owner at Grouek Studio, Paris. Entered the digital creation industry back in 1997, and never left since. He took over Grouek after the original founders left in 2010.