6 ms·

Inspirograph

117 points by WestCoastJustin 12y ago

thomasfromcdnjs 12y ago
Reminded me of school...
sdoering 12y ago
There goes my productivity. Way to cool...
eps 12y ago
Argh... It doesn't understand touch interface. That would've been a match made in heaven.
- neil_s 12y ago
  Works with my stylus on a Surface Pro. Feels way more natural than doing it with a mouse since I'm literally moving a pen in circles.
  - scott_karana 12y ago
    Stylus works as mouse, not touch, as far as web events are concerned. (IIRC) So this won't work well on an iPad...
tempodox 12y ago
That's a nice application of epicycloid graphs. Every programmer should have her own implementation of it :)
AriinPHD 12y ago
I like the fact that while the site isn't mobile compatible, they actually took the time to identify mobile visitors and give them a friendly warning about it :)
feld 12y ago
Instantly reminded me of using my brother's Spirograph when I was a kid, so you definitely did this well :-) http://i.imgur.com/ARokLzv.jpg http://i.imgur.com/ARokLzv.jpg
baliex 12y ago
This is my childhood, and the gallery is great!
- fredleblanc 12y ago
  Exactly this. It's such a simple concept (spirographs themselves), but using this site put me into an almost trance-like calm. And clicking buttons to choose the "plastic wheels" was even easier than finding them in the box.
wtetzner 12y ago
Click an drag isn't working for me in Firefox or Chrome. The arrow keys work though. Am I doing something wrong?
nilkn 12y ago
This is something of a tangent, but this is kind of a cool visualization of what is sometimes called a "spinorial" object -- an object which can undergo a full rotation and yet not come back to its original state. Here the number of rotations necessary to restore the original state depends on the number of teeth on the gears. A more classic spinorial object is a belt attached to, say, a book, or apparently your own arm holding up an oriented plate: http://en.wikipedia.org/wiki/Plate_trick http://en.wikipedia.org/wiki/Plate_trick
yogiHacks 12y ago
I've always loved that you can get such profound geometry out of spinographs: flowers of life, toruses, and what look like pentagonal solar-magnetic bands... a reality hack to be sure.
ipsin 12y ago
I understand that it probably doesn't work with the intended aesthetic, but I kept looking for a "make it go" button, because using a nub-mouse to wind the gear around repeatedly is hard.
- lucio 12y ago
  +1. It will be a nice addition, maye an "advanced" hotkey?. Very nice work! Congrats!
- egeozcan 12y ago
  you can hold the left/right arrow keys
bengali3 12y ago
this is very nicely done
pierrec 12y ago
"Inspirograph isn't mobile friendly... yet! A beautiful, ad-free Inspirograph app is in the works." Wonder if that will be free as well. How would one go about transforming a (desktop) web app such as this one into an app for each mobile platform? Edit: and here's the source: https://github.com/nfriend/inspirograph https://github.com/nfriend/inspirograph Looks like a bit of framework bloat (in my opinion), this is really the kind of thing that could cleanly be done with minimal frameworks and libraries. But the source still looks nice (and there's even a windows screensaver version??)
romsson 12y ago
Great piece of work! Had lots of fun with it.. Reminds me some Twitter visualizations we did a while ago http://romain.vuillemot.net/publications/visap13-spirograph-designs-ambient-display-tweets/ http://romain.vuillemot.net/publications/visap13-spirograph-... (hopefully Spirographs drawing are fully automated in this case ;)
NIL8 12y ago
Cool! Nice work. Here's a first-hand user's experience: It took me a bit to figure out how to make it work. I thought I should click the pen hole and press my mouse key as I move it around. Maybe a simple how-to description to get me started would be helpful. Of course, I could just play with it a little more :)
theophrastus 12y ago
This really is impressively done. (yet) liberated from the constrains of real plastic begs elements of special significance. For instance, where's the möbius gear?
ramgorur 12y ago
great work! reminds me of my childhood, thanks!
mhb 12y ago
How can I get the moving gear to be on the outside of the fixed rings (the two that have inside and outside teeth)?

