Spirograph in HTML 5 • Hacker News Board

Re: Spirograph in HTML 5

#11

Post by sea6ear » Sun, Apr 07, 2013, 2:15 AM UTC

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

Re: Spirograph in HTML 5

#12

Post by ISL » Sun, Apr 07, 2013, 2:40 AM UTC

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

Re: Spirograph in HTML 5

#13

Post by ChrisClark » Sun, Apr 07, 2013, 2:42 AM UTC

snifty wrote: post #5

dear hn, html5 != chrome

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

Re: Spirograph in HTML 5

#14

Post by fotbr » Sun, Apr 07, 2013, 3:04 AM UTC

ChrisClark wrote: post #13

snifty wrote: post #5

dear hn, html5 != chrome

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

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

Re: Spirograph in HTML 5

#15

Post by jmspring » Sun, Apr 07, 2013, 4:12 AM UTC

snifty wrote: post #5

dear hn, html5 != chrome

safari on mac no problem.

Re: Spirograph in HTML 5

#16

Post by jmspring » Sun, Apr 07, 2013, 4:15 AM UTC

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.

Re: Spirograph in HTML 5

#17

Post by alisey » Sun, Apr 07, 2013, 11:17 AM UTC

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

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

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

Re: Spirograph in HTML 5

#18

Post by billpg » Sun, Apr 07, 2013, 12:31 PM UTC

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

Re: Spirograph in HTML 5

#19

Post by ttty » Sun, Apr 07, 2013, 12:41 PM UTC

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
    }

Re: Spirograph in HTML 5

#20

Post by tete » Sun, Apr 07, 2013, 12:55 PM UTC

billpg wrote: post #18

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

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