I'm proud to announce the start of ComicJuice, a web 2.0 social mashup tool that lets you create comics in your browser and share them with others.
Update: Now with Internet Explorer support! Thanks to Google's ExplorerCanvas. Viewing comics works in IE6 and 7, while editing still requires IE7.
The crazy part is that I started working on this only friday evening (that's 4 days ago). Once I had the initial idea and a rough plan, I simply couldn't not code it.
A lot of jQuery and JavaScript later, with some <canvas> wizardry (boy is that thing inconsistent across browsers), we have a fully-fledged comic creator. The best part is that all of it is rendered client-side, so no actual images need to be generated. To display a comic, we use the same code as the editing interface. The down-side is that it doesn't work in IE, but I've been thinking about maybe doing a rough canvas emulation. We'll see. For now, the latest versions of Safari, Firefox and Opera have been tested and work well.
You can also embed comics with iframes, and copy/pastable code is provided. Like this lame example:
I figured a Web 2.0 mash-up would not be complete without a fitting design to go in, so I designed icons, sliders and toolbars for the editor, as well as a theme for the website. The theme is a Garland knock-off: I guess I'm proving myself wrong that it's a bad base theme. It's actually quite good as it has fluid/fixed 1-3 column layouts in it.
I'm curious to see if ComicJuice takes off and what people do with it. It was a blast to code in any case. Check it out.
Holy crap.
Who would've thought that muttering about balloon tails would lead to that? :D Nice, nice work.
Four days, man. That's inhuman.
O_o
Four days? Did you not sleep for that period and learn how to bend the fabric of space-time in the process? And you squeezed in time to do a webcast of it? I mean... GAH!
A post-mortem on what made it easy/hard/possible to do would be awesome, too. I imagine there's a ton of things to learn about both Drupal and jQuery from that.
Seriously, WOW!
That looks nice. Maybe you
That looks nice. Maybe you should activate the forums module as well to let people discuss it and ask questions.
When trying it out the first thing I wanted didn't look possible. The text balloons have the tail thing sticking out at the left side and I wanted to make it come out on the right side. Is that possible?
Two handles
The balloon tail has two handles... one for direction/length and one for where it sticks out the bubble. You can make it point anywhere you like.
Wow
You wrote this in only 4 days?
fantastic!
Genius
Genius... Just Genius.
congratulations!
Steve
Amazing
That's an amazing achievement. I can see how this could be used for education - first thing I've been excited about in a long time. Do you have any specific plans for it for the future?
BTW: It's almost perfect feature-wise - but balloons with two callouts would be nice (unless I've missed it).
Once again, you exceed my expectations
Steven, that is simply incredible. The idea is brilliant and the fact that you were able to produce it to its current state is a testament to your ingenuity and creativity. You've always been able to amaze me, even back when we were still heavily involved ProjectX. I just can't think of anything else to say about it. It's freakin sweet.
And now I must wallow in my self-pity as I can only hope to be half as good as you. Arg! :)
Awesome!
Wow! Simply amazing. I'm impressed by this as well as your earlier work. You are one of the most creative and talented persons I know and I'm looking forward for your future projects. Go Steven!
I had some fun while trying it out and made comic about ComicJuice itself.
http://comicjuice.com/comic/forngren-drupal-org/plot-behind-comicjuice
Any Plans for IE?
I have to ask... are there any plans for IE users. I am not a fan of that browser at all but a lot of people use it.
talented
wow, i was sooooo blown away to discover that you complete the planning to technical procedures in FOUR days. speaking of being efficient, i have my hats off for you!
i'm trying to figure out how you execute the demo video... how is it possible to record the things you do on screen... can you give me some directions toward that?
Speed, IE & recording
First, it has to be emphasized that without Drupal it would be impossible to do this in 4-5 days. Of that time, it took 3.5 days to make the comic engine, and about half a day to make site, and half a day to make theme (based on Garland, another timesaver). Since the launch I probably spent another half a day applying tweaks.
A social site needs lots of user interaction and lots of ways to present and browser content, and Drupal delivers all the goods.
As for IE support: I'd love to, but unfortunately the lack of the canvas tag is a death blow here. Still, I do intend to work on this in the future, though at low priority. The first thing would be to get acceptable rendering of comics in IE. I suppose I might get away with having pre-rendered bubbles which are squished into shape, although given the flexibility you have in designing the bubbles, this could rapidly spiral out of control.
I also didn't look at all if there is an alternative way of rendering dynamic vector graphics in IE. For example, it's possible I might be able to make a flash file that emulates &t;canvas> for those browsers that don't support it... if possible, that would be a huge advancement for the web in general.
As for recording the video, I use a (commercial) tool for Mac called Snapz Pro X. Then I use QuickTime (with Pro key) to copy/paste sections of the movie together, cut out pauses and add the music. QT Pro is very spartan, but suffices for my needs.
A nice trick that I discovered: to speed up a video in QT, you can export it to separate images, and import it back in again. Then, you'll have the option of choosing the frame rate. Of course, this takes a while to complete. It should be just a simple edit box in the movie properties, but it doesn't appear to exist. If anyone else has a tool that runs on Mac to change the frame rate of a .mov or .avi, I'd greatly appreciate it!
I just wanted to say...
... holy freekin' wow! That is jaw dropping stuff.
Infernal Comic Sans
Seriously. Is Comic Sans the default typography for all the comics? For shame! I know it fits the comic strip personality, but that's not an excuse to use it.
Otherwise, this could be huge. What was previously mentioned about education - this looks super easy to implement tutorials and the like. However, IE (both 6 and 7?) compatibility is going to be key for this to take off. Once I get off the work comp, I'll be sure to give it a spin.
Done in four days? A CSS redesign usually takes me just as long. I love the clean URLs, I guess that's Drupal magic at work, huh.
Comic Sans
Unfortunately, because it's built on CSS and HTML, the font has to be available on all platforms. Comic Sans is the only one that fits the bill and is appropriate in design. Yes, it's terribly abused everywhere, but there is nothing to do about it.
Using something like sIFR here would not be easy.
As far as IE support, all IE's can now display the comics. IE7 is needed to edit them. I'm happy enough with this for now, and it at least makes the embedding useful to everywhere. Making IE6 work would be hell... it completely screws up the editing UI (not to mention I'd have to apply those icky PNG hacks everywhere), and IE6 use is shrinking anyway.
Post new comment