7 ms·

(Literally) Drawing the HTML 5 Logo in Canvas with Javascript

47 points by richchan 16y ago

notJim 16y ago
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.
chaosmachine 16y ago
Click the redraw button a bunch of times while it's still drawing for an interesting effect.
- richchan 16y ago
  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 16y ago
    How did you generate the "var levelX" arrays?
    - richchan 16y ago
      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 16y ago
Increasing the sloppiness makes this way cooler. +1
- ImJasonH 16y ago
  I like upping the sloppiness on layers 2 and 4 to make a sort of "Two-Face" logo: http://imgur.com/z1iSH http://imgur.com/z1iSH
- guynamedloren 16y ago
  Increasing sloppiness on one half + hitting redraw a bunch makes the coolest: http://i.imgur.com/60dEI.png http://i.imgur.com/60dEI.png
jinushaun 16y ago
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 16y ago
  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.
smackfu 16y ago
Cool, but needs a cancel button that stops drawing and re-enables the sliders.
- richchan 16y ago
  Done! As a bonus, you can now dynamically change the parameters while it is drawing.
holdenk 16y ago
Semi-related: Whats a good fall-back for when webgl isn't directly supported in the browser?

47 points by richchan 16y ago

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.

chaosmachine 16y ago

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

richchan 16y ago
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 16y ago
  How did you generate the "var levelX" arrays?
  - richchan 16y ago
    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 16y ago

Increasing the sloppiness makes this way cooler. +1

ImJasonH 16y ago
I like upping the sloppiness on layers 2 and 4 to make a sort of "Two-Face" logo: http://imgur.com/z1iSH http://imgur.com/z1iSH
guynamedloren 16y ago
Increasing sloppiness on one half + hitting redraw a bunch makes the coolest: http://i.imgur.com/60dEI.png http://i.imgur.com/60dEI.png

jinushaun 16y ago

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 16y ago
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.

smackfu 16y ago

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

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

holdenk 16y ago

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