4 ms·

HTML Spirograph (2021)

135 points by panic 3y ago

drsim 3y ago
We got our girls, 5 and 2, a Spirograph for Christmas. With the provided felt tip pen inserted and the outer circle tacked down, I still really struggle to complete circuits without the circles jumping over each other and messing up the drawing. I don’t remember it being like this as a kid. It felt much more relaxed and natural.
- euroderf 3y ago
  A felt tip can't really work here can it ? Try a pen or pencil ?
- fuzztester 3y ago
  the game had regular ballpoint pens when I had it as a kid.
  - whartung 3y ago
    Not just regular ball point pens, but with a rather long tip. You take a modern, generic Bic pen, and the tip is angular. It's a cone shape, ending in the ball point. The Spirograph pens had their ball point at then end of a tube that was about a 1/4" inch long. I can see if someone pressed really hard, at an angle, how you could bend or break the tip. But it was perfect for Spirograph, because it just went straight in, and was strong enough to drive the gears. I can see how using modern felt pens may be the modern, common (as in really easy to get off the shelf pens for) solution. But, a felt tip us not a ballpoint and could suffer different issues working with something like a Spirograph (such as splotching). And stay away from gel pens, what a smeary mess that must be.
  - javier_e06 3y ago
    I think my cousins and I ruined more than one kitchen table cloth with our inky leaky pens and the spirograph. The physics of the angular momentum I felt gets lost on digital solutions. Is a carnival ride for your hands and fingers.
- dave333 3y ago
  As I remember the trick is to press more toward the ring and not as much sideways. The hardest are when you use a big wheel and use the pen hole nearest the wheels edge - its a bit like the fairground ride that gives you whiplash. I have used glitter ink ballpoints and also pencils with multicolor lead.
- dspillett 3y ago
  I remember it being fairly easy to control, and I'm far from a particularly coordinated person! The set came with ball-point pens IIRC though, not something with a felt-tip, so maybe the more solid tip helped maintain control?
- detritus 3y ago
  As someone who stupidly committed to laser cutting 30-odd spirographs for my four year old's birthday bag treats last year and ended up realising what a stupid idea that was for that age group - you need to go with ball-tipped pens, be they Bic Biros or whatever. Crayons are useless, felt tips are too grippy and even pencils aren't much good, as there's too much friction, especially when the hole size is quite tight.
  - drsim 3y ago
    Agreed. Bizarre felt tips are included in the set.
- sam16180 3y ago
  Our 4-year-old got a Spirograph Junior for Christmas which he's enjoying - the outer gear in held in place by the frame so there's a bit less to go wrong.
merelysounds 3y ago
Nicely done, I enjoyed playing with this. I especially like the randomizers. I've built a spirograph too, https://merely.xyz/waves https://merely.xyz/waves - this one is Fourier series flavored, with an option to play the waveforms.
rambambram 3y ago
This should be an RSS feed with these images in the <enclosure> tag. I would subscribe immediately.
- xyzzy_plugh 3y ago
  What readers support this well?
  - rambambram 3y ago
    The <enclosure> tag, you mean? I think most readers. It's just a place for a link to a multimedia file. I use it for 'photo feeds', posts with only a photo or image. RSS to replace Instagram.
ericyd 3y ago
I'm impressed that it is reasonably usable on mobile. I've built online toys inspired by spirographs and harmonographs and it's a tricky balance to get the image and controls to share a mobile screen space.
- JKCalhoun 3y ago
  Ahh, you mentioned harmonographs! I was fascinated with these when I was younger. Built one (maybe two if I recall). Had a kind of build-off with my dad when I visited him one summer. Maybe the best bonding experience we ever had. I'll have to build another one now that my woodworking skills are improved and my Walter a little fatter.
  - ericyd 3y ago
    That's awesome! I've never built a physical one, I think it's beyond my skill. Sounds like a fun project though.
    - JKCalhoun 3y ago
      The one I built was not unlike this one: https://chestofbooks.com/crafts/popular-mechanics/Things-To-Make/images/Simple-Rectilinear-Harmonograph.jpg https://chestofbooks.com/crafts/popular-mechanics/Things-To-... Not too difficult to build. Two holes in a horizontal board - drop dowels into each one to act as pendulums. The pivot mechanism for each pendulum was one of those trapezoidal box cutter blades. (In the above illustration I suspect they are nails protruding through a cross-piece.) Weights are anything you can find. As long as you can move them up and down the dowels to change the period of the pendulums. A clipboard screwed and glued to the end of one pendulum. The other pendulum has a hinge with the arm holding a pen.