Inspirograph

thomasfromcdnjs 12y ago

Reminded me of school...

sdoering 12y ago

There goes my productivity. Way to cool...

eps 12y ago

Argh... It doesn't understand touch interface. That would've been a match made in heaven.

neil_s 12y ago
Works with my stylus on a Surface Pro. Feels way more natural than doing it with a mouse since I'm literally moving a pen in circles.
- scott_karana 12y ago
  Stylus works as mouse, not touch, as far as web events are concerned. (IIRC) So this won't work well on an iPad...

tempodox 12y ago

That's a nice application of epicycloid graphs. Every programmer should have her own implementation of it :)

AriinPHD 12y ago

I like the fact that while the site isn't mobile compatible, they actually took the time to identify mobile visitors and give them a friendly warning about it :)

feld 12y ago

Instantly reminded me of using my brother's Spirograph when I was a kid, so you definitely did this well :-) http://i.imgur.com/ARokLzv.jpg http://i.imgur.com/ARokLzv.jpg

baliex 12y ago

This is my childhood, and the gallery is great!

fredleblanc 12y ago
Exactly this. It's such a simple concept (spirographs themselves), but using this site put me into an almost trance-like calm. And clicking buttons to choose the "plastic wheels" was even easier than finding them in the box.

wtetzner 12y ago

Click an drag isn't working for me in Firefox or Chrome. The arrow keys work though. Am I doing something wrong?

nilkn 12y ago

This is something of a tangent, but this is kind of a cool visualization of what is sometimes called a "spinorial" object -- an object which can undergo a full rotation and yet not come back to its original state. Here the number of rotations necessary to restore the original state depends on the number of teeth on the gears. A more classic spinorial object is a belt attached to, say, a book, or apparently your own arm holding up an oriented plate: http://en.wikipedia.org/wiki/Plate_trick http://en.wikipedia.org/wiki/Plate_trick

yogiHacks 12y ago

I've always loved that you can get such profound geometry out of spinographs: flowers of life, toruses, and what look like pentagonal solar-magnetic bands... a reality hack to be sure.

ipsin 12y ago

I understand that it probably doesn't work with the intended aesthetic, but I kept looking for a "make it go" button, because using a nub-mouse to wind the gear around repeatedly is hard.

lucio 12y ago
+1. It will be a nice addition, maye an "advanced" hotkey?. Very nice work! Congrats!
egeozcan 12y ago
you can hold the left/right arrow keys

bengali3 12y ago

this is very nicely done

pierrec 12y ago

"Inspirograph isn't mobile friendly... yet! A beautiful, ad-free Inspirograph app is in the works." Wonder if that will be free as well. How would one go about transforming a (desktop) web app such as this one into an app for each mobile platform? Edit: and here's the source: https://github.com/nfriend/inspirograph https://github.com/nfriend/inspirograph Looks like a bit of framework bloat (in my opinion), this is really the kind of thing that could cleanly be done with minimal frameworks and libraries. But the source still looks nice (and there's even a windows screensaver version??)

romsson 12y ago

Great piece of work! Had lots of fun with it.. Reminds me some Twitter visualizations we did a while ago http://romain.vuillemot.net/publications/visap13-spirograph-designs-ambient-display-tweets/ http://romain.vuillemot.net/publications/visap13-spirograph-... (hopefully Spirographs drawing are fully automated in this case ;)

NIL8 12y ago

Cool! Nice work. Here's a first-hand user's experience: It took me a bit to figure out how to make it work. I thought I should click the pen hole and press my mouse key as I move it around. Maybe a simple how-to description to get me started would be helpful. Of course, I could just play with it a little more :)

theophrastus 12y ago

This really is impressively done. (yet) liberated from the constrains of real plastic begs elements of special significance. For instance, where's the möbius gear?

ramgorur 12y ago

great work! reminds me of my childhood, thanks!

mhb 12y ago

How can I get the moving gear to be on the outside of the fixed rings (the two that have inside and outside teeth)?