5 ms·
https://jsfiddle.net/adrice727/49g2Leqw/105/ https://jsfiddle.net/adrice727/49g2Leqw/105/
by adrice727 9y ago
https://jsfiddle.net/adrice727/49g2Leqw/105/ https://jsfiddle.net/adrice727/49g2Leqw/105/
- stuntkite 9y agoThis 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.
- rmetzler 9y agoThis is the vehicle I programmed together with my 5 year old: https://jsfiddle.net/k1g6533y/13/ https://jsfiddle.net/k1g6533y/13/
- thomasfl 9y agoWonderfurl! 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.
- jjeaff 9y agoAbsolutely! 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.
- 4lejandrito 9y agoVery 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/requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window/requ...): https://jsfiddle.net/65q7c5to/ https://jsfiddle.net/65q7c5to/
- reacweb 9y agoWorks fine on chrome, but it seems too fast on firefox.
- hanoz 9y agoWhat do all the context transformation lines do in this example? It seems to work just as well with clearRect on its own.
- ygra 9y agoThere'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.
- deleted 9y ago[deleted]
- DiThi 9y agoIt's using setInterval on purpose, because with requestAnimationFrame the effect is a bit too fast.