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
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 [5 favorites]
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
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]
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]
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
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:
(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.
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
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]
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
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
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
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
posted by ixohoxi at 7:46 AM on March 10, 2010 [1 favorite]