diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 369 |
1 files changed, 360 insertions, 9 deletions
@@ -1,6 +1,7 @@ <html> <head> <title>Triangle / Lambdoma</title> + <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" @@ -8,6 +9,8 @@ <style> 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%; + } </style> </head> - <body></body> + <body> + <div id="message"></div> + <div id="help"> + <div class="content"> + <h1>Triangle / Lambdoma</h1> + <p> + 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. + </p> + <p> + The <b>harmonic series</b> (1/1, 2/1, 3/1 ...) is expressed by the + rows, while the <b>undertone series</b> (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. + </p> + <p> + <b>Brightness</b> indicates octave. <b>Color</b> indicates position in + the octave, with red being the root or unison interval 1/1. + </p> + <p></p> + <ul> + <li> + The default instrument is a Hokema sansula, a type of kalimba. + </li> + <li> + Right-click notes to turn on sine waves matching the interval. + </li> + <li> + Drag-and-drop samples into the window to play with your own sounds. + </li> + </ul> + + <h2>keyboard shortcuts</h2> + <tableContainer + ><table> + <tr> + <td>ESC</td> + <td>Stop all sound</td> + </tr> + <tr> + <td>?</td> + <td>Show this help</td> + </tr> + <tr> + <td>+ -</td> + <td>Change scale</td> + </tr> + <tr> + <td>up<br />down<br />left<br />right</td> + <td>Scroll the grid</td> + </tr> + <tr> + <td>0-9 a-z</td> + <td>Keyboard mapped to the top-left 8x8 grid, sorted by pitch</td> + </tr> + <tr> + <td>?</td> + <td>Toggle this help</td> + </tr> + <tr> + <td>\</td> + <td>Detect MIDI device (listening on channel 1)</td> + </tr> + <tr> + <td>⇧ +<br />⇧ -</td> + <td>Change scale root by +/- 1 hz</td> + </tr> + <tr> + <td>⌘⇧ +<br />⌘⇧ -</td> + <td>Change scale root by +/- 10 hz</td> + </tr> + <tr> + <td>⌘ up<br />⌘⇧ up<br />⌘⇧⌃ up</td> + <td>Change pitch of sampler by +10 / +1 / -0.1 hz</td> + </tr> + <tr> + <td>⌘ down<br />⌘⇧ down<br />⌘⇧⌃ down</td> + <td>Change pitch of sampler by -10 / -1 / -0.1 hz</td> + </tr> + </table> + </tableContainer> + + <h2>scales</h2> + <p>Alternate scales are accessed by pressing the +/- keys:</p> + <tableContainer> + <table> + <tr> + <td>natural</td> + <td>Natural numbers: 1, 2, 3 ...</td> + </tr> + <tr> + <td>undertone</td> + <td>Subharmonic intervals under the line 1/1</td> + </tr> + <tr> + <td>overtone</td> + <td>Harmonic intervals above the line 1/1</td> + </tr> + <tr> + <td>primes</td> + <td>Prime numbers only (most dissonant)</td> + </tr> + <tr> + <td>arithmetic</td> + <td>Multiply all cells by an interval rather than scrolling</td> + </tr> + <tr> + <td>Collatz</td> + <td> + <a + href="https://en.wikipedia.org/wiki/Collatz_conjecture" + target="_blank" + >Hailstone numbers</a + > + of Lothar Collatz + </td> + </tr> + <tr> + <td>Pythagorean</td> + <td> + <a + href="https://en.wikipedia.org/wiki/Pythagorean_interval" + target="_blank" + >Pythagorean intervals</a + > + where each ratio is a power of 2<super>n</super> or 3<super + >n</super + > + </td> + </tr> + </table> + </tableContainer> + + <h2>about this page</h2> + <p> + This webpage was inspired by + <a href="https://www.youtube.com/watch?v=4pdSYkI86go" + >Peter Neubäcker</a + >, inventor of the Melodyne software. In the short biographical + documentary <i>Wie klingt ein Stein?</i> (<i + >What does a stone sound like?</i + >), 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. + </p> + <p> + I later learned that I had recreated the + <a href="https://www.lambdoma.com/">Lambdoma</a> as described by + <a href="https://www.lambdoma.com/">Barbara Hero</a>. Hero made an + electronic lambdoma instrument for sound healing purposes. Hero traces + the Lambdoma back to the <i>Introduction to Arithmetic</i> by + <a + href="https://archive.org/details/nicomachus-introduction-to-arithmetic/page/191/mode/1up" + >Nichomachus of Gerasa</a + > + (ca. 100 CE), and suggests it was rediscovered by Albert von Thimus + who + <a + href="https://archive.org/details/bsb10527783/page/137/mode/1up" + target="_blank" + >depicts it</a + > + in his <i>Die harmonikale Symbolik des Alterthums</i> (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 + <a + href="https://lambdoma.com/pdfs/the-lambdoma-matrix-and-harmonic-intervals.pdf" + target="_blank" + >article</a + >, <i>The Lambdoma Matrix and Harmonic Intervals</i> (1999). + </p> + + <p> + 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. + </p> + + <h2>thank you!</h2> + + <p> + Sansula samples by Freesound user + <a + href="https://freesound.org/people/cabled_mess/packs/21410/" + target="_blank" + >cabled_mess</a + >. Thanks to + <a href="https://www.nyz.recycled-plastics.net/" target="_blank" + >Dave Noyze</a + > + for telling me about Barbara Hero. Thanks to + <a href="https://hems.io/" target="_blank">Hems</a> for the support! + </p> + <p>Jules LaPlace / <a href="/">asdf.us</a> / 2018-2025</p> + <div class="close">✗</div> + </div> + <br /> + </div> + <div id="help-button"><span>?</span></div> + </body> <script src="bundle.js"></script> </html> |