diff options
| author | julian laplace <julescarbon@gmail.com> | 2025-07-15 14:49:01 +0200 |
|---|---|---|
| committer | julian laplace <julescarbon@gmail.com> | 2025-07-15 14:49:01 +0200 |
| commit | 38b1babb974dc943d21e358c6ff63c993d747f6b (patch) | |
| tree | c504bc6d8cbb0d7afc4cff1b4eaacbf37e121c49 /index.html | |
| parent | b68e5f30225595abbff4b787d8348c9ea4700d1f (diff) | |
edit copy
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 205 |
1 files changed, 122 insertions, 83 deletions
@@ -266,13 +266,12 @@ width: 100%; height: 100%; display: flex; - justify-content: flex-end; align-items: flex-start; + justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.2s; - background-color: rgba(0, 0, 0, 0.25); - backdrop-filter: blur(2px); + background: rgba(255, 255, 255, 0.1); cursor: pointer; } .root-select.visible { @@ -280,19 +279,37 @@ pointer-events: auto; } .root-select > div { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; text-align: center; line-height: 1.75; - background: rgba(0, 0, 0, 0.5); - border-radius: 4px; - box-shadow: 0 2px #000; + background: rgba(0, 0, 0, 0.75); + border-radius: 12px; padding: 1rem; padding-bottom: 0; - margin-top: 100px; + backdrop-filter: blur(6px); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); + margin-top: 1rem; margin-right: 50px; } .root-select .row { + display: flex; + flex-direction: column; + margin-right: 0.25rem; + margin-left: 0.25rem; margin-bottom: 0.5rem; } + .root-select .row.klavier { + display: flex; + flex-direction: row-reverse; + align-items: center; + justify-content: center; + } + .root-select .row.form-row { + flex-direction: row; + } .root-select .hidden { opacity: 0; pointer-events: none; @@ -306,42 +323,46 @@ "Segoe UI Symbol"; padding: 0; margin: 0; - border: 0; + border: 2px solid; margin-right: 0.25rem; text-align: center; - border-radius: 2px; - box-shadow: 0 2px #000; + border-radius: 32px; } .root-input { display: inline-block; position: relative; + padding-bottom: 0.25rem; } .root-select button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: white; - text-shadow: 0 0 1px #000; font-size: 18px; - background: rgba(0, 0, 0, 0.75); + background: rgba(16, 16, 16, 0.85); border: 0; min-width: 50px; height: 50px; margin-bottom: 0.25rem; cursor: pointer; - border-radius: 8px; + border-radius: 32px; + transition: opacity 0.1s; opacity: 0.9; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; + text-shadow: 0 0 2px #000, 0 0 1px #000; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); } .root-select button:hover { opacity: 1; } .root-select button.ok { - padding-left: 1rem; - padding-right: 1rem; + width: 78px; + } + .klavier button { + text-shadow: 0 0 1px #000, 0 0 1px #000; } .fraction { @@ -353,6 +374,24 @@ .fraction span:first-child { border-bottom: 1px solid; } + + @media (max-width: 800px) { + .root-select { + align-items: flex-start; + background: rgba(0, 0, 0, 0.5); + } + .root-select > div { + background: rgba(0, 0, 0, 0); + margin: 0; + width: 100%; + align-items: center; + justify-content: center; + border-radius: 0; + } + .root-select .row.form-row { + flex-direction: column; + } + } </style> </head> <body> @@ -532,12 +571,12 @@ </p> <p> - I later learned that I had constructed the "lamboid diagram" or - Lambdoma, named for its resemblance to the Greek letter Lambda Λ. The - synergy of color and tone, linking the octave to the color wheel, - seemed intuitive, and revealed a beautiful pattern, both visual and - musical. This pattern had previously been uncovered by artist and - sound practitioner + I later learned that I had constructed the "lambdoid diagram" or + <b>Lambdoma</b>, named for its resemblance to the Greek letter + <i>Lambda</i> Λ. The synergy of color and tone, linking the octave to + the color wheel, seemed intuitive, and revealed a beautiful pattern, + both visual and musical. This pattern had previously been uncovered by + artist and sound practitioner <a href="https://www.lambdoma.com/">Barbara Hero</a>, who built an 8x8 electronic Lambdoma instrument for sound healing purposes, using the same pattern of colors. @@ -593,46 +632,41 @@ </p> <p> - The musical Circle of Fifths, derived from repeatedly stacking the 3:2 - proportion, can be studied in more detail in this program's - <u class="mode" name="pythagorean">Pythagorean</u> scale mode, where - each ratio is a power of 2 or 3. Similar notes can be found by color - and compared. One can easily hear how stacked fifths overshoot the - octave by finding two far-apart red notes and playing both at once, - which makes them beat against each other. This interval is the - "syntonic comma" which is averaged out in various keyboard tuning - systems. + The musical Circle of Fifths, created by repeatedly multiplying a + frequency by 3:2, can be studied in more detail in this program's + <u class="mode" name="pythagorean">Pythagorean</u> mode, where each + ratio is a power of 2 or 3. Similar notes can be found by color and + compared. One can easily hear how stacking fifths does not bring you + back to the starting note. Find two far-apart red notes and play both + at once. These two frequencies are not quite the same, and they will + audibly vibrate or "beat" against each other. The interval between + these notes is known as the "syntonic comma", and tuning systems try + to correct for it in various ways. </p> <p> - Tuning systems must weigh the purity of thirds and fifths. A just - tuning system made from pure fractions might use as its basis the - difference between 3:2 and 4:3, which constitutes a semitone. Such a - scale implies different ratios between "fifths" and "thirds" at - different points in the scale. Each mode can sound highly distinctive, - and some intervals may be considered dissonant or harsh. - </p> - - <p> - In a sense, 12-tone equal temperament "bends" all of the notes such - that the fifths are more consisent, making it easier to modulate - between keys, though other intervals (like thirds) are quite different - from a interval. This process invokes irrational numbers, and creates - in-between intervals which do not exist anywhere on the Lambdoma, no - matter how far out you go. Equal-tempered semitones are separated by a - ratio of the 12th root of 2 (1:<super>12</super>√2). Irrationals are - real numbers, and these can only be approximated by fractions made up - of natural numbers. + Within a Pythagorean tuning system, each scale can sound highly + distinctive, since the notes will not be distributed evenly within the + octave. In a sense, 12-tone equal temperament "bends" all of the notes + so they are evenly spaced. Fifths in equal temperament are not quite + pure but close enough, making it easy to modulate between keys. By + comparison, thirds are quite out of tune compared to a pure ratio + (5:4). Equal temperament invokes irrational numbers, creating + in-between intervals which do not exist on the Lambdoma. (Notes in + equal temperament are separated by an irrational ratio of 1 to the + 12th root of 2 (1:<super>12</super>√2), which can only be approximated + by pure fractions.) </p> <p> In the Lambdoma, Barbara Hero also sees the image of Georg Cantor's - transfinite set of rational numbers ℚ, which Cantor proved countably - infinite by arranging fractions along two axes by numerator and - denominator, similar to the Lambdoma. One may easily grasp this - countable infinity of rationals by considering that, though there are - infinitely many rational numbers, in between any two there lies an - uncountable continuity of real numbers in ℝ. + transfinite set of rational numbers ℚ, which Cantor proved + <i>countably</i> + infinite by arranging fractions into a grid by numerator and + denominator. One may easily grasp this <i>countable infinity</i> of + rationals by considering that, though there are infinitely many + rational numbers, in between any two there lies an + <i>uncountable continuity</i> of real numbers in ℝ. </p> <h2>thank you!</h2> @@ -685,42 +719,47 @@ <div class="root-select"> <div> + <div class="row form-row"> + <div class="root-input"> + <input type="number" min="1" max="1000000" value="440" /> + </div> + <button class="ok">OK</button> + </div> <div class="row"> - <div class="root-input"><input type="text" value="440" /></div> - <button class="ok">SET ROOT</button> + <button class="add-10">+10</button> + <button class="add-1">+1</button> + <button class="sub-1">-1</button> + <button class="sub-10">-10</button> </div> <div class="row"> - <button class="div-2">÷2</button> - <button class="div-3-2"> - ÷<span class="fraction"><span>3</span><span>2</span></span> - </button> + <button class="mul-2">×2</button> <button class="mul-3-2"> ×<span class="fraction"><span>3</span><span>2</span></span> </button> - <button class="mul-2">×2</button> - </div> - <div class="row"> - <button class="sub-10">-10</button> - <button class="sub-1">-1</button> - <button class="add-1">+1</button> - <button class="add-10">+10</button> + <button class="div-3-2"> + ÷<span class="fraction"><span>3</span><span>2</span></span> + </button> + <button class="div-2">÷2</button> </div> - <div class="row"> - <button class="note-db">D♭</button> - <button class="note-eb">E♭</button> - <button class="hidden"></button> - <button class="note-gb">G♭</button> - <button class="note-ab">A♭</button> - <button class="note-bb">B♭</button> - <br /> - <button class="note-c">C</button> - <button class="note-d">D</button> - <button class="note-e">E</button> - <button class="note-f">F</button> - <button class="note-g">G</button> - <button class="note-a">A</button> - <button class="note-b">B</button> - <button class="note-c2">C</button> + <div class="row klavier"> + <div class="row"> + <button class="note-db">D♭</button> + <button class="note-eb">E♭</button> + <button class="hidden"></button> + <button class="note-gb">G♭</button> + <button class="note-ab">A♭</button> + <button class="note-bb">B♭</button> + </div> + <div class="row"> + <button class="note-c">C</button> + <button class="note-d">D</button> + <button class="note-e">E</button> + <button class="note-f">F</button> + <button class="note-g">G</button> + <button class="note-a">A</button> + <button class="note-b">B</button> + <button class="note-c2">C</button> + </div> </div> </div> </div> |