Cogs

 I was discussing with my son how gears work to increase or decrease speed and to increase mechanical advantage. We demonstrated the principles with some lego he had, but I got the idea of coding something in Processing, it being such a great language to prototype ideas, and produce visual results quickly. It was a good exercise, that brought a number of challenges. Over many iterations, over many days, it arrived at something that was sufficiently workable to share.

How it works:

I have six gears in total, with each represented by a gear object. You can turn a gear on or off, and control the number of teeth each has with a slider, to increase of decrease the ratios with the driving or driven gear. The first gear is perpetually rotated, and this drives subsequent gears through pairings.

As usual, now I have it working I can thing of many ways to make it more elegant, but it has served a purpose, especially as part of my successful code-everyday scheme in January.

Once I had the Java version working, I then had some extra challenges as I ported the native Java version into processingJS, the webified JavaScript companion, where some of the graphical features worked a little differently. The gears in Java are Pshape objects, which you then rotate and render each cycle through the draw() function. In the JS version, the Pshape idea is realised a little differently. You have to explicitly create the shape from vertices each time. I believe there is a way to import an SVG file and then use this in the way my Java PShape worked, but I have something that works, and I’ll leave it be.

Anyway, here we are. have a play with it, and enjoy. Click the image above or click here to a page with the source code, and a link to the running webapp.