From dfbd36be4341f633cb51d187d3245efbc9d500a8 Mon Sep 17 00:00:00 2001 From: julian laplace Date: Mon, 7 Jul 2025 19:54:02 +0200 Subject: transitions, fix colors, add help --- index.html | 369 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 360 insertions(+), 9 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index 85db1d2..4058508 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ Triangle / Lambdoma + html, body { + margin: 0; + padding: 0; overflow: hidden; } body { @@ -17,47 +20,395 @@ color: white; text-shadow: 0 0 1px #000; transition: background-color 100ms; + } + grid { + display: block; + width: 100vw; + height: 100vh; + overflow: hidden; user-select: none; } - div { + grid * { position: absolute; cursor: pointer; box-sizing: border-box; } - body > div { + grid > div { width: 50px; height: 50px; } - div > div { + grid > div > div { width: 20px; } - div > div:nth-child(1) { + grid > div > div:nth-child(1) { text-align: right; top: 5px; left: 3px; } - div > div:nth-child(2) { + grid > div > div:nth-child(2) { text-align: center; top: 15px; left: 16px; opacity: 0.8; transform: rotate(20deg); } - div > div:nth-child(3) { + grid > div > div:nth-child(3) { text-align: left; top: 29px; left: 28px; } - div.playing { + grid > div.playing { border: 2px solid #fff; box-shadow: 0 1px 3px #fff; z-index: 2; } - div.playing > div { + grid > div.playing > div { margin: -2px -2px; } + + #message { + position: absolute; + bottom: 0; + right: 0; + padding: 0.5rem; + text-align: right; + pointer-events: none; + text-shadow: 0 0 2px #000; + font-size: 72px; + z-index: 1234; + } + #help { + position: absolute; + top: 0; + left: 0; + height: 100%; + padding: 0.5rem; + z-index: 1; + transition: opacity 0.2s; + overflow: scroll; + opacity: 0; + pointer-events: none; + } + #help.visible { + opacity: 1; + pointer-events: auto; + } + #help h1, + #help h2 { + margin: 0; + padding: 0; + margin-bottom: 0.5rem; + } + #help h1 { + font-size: 24px; + } + #help h2 { + font-size: 18px; + margin-top: 1.5rem; + } + #help .content { + background: rgba(0, 0, 0, 0.7); + backdrop-filter: blur(10px); + padding: 1rem 1rem 1rem 1.5rem; + max-width: 600px; + border-radius: 8px; + box-shadow: 0 2px #000; + } + #help a { + color: #fff; + } + #help ul { + margin: 0; + padding: 0; + } + #help li { + margin-left: 1rem; + padding: 0; + } + #help tableContainer { + display: inline-block; + border-radius: 8px; + } + #help table { + font-size: 14px; + padding: 0; + margin: 0; + border-spacing: 0; + } + #help table td { + padding: 0.125rem 1rem; + min-width: 100px; + } + #help table td:first-child { + text-align: right; + color: #ff8; + } + #help table tr:nth-child(even) { + background: rgba(0, 0, 0, 0.75); + } + #help table tr:nth-child(odd) { + background: rgba(0, 0, 0, 0.25); + } + .close { + position: absolute; + top: 0; + right: 0; + font-size: 16px; + padding: 1rem; + font-weight: bold; + cursor: pointer; + user-select: none; + } + super { + font-size: 10px; + position: relative; + bottom: 5px; + } + #help p { + margin-block-start: 0; + margin-block-end: 0.75rem; + line-height: 1.4; + } + #help li { + line-height: 1.4; + } + #help-button { + position: fixed; + top: 0; + right: 0; + z-index: 12345; + cursor: pointer; + margin: 0.75rem; + width: 32px; + height: 32px; + display: flex; + text-align: center; + align-items: center; + justify-content: center; + display: block; + border-radius: 50%; + background: rgba(0, 0, 0, 0.25); + backdrop-filter: blur(20px); + line-height: 0; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); + } + #help-button span { + display: flex; + flex: 1; + justify-content: center; + align-items: center; + font-weight: bold; + font-size: 20px; + height: 100%; + } - + +
+
+
+

Triangle / Lambdoma

+

+ This instrument uses a basic cartesian plot of the rational numbers, + expressed as fractions, to make a wide palette of just intonation + intervals quickly accessible. +

+

+ The harmonic series (1/1, 2/1, 3/1 ...) is expressed by the + rows, while the undertone series (1/1, 1/2, 1/3, ...) is + expressed by the columns. The resulting intervals are instantly + musically meaningful, though they arise out of these simple ratios. +

+

+ Brightness indicates octave. Color indicates position in + the octave, with red being the root or unison interval 1/1. +

+

+
    +
  • + The default instrument is a Hokema sansula, a type of kalimba. +
    • +
  • + Right-click notes to turn on sine waves matching the interval. +
    • +
  • + Drag-and-drop samples into the window to play with your own sounds. +
    • +
+ +

keyboard shortcuts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ESCStop all sound
?Show this help
+ -Change scale
up
down
left
right		Scroll the grid
0-9 a-zKeyboard mapped to the top-left 8x8 grid, sorted by pitch
?Toggle this help
\Detect MIDI device (listening on channel 1)
⇧ +
⇧ -		Change scale root by +/- 1 hz
⌘⇧ +
⌘⇧ -		Change scale root by +/- 10 hz
⌘ up
⌘⇧ up
⌘⇧⌃ up		Change pitch of sampler by +10 / +1 / -0.1 hz
⌘ down
⌘⇧ down
⌘⇧⌃ down		Change pitch of sampler by -10 / -1 / -0.1 hz
+ + +

scales

+

Alternate scales are accessed by pressing the +/- keys:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
naturalNatural numbers: 1, 2, 3 ...
undertoneSubharmonic intervals under the line 1/1
overtoneHarmonic intervals above the line 1/1
primesPrime numbers only (most dissonant)
arithmeticMultiply all cells by an interval rather than scrolling
Collatz + Hailstone numbers + of Lothar Collatz +
Pythagorean + Pythagorean intervals + where each ratio is a power of 2n or 3n +
+ + +

about this page

+

+ This webpage was inspired by + Peter Neubäcker, inventor of the Melodyne software. In the short biographical + documentary Wie klingt ein Stein? (What does a stone sound like?), Neubäcker describes the basic principles of harmonic intervals. He + first demonstrates how one plays harmonics on a monochord. He then + shows it next to a grid of whole-number ratios, and demonstrates how + one can use these intervals to find specific ratios. I had never seen + the concept of just intonation displayed so elegantly, so I made this + page to understand the concept more deeply. +

+

+ I later learned that I had recreated the + Lambdoma as described by + Barbara Hero. Hero made an + electronic lambdoma instrument for sound healing purposes. Hero traces + the Lambdoma back to the Introduction to Arithmetic by + Nichomachus of Gerasa + (ca. 100 CE), and suggests it was rediscovered by Albert von Thimus + who + depicts it + in his Die harmonikale Symbolik des Alterthums (1876). In the + Lambdoma, Hero also sees the image of Georg Cantor's transfinite set + of rational numbers, which are shown to be countable through use of a + Cartesian plot. More can be read in Hero's + article, The Lambdoma Matrix and Harmonic Intervals (1999). +

+ +

+ With the root, fifth, and fourth in the top-left corner, the Lambdoma + shows how the 3/2 proportion is essential to the perception of + consonance. The musical circle of fifths, derived from these simple + proportions, can be studied in more detail in "Pythagorean" mode, + where related intervals can be found by color and compared. +

+ +

thank you!

+ +

+ Sansula samples by Freesound user + cabled_mess. Thanks to + Dave Noyze + for telling me about Barbara Hero. Thanks to + Hems for the support! +

+

Jules LaPlace / asdf.us / 2018-2025

+
✗
+
+
+
+
?
+ -- cgit v1.2.3-70-g09d2