Harmonograph — Digital Pendulum Drawing Machine

A digital simulation of the Victorian-era harmonograph, a mechanical device that uses damped pendulums to create intricate geometric drawings. This version simulates 4 damped pendulums (2 per axis) with real-time Canvas 2D rendering and velocity-dependent pen dynamics.

Features

• 4-Pendulum Engine: Each pendulum has amplitude, frequency, phase, and damping parameters
• Velocity-Dependent Rendering: Pen width varies with pendulum speed — faster = thinner lines
• 5 Color Modes: Velocity, Time, Angle, Curvature, Solid
• 6 Palettes: Emerald, Gold, Copper, Ruby, Deep Sea, Moonlight
• Custom Knob Controls: Drag vertically to adjust parameters (like hardware synths)
• 6 Curated Presets: Rose Curve, Butterfly, Orbit Decay, Spiral Galaxy, Woven Silk, Heartbeat
• Gallery: Save drawings with thumbnail previews to MongoDB
• PNG Export: Download high-resolution drawings
• DPR Aware: Retina-ready canvas rendering

Tech Stack

• React 18 + Vite + Tailwind CSS v4
• Express + MongoDB (Mongoose)
• Framer Motion animations
• Zustand state management
• Canvas 2D (multi-layer rendering, DPR-aware)
• Custom drag-knob UI components

Design

• Style: Art Nouveau × Scientific Brass
• Fonts: Playfair Display (display) + Libre Baskerville (body) + DM Mono (data)
• Colors: Parchment (#f5f0e1) + Brass (#b8860b) + Emerald (#2d6a4f) + Ink (#1a1815)
• Texture: SVG noise parchment overlay + radial vignette on canvas

Run Locally

npm install
npm run dev
# Frontend: http://localhost:5173
# Backend: http://localhost:3001

Math

The harmonograph computes:

x(t) = A₁·sin(f₁·t + φ₁)·e^(-d₁·t) + A₃·sin(f₃·t + φ₃)·e^(-d₃·t)
y(t) = A₂·sin(f₂·t + φ₂)·e^(-d₂·t) + A₄·sin(f₄·t + φ₄)·e^(-d₄·t)

Where each pendulum has amplitude (A), frequency (f), phase (φ), and damping (d). The exponential decay creates the characteristic spiraling-inward patterns.

References

• Physical harmonograph machines (Victorian era, ~1840s)
• Spirograph toy (Denys Fisher, 1965)
• Lissajous figures (Jules Antoine Lissajous, 1857)