Spirograph in HTML 5 (codepen.io)

Nice! Now to hook that up to some lasers :-)

fwiw, 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]

I'm always amazed at how much can be accomplished with so little code; this is awesome!

dear hn, html5 != chrome

I 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/04862663...)

I 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...

Any concerns with epilepsy, running at the higher speeds? Seemed like the rendered spirograph got into the relevant frequency range.

Great 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.

Here's a similar algorithm that creates patterns slightly resembling radiolarians:

http://alisey.deviantart.com/art/Orbits-316110768

http://explord.com/experiments/orbits/

How do I control the speed? Turning the "Speeds" control up or down only seem to make it go really fast.

Is 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
    }