6 ms·
Spirograph in HTML 5
- ChuckMcM 14y agoNice! Now to hook that up to some lasers :-)
- andrewcooke 14y agofwiw, http://www.acooke.org/spirograph.html http://www.acooke.org/spirograph.html - svg + js, cerca 2005. anyone have a java applet that still runs? :o) [edit: the source http://www.acooke.org/spiro.svg http://www.acooke.org/spiro.svg]
- Rinum 14y agoI'm always amazed at how much can be accomplished with so little code; this is awesome!
- snifty 14y agodear hn, html5 != chrome
- lowboy 14y agoNo one has said that html5 == chrome. Does it not work on other browsers for you?
- mlex 14y agoThe demo works fine for me on Nightly 23.0a1, which browser are you using?
- mikiem 14y agoiPad and Samsung S3 working fine for me.
- fein 14y agoRenders beautifully on Chrome 26. Which version are you using?
- ChrisClark 14y agoWorks great in Firefox 19.0.2, I think that's pretty old.
- fotbr 14y agoWorks great in FF 3.6.24, too. Yes, I dusted off an ancient testing virtual machine just to see if it would work.
- jmspring 14y agosafari on mac no problem.
- DanBC 14y agoI love this. Since I'm on an old book kick today, here's a link to an old book with similar, simpler, nice graphics. (http://www.amazon.com/Mathographics-Robert-Dixon/dp/0486266397/ref=sr_1_sc_1?ie=UTF8&qid=1365296957&sr=8-1-spell&keywords=mathagraphics http://www.amazon.com/Mathographics-Robert-Dixon/dp/04862663...)
- sea6ear 14y agoI find Hal Abelson's book Turtle Geometry [1] fascinating. It describes a dialect of Logo (the graphical routines could probably be implemented relatively easily in Python/Tkinter or Tcl/Tk or something like Processing). Once the basics are described, then it uses them to go on to explore things like non-euclidian geometry (and maybe topology?). [1] http://www.amazon.com/Turtle-Geometry-Mathematics-Artificial-Intelligence/dp/0262510375 http://www.amazon.com/Turtle-Geometry-Mathematics-Artificial...
- ISL 14y agoAny concerns with epilepsy, running at the higher speeds? Seemed like the rendered spirograph got into the relevant frequency range.
- jmspring 14y agoGreat to see this. It reminds me of the original toy. If I had the time/inclination, a kickstarter based on the original toy that rendered on paper and screen might be an interesting plaything. Another future angle could clearly involve 3d-printing of the disks. Good stuff.
- inDigiNeous 14y agoYou might also want to check out http://GeoKone.NET http://GeoKone.NET, which is kinda similar, but not trying to imitate the original spirograph. But I hear many people have compared the two. GeoKone is much more complex though and allows much more flexible geometry to be created.
- alisey 14y agoHere's a similar algorithm that creates patterns slightly resembling radiolarians: http://alisey.deviantart.com/art/Orbits-316110768 http://alisey.deviantart.com/art/Orbits-316110768 http://explord.com/experiments/orbits/ http://explord.com/experiments/orbits/
- billpg 14y agoHow do I control the speed? Turning the "Speeds" control up or down only seem to make it go really fast.
- tete 14y agoIt's slow in the middle, cause I think you are just changing the direction, by maxing it out.
- ttty 14y agoIs that code formatting automatic? if yes, how did you do? (comma, variable number of spaces, key, value) { orientation : 'vertical' , animate : true , value : 100 * radii[ ix + 1 ] , slide : onChange , change : onChange , step : .01 }