Spirograph in HTML 5

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

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

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]

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

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

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

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.

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

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

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
    }

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

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

dear hn, html5 != chrome