nayuki 3y ago
I learned of this one in year 2016: https://nathanfriend.io/inspiral-web/ https://nathanfriend.io/inspiral-web/
Inviz 3y ago
A designer I worked with had this personal website https://www.narrowdesign.com https://www.narrowdesign.com which incorporated scrolling into the golden spiral with spirograph
- solardev 3y ago
  I'm always torn when I see a site like this. On one hand it's a cool effect, but on the other hand it's pretty distracting and hard to use. When I think "good web design" I mostly think "usable and invisible", not "in your face". But guess that's why I'm not a designer, lol.
  - omnimus 3y ago
    Or that's why you would be good designer. Design world is pretty torn on this tbh. Some designers like effect and some like to be effective. But you can't blame the flashy designers too much. You said it yourself imagine work where "good job" means nobody has noticed anything is wrong. It's kinda hard to sell and measure. Not many people/orgs are sensitive enough to value the "completely obvious" solution that is obvious once you see it but maybe took someone dozens of iterations to come up with.
  - datagram 3y ago
    I think if you're going to show off and do clever impractical things, a personal site is a pretty good place for it. That being said, scrolling that page with a regular mouse is incredibly frustrating.
Acumen321 3y ago
Very cool. If you like this you will like ZenTrails on Steam also.
kwhitefoot 3y ago
I get an error when I try to visit the site: "Site Not Found Well, this is awkward. The site you're looking for is not here. Is this your site? Get more info or contact support. Dreamhost"
rogerallen 3y ago
Wish my VRML Spirograph still worked. :) https://web.archive.org/web/19970617133952fw_/http://reality.sgi.com/rog/spiro/index.html https://web.archive.org/web/19970617133952fw_/http://reality... [1997]
- perilunar 3y ago
  Do you still have the source for the CGI script? If so, you could update the output to VRML97/X3D, then use X_ITE [1] or X3DOM [2] to display the results. 1. https://create3000.github.io/x_ite/ https://create3000.github.io/x_ite/ 2. https://www.x3dom.org https://www.x3dom.org
srott 3y ago
Just in case you missed it, the same guy also has a gear generator https://geargenerator.com https://geargenerator.com

135 points by panic 3y ago

We got our girls, 5 and 2, a Spirograph for Christmas. With the provided felt tip pen inserted and the outer circle tacked down, I still really struggle to complete circuits without the circles jumping over each other and messing up the drawing. I don’t remember it being like this as a kid. It felt much more relaxed and natural.

euroderf 3y ago
A felt tip can't really work here can it ? Try a pen or pencil ?
fuzztester 3y ago
the game had regular ballpoint pens when I had it as a kid.
- whartung 3y ago
  Not just regular ball point pens, but with a rather long tip. You take a modern, generic Bic pen, and the tip is angular. It's a cone shape, ending in the ball point. The Spirograph pens had their ball point at then end of a tube that was about a 1/4" inch long. I can see if someone pressed really hard, at an angle, how you could bend or break the tip. But it was perfect for Spirograph, because it just went straight in, and was strong enough to drive the gears. I can see how using modern felt pens may be the modern, common (as in really easy to get off the shelf pens for) solution. But, a felt tip us not a ballpoint and could suffer different issues working with something like a Spirograph (such as splotching). And stay away from gel pens, what a smeary mess that must be.
- javier_e06 3y ago
  I think my cousins and I ruined more than one kitchen table cloth with our inky leaky pens and the spirograph. The physics of the angular momentum I felt gets lost on digital solutions. Is a carnival ride for your hands and fingers.
dave333 3y ago
As I remember the trick is to press more toward the ring and not as much sideways. The hardest are when you use a big wheel and use the pen hole nearest the wheels edge - its a bit like the fairground ride that gives you whiplash. I have used glitter ink ballpoints and also pencils with multicolor lead.
dspillett 3y ago
I remember it being fairly easy to control, and I'm far from a particularly coordinated person! The set came with ball-point pens IIRC though, not something with a felt-tip, so maybe the more solid tip helped maintain control?
detritus 3y ago
As someone who stupidly committed to laser cutting 30-odd spirographs for my four year old's birthday bag treats last year and ended up realising what a stupid idea that was for that age group - you need to go with ball-tipped pens, be they Bic Biros or whatever. Crayons are useless, felt tips are too grippy and even pencils aren't much good, as there's too much friction, especially when the hole size is quite tight.
- drsim 3y ago
  Agreed. Bizarre felt tips are included in the set.
