Join 3,497 readers in helping fund MetaFilter (Hide)


Making your shitty doodles look less like shitty doodles
March 10, 2010 7:34 AM   Subscribe

Harmony: A procedural drawing tool made in JavaScript
posted by Rory Marinich (62 comments total) 64 users marked this as a favorite

 
Wow. It's amazing what the kids are doing with JavaScript these days.
posted by ixohoxi at 7:46 AM on March 10, 2010 [1 favorite]


This is great. Wish there were an option for a bigger canvas for prints.
posted by brain_drain at 7:50 AM on March 10, 2010 [1 favorite]


This would be fabulous with a pressure-sensitive tablet.
posted by ixohoxi at 7:51 AM on March 10, 2010 [1 favorite]


This is very cool. Is there a way for me to save this app to my local drive?
posted by ZenMasterThis at 8:00 AM on March 10, 2010 [1 favorite]


I wish I was this good at drawing in real life.
posted by Panjandrum at 8:11 AM on March 10, 2010 [2 favorites]


This is very cool. Is there a way for me to save this app to my local drive?

In firefox:
File | Save Page As | Web Page, HTML Only

All the code is right in the file, but for some reason "HTML, Complete", which is the default option screws it up it up somehow
posted by delmoi at 8:14 AM on March 10, 2010 [1 favorite]


Crazy. It's hard to draw a simple line - the brush keeps connecting things - and no way to erase that I can see - but I had fun playing with it...
posted by caution live frogs at 8:29 AM on March 10, 2010 [1 favorite]


This is super cool, although I was a little disappointed with Circles and Grid.
posted by specialagentwebb at 8:32 AM on March 10, 2010


Wow. That's really neat.
posted by brundlefly at 8:46 AM on March 10, 2010 [1 favorite]


Hey, my design class with John Maeda did this kind of exercise, only it was 1999 so we used Java applets. Mine are still online (caution: Java applets). I still like the crunchiness of this one.
posted by Nelson at 8:50 AM on March 10, 2010


s/1999/1997/
posted by Nelson at 8:51 AM on March 10, 2010


This is so great. Thank you for posting this. I'm having so much fun just playing around and building up forms by accident. It's hard to control if you actually have a shape in mind but I'm still having a blast with what it produces. Here's my favorite thing I've drawn so far.
posted by Nedroid at 9:01 AM on March 10, 2010 [6 favorites]


Neat! I drew a whale.
posted by rusty at 9:06 AM on March 10, 2010 [1 favorite]


"Ribbon" produces some gorgeous curves. Quite lovely.
posted by LMGM at 9:14 AM on March 10, 2010 [1 favorite]


Nelson - I like your old one but everything I do looks like a drawing by Gerald Scarfe
posted by Fiery Jack at 9:15 AM on March 10, 2010


I really can't stop playing with this.
Kangaroo
Lion
DJ-MAX 2000
posted by Nedroid at 9:16 AM on March 10, 2010 [20 favorites]


Does anybody still use Javascript to, uh, you know, verify forms?
posted by monospace at 9:30 AM on March 10, 2010


Dude, JavaScript implementation of HTML 5 form extensions.
posted by Artw at 9:44 AM on March 10, 2010 [1 favorite]


Does anybody still use Javascript to, uh, you know, verify forms?

I want someone to implement this site as a captcha.
posted by lholladay at 9:44 AM on March 10, 2010


Beautiful sketches posted here, thanks! I missed the shading/alpha-blending when I first tried it out, that allows for a lot of subtlety.
posted by Nelson at 9:45 AM on March 10, 2010


Since it's xkcd week here on MetaFilter.
posted by brain_drain at 9:51 AM on March 10, 2010 [2 favorites]


This is awesome! It feels like someone with far more artistic ability is helping you while you draw.
posted by Civil_Disobedient at 10:02 AM on March 10, 2010 [3 favorites]


There's also this version, which is based off an old zefrank idea ( 2003 or so ).
posted by localhuman at 10:05 AM on March 10, 2010 [2 favorites]


The scale of the line and effect changes quite a bit if you resize your browser and reload.
posted by damehex at 10:15 AM on March 10, 2010 [2 favorites]


