The Social Mash-up Toy
ComicJuice is a fun 'Web 2.0'-style mash-up toy. Using an elegant web interface, you can snap together panels with images from around the web (or your own) and add some speech bubbles for good fun. When you're done, you can share your comic with others and even embed it in your own blog.
The Tech Demo
ComicJuice is a somewhat quirky exploration of new web-based techniques. Its unique client-side interface shows that you can still make elegant UIs in a browser, without having to resort to things like Flash. All the major browsers are supported, though the performance is quite slow on older machines. Plus, it's an interesting experiment.
Using JavaScript (with the jQuery library) and the relatively new scriptable <canvas> tag (with ExplorerCanvas for IE), the code generates procedural speech bubbles in a variety of shapes and styles. The underlying code uses some clever hacks, such as filling in strips of padding to follow a bubble's irregular shape. All parameters can be controlled with sliders or a drag handle and moving elements around or adjusting their size is as simple as dragging and dropping them.
Finally, the whole thing is sent to the server via an AJAX request and the comic becomes available for embedding through an <iframe> tag. The benefit of using this sort of client-side rendering is that only very little data needs to be stored per comic. Based on a dozen of parameters per item, an identical copy of the comic is rendered for each viewer.
Who made this and why?
I'm Steven Wittens, open-source professional, Drupal core developer and recent Vancouverite. This whole thing got started when somehow, the words "Procedural Comic Bubble" ended up in my head during an IRC conversation. As happens often, I started scribbling down some notes and concluded that it 'should be totally doable in a day'.
Make that 3.5 days: a lot of coding and tweaking later, "BubbleJuice", a flexible bubble model, was created, and a couple hours of debugging later it actually even worked (mostly). Of course, just a bubble isn't very useful, so I built the comic editor around it. And then I simply had to implement different bubble types and nice drag handles and all that. You know how it is.
Still, the result looks great thanks to a lot of graphical polish. Plus, it's plain fun to play with. Enjoy!
You can read all my blog posts about ComicJuice for more information.