Volvelle

An interactive memory wheel in the tradition of Giordano Bruno (1548-1600), built as a single-page web app with vanilla HTML, CSS, and JavaScript. No frameworks, no build step.

Live demo: https://kakkoidev.github.io/volvelle/

What is a volvelle?

A volvelle is a paper instrument made of concentric rotating disks pinned at the center, dating back to medieval astronomy and calendrical computation. The Renaissance memory master Giordano Bruno repurposed the form into a combinatorial memory machine:

• Each ring is divided into sectors, one per symbol (traditionally a letter of the alphabet).
• Rings stack categories. Bruno's classical four:
  • Agents (figures: Apollo for A, Bartholomew for B...)
  • Actions (verbs / events)
  • Objects (nouns)
  • Circumstances (where / when / how)
• Rotating one ring relative to another aligns an agent + action + object + circumstance into a vivid mnemonic chain.
• A fixed pointer at the top marks which symbol is "active" on each ring.

Bruno's insight: by compressing rich associations into letter-keyed slots and decompressing them on demand via rotation, you can encode vocabulary in any language. Want to remember German Denken ("to think")? Rotate the outer ring to D (Dracula), the inner ring to K (Ken doll) - "Dracula in a den kicking Ken out" - sounds like Den-ken. The same wheel works for Mandarin xiǎng ("to think"): rotate to X, picture Wolverine's claws making an X, and build from there.

Leibniz later argued this kind of symbol-compression-and-recombination was an ancestor of algebra and modern computing.

This project was inspired by Anthony Metivier's video on Bruno's memory wheels: https://www.youtube.com/watch?v=UmbvbbwX1cU

Features

• 4 concentric rings (configurable: 2 to 6) with independent drag-rotation that snaps to the nearest sector.
• Click-to-edit any sector inline with autocomplete suggestions.
• Pre-loaded biblical associations for the Latin alphabet: each letter offers multiple alternatives across four categories (figures, events, objects, places). For example, click D and choose between David, Daniel, Delilah, Deborah - or the events Deluge, Denial, Dedication - or the place Damascus - or the object Dove.
• Multiple symbol presets: Latin (A-Z), Greek (Α-Ω), Hebrew (א-ת), Cyrillic (А-Я), Hiragana (vowels + n, or full gojuon).
• Custom symbol sets: paste any glyphs (emoji, IPA, custom sigils) and save as a named preset.
• Collections: save named bundles of (ring count, ring names, symbol set, populated associations). Switch between a "biblical study" volvelle and a "German vocab" volvelle without losing either.
• Active alignment readout beside the wheel showing the current symbol under the pointer for each ring, plus its populated association.
• Local-first: everything persists to localStorage. No accounts, no backend, no tracking.
• Print-friendly: hides the toolbar in print mode, ready to cut out and pin like a real paper volvelle.

How to use it

1. Drag a ring to rotate it. Release: it snaps to the nearest sector boundary so the symbols stay aligned under the pointer.
2. Click a sector to edit. On the Latin preset you'll see a suggestions dropdown grouped by category, prioritized by ring (the outer Agents ring shows figures first, the next ring shows events first, etc.). Pick one or type your own. Press Enter to save, Escape to cancel.
3. Switch the symbol set with the toolbar's "Symbol set" select.
4. Paste custom glyphs in the toolbar's text field (e.g. ☉☽☿♀♁♂♃♄) and click "Save as preset" to add them to the dropdown.
5. Create a new collection with a custom number of rings (2-6), custom ring names, and any symbol set. Useful for separating language-learning wheels by topic.
6. Print to produce a clean, toolbar-less printout you can cut into a physical volvelle.

Biblical associations

When using the default Latin preset, click any sector to see Bible-themed alternatives. The outermost ring (Agents) suggests biblical figures first; the next ring (Actions) suggests events; then objects; then places. Some examples:

Letter	Figures	Events	Objects	Places
A	Adam, Abraham, Aaron, Abel	Ascension, Annunciation	Ark, Altar	Antioch
D	David, Daniel, Delilah, Deborah	Deluge, Denial of Peter	Dove	Damascus
J	Jesus, Joseph, John, James	Judgment, Jubilee	-	Jerusalem, Jericho, Jordan
M	Moses, Mary, Matthew	Manna falling, Miracle at Cana	Manger, Menorah	Mt Sinai, Mt of Olives
Z	Zacchaeus, Zechariah, Zebedee	-	-	Zion, Zoar

The full list is in biblical.js. Lean letters Q and X include "Brunonian cheat" notes acknowledging that Bruno himself substituted near-letter approximations when no clean fit existed.

Architecture

Four files, no dependencies:

volvelle/
├── index.html       # toolbar, SVG wheel, alignment readout, new-collection dialog
├── styles.css       # modern minimal palette, sector strokes, print rules
├── volvelle.js      # symbol presets, geometry, rendering, drag-rotate, snap, edit, collections, persistence
└── biblical.js      # alternatives table keyed by letter and category

Total: ~37 KB of source. SVG (not Canvas) for crisp rendering at any zoom and clean per-sector click targets. Pointer Events API for unified mouse + touch.

How it draws

• Each ring is an SVG <g> containing N annular-sector <path> elements (one per symbol) plus their <text> labels.
• Ring rotation is a single transform="rotate(θ cx cy)" on the <g>. Children share it.
• Snap on pointerup: round rotation to the nearest multiple of 360/N degrees.
• The 12-o'clock pointer is a fixed <polygon> outside the rings with a dashed guide line to the center.
• The "active symbol" for a given ring is computed from its rotation: index = (-rotation / step) mod N.

Local development

No build step. Just open the file:

open index.html
# or, on Linux:
xdg-open index.html

For a local server (some browsers restrict file:// features):

python3 -m http.server 8000
# then visit http://localhost:8000

Customization

Want to change defaults?

• Add a preset: edit the PRESETS object at the top of volvelle.js.
• Add associations: extend BIBLICAL in biblical.js (or replace it with your own theme - MYTHOLOGY, CHEMISTRY, whatever).
• Change ring sizes: tweak MAX_R and MIN_R in volvelle.js (the current 320 / 30 fits a 700x700 viewBox).
• Restyle: everything visual is in styles.css. The wheel uses no !important.

Credits

• Giordano Bruno for the system itself, and for paying the price for refusing to keep his memory and his cosmos to himself.
• Anthony Metivier of Magnetic Memory Method for the video that started this project.
• The medieval and Renaissance traditions that produced thousands of paper volvelles before any of this was electronic.

License

MIT - see LICENSE.