The world needs more Kid Pix.
posted by The Devil Tesla at 10:30 AM on March 10, 2010 [2 favorites]


That Lion is awesome, Nedroid.
posted by straight at 10:38 AM on March 10, 2010


The Chrome option is going to put Frank Gehry out of work.

Can anyone explain the insanely long URL for the saved files?
posted by HE Amb. T. S. L. DuVal at 10:44 AM on March 10, 2010


Amazing. An erase would be helpful. Even more helpful would be if I could draw.
posted by chairface at 10:44 AM on March 10, 2010 [1 favorite]


The insanely long URL is the picture. That is, the characters in the name encode the actual picture data (using base64 encoding). JavaScript then (somehow) takes the encoded file, decodes it, and tells the browser to display it as the MIME type it is. In this case, the PNG data.
posted by Xoder at 10:47 AM on March 10, 2010 [1 favorite]


Can anyone explain the insanely long URL for the saved files?

That's the data for redrawing the image in compressed form - note that simpler images have shorter URLs, and that if you mess with it you get a messages to the effect that the image cannot be displayed "because it contains errors" - if it were a simple ID you'd expect a message more along the lines that the image could not be found.
posted by Artw at 10:50 AM on March 10, 2010


...or what Xoder said, though it looks like it's the server rendering PNGs based on the data in the URL rather than reinterpretation by JavaScript.
posted by Artw at 10:52 AM on March 10, 2010


The incredibly long URL is your actual image data, not a reference to the data stored on a server somewhere. That's actually kind of amazing too. I didn't know you could do that as I haven't been paying attention to web development.
posted by chairface at 10:52 AM on March 10, 2010


heh - you should see some of the insane stuff that goes back and forth in postbacks with ASP.NET form apps - it makes that URL look lightweight.

The PNG renderer probably works similarly to the JS in that it takes the simple linework drawn by the user and renders a bunch of extra lines, so the URL doesn;t have to contain data fro everything you see, just enough to extrapolate from.
posted by Artw at 10:55 AM on March 10, 2010


Holy crap. It works on the iPhone.
posted by chairface at 10:55 AM on March 10, 2010 [1 favorite]


Can anyone explain the insanely long URL for the saved files?

That is a text representation of the binary data of the image being pushed out to the browser.

The Canvas Element (HTML 5) supports exporting it's contents to various formats by simply linking to the data, with a provided mime/type - from the page itself:

window.open(canvas.toDataURL("image/png"),'mywindow');

(insert flash is dead meme here)
posted by device55 at 10:56 AM on March 10, 2010


The PNG renderer probably works similarly to the JS

I think PNGs also have some kind of run-line-encoding, so big blocks of the same color (all the white space) can compress very small (I could be wrong about that though)
posted by device55 at 10:58 AM on March 10, 2010


I didn't know you could do that as I haven't been paying attention to web development.

You can actually encode any binary file into text using the data:uri scheme (which is what this uses). PDFs, GIFs, PNGs, HTML, etc. Anything. On one intranet site I worked on all the icons were declared in a CSS file. This cut per-page download times immensely--while the CSS is larger, you don't have all the separate HTTP requests. The only problem with data:uri is that a certain Redmond-based browser has failed to support it until recently.

Here, try it out for yourself.
posted by Civil_Disobedient at 11:00 AM on March 10, 2010 [4 favorites]


Crap, you're right - there's no back end rendering that at all, that's in the browser. So maybe that is a compressed bitmap.
posted by Artw at 11:03 AM on March 10, 2010


Wow, this is a lot of fun. There goes my morning...


This is very cool. Is there a way for me to save this app to my local drive?

In Firefox, go to View -> Page Source. In the Source window that comes up, go to File -> Save Page As.


When doing Save Page As from the page itself, within the saved html file the menu div's select tag is filled with all the style options (from the init() function).
posted by lmm at 11:04 AM on March 10, 2010


Thanks for the explanation Xoder, Artw, Chairface, Decive55 and Civil_Disobedient. Very interesting. I'm going to have to spend some time playing around with researching that.
posted by HE Amb. T. S. L. DuVal at 11:14 AM on March 10, 2010


