Spirograph in HTML 5

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

by DanielRibeiro • 13 years ago

132 20 13 years ago

codepen.io

ChuckMcM• 13 years ago

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

andrewcooke• 13 years ago

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]

Rinum• 13 years ago

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

snifty• 13 years ago

dear hn, html5 != chrome

lowboy• 13 years ago

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

mlex• 13 years ago

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

mikiem• 13 years ago

iPad and Samsung S3 working fine for me.

fein• 13 years ago

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

ChrisClark• 13 years ago

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

fotbr• 13 years ago

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

jmspring2• 13 years ago

safari on mac no problem.

DanBC• 13 years ago

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

sea6ear• 13 years ago

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

ISL• 13 years ago

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

jmspring2• 13 years ago

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• 13 years ago

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.

alisey• 13 years ago

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

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

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

billpg• 13 years ago

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

tete• 13 years ago

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

ttty• 13 years ago

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
    }

Spirograph in HTML 5

Related Stories