Spirograph in HTML 5

[DanielRibeiro]

http://codepen.io/cwolves/pen/gykbc

[sea6ear]

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

[DanBC]

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

[andrewcooke]

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]

[alisey]

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

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

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

[jmspring]

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.

[inDigiNeous → jmspring]

You might also want to check out 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.

[ChuckMcM]

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

[ISL]

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

[ttty]

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
    }

[Rinum]

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

[billpg]

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

[tete → billpg]

It's slow in the middle, cause I think you are just changing the direction, by maxing it out.

[snifty]

dear hn, html5 != chrome

[ChrisClark → snifty]

Works great in Firefox 19.0.2, I think that's pretty old.

[fotbr → ChrisClark]

Works great in FF 3.6.24, too. Yes, I dusted off an ancient testing virtual machine just to see if it would work.

[lowboy → snifty]

No one has said that html5 == chrome. Does it not work on other browsers for you?

[mlex → snifty]

The demo works fine for me on Nightly 23.0a1, which browser are you using?

[fein → snifty]

Renders beautifully on Chrome 26. Which version are you using?

[mikiem → snifty]

iPad and Samsung S3 working fine for me.

[jmspring → snifty]

safari on mac no problem.