Gears ⚙

Gears are fascinating because they are one of the most basic and essential components of so many machines. They are simple yet elegant in their design and function, and they have been used for centuries to power all sorts of machines.

This piece explores gears in an abstract way, chaining them with different rules - some more realistic than others - creating a variety of different settings.

Controls:
Mousewheel - Zoom in/out
Up/down Arrows - Increase/decrease gear speeds (hold left shift for coarse-tune, left ctrl for fine-tune)
Space - Pause
S - Download image
H - Hide gears
I - Invert gear render order
R - Reverse gear direction
F - Show/hide frame
V - Open plotter export menu
C - Show/hide connectors
T - Enable transparency on grab
D + Click - Hide gear
U - Unhide all gears

Plotter export options:
Default - The background of your iteration will be exported into the SVG. Only possible for the styles "Brushed Straight", "Cables", and "Gears".
None - No background
Lines - Parallel lines. Controlled by angle and spacing option
Circles - Concentric circles originating from the middle. Controlled by spacing.
Bg line spacing - spacing of the background lines
Bg line angle - angle of background lines (Only for "Background: Lines")
Min line length - Lines below this length will be discarded

Url parameter options:
lowPerf=1 - disables shadows
noMove=1 - start paused
multGears=X - Not enough gears in your iteration? Substitute X with any number to roughly multiply the amount of gears in your iteration. Use at your own risk ;-)
connectorShade=X - Shadeline spacing on connectors
spokesShade=X - Shadeline spacing on spokes
gearInnerShade - Shadeline spacing on inner gear rings
gearOuterShade - Shadeline spacing on outer gear rings
gearTeethringShade - Shadeline spacing on gear teeth rings

Best viewed on a desktop in Chrome. Requires a decent computer to run smoothly.
Supports touch controls and mobile, however it runs very slowly on firefox mobile.

2% chance to get a golden favicon, which will guarantee a reserve spot for all future mechanical drops.

Created in Vanilla.js

Libraries used:
noise.js by Joseph Gentle