sam16180 3y ago
Our 4-year-old got a Spirograph Junior for Christmas which he's enjoying - the outer gear in held in place by the frame so there's a bit less to go wrong.

merelysounds 3y ago

Nicely done, I enjoyed playing with this. I especially like the randomizers. I've built a spirograph too, https://merely.xyz/waves https://merely.xyz/waves - this one is Fourier series flavored, with an option to play the waveforms.

rambambram 3y ago

This should be an RSS feed with these images in the <enclosure> tag. I would subscribe immediately.

xyzzy_plugh 3y ago
What readers support this well?
- rambambram 3y ago
  The <enclosure> tag, you mean? I think most readers. It's just a place for a link to a multimedia file. I use it for 'photo feeds', posts with only a photo or image. RSS to replace Instagram.

ericyd 3y ago

I'm impressed that it is reasonably usable on mobile. I've built online toys inspired by spirographs and harmonographs and it's a tricky balance to get the image and controls to share a mobile screen space.

JKCalhoun 3y ago
Ahh, you mentioned harmonographs! I was fascinated with these when I was younger. Built one (maybe two if I recall). Had a kind of build-off with my dad when I visited him one summer. Maybe the best bonding experience we ever had. I'll have to build another one now that my woodworking skills are improved and my Walter a little fatter.
- ericyd 3y ago
  That's awesome! I've never built a physical one, I think it's beyond my skill. Sounds like a fun project though.
  - JKCalhoun 3y ago
    The one I built was not unlike this one: https://chestofbooks.com/crafts/popular-mechanics/Things-To-Make/images/Simple-Rectilinear-Harmonograph.jpg https://chestofbooks.com/crafts/popular-mechanics/Things-To-... Not too difficult to build. Two holes in a horizontal board - drop dowels into each one to act as pendulums. The pivot mechanism for each pendulum was one of those trapezoidal box cutter blades. (In the above illustration I suspect they are nails protruding through a cross-piece.) Weights are anything you can find. As long as you can move them up and down the dowels to change the period of the pendulums. A clipboard screwed and glued to the end of one pendulum. The other pendulum has a hinge with the arm holding a pen.

nayuki 3y ago

I learned of this one in year 2016: https://nathanfriend.io/inspiral-web/ https://nathanfriend.io/inspiral-web/

Inviz 3y ago

A designer I worked with had this personal website https://www.narrowdesign.com https://www.narrowdesign.com which incorporated scrolling into the golden spiral with spirograph

solardev 3y ago
I'm always torn when I see a site like this. On one hand it's a cool effect, but on the other hand it's pretty distracting and hard to use. When I think "good web design" I mostly think "usable and invisible", not "in your face". But guess that's why I'm not a designer, lol.
- omnimus 3y ago
  Or that's why you would be good designer. Design world is pretty torn on this tbh. Some designers like effect and some like to be effective. But you can't blame the flashy designers too much. You said it yourself imagine work where "good job" means nobody has noticed anything is wrong. It's kinda hard to sell and measure. Not many people/orgs are sensitive enough to value the "completely obvious" solution that is obvious once you see it but maybe took someone dozens of iterations to come up with.
- datagram 3y ago
  I think if you're going to show off and do clever impractical things, a personal site is a pretty good place for it. That being said, scrolling that page with a regular mouse is incredibly frustrating.

Acumen321 3y ago

Very cool. If you like this you will like ZenTrails on Steam also.

kwhitefoot 3y ago

I get an error when I try to visit the site: "Site Not Found Well, this is awkward. The site you're looking for is not here. Is this your site? Get more info or contact support. Dreamhost"

rogerallen 3y ago

Wish my VRML Spirograph still worked. :) https://web.archive.org/web/19970617133952fw_/http://reality.sgi.com/rog/spiro/index.html https://web.archive.org/web/19970617133952fw_/http://reality... [1997]

perilunar 3y ago
Do you still have the source for the CGI script? If so, you could update the output to VRML97/X3D, then use X_ITE [1] or X3DOM [2] to display the results. 1. https://create3000.github.io/x_ite/ https://create3000.github.io/x_ite/ 2. https://www.x3dom.org https://www.x3dom.org

srott 3y ago

Just in case you missed it, the same guy also has a gear generator https://geargenerator.com https://geargenerator.com