Hacker News Reader

Comment by bcjordan | Hacker News Reader

If you repeatedly clear canvas/draw with a setInterval of ~100-200ms, looks kind of like the hand-drawn un-stable lines art style of Squigglevision (Dr. Katz / Science Court) :)

EDIT: If folks want to play with a JSFiddle: https://jsfiddle.net/49g2Leqw/9/

View on HN

https://jsfiddle.net/adrice727/49g2Leqw/105/

This is great. Thank you both for these fiddles. I've been doing a lot of SVG DOM stuff. Mostly tied to maps. I'm excited to try this out.

This is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/

Wonderfurl! It makes the kid see how a small algorithm saves time AND produces almost the same results as hand drawn animation. I have to try this myself with my own kids.

Absolutely! Assuming your 5 year old is some kind of savant. Otherwise, I can't imagine a kid actually understanding what is going on with a script like this.

Very nice!

I changed it a little bit to optimise rendering just in case you don't know about 'requestAnimationFrame()' (https://developer.mozilla.org/en-US/docs/Web/API/window/requ...):

https://jsfiddle.net/65q7c5to/

Works fine on chrome, but it seems too fast on firefox.

What do all the context transformation lines do in this example? It seems to work just as well with clearRect on its own.

There's only one such line. In general it's a good idea to reset the transform before clearing as the (0, 0, w, h) rectangle may not cover the whole canvas anymore. In this toy example there obviously isn't another transform so it's without function.

It's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.

That's true. There's so much randomness in there that every render will likely be unique - every so slightly different from the previous frame.

Reminds me of the art used in yoshi story. Awesome!

or Ed, Edd n Eddy cartoon :)

Hahahahaha, nice one!

Reply on news.ycombinator.com