grumble of course no one reads the comments grumble
posted by juv3nal at 11:17 AM on March 10, 2010 [1 favorite]


Signs of life from ie9 CANAVS, so it may end up being ubiquitous sooner rather than later. I suspect there will be some interesting announcements at MIX.
posted by Artw at 11:18 AM on March 10, 2010 [1 favorite]


Look
What
I
Made!
I am having a blast with this.
posted by The Esteemed Doctor Bunsen Honeydew at 11:21 AM on March 10, 2010 [2 favorites]


Artw - that's great news. (as much as I've hated IE 6 in the past, I am pleasantly surprised at how good IE 8 is, and I hope IE 9 is even better)
posted by device55 at 11:39 AM on March 10, 2010


Well, zombie IE6 still keeps crawling out of the grave, some people are still migrating to IE7 for some fucktarded reason, and there will be people who stick their heels in and stay with IE8 as long as possible, so it'll probably be a fair time before we can say "hey! All major browsers support this!", but still, hopeful signs.
posted by Artw at 11:43 AM on March 10, 2010


Zombie IE 6 will keep munching on the "brains" of cube dwellers until Micorosoft can convince corporate IT that maybe yeah they should upgrade some of those VB6 web apps to something else.
posted by device55 at 11:58 AM on March 10, 2010 [1 favorite]


The Esteemed Doctor Bunsen Honeydew, you forgot the scythe!
posted by darksasami at 12:32 PM on March 10, 2010


Look into those eyes and tell me you don't like it...
posted by Phanx at 1:48 PM on March 10, 2010


I totally crapped on this when I first clicked the link, and was going to snark the shit out of it when I came back into the thread then I saw nedroid's drawings and went back to fetch my humble pie - thanks guys.
posted by doobiedoo at 3:26 PM on March 10, 2010


Something is very wrong...
posted by Artw at 3:28 PM on March 10, 2010


Doobiedoo broke it! Doobiedoo broke it!
posted by Rory Marinich at 3:37 PM on March 10, 2010


heh heh....crap should have stuck to snark
posted by doobiedoo at 3:44 PM on March 10, 2010


as with any artsy program i find, the first thing i did was draw Carmen Sandiego. then i did something random.
posted by Tikirific at 5:08 PM on March 10, 2010


holy crap, it's way better with a touchpad!
posted by Tikirific at 5:36 PM on March 10, 2010


[Giganto link nixed from doobiedoo's link. If they get long enough, they break things, so please proceed with caution when including humongoid strings in comments like that.]
posted by cortex at 5:52 PM on March 10, 2010


Works in the Nexus One's browser. Although the "Save" function is broken.
posted by Xoder at 5:37 AM on March 11, 2010


Roar.
posted by brundlefly at 7:41 AM on March 11, 2010 [1 favorite]


I tested every style by drawing "Boobs!" with a little under-flourish. This confirms for me that I don't like furry "Boobs!" Square "Boobs!" do nothing for me.

Was disappointed by circles, though. I would have thought that would be gangbusters.
posted by Eideteker at 12:13 PM on March 11, 2010



Self-Impressed!
-------------------------------------------------------------------------------------
/Still have IE6 at work, please send qualified help!
posted by CitoyenK at 2:48 PM on March 11, 2010


Steak Lord! (The original)
posted by Artw at 3:13 PM on March 11, 2010 [1 favorite]


So, I'm at MIX. They just demoed IE9. The SVG and HTML5 video is super impressive though.

No CANVAS though. I suspect they will make noise about it not being finalised and push SVG in it's place.

They are also very, very, very big on jQuery. So hey, CANVAS to SVG plugins.

I know, I know...
posted by Artw at 10:08 AM on March 16, 2010


Oh, and it doesn't support XP, so it will be broadly used to the point where it suplants previous versions around the time of the heat death of the universe.

IE6 will still be around though.
posted by Artw at 2:27 PM on March 16, 2010


« Older How Facebook Was Founded...  |  Chemically Driven Carbon-Nanot... Newer »


This thread has been archived and is closed to new comments