

(Literally) Drawing the HTML 5 Logo in Canvas with Javascript - richchan
http://richwchan.com/2011/01/25/literally-drawing-the-html-5-logo-in-canvas-with-javascript/

======
jinushaun
I don't understand why people are impressed by HTML Canvas demos. It's like
getting impressed by a calculator adding two numbers together. Or being
impressed by a for loop statement in a language. Or being impressed by an
fopen statement to read files.

A collection of drawRect, drawCircle and setBrushColor calls isn't impressive
just because it's done in JS. That's what graphics libraries are supposed to
do. Maybe I'm missing something here...

~~~
brehaut
You have (understandably) been led astray by a poorly considered title.

The article demonstrates a vector based 'hand drawing' algorithm that happens
to use the HTML5 logo and be implemented in javascript with canvas.

Unfortunately it doesn't appear to implement a generalised library for scruffy
drawing.

------
chaosmachine
Click the redraw button a bunch of times while it's still drawing for an
interesting effect.

~~~
richchan
Yep.. Apparently calling jquery ui's disable method doesn't disable the
handler -- guess I should've read the docs...

Anyway, thanks for pointing it out. I will try to fix it when I get home.
Before then, have fun with the "interesting effects". =)

~~~
olalonde
How did you generate the "var levelX" arrays?

~~~
richchan
I would love to say that I made a very sophisticated automated tool for this..
but it was mostly just me hacking a simple script that lets me manually select
coordinates and preview the lines; while console.log()ing the coordinates and
copy-and-pasting into the arrays.

The "borders" for each layer are easier -- all the coordinates come from the
SVG, after translating and scaling.

------
ttol
Increasing the sloppiness makes this way cooler. +1

~~~
ImJasonH
I like upping the sloppiness on layers 2 and 4 to make a sort of "Two-Face"
logo: <http://imgur.com/z1iSH>

------
holdenk
Semi-related: Whats a good fall-back for when webgl isn't directly supported
in the browser?

------
smackfu
Cool, but needs a cancel button that stops drawing and re-enables the sliders.

~~~
richchan
Done! As a bonus, you can now dynamically change the parameters while it is
drawing.

------
notJim
This is hacker news, shouldn't they be evolving the shape, instead of just
straight drawing it? Also, it should be powered by node.js somehow, and have
$3 million in seed funding.

