FunDraw.Com Premieres

So, yesterday I sent out the notice to a few friends and family that my Flash drawing tool was ready for them to try. Wow has it been a long road getting there. And in a few more days, the first ad will appear in "This Is True" and the public will have officially been invited in.

FunDraw began simply as an idea for making money off an inspirational quotes site I was going to build. I figured people might like a quote enough to want to put it on a shirt, mug, bumper sticker, etc. But with hundreds of quotes, designing the artwork for all of them and creating the store was a daunting task. Plus, if someone liked the quote, but not my arrangement, font, colors, etc., then I'd potentially lost the sale.

I thought it would be neat to let them make up their own designs. So I went out looking for a tool I could incorporate into the web site. Nothing quite did it. So I decided that I had to get one built to my custom specs.

The adventure started in July, when I hired a Ukranian programmer via Rent-A-Coder. He said he needed 5 weeks. I gave it to him, plus a couple of days since he said he couldn't get started until a couple of days later. He made some encouraging progress at first, but then stopped. Whenever I e-mailed him for an update, he'd say he was X% done or Y% done, but the demo page wasn't being updated, he wasn't giving me specifics...

Finally, with about 2 days left until deadline, he said that what I wanted was impossible, that he couldn't do it on time, didn't know how long it would take, and drew out the process to get my money out of escrow because he started making threats and refusing to accept the arbitration when he found out that spiking the project would cost him his "top coder" ranking.

Eventually it was ironed out, my money was returned, and I took the project over to Elance. To speed things up, instead of asking for it from scratch, I took a program I'd licensed with source code included and made a list of upgrades I wanted made to it. Got an Indian company that said they would put a team of programmers on it and have it done in three weeks.

Two weeks later, they said that it was so complex a project that even with a team of programmers it would take at least three months.

So I found another program that was even further from what I wanted, but had a few nice features and the source code available. I contacted the author, Todd Yard, who told me it was available under an "open source" license (didn't specify which one, so I've assumed Berkeley, but am operating within the confines of GPL 2.0, and have saved his e-mail in 30 places so I have proof).

Then I did something totally insane. I bought a book on Flash Actionscript and attempted to learn as I went.

Now, I had NEVER programmed in Flash before. The closest I came was a cutesy animation using a Flash-like program, called Swish. And while Actionscript had some similarities to Javascript, I didn't know a whole lot of JavaScript. I was semi-proficient in PHP and that was about it. I had no experience in OOP (Object Oriented Programming) either.

But as I'd mapped out how this would work, it just became the coolest thing in the world to me. I could no longer do the quotes site. I had to do this one. I couldn't just give up.

After countless hours, spent browsing through "Beginning Flash" books, I settled on Beginning ActionScript 2.0. And for the next 7 weeks, I built the FunDraw.com Art Studio.

I read the first 8 chapters, getting a feel for the language, then dug into the code of the base application I was going to build this on top of. Unfortunately, the whole thing was written in ActionScript 1.0 and targeted to FlashPlayer 6, so a lot of the code samples in the book were useless to me because they used code that wouldn't work under those constraints. And trying to port the whole thing to Actionscript 2.0 just seemed like it would drive me insane.

Google, FlashComponents.net, and FlashKit.com became my best friends. I was working in Flash 8, so a number of the components built into it required ActionScript 2.0 and I had to find "old code" replacements for simple things like buttons and sliders unless I wanted to build them myself from scratch.

Even then, a lot of these free components were not well documented. I had to contact authors about components they'd left by the wayside years ago. But I pushed on. Where I could find a free component to do the trick, I used it. Where I couldn't, I made it or a close facsimile. I spent hours reading the help files, referring to books, and quite often just thinking "I guess this will work the way I want it to," writing the piece of code, and then crossing my fingers.

I'd code a little, test, debug, test, debug, and then code some more, generally adding one feature at a time. One fun part was when I was trying to get the "Flash Remoting" (getting the Flash application to communicate with my server to load and save drawings) to work. I'd tested that early on, before realizing I had to make it work with ActionScript 1.0. So when I tried to incorporate the successful test code into my application, it wouldn't work, because the Flash Remoting components would only work in a Flash 2.0 project.

I actually had to go on a file-sharing network, download an unauthorized 30-day test copy of an old version of Flash, install it, get the Actionscript 1.0 remoting components out of it and get them to integrate into my newer version of Flash so I could get the Art Studio to communicate with the server.

Finally, it was done. Or at least the basics were. Using some test databases for the artworks, a small test set of clipart, and some kludged fakes to simulate a user database, I could now create and save drawings. Aside from some clean-up, the Art Studio was done.

Now it was time for another very hard and alien project... The renderer. All the Art Studio did was save the drawings to a database as an XML description. I now had to create a way for those descriptions to be turned into real high-resolution images that people could use.

