add hyperbolic scale mode

1 files changed, 23 insertions, 15 deletions

diff --git a/index.html b/index.html
index 76aa50b..b0687db 100644
--- a/index.html
+++ b/index.html
@@ -202,7 +202,7 @@
         font-size: 20px;
         height: 100%;
       }
-      u {
+      .mode {
         cursor: pointer;
       }
     </style>
@@ -299,28 +299,28 @@
 
         <h2>scales</h2>
 
-        <p>Alternate scales are accessed by pressing the +/- keys:</p>
+        <p>Alternate scales are accessed by pressing the +/- keys.</p>
 
         <tableContainer>
           <table>
             <tr>
-              <td>natural</td>
+              <td class="mode" name="natural">natural</td>
               <td>Natural numbers: 1, 2, 3 ...</td>
             </tr>
             <tr>
-              <td>undertone</td>
+              <td class="mode" name="undertone">undertone</td>
               <td>Subharmonic intervals under the line 1/1</td>
             </tr>
             <tr>
-              <td>overtone</td>
+              <td class="mode" name="overtone">overtone</td>
               <td>Harmonic intervals above the line 1/1</td>
             </tr>
             <tr>
-              <td>primes</td>
+              <td class="mode" name="primes">primes</td>
               <td>Prime numbers only (most dissonant)</td>
             </tr>
             <tr>
-              <td>arithmetic</td>
+              <td class="mode" name="arithmetic">arithmetic</td>
               <td>Multiply all cells by an interval rather than scrolling</td>
             </tr>
             <!--
@@ -330,7 +330,14 @@
             </tr>
             -->
             <tr>
-              <td>Collatz</td>
+              <td class="mode" name="hyperbolic">hyperbolic</td>
+              <td>
+                Change stride rather than scrolling. Denominator magnifies along
+                the 1/1 line, numerator emphasizes the hyperbolic extremes.
+              </td>
+            </tr>
+            <tr>
+              <td class="mode" name="collatz">Collatz</td>
               <td>
                 <a
                   href="https://en.wikipedia.org/wiki/Collatz_conjecture"
@@ -341,7 +348,7 @@
               </td>
             </tr>
             <tr>
-              <td>Pythagorean</td>
+              <td class="mode" name="pythagorean">Pythagorean</td>
               <td>
                 <a
                   href="https://en.wikipedia.org/wiki/Pythagorean_interval"
@@ -437,12 +444,13 @@
         <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 id="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.
+          <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.
         </p>
 
         <p>