I'd originally thought to use ImageMagick, but the PHP interface was problematic. MagickWand for PHP wasn't really production quality at version 0.18, the developer had dropped off the map for 6+ months, and no one knew where it was headed. An older, more-robust interface called iMagick had ceased development at version 0.93 in 2004, meaning that as time passed, there would be more and more opportunity for it to fall out of sync with ImageMagick and develop bugs.

While the Perl interface and command line interface were more mature and robust, I felt that the commandline interface might have security issues since I'd have to be putting user-generated text into the commandline variables, and I didn't know Perl very well.

I'd run into an Apache project, called Batik, which was a rasterizer for SVG. That means it turned "Scaled Vector Graphics" images (basically an XML description of a drawing) into photos. Since some of the original clipart was in SVG format, I figured this would work great. But I started running into roadblocks.

The SVG spec, based on what I can tell, is more of a recommendation than a true specification that people follow slavishly. So some of the clipart was causing the rasterizer to barf early on because it couldn't decipher their XML. Then I found that the text-handling in Batik didn't offer me all the freedom I needed.

Dead end... back to ImageMagick (which I later found to be a pretty good SVG rasterizer too). One of the problems with ImageMagick is that what little documentation I could find is written by programmers for programmers. It's confusing and assumes a fairly high level of knowledge coming in.

There's a neat ImageMagick examples site, but it was all command line methods. There was a dire lack of PerlMagick tutorials.

Luckily I found Graphics Programming with Perl. It gave examples of a lot of basic graphics functions in both PerlMagick and GD. Between it, the confusing ImageMagick documentation, and some Perl tutorials, I got around to building the renderer.

But wait, I still didn't know Perl that well, and though these things could help me write the Perl scripts to create the drawings, I still had the issue of breaking down the XML from the database and massaging that data into a format that could be fed to ImageMagick. That would require even more Perl skills I didn't have, though I did have the skills in PHP.

I tried to find some tools for letting me mix PHP and Perl. When I first considered ImageMagick, before even getting started on the project, I posted an Ask Slashdot article. Cutting out the flames and people trying to convince me that MagickWand for PHP or iMagick was ready for a production environment, the general consensus of the responses was: "why would you want to create such a Frankenstein's monster mish-mash? Why?!?!"

Eventually, I decided that trying to mix PHP and Perl in one script was a bad idea. So I created a PHP script that did all the data extraction and massaging, then the PHP script actually wrote the Perl script, saved it to disk, and executed it.

But this wasn't all. Avoiding SVG, I converted all the vector graphics into a format ImageMagick had a handle on... EPS. But EPS had its own set of issues. To make it possible to get transparent backgrounds on the EPS images (so they wouldn't overlap other parts of the drawing with white boxes), I had to hack some ImageMagick config files and write a script that could hack thousands of EPS files to make sure the registered at PostScript level 3.

And, of course, Flash and ImageMagick had their own little quirks with font handling, so I had to create bits of code to account for that (even had to spend $13 to outsource one trickier bit of triginometry), and do some fine tuning before the images the renderer put out matched the images users were seeing in the Art Studio.

Eventually it was done. The Art Studio and Renderer worked... now to build the site.

I had to create databases to manage the users, user bios, their drawings, ways to rate the drawings, favorites lists, a comment engine, the clipart library, and more. On top of that, I decided that incorporating photos into the drawings (the function that lets you upload a photo and use it as a background) was a crucial task, so I had to go back to the drawingboard to update the databases, Art Studio, and renderer to allow that.

On top of that, I had to write code that allowed people to upload their photos and handle all that. It could have gone faster, but half of the time was spent on validation and security, trying to make sure that people were who they said they were and couldn't add in executable code where they shouldn't, trying to protect against SQL injection, XSS, and more.

And finally, when all that was done... documentation and help pages. Video help was not actually as much of a shortcut as it might seem. Some of those videos that run a couple of minutes took hours to make as I flubbed a line or messed up a demo. I was "Forty-Take Freddy" on some of them. It would have been faster to write blocks of text and create still-photos of the steps, but I thought video would be more inviting.

Oh, yeah, I didn't even mention the time spent wrangling artists and indexing clipart to get the clipart collection together. Or the fact that I had a disagreement with the original server provider, switched to a different one, but months later, on just a handful of ISPs (like AOL Europe), one of my subdomains still resolves to the old server's IP address, requiring me to go back through a lot of my code and switch all mentions of that subdomain because my server management company hasn't been able to get the correct IP address to overwrite the wrong one in the DNS for those few ISPs.

But now it's done... well not so much done as on pause. I'm still tinkering behind the scenes, but saving any big initiatives until I've had people using it a while and giving me feedback.

See, when a project like this is a labor of love to create something you hope will be truly neat, fun, and cool, it's never done. You just pause at times to step back, look at the big picture, and decide which bit you're going to make better next.

So, please, try FunDraw, let me know what you think, and keep visiting it because it will keep getting more fun.

Thanks for reading.

This entry was posted on Tuesday, January 9th, 2007 at 10:14 pm and is filed under Just Personal, Techno Thoughts, Web Programming.You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.