diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Integerstellar-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Integerstellar-chromium-linux.png
new file mode 100644
index 00000000..4641f09b
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Integerstellar-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Integerstellar-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Integerstellar-firefox-linux.png
new file mode 100644
index 00000000..9a974ef9
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Integerstellar-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/LatticeMurmuration-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/LatticeMurmuration-chromium-linux.png
new file mode 100644
index 00000000..0d37484e
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/LatticeMurmuration-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/LatticeMurmuration-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/LatticeMurmuration-firefox-linux.png
new file mode 100644
index 00000000..f43a7824
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/LatticeMurmuration-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/ModularMultiplicationTable-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/ModularMultiplicationTable-chromium-linux.png
new file mode 100644
index 00000000..3ad8ff9c
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/ModularMultiplicationTable-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/ModularMultiplicationTable-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/ModularMultiplicationTable-firefox-linux.png
new file mode 100644
index 00000000..637bc45f
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/ModularMultiplicationTable-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Pascal-sTriangle-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Pascal-sTriangle-chromium-linux.png
new file mode 100644
index 00000000..fbf26727
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Pascal-sTriangle-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Pascal-sTriangle-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Pascal-sTriangle-firefox-linux.png
new file mode 100644
index 00000000..9209972c
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/Pascal-sTriangle-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/UlamDivisors-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/UlamDivisors-chromium-linux.png
new file mode 100644
index 00000000..9a83f103
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/UlamDivisors-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/UlamDivisors-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/UlamDivisors-firefox-linux.png
new file mode 100644
index 00000000..1c0bfde9
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/UlamDivisors-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png
index a9ebf875..1b1d7152 100644
Binary files a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png and b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png
index d59f0b65..1a86b03b 100644
Binary files a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png and b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png
new file mode 100644
index 00000000..332a6176
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png
new file mode 100644
index 00000000..9ef298db
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png
new file mode 100644
index 00000000..42e50b14
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png
new file mode 100644
index 00000000..844c2e61
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA134028-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA134028-chromium-linux.png
new file mode 100644
index 00000000..88a17f54
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA134028-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA134028-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA134028-firefox-linux.png
new file mode 100644
index 00000000..0b558deb
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA134028-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA202319-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA202319-chromium-linux.png
new file mode 100644
index 00000000..3c13734b
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA202319-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA202319-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA202319-firefox-linux.png
new file mode 100644
index 00000000..2eec99c4
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA202319-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA241298-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA241298-chromium-linux.png
new file mode 100644
index 00000000..9b3b9cdc
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA241298-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA241298-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA241298-firefox-linux.png
new file mode 100644
index 00000000..fe9eeaa1
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA241298-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA114592-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA114592-chromium-linux.png
new file mode 100644
index 00000000..28bb2d87
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA114592-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA114592-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA114592-firefox-linux.png
new file mode 100644
index 00000000..0ee87616
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA114592-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/BeattyDNA-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/BeattyDNA-chromium-linux.png
index fd58b7c8..d276cb84 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/BeattyDNA-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/BeattyDNA-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/Integerstellar-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/Integerstellar-chromium-linux.png
new file mode 100644
index 00000000..4641f09b
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/Integerstellar-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/Integerstellar-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/Integerstellar-firefox-linux.png
new file mode 100644
index 00000000..9a974ef9
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/Integerstellar-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/LatticeMurmuration-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/LatticeMurmuration-chromium-linux.png
new file mode 100644
index 00000000..0d37484e
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/LatticeMurmuration-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/LatticeMurmuration-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/LatticeMurmuration-firefox-linux.png
new file mode 100644
index 00000000..f43a7824
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/LatticeMurmuration-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/ModularMultiplicationTable-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/ModularMultiplicationTable-chromium-linux.png
new file mode 100644
index 00000000..3ad8ff9c
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/ModularMultiplicationTable-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/ModularMultiplicationTable-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/ModularMultiplicationTable-firefox-linux.png
new file mode 100644
index 00000000..637bc45f
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/ModularMultiplicationTable-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/Pascal-sTriangle-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/Pascal-sTriangle-chromium-linux.png
new file mode 100644
index 00000000..fbf26727
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/Pascal-sTriangle-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/Pascal-sTriangle-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/Pascal-sTriangle-firefox-linux.png
new file mode 100644
index 00000000..9209972c
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/Pascal-sTriangle-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/UlamDivisors-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/UlamDivisors-chromium-linux.png
new file mode 100644
index 00000000..9a83f103
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/UlamDivisors-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/UlamDivisors-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/UlamDivisors-firefox-linux.png
new file mode 100644
index 00000000..1c0bfde9
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/UlamDivisors-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/ZetaZero-2310143-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/ZetaZero-2310143-chromium-linux.png
index 1bab62f8..b121e2ef 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/ZetaZero-2310143-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/ZetaZero-2310143-chromium-linux.png differ
diff --git a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png
index a9ebf875..1b1d7152 100644
Binary files a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png and b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-chromium-linux.png differ
diff --git a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png
index 3173a68f..f5cf7fd6 100644
Binary files a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png and b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Start-deep-in-a-sequence-1-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png
index 6901b807..332a6176 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png
index 68898358..9ef298db 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA002819-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png
index 55bcd489..42e50b14 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png
index 68635001..844c2e61 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/FactorFenceA086677-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA134028-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA134028-chromium-linux.png
new file mode 100644
index 00000000..88a17f54
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA134028-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA134028-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA134028-firefox-linux.png
new file mode 100644
index 00000000..0b558deb
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA134028-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA202319-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA202319-chromium-linux.png
new file mode 100644
index 00000000..3c13734b
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA202319-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA202319-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA202319-firefox-linux.png
new file mode 100644
index 00000000..2eec99c4
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA202319-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA241298-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA241298-chromium-linux.png
new file mode 100644
index 00000000..9b3b9cdc
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA241298-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA241298-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA241298-firefox-linux.png
new file mode 100644
index 00000000..fe9eeaa1
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA241298-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA114592-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA114592-chromium-linux.png
new file mode 100644
index 00000000..28bb2d87
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA114592-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA114592-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA114592-firefox-linux.png
new file mode 100644
index 00000000..0ee87616
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA114592-firefox-linux.png differ
diff --git a/src/assets/img/FormulaGrid/ArithmeticTriangle.png b/src/assets/img/FormulaGrid/ArithmeticTriangle.png
new file mode 100644
index 00000000..fd7d3bf7
Binary files /dev/null and b/src/assets/img/FormulaGrid/ArithmeticTriangle.png differ
diff --git a/src/assets/img/FormulaGrid/Hexagons.png b/src/assets/img/FormulaGrid/Hexagons.png
new file mode 100644
index 00000000..52693675
Binary files /dev/null and b/src/assets/img/FormulaGrid/Hexagons.png differ
diff --git a/src/assets/img/FormulaGrid/Triangles.png b/src/assets/img/FormulaGrid/Triangles.png
new file mode 100644
index 00000000..e9777c2d
Binary files /dev/null and b/src/assets/img/FormulaGrid/Triangles.png differ
diff --git a/src/assets/img/FormulaGrid/UlamSpiral.png b/src/assets/img/FormulaGrid/UlamSpiral.png
new file mode 100644
index 00000000..a9822607
Binary files /dev/null and b/src/assets/img/FormulaGrid/UlamSpiral.png differ
diff --git a/src/components/ParamField.vue b/src/components/ParamField.vue
index ab115087..d8330ba5 100644
--- a/src/components/ParamField.vue
+++ b/src/components/ParamField.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="param-field">
-            <label>
+            <label class="param-label">
                 {{ displayName }}
                 <input
                     v-if="param.type === ParamType.BOOLEAN"
@@ -36,7 +36,6 @@
                     :class="!status.isValid() ? 'error-field' : ''"
                     :value="value"
                     :placeholder="placehold(param)"
-                    @keyup.enter="growArea($event)"
                     @input="updateString($event)" />
                 <input
                     v-else
@@ -47,15 +46,24 @@
                     :placeholder="placehold(param)"
                     @keyup.enter="blurField($event)"
                     @input="updateString($event)">
+                <div
+                    v-if="param.placeholderAlways"
+                    v-safe-html="param.placeholder"
+                    class="fakePlaceholder" />
             </label>
 
             <div
                 v-if="param.hideDescription && param.description"
                 class="desc-tooltip">
-                <span class="material-icons-sharp">help</span>
-                <div class="desc-tooltip-text shadowed">
-                    {{ param.description }}
-                </div>
+                <span
+                    class="material-icons-sharp"
+                    @mouseenter="popHelp"
+                    @mouseleave="hideHelp">help</span>
+                <Teleport to="body">
+                    <div ref="helpText" class="desc-tooltip-text shadowed">
+                        {{ param.description }}
+                    </div>
+                </Teleport>
             </div>
         </div>
         <p
@@ -76,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-    import {ref, watch} from 'vue'
+    import {ref, onMounted, useTemplateRef, watch} from 'vue'
     import PickColors from 'vue-pick-colors'
 
     import type {ParamInterface} from '../shared/Paramable'
@@ -91,6 +99,33 @@
         status: ValidationStatus
     }>()
 
+    const helpPopup = useTemplateRef('helpText')
+    function popHelp(e: Event) {
+        const help = helpPopup?.value
+        if (!help) return
+        help.style.opacity = '1'
+        help.style.visibility = 'visible'
+        if (e.target instanceof HTMLSpanElement) {
+            const rect = e.target.getBoundingClientRect()
+            const popHeight = help.offsetHeight
+            if (rect.top > popHeight) {
+                help.style.top = rect.top - popHeight - 4 + 'px'
+                help.style.right = '8px'
+            } else if (rect.bottom + popHeight + 4 < window.innerHeight) {
+                help.style.top = rect.bottom + 4 + 'px'
+                help.style.right = '8px'
+            } else {
+                help.style.top = '0px'
+                help.style.right = '42px'
+            }
+        }
+    }
+    function hideHelp() {
+        if (!helpPopup?.value) return
+        helpPopup.value.style.opacity = '0'
+        helpPopup.value.style.visibility = 'hidden'
+    }
+
     const emit = defineEmits(['updateParam'])
     const isColorful =
         props.param.type === ParamType.COLOR
@@ -112,14 +147,59 @@
         const field = e.target
         if (field instanceof HTMLElement) field.blur()
     }
-    function growArea(e: Event) {
-        const area = e.target
-        if (area instanceof HTMLTextAreaElement) {
-            const curheight = area.getBoundingClientRect().height
-            area.style.height = `${curheight + 14}px`
+
+    function growArea(area: HTMLTextAreaElement) {
+        if (area.scrollHeight > area.offsetHeight) {
+            area.style.height = `${area.scrollHeight + 3}px`
         }
     }
 
+    // based on: https://stackoverflow.com/questions/118241
+    // ---------
+    function cssStyle(element: HTMLElement, prop: string) {
+        return window.getComputedStyle(element, null).getPropertyValue(prop)
+    }
+
+    function canvasFont(el: HTMLElement) {
+        const fontWeight = cssStyle(el, 'font-weight') || 'normal'
+        const fontSize = cssStyle(el, 'font-size') || '16px'
+        const fontFamily = cssStyle(el, 'font-family') || 'Times New Roman'
+
+        return `${fontWeight} ${fontSize} ${fontFamily}`
+    }
+
+    const rulerContext = document.createElement('canvas').getContext('2d')
+    function textWidth(text: string, element: HTMLElement) {
+        if (!rulerContext) return 10
+        rulerContext.font = canvasFont(element)
+        return rulerContext.measureText(text).width
+    }
+    // ---------
+
+    function repositionFake(t: HTMLInputElement | HTMLTextAreaElement) {
+        const faker = t.parentElement?.querySelector('.fakePlaceholder')
+        if (faker instanceof HTMLElement) {
+            faker.style.left = textWidth(t.value, t) + 12 + 'px'
+        }
+    }
+
+    onMounted(() => {
+        const field = document.getElementById(props.paramName)
+        if (
+            props.param.type === ParamType.FORMULA
+            && field instanceof HTMLTextAreaElement
+        ) {
+            growArea(field)
+        }
+        if (
+            (props.param.placeholderAlways
+                && field instanceof HTMLInputElement)
+            || field instanceof HTMLTextAreaElement
+        ) {
+            repositionFake(field)
+        }
+    })
+
     function updateBoolean(e: Event) {
         blurField(e)
         const inp = e.target as HTMLInputElement
@@ -134,6 +214,13 @@
             || t instanceof HTMLTextAreaElement
         ) {
             emit('updateParam', t.value)
+            if (t instanceof HTMLTextAreaElement) growArea(t)
+            if (
+                !(t instanceof HTMLSelectElement)
+                && props.param.placeholderAlways
+            ) {
+                repositionFake(t)
+            }
         }
     }
 
@@ -218,6 +305,7 @@
     }
 
     function placehold(par: ParamInterface<ParamType>) {
+        if (par.placeholderAlways) return ''
         if (typeof par.placeholder === 'string') return par.placeholder
         const stringifier = typeFunctions[par.type].derealize
         return stringifier.call(par, par.default as never)
@@ -229,6 +317,10 @@
         font-size: 12px;
     }
 
+    .param-label {
+        position: relative;
+    }
+
     input {
         &[type='text'] {
             border: none;
@@ -247,7 +339,8 @@
         }
     }
 
-    ::placeholder {
+    ::placeholder,
+    .fakePlaceholder {
         color: grey;
         opacity: 0.5;
     }
@@ -260,6 +353,14 @@
         opacity: 0.5;
     }
 
+    .fakePlaceholder {
+        position: absolute;
+        font-size: 14px;
+        left: 10px;
+        bottom: 8px;
+        z-index: 2;
+    }
+
     select {
         border: 1px solid var(--ns-color-black);
         background-color: var(--ns-color-white);
@@ -327,11 +428,10 @@
         }
 
         right: 4px;
-        bottom: 0px;
+        top: 4px;
     }
 
-    .desc-tooltip .desc-tooltip-text {
-        visibility: hidden;
+    .desc-tooltip-text {
         width: 240px;
         background-color: var(--ns-color-white);
         color: var(--ns-color-black);
@@ -340,20 +440,15 @@
         padding: 8px;
         font-size: 12px;
 
-        position: absolute;
-        z-index: 1;
-        bottom: 125%;
+        position: fixed;
+        z-index: 120;
         right: 0;
         margin-left: -120px;
 
         opacity: 0;
+        visibility: hidden;
         transition:
             opacity 0.2s,
             visibility 0.2s;
     }
-
-    .desc-tooltip:hover .desc-tooltip-text {
-        visibility: visible;
-        opacity: 1;
-    }
 </style>
diff --git a/src/shared/Chroma.ts b/src/shared/Chroma.ts
index 239d35aa..1451cfd2 100644
--- a/src/shared/Chroma.ts
+++ b/src/shared/Chroma.ts
@@ -13,11 +13,16 @@ the [chroma-js api](https://www.vis4.net/chromajs/). Additional functions
 and facilities for manipulating Chroma colors are documented below.
 
 All of the chroma-js api and operations documented here are also available
-in [mathjs formulas](math.md). In addition, all of the named colors (like
-`red` or `chartreuse`) are available as pre-defined constant symbols, as
-are the color brewer palettes, like `RdBu` or `Set1`. Note the palettes are
-arrays of colors, so to get a specific color from them in a formula you
-need to index them with a 1-based index, e.g., `Set1[5]`.
+in [mathjs formulas](math.md). For example, you can darken a color `x` an
+amount controlled by a number `x` by writing `c.darken(x)`, or desaturate it
+by writing `c.desaturate(x)`, etc.
+
+In addition, all of the named colors (like
+`red` or `chartreuse`, including all CSS (Cascading Style Sheets) named colors)
+are available as pre-defined constant symbols, as are the color brewer
+palettes, like `RdBu` or `Set1`. Note the palettes are arrays of colors,
+so to get a specific color from them in a formula you need to index them
+with a 1-based index, e.g., `Set1[5]`.
 **/
 import type {Color as Chroma} from 'chroma-js'
 import chromaRaw from 'chroma-js'
@@ -59,11 +64,29 @@ export const chroma = function (...args: unknown[]) {
         if (arg instanceof Array && arg.length === 4) {
             return chromaRaw(...(arg as Quad), 'gl')
         }
+        if (typeof arg === 'boolean') {
+            return arg ? chromaRaw('white') : chromaRaw('black').alpha(0)
+        }
         if (typeof arg === 'number') {
-            if (arg <= 1.0) {
-                return chromaRaw(arg, arg, arg, 1, 'gl')
+            // Can't think of any natural meaning for negative numbers,
+            // so just ignore sign
+            const n: number = Math.abs(arg)
+            if (n <= 1.0) {
+                return chromaRaw(n, n, n, 1, 'gl')
+            }
+            if (n > 0xffffff) {
+                // largest number chroma interprets
+                if (n < 0xffffffff) {
+                    // interpret last two digits as alpha
+                    const alpha = n % 0x100
+                    const rest = Math.floor(n / 0x100)
+                    return chromaRaw(rest).alpha(alpha / 0xff)
+                } else {
+                    // what color should huge numbers be?
+                    return chromaRaw('white')
+                }
             }
-            return chromaRaw(arg)
+            return chromaRaw(n)
         }
     }
     if (
@@ -104,18 +127,19 @@ const dummy = chroma('white')
 const chromaConstructor = dummy.constructor
 
 /** md
-#### rainbow(hue: bigint | number)
+#### rainbow(hue: bigint | number, opacity?: number)
 
 This function conveniently allows creation of an opaque color from just
 a "hue angle" in color space, periodically interpreted with the main period
-from 0 to 360. It uses the "oklch" color space provided by chromajs to ensure
-that all of the colors it returns will have approximately the same apparent
-lightness and hue saturation (and hopefully these levels have been selected
-to produce attractive colors).
+from 0 to 360. Optionally, you can also specify an opacity for the resulting
+color, from 1 to 0. It uses the "oklch" color space provided by chromajs
+to ensure that all of the colors it returns will have approximately the same
+apparent lightness and hue saturation (and hopefully these levels have been
+selected to produce attractive colors).
 **/
-export function rainbow(hue: bigint | number): Chroma {
+export function rainbow(hue: bigint | number, opacity = 1): Chroma {
     if (typeof hue === 'bigint') hue = Number(hue % 360n)
-    return chroma.oklch(0.6, 0.25, hue % 360)
+    return chroma.oklch(0.6, 0.25, hue % 360).alpha(opacity)
 }
 
 /** md
diff --git a/src/shared/ParamType.ts b/src/shared/ParamType.ts
index 19e87306..4e64818e 100644
--- a/src/shared/ParamType.ts
+++ b/src/shared/ParamType.ts
@@ -122,7 +122,9 @@ function validateExtInt(value: string, status: ValidationStatus) {
 
 //Helper function for color types:
 function isColor(value: string) {
-    return value.trim().match(/^(#[0-9A-Fa-f]{3})|(#[0-9A-Fa-f]{6})$/)
+    return value
+        .trim()
+        .match(/^#?([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/)
 }
 
 export const typeFunctions: {
@@ -228,15 +230,17 @@ export const typeFunctions: {
                 )
                 return
             }
-            const freeVars = fmla.freevars.difference(new Set(inputSymbols))
+            const knownSymbols = new Set(inputSymbols)
+            const freeVars = fmla.freevars.difference(knownSymbols)
             status.forbid(
                 freeVars.size,
                 `free variables limited to ${inputSymbols}; `
                     + `please remove '${Array.from(freeVars).join(', ')}'`
             )
+            const freeFuncs = fmla.freefuncs.difference(knownSymbols)
             status.forbid(
-                fmla.freefuncs.size,
-                `unknown functions '${fmla.freefuncs}'`
+                freeFuncs.size,
+                `unknown functions '${Array.from(freeFuncs).join(', ')}'`
             )
         },
         realize: function (value) {
diff --git a/src/shared/Paramable.ts b/src/shared/Paramable.ts
index 69bc13f8..f1d1a6ac 100644
--- a/src/shared/Paramable.ts
+++ b/src/shared/Paramable.ts
@@ -103,13 +103,18 @@ export interface ParamInterface<PT extends ParamType> {
     placeholder?: string
     /* **/
     /** md
-:   The placeholder text that appears in the input box for the parameter
-    when that box is empty. This property is really only useful on parameters
-    for which the `required` property is false, because otherwise the input
-    box is not allowed to be empty. If the `placeholder` property is not
-    specified, the string representation of the `default` property is used
-    instead.
+:   The placeholder text that appears in the input box for the parameter.
+    If the `placeholder` property is not specified, the string representation
+    of the `default` property is used instead.
 <!-- -->
+    **/
+    /** md */
+    placeholderAlways?: boolean
+    /* **/
+    /** md
+:   Whether the placeholder should always be displayed, even when something
+    has been entered in the text box. (The usual behavior is to blank the
+    placeholder as soon as there is input.)
     **/
     /** md */
     description?: string
@@ -858,7 +863,7 @@ export class Paramable implements ParamableInterface {
                 const param = this.params[key]
                 if (
                     param.type === ParamType.COLOR
-                    && value.match(/^[0-9a-fA-F]{6}$/)
+                    && value.match(/^[0-9a-fA-F]{3,8}$/)
                 )
                     this.tentativeValues[key] = '#' + value
                 else this.tentativeValues[key] = value
diff --git a/src/shared/Specimen.ts b/src/shared/Specimen.ts
index eda91bcf..7209b414 100644
--- a/src/shared/Specimen.ts
+++ b/src/shared/Specimen.ts
@@ -124,6 +124,8 @@ export class Specimen {
         return this
     }
 
+    /* Static helper functions */
+
     // Helper for loadQuery and for extracting sequence name
     static makeSequence(key: string, query?: string) {
         const sequence = produceSequence(key)
@@ -133,6 +135,22 @@ export class Specimen {
         return sequence
     }
 
+    /**
+     * Helper to calculate the size of the visualizer in a container.
+     * @param {number} containerWidth  width of the container
+     * @param {number} containerHeight  height of the container
+     * @param {number?} aspectRatio  aspect ratio requested by visualizer
+     * @returns {{width: number, height: number}} resulting size of visualizer
+     */
+    static calculateSize(inSize: ViewSize, aspectRatio?: number): ViewSize {
+        if (aspectRatio === undefined) return inSize
+        const constraint = inSize.width / inSize.height < aspectRatio
+        return {
+            width: constraint ? inSize.width : inSize.height * aspectRatio,
+            height: constraint ? inSize.width / aspectRatio : inSize.height,
+        }
+    }
+
     /**
      * Displays a specimen within an HTML element
      * @param {HTMLElement} location  where in the DOM to insert the specimen
@@ -155,7 +173,7 @@ export class Specimen {
      */
     async reset() {
         if (!this.isSetup) return
-        this.size = this.calculateSize(
+        this.size = Specimen.calculateSize(
             {
                 width: this.location?.clientWidth ?? 0,
                 height: this.location?.clientHeight ?? 0,
@@ -242,22 +260,6 @@ export class Specimen {
         return this._visualizer?.view(this._sequence!)
     }
 
-    /**
-     * Calculates the size of the visualizer in its container.
-     * @param {number} containerWidth  width of the container
-     * @param {number} containerHeight  height of the container
-     * @param {number?} aspectRatio  aspect ratio requested by visualizer
-     * @returns {{width: number, height: number}} resulting size of visualizer
-     */
-    calculateSize(inSize: ViewSize, aspectRatio?: number): ViewSize {
-        if (aspectRatio === undefined) return inSize
-        const constraint = inSize.width / inSize.height < aspectRatio
-        return {
-            width: constraint ? inSize.width : inSize.height * aspectRatio,
-            height: constraint ? inSize.width / aspectRatio : inSize.height,
-        }
-    }
-
     /**
      * This function should be called when the size of the visualizer container
      * has changed. It calculates the size of the contents according to the
@@ -266,7 +268,7 @@ export class Specimen {
      *     New width and height of the visualizer container
      */
     async resized(toSize: ViewSize): Promise<void> {
-        const newSize = this.calculateSize(
+        const newSize = Specimen.calculateSize(
             toSize,
             this._visualizer?.requestedAspectRatio()
         )
diff --git a/src/shared/__tests__/Chroma.spec.ts b/src/shared/__tests__/Chroma.spec.ts
new file mode 100644
index 00000000..7d8297a7
--- /dev/null
+++ b/src/shared/__tests__/Chroma.spec.ts
@@ -0,0 +1,59 @@
+import {describe, it, expect} from 'vitest'
+
+import {chroma, rainbow, isChroma, overlay, dilute} from '../Chroma'
+
+const red = chroma('red')
+
+describe('chroma', () => {
+    it('does the standard chroma.js constructions', () => {
+        expect(red.hex()).toBe('#ff0000')
+        expect(chroma('hotpink').hex()).toBe('#ff69b4')
+        expect(chroma('F39').hex()).toBe('#ff3399')
+        expect(chroma(16724889).hex()).toBe('#ff3399')
+        expect(chroma(255, 51, 153).hex()).toBe('#ff3399')
+        expect(chroma(330, 1, 0.6, 'hsl').hex()).toBe('#ff3399')
+        expect(chroma({c: 1, m: 0.5, y: 0, k: 0.2}).hex()).toBe('#0066cc')
+    })
+    it('adds the Numberscope extra constructions', () => {
+        expect(chroma().hex()).toBe('#000000')
+        expect(chroma([0.5, 0.5, 0.5, 0.5]).hex()).toBe('#80808080')
+        expect(chroma(0.5, 0.5, 0.5, 0.5).hex()).toBe('#80808080')
+        expect(chroma(0.5).hex()).toBe('#808080')
+        expect(chroma('red', 0.5).hex()).toBe('#ff000080')
+    })
+})
+
+describe('rainbow', () => {
+    it('uses an angle in degrees', () => {
+        expect(rainbow(7)).toStrictEqual(rainbow(367))
+    })
+    it('accepts an opacity argument', () => {
+        expect(rainbow(45, 0.5).hex()).toBe('#ed240080')
+    })
+})
+
+describe('isChroma', () => {
+    it('tests entities to see if they are chroma objects', () => {
+        expect(isChroma(chroma())).toBe(true)
+        expect(isChroma({r: 7, g: 8, b: 9})).toBe(false)
+    })
+})
+
+describe('overlay', () => {
+    it('handles full opacity and transparency', () => {
+        expect(overlay(chroma('#f3a2c3'), red)).toStrictEqual(red)
+        expect(overlay(red, chroma('blue', 0))).toStrictEqual(red)
+    })
+    it('does alpha-compositing', () => {
+        expect(overlay(chroma('red', 0.5), chroma('green', 0.5)).hex()).toBe(
+            '#404000bf'
+        )
+    })
+})
+
+describe('dilute', () => {
+    it('multiplies opacity by a constant', () => {
+        expect(dilute(red, 0.5)).toStrictEqual(chroma('red', 0.5))
+        expect(dilute(chroma('blue', 0.7), 0.6).alpha()).toBe(0.7 * 0.6)
+    })
+})
diff --git a/src/shared/__tests__/math.spec.ts b/src/shared/__tests__/math.spec.ts
index e915ff6b..1e2b7b17 100644
--- a/src/shared/__tests__/math.spec.ts
+++ b/src/shared/__tests__/math.spec.ts
@@ -94,6 +94,58 @@ describe('natlog', () => {
     })
 })
 
+describe('triangular numbers', () => {
+    it('computes the nth triangular number', () => {
+        expect(math.triangular(0)).toBe(0)
+        expect(math.triangular(1)).toBe(1)
+        expect(math.triangular(5)).toBe(15)
+        expect(math.triangular(100)).toBe(5050) // go go Gauss
+        expect(math.triangular(0n)).toBe(0n)
+        expect(math.triangular(1n)).toBe(1n)
+        expect(math.triangular(100n)).toBe(5050n)
+    })
+    it('computes an inverse of the triangular number function', () => {
+        expect(math.invTriangular(0)).toBe(0)
+        expect(math.invTriangular(1)).toBe(1)
+        expect(math.invTriangular(14)).toBe(4)
+        expect(math.invTriangular(15)).toBe(5)
+        expect(math.invTriangular(16)).toBe(5)
+        expect(math.invTriangular(5049)).toBe(99)
+        expect(math.invTriangular(5050)).toBe(100)
+        expect(math.invTriangular(5051)).toBe(100)
+        expect(math.invTriangular(0n)).toBe(0n)
+        expect(math.invTriangular(1n)).toBe(1n)
+        expect(math.invTriangular(14n)).toBe(4n)
+        expect(math.invTriangular(15n)).toBe(5n)
+        expect(math.invTriangular(16n)).toBe(5n)
+        expect(math.invTriangular(5049n)).toBe(99n)
+        expect(math.invTriangular(5050n)).toBe(100n)
+        expect(math.invTriangular(5051n)).toBe(100n)
+    })
+})
+
+describe('logical operators', () => {
+    const red = math.chroma('red')
+    const rzero = math.fraction(0, 1)
+    const rone = math.fraction(1, 1)
+    it('computes short-circuiting `and`', () => {
+        expect(math.and(true, false)).toBe(false)
+        expect(math.and(1, red)).toBe(red)
+        expect(math.and(rzero, true)).toBe(rzero)
+        expect(
+            math.evaluate('and(fraction(0,1), fraction(0,0))')
+        ).toStrictEqual(rzero)
+    })
+    it('computes short-circuiting `or`', () => {
+        expect(math.or(true, false)).toBe(true)
+        expect(math.or(1, red)).toBe(1)
+        expect(math.or(rzero, true)).toBe(true)
+        expect(
+            math.evaluate('or(fraction(1,1), fraction(0,0))')
+        ).toStrictEqual(rone)
+    })
+})
+
 describe('colors', () => {
     const chroma = math.chroma
     it('constructs a color from a string', () => {
@@ -221,7 +273,8 @@ describe('colors', () => {
         expect(g.gl()).toStrictEqual([0, 1, 0, 1])
     })
     it('provides a rainbow function', () => {
-        expect(math.rainbow(45).hex()).toStrictEqual('#ed2400')
+        expect(math.rainbow(45).hex()).toBe('#ed2400')
+        expect(math.evaluate('rainbow(2+2i, 0.5)').hex()).toBe('#ed240080')
     })
     it('takes linear combinations in expressions', () => {
         expect(
diff --git a/src/shared/defineFeatured.ts b/src/shared/defineFeatured.ts
index b24e79d3..0d4a3814 100644
--- a/src/shared/defineFeatured.ts
+++ b/src/shared/defineFeatured.ts
@@ -208,6 +208,61 @@ const featuredSIMs = [
         'domain=0+1&angles=15+-165&steps=2+1'
             + '&speed=10&bgColor=e0def7&strokeColor=%231E90FF'
     ),
+    specimenQuery(
+        "Pascal's Triangle",
+        'FormulaGrid',
+        'OEIS A007318',
+        '&aspect=r&fillOrder=2&pathFormula=%5Bceil%28c%2F2%29+-+invTriangular'
+            + '%28k-1%29+%2B+2*%28k+-+triangular%28invTriangular%28k-1%29%29+'
+            + '-+1%29%2CinvTriangular%28k-1%29+%2B+1%5D'
+            + '&backgroundColor=21218FFF'
+            + '&fillFormula=%7Bhexagon%3A+rainbow%2872a-100%29.desaturate'
+            + '%281.2%29.brighten%280.8%29%7D',
+        ''
+    ),
+    specimenQuery(
+        'Lattice Murmuration',
+        'FormulaGrid',
+        'OEIS A293773',
+        '&dimensions=200+5000&fillOrder=3&pathFormula=%5Bk%2C+floor'
+            + '%28r%2F2%29+-+a%5D&backgroundColor=D2E1FBFF'
+            + '&fillFormula={circle%3A+black}&inset=12',
+        ''
+    ),
+    specimenQuery(
+        'Modular Multiplication Table',
+        'FormulaGrid',
+        'Formula',
+        'dimensions=200+200&aspect=1&backgroundColor=0B207CFF&speed=100'
+            + '&fillFormula=%7Brectangle%3A%0A++%233bbf7d'
+            + '.alpha%28abs%282*mod%28x+y%2C+c%29-c%29%2Fc%29%2C%0A'
+            + 'mouseover%3A+%5B+x%2C+%27%C3%97%27%2C+y%2C+%27%3D%27%2C'
+            + '+mod%28x+y%2C+c%29%5D%7D',
+        ''
+    ),
+    specimenQuery(
+        'Ulam Divisors',
+        'FormulaGrid',
+        'OEIS A000005',
+        '&dimensions=200+200&aspect=1&fillOrder=1&pathFormula=spiral%28k%29'
+            + '&backgroundColor=000000FF&speed=100'
+            + '&fillFormula=%7Bcircle%3A%0A++%230571b0'
+            + '.mix%28darkseagreen%2C+%28a-10%29%2F8%29%2C%0A'
+            + 'mouseover%3A+%5B%27d%28%27%2C+n%2C+%27%29+%3D+%27%2C+a%5D%7D'
+            + '&inset=0.8',
+        ''
+    ),
+    specimenQuery(
+        'Integerstellar',
+        'FormulaGrid',
+        'Formula',
+        '&dimensions=200&backgroundColor=000000FF&speed=1024'
+            + '&fillFormula=%7Bcircle%3A%0A++yellow'
+            + '.mix%28black%2C+1-gcd%28x%2Cy%29%2Fsqrt%28x+y%29%29%2C%0A'
+            + 'mouseover%3A+%5B%0A++++%27gcd%28%27%2C+x%2C+%27%2C+%27%2C'
+            + '+y%2C+%27%29+%3D+%27%2C+gcd%28x%2Cy%29%0A%5D%7D&inset=0.8',
+        ''
+    ),
 ]
 
 // Is there any reason for us to associate dates with featured specimens? Do
diff --git a/src/shared/math.ts b/src/shared/math.ts
index 9edb85e7..ad0c3257 100644
--- a/src/shared/math.ts
+++ b/src/shared/math.ts
@@ -26,7 +26,10 @@ accept either `number` or `bigint` inputs for all arguments and convert them
 to bigints as needed.
 
 In addition, math formulas may create and manipulate colors using
-[Chroma](./Chroma.md) objects and functions.
+[Chroma](./Chroma.md) objects and functions. The formulas extend the hue
+argument to of the `rainbow` function to any value that can be converted
+into a bigint or number, and to complex numbers by taking their so-called
+argument angle as the hue angle.
 
 ### Example usage
 ```ts
@@ -55,6 +58,9 @@ const neginf: ExtendedBigint = math.negInfinity
 // Like Math.floor, but with BigInt result type:
 const negTwo: bigint = math.bigInt(-1.5)
 
+const fifteen: number = math.triangular(5)
+const four: bigint = math.invTriangular(14n)
+
 const five: bigint = math.floorSqrt(30n)
 const negativeTwo: bigint = math.floorSqrt(-2n)
 
@@ -75,6 +81,9 @@ const seven: bigint = math.bigabs(-7n)
 const twelve: ExtendedBigint = math.bigmax(5n, 12, -3)
 const negthree: ExtendedBigint = math.bigmin(5n, 12, -3)
 const anotherNegInf = math.bigmin(5n, math.negInfinity, -3)
+
+const orangey = math.evaluate('rainbow(1+i)')
+// depends just on arg of a complex number input
 ```
 
 ### Detailed function reference
@@ -85,9 +94,13 @@ import {modPow} from 'bigint-mod-arith'
 import {all, create, factory} from 'mathjs'
 import type {
     EvalFunction,
+    Fraction,
+    MathCollection,
     MathJsInstance,
+    MathNode,
     MathType,
     MathScalarType,
+    Matrix,
     Unit,
 } from 'mathjs'
 import temml from 'temml'
@@ -120,8 +133,14 @@ export type TposInfinity = 1e999 // since that's above range for number,
 // eslint-disable-next-line no-loss-of-precision
 export type TnegInfinity = -1e999 // similarly
 export type ExtendedBigint = bigint | TposInfinity | TnegInfinity
-
-type ExtendedMathJs = Omit<MathJsInstance, 'hasNumericValue'> & {
+export type MathAnyScalar = MathScalarType | Chroma | Fraction | boolean
+type Widen<T extends number | bigint> = T extends number
+    ? number
+    : T extends bigint
+      ? bigint
+      : number | bigint
+
+type ExtendedMathJs = Omit<MathJsInstance, 'hasNumericValue' | 'add'> & {
     negInfinity: TnegInfinity
     posInfinity: TposInfinity
     safeNumber(n: MathTypeTemp): number
@@ -134,10 +153,21 @@ type ExtendedMathJs = Omit<MathJsInstance, 'hasNumericValue'> & {
     bigabs(a: Integer): bigint
     bigmax(...args: Integer[]): ExtendedBigint
     bigmin(...args: Integer[]): ExtendedBigint
+    triangular<T extends Integer>(n: T): Widen<T>
+    invTriangular<T extends Integer>(n: T): Widen<T>
     chroma: typeof chroma
-    rainbow(a: Integer): Chroma
+    rainbow(a: Integer, opacity?: number): Chroma
     isChroma(a: unknown): a is Chroma
-    add: MathJsInstance['add'] & ((c: Chroma, d: Chroma) => Chroma)
+    add: ((c: Chroma, d: Chroma) => Chroma) &
+        ((v: number[], a: number) => number[]) &
+        ((v: number[], w: number[]) => number[]) &
+        ((a: MathType, b: MathType) => MathType)
+    and: MathJsInstance['and'] &
+        ((a: boolean, b: boolean) => boolean) &
+        ((a: MathAnyScalar, b: MathAnyScalar) => MathAnyScalar)
+    or: MathJsInstance['or'] &
+        ((a: boolean, b: boolean) => boolean) &
+        ((a: MathAnyScalar, b: MathAnyScalar) => MathAnyScalar)
     hasNumericValue(x: unknown): x is MathScalarType
     multiply: MathJsInstance['multiply'] &
         ((s: number, c: Chroma) => Chroma) &
@@ -156,12 +186,12 @@ math.typed.addType({
 
 const colorStuff: Record<string, unknown> = {
     chroma,
-    rainbow: (h: MathScalarType | bigint) => {
+    rainbow: (h: MathScalarType | bigint, opacity = 1) => {
         if (math.isComplex(h)) h = (math.arg(h) * 180) / math.pi
         else if (typeof h !== 'number' && typeof h !== 'bigint') {
             h = math.number(h)
         }
-        return rainbow(h)
+        return rainbow(h, opacity)
     },
     add: math.typed('add', {'Chroma, Chroma': (c, d) => overlay(c, d)}),
     isChroma,
@@ -170,7 +200,14 @@ const colorStuff: Record<string, unknown> = {
         'Chroma, number': dilute,
     }),
     typeOf: math.typed('typeOf', {Chroma: () => 'Chroma'}),
+    boolean: math.typed('boolean', {
+        Chroma: c => c.alpha() > 0,
+        Complex: z => z.re !== 0 || z.im !== 0,
+        Fraction: r => !r.equals(r.neg()),
+        Unit: u => !!u.value,
+    }),
 }
+
 // work around omission of `colors` property in @types/chroma-js
 for (const name in (chroma as unknown as {colors: Record<string, string>})
     .colors) {
@@ -182,7 +219,114 @@ for (palette in chroma.brewer) {
     colorStuff[palette] = factory(palette, [], () => clrs)
 }
 
-math.import(colorStuff)
+/** Additional numerical functions for mathjs **/
+
+/** md
+#### triangular(n: number | bigint): typeof n
+
+Returns the _n_-th triangular number, preserving the type of the input.
+
+#### invTriangular(t: number | bigint): typeof t
+
+Returns the index of the largest triangular number less than or equal to
+_t_, again preserving the type of the input.
+
+**/
+
+function triangular(n: number): number
+function triangular(n: bigint): bigint
+function triangular(n: number | bigint) {
+    let d = n as number // lie so typescript will compile
+    const one = n ? d / d : ++d / d--
+    return ((d * (d + one)) / (one + one)) as typeof n
+}
+
+const numberTheory: Record<string, unknown> = {
+    triangular,
+    invTriangular: math.typed('invTriangular', {
+        number: t => Math.floor((Math.sqrt(1 + 8 * t) - 1) / 2),
+        any: b => {
+            // FIXME when mathjs has bigint support
+            if (typeof b !== 'bigint') return 0n
+            return (isqrt(1n + 8n * b) - 1n) / 2n
+        },
+    }),
+}
+
+math.import({...numberTheory, ...colorStuff})
+
+/* Fix up and/or so they will work with any mathjs type */
+function logicalFn(invert: boolean) {
+    function logicalCombiner(...callArgs: unknown[]) {
+        let input: MathNode[] = []
+        let unevaluated = false
+        let scope: unknown = undefined
+        let last = callArgs.length
+        /* First check if we are being called from the expression parser */
+        if (
+            last === 3
+            && Array.isArray(callArgs[0])
+            && math.isNode(callArgs[0][0])
+        ) {
+            input = callArgs[0]
+            last = input.length
+            unevaluated = true
+            scope = callArgs[2]
+        }
+        let value: unknown = invert
+        let collection = false
+        let terminated = false
+        for (let i = 0; i < last; ++i) {
+            const arg = unevaluated ? input[i].evaluate(scope) : callArgs[i]
+            const argColl = math.isCollection(arg)
+            if (collection) {
+                if (argColl) {
+                    const newValue: unknown[] = []
+                    const valueArray: unknown[] = Array.isArray(value)
+                        ? value
+                        : (value as Matrix).valueOf()
+                    const argArray: unknown[] = Array.isArray(arg)
+                        ? arg
+                        : arg.valueOf()
+                    for (let j = 0; j < valueArray.length; ++j) {
+                        newValue.push(
+                            logicalCombiner(valueArray[j], argArray[j])
+                        )
+                    }
+                    value = newValue
+                } else {
+                    value = math.map(value as MathCollection, elt =>
+                        logicalCombiner(elt, arg)
+                    )
+                }
+            } else {
+                if (argColl) {
+                    value = math.map(arg, elt => logicalCombiner(value, elt))
+                    collection = true
+                } else {
+                    // scalar-scalar case, in which we don't consider any
+                    // more arguments once the truth value is determined,
+                    // except that in the non-short-circuiting (direct
+                    // JavaScript call) case, we continue in case we encounter
+                    // a collection.
+                    if (terminated) continue
+                    let test = math.boolean(arg)
+                    if (invert) test = !test
+                    if (test) {
+                        if (unevaluated) return arg
+                        terminated = true
+                    }
+                    value = arg
+                }
+            }
+        }
+        return value
+    }
+    logicalCombiner.rawArgs = true
+    return logicalCombiner
+}
+
+math.import({and: logicalFn(true), or: logicalFn(false)}, {override: true})
 
 math.negInfinity = -Infinity as TnegInfinity
 math.posInfinity = Infinity as TposInfinity
diff --git a/src/views/Scope.vue b/src/views/Scope.vue
index c28e05cd..3627ac37 100644
--- a/src/views/Scope.vue
+++ b/src/views/Scope.vue
@@ -384,23 +384,23 @@ visualizers you can select.
 
     const specimen = reactive(new Specimen()) // starts empty
 
-    async function showURL(url: string, saveSequence?: string) {
+    function showURL(url: string, saveSequence?: string) {
         const urlQuery = extractQueryFromPath(url)
         if (urlQuery) {
-            await specimen.loadQuery(urlQuery)
-            updateCurrent(specimen)
             if (saveSequence) {
                 const {sequenceKind, sequenceQuery} =
                     parseSpecimenQuery(urlQuery)
                 addSequence(sequenceKind, sequenceQuery)
             }
-        } else {
-            // This should no longer be possible now that the router
-            // redirects `/` to `/?[CURRENT QUERY]` but in case we
-            // somehow end up with a URL with no query, we have to do
-            // something:
-            await specimen.loadQuery(getCurrent().query)
+            return specimen.loadQuery(urlQuery).then(spec => {
+                updateCurrent(spec)
+                return spec
+            })
         }
+        // This should no longer be possible now that the router redirects
+        // `/` to `/?[CURRENT QUERY]`, but in case we somehow end up with
+        // a URL that has no query, we have to do something:
+        return specimen.loadQuery(getCurrent().query)
     }
 
     const tabWidth = parseInt(
@@ -442,41 +442,36 @@ visualizers you can select.
     }
 
     let canvasContainer: HTMLElement = document.documentElement
-    type IntervalID = ReturnType<typeof setInterval>
-    let resizePoll: IntervalID
+    let initialLoad: Promise<Specimen> | undefined = undefined
 
     onBeforeMount(() => {
         // First load up the specimen
-        showURL(route.fullPath, 'save sequence')
+        initialLoad = showURL(route.fullPath, 'save sequence')
     })
 
     onMounted(() => {
-        const specimenContainer = document.getElementById(
-            'specimen-container'
-        )!
-
         positionAndSizeAllTabs()
+        canvasContainer = document.getElementById('canvas-container')!
+
+        if (!initialLoad) throw new Error("showURL didn't promise Specimen")
+        initialLoad.then(spec => spec.setup(canvasContainer))
 
         window.addEventListener('resize', () => {
             positionAndSizeAllTabs()
         })
 
-        canvasContainer = document.getElementById('canvas-container')!
-        specimen.setup(canvasContainer)
-
-        resizePoll = setInterval(() => {
+        new ResizeObserver(() =>
             specimen.resized({
                 width: canvasContainer.clientWidth,
                 height: canvasContainer.clientHeight,
             })
-        }, 500)
+        ).observe(canvasContainer)
     })
 
     onUnmounted(() => {
         // Save the current sequence for future use
         addSequence(specimen.sequenceKey, specimen.sequence.query)
         // Now clean up
-        clearInterval(resizePoll)
         specimen.visualizer.depart(canvasContainer)
     })
 
diff --git a/src/visualizers/FormulaGrid.ts b/src/visualizers/FormulaGrid.ts
new file mode 100644
index 00000000..3b770ff5
--- /dev/null
+++ b/src/visualizers/FormulaGrid.ts
@@ -0,0 +1,901 @@
+import p5 from 'p5'
+
+import {P5Visualizer} from './P5Visualizer'
+import {VisualizerExportModule} from './VisualizerInterface'
+
+import {chroma, dilute, overlay} from '@/shared/Chroma'
+import type {Chroma} from '@/shared/Chroma'
+import {math, MathFormula} from '@/shared/math'
+import type {MathType} from '@/shared/math'
+import type {GenericParamDescription} from '@/shared/Paramable'
+import {ParamType} from '@/shared/ParamType'
+import {ValidationStatus} from '@/shared/ValidationStatus'
+
+/** md
+# Formula Grid Visualizer
+
+[<img src="../../assets/img/FormulaGrid/UlamSpiral.png" width="39%"
+style="float: left; margin-right: 1em; margin-left: 0.5em"
+/>](../assets/img/FormulaGrid/UlamSpiral.png)
+[<img src="../../assets/img/FormulaGrid/ArithmeticTriangle.png" width="56%"
+style="float: right; margin-left: 1em; margin-right: 8px;"
+/>](../assets/img/FormulaGrid/ArithmeticTriangle.png)
+
+<div style="clear: both;">&nbsp;</div>
+
+This visualizer divides the rectangular canvas into a grid of _r_ by _c_
+identical rectangular cells. Each cell has an integer _x_ coordinate (starting
+from 1 in the leftmost column and increasing to the right), a _y_ coordinate
+(starting from 1 in the top row and increasing as you go down), and a "spiral
+position" _s_ that starts from 1 near the center of the rectangle and
+increases along a rectangular spiral path that visits every cell in the grid.
+
+In each animation frame, Formula Grid will draw one or more shapes (from a
+variety of supported shapes) in each of the next group of consecutive cells
+in the grid, in whatever fill order is currently configured.
+
+Some presets for the fill order of the cells are provided: the default is
+left-to-right, top-to-bottom. You can also easily select a spiral from the
+center and a triangular layout with one cell in the center of the top row,
+then two cells on its left and right in the second row, and so on. In addition,
+you can customize the fill order with a formula giving the coordinates of the
+_k_-th cell to be visited, starting from _k_ = 1. Note that there is no
+requirement that a given cell in the grid is visited exactly once as a result
+of these formulas; it could equally well never be visited or be visited
+multiple times. For example, one can make a typical point plot of a sequence
+using the fill order formula `[k, floor(r/2) - a]`. Note that the
+_y_-coordinate in this formula is not simply `a` because the rows of the grid
+are numbered from 1 to _r_ from top to bottom, rather than in typical Cartesian
+coordinate fashion with _y_ increasing upwards.
+
+The shapes drawn and the (RGBA) colors used for them are determined by the
+Fill formula. If it just returns a color or a value that can be converted to
+a color, the rectangular cell at the current fill position is filled with that
+color. For details on how formulas may create and manipulate colors, see
+the [Chroma documentation](../shared/Chroma.md), but note that a false value
+will be converted to the completely transparent color. In other words, whenever
+the fill formula returns false, nothing will be drawn. For convenience, if
+the formula returns an array that cannot otherwise be converted to a color,
+Formula Grid will attempt to convert each element to a color and take the
+(overlay) sum of the colors, which is equivalent to drawing each resulting
+color into the cell in the order they appear.
+
+On the other hand, the fill formula may instead return a plain object with keys
+drawn from the list of supported shapes:
+
+rectangle
+: Behaves the same as the default operation of the fill formula when it does
+  not return an object.
+
+square
+: Draws a square with side a configurable fraction of the shorter dimension
+  of a cell, centered in the cell. The fraction is given by the Inset
+  formula, documented below.
+
+ellipse
+: Draws an ellipse with axes the horizontal and vertical center lines of the
+  cell.
+
+circle
+: Draws a circle with diameter a configurable fraction of the shorter
+  dimension of a cell, centered in the cell. As with the square, the fraction
+  is given by the Inset formula. This means that if you specify both circle
+  and square, the circle is always inscribed in the square.
+
+[<img src="../../assets/img/FormulaGrid/Hexagons.png" width=300
+ style="margin-left: 1em; margin-right: 0.5em; float: right;"
+ />](../assets/img/FormulaGrid/Hexagons.png)
+
+hexagon
+: Draws a hexagon twice the width and 4/3 the height of a cell, in which the
+  current cell is inscribed. The resulting hexagons doubly cover the plane;
+  if you take the odd cells horizontally in one row and the even cells in
+  the next, those hexagons tile the plane. Note the Triangle pre-set fill
+  order only visits such cells, making this shape ideal for use along with the
+  Triangle fill order when you want to display the rows of a triangular array
+  with one entry in the first row, two in the second, and so on. When the
+  aspect ratio of a cell is 1/√3, the hexagons are regular. See the
+  accompanying diagram for the layout of the hexagons; the underlying
+  rectangular cells are blue, each inscribed in the corresponding hexagon
+  shape, which are drawn in black with every other one having dotted
+  perimeter.
+
+[<img src="../../assets/img/FormulaGrid/Triangles.png" width=300
+ style="margin-left: 1em; margin-right: 0.5em; float: right;"
+ />](../assets/img/FormulaGrid/Triangles.png)
+
+triangle
+: Draws a triangle the height of a cell with horizontal base twice the width
+  of a cell, centered on the current cell. On odd rows the odd triangles point
+  up and the even triangles point down; on even rows the directions are
+  reversed. The resulting triangles tile the plane. When the aspect ratio
+  of a cell is 1/√3, the triangles are equilateral. See the accompanying
+  diagram of the layout of the triangles, superimposed on the underlying
+  rectangular grid, which is shown in blue. Each triangle is associated with
+  the unique grid cell that it overlaps the most.
+
+text
+: This key represents a special shape. The value of the associated formula
+  will be converted into a string (if it is an array, the entries will be
+  individually converted to strings and concatenated). This string will
+  be written centered in the cell in a font size half the height of the cell
+  if it has four or fewer characters, or a font size one quarter the height
+  of the cell otherwise. The text color will be black or white, whichever
+  has highest contrast with the cell color.
+
+mouseover
+: Another special shape key. The value of the associated formula will be
+  converted into a string and shown in a popup when the mouse pointer hovers
+  over the cell.
+
+Except for the special text shapes, the value associated to a key will be
+interpreted as a color in the same way as the default behavior, and the shape
+will be drawn in that color. If multiple keys are specified, the shapes are
+drawn successively in the order that they appear in the object returned.
+
+The fill formula may use any of the variables described above: _x_, _y_
+(coordinates), _r_ (rows), _c_ (columns), and _s_ (spiral position); their
+values will be supplied by the visualizer. It may also use any of the
+following additional variables:
+
+_k_ -- the serial number of the cell in the order they are filled in, starting
+from 1
+
+_m_ -- the minimum (first) index of the current sequence being visualized
+
+_M_ -- the Maximum (last) index of the current sequence (may be infinite)
+
+_n_ = _k_ - 1 + _m_ -- the index of the sequence entry associated with the
+current cell
+
+_a_ -- the value of the current sequence at index _n_
+
+_f_ -- the frame number of the current drawing pass; this is the greatest
+integer in the quantity _k_ divided by the current drawing speed.
+
+You may also use the symbol `A` as a function symbol in your formula, and
+it will provide access to the value of the sequence being visualized for any
+index. For example, the formula `(a + A(n+1) + A(n+2))/3` would provide a
+three-element running average of the current sequence starting from the
+current entry. The FormulaGrid visualizer also defines a function symbol
+`spiral` that takes a positive integer _k_ and returns a two-element array
+of the coordinates of the _k_-th position in the spiral path from the center.
+
+Being the heart of this visualizer, there is a lot of information that is
+packed into the Fill formula, and it can get relatively complicated. So
+here are a few illustrative examples, all assuming By_Rows fill order:
+
+* A black/red checkerboard: `(x+y) % 2 ? red : black`
+* Every 7th cell is filled with white, and every 11th cell has an inner
+  red square: `{rectangle: (k % 7) == 1, square: not(k % 11) and red}`
+* Tile the plane with hexagons in a rainbow given by their distance from the
+  center of the grid; note we only color every other position, by alternately
+  setting the opacity to 1 or 0, because the hexagons overlap to cover every
+  pixel twice. Also, we display the distance on mouseover.
+```
+{ hexagon:
+    rainbow(10*sqrt((x-c/2)^2 + (y-r/2)^2), (x+y) % 2),
+  mouseover:
+    [sqrt((x-c/2)^2 + (y-r/2)^2), ' units from center']
+}
+```
+
+## Parameters
+**/
+
+enum FillOrder {
+    By_Rows,
+    Spiral,
+    Triangle,
+    Custom,
+}
+
+const formulaSymbols = [
+    'x',
+    'y',
+    's',
+    'r',
+    'c',
+    'k',
+    'm',
+    'M',
+    'n',
+    'a',
+    'f',
+    'A',
+    'spiral',
+] as const
+
+const formulaDescription =
+    "May use k (the serial number of the cell), m (the sequence's first "
+    + 'index), M (the last index), n (the current index = m + k - 1), '
+    + 'a (the n-th sequence entry), A(...) (an arbitrary sequence entry), '
+    + 'r (the total number of rows), c (number of columns), '
+    + 'f (the frame number), x (the x-coordinate of the current cell), '
+    + 'y (the y-coordinate), or s (the position along spiral from center).'
+
+// Now the formulas for computing the various preset paths.
+// The only tricky bit in the coordinates for By_Rows is to get the computation
+// correct with 1-based column and row numbers; they turn out to be
+// `(k - 1) % c + 1` and `ceil(k / c)`. However, they are list as just
+// `[x,y]` below because that's what the inputs x and y are set to when
+// computing the path. That way you can perturb the By_Rows order if you like,
+// e.g. transpose it easily, at least in the square case.
+// The spiral case is a bit complicated.
+// The number of "extra" right moves before the "first regular right move"
+// is `c - r - (c>r)`, where a negative value means the extra moves are down,
+// not right. We call this quantity the "horizontality" and denote it by `h`.
+// The column of the starting position is `floor((min(r,c)+1)/2)` and the row
+// is `floor(min(r,c)/2)+1`.
+// Now note that for any nonnegative integer `j`, the `j*(j+|h|)`-th position
+// will complete a `j`-by-`j+|h|` rectangle (oriented either landscape or
+// portrait depending on whether `h` is positive or negative). So to find the
+// `k`th position, we can find the largest such completed rectangle by
+// `j = |_ (√(h^2+4k) - |h|)/2 _|`.
+// The coordinates of the last position included in that `j`th rectangle are
+// the starting coordinates plus
+// `[0,0]` if j = 0
+// `[(j-1)/2 + max(h,0), (j-1)/2 - min(h,0)]` if `j` odd, and
+// `[1 - j/2, -j/2]` if `j` even.
+// We then have `l` additional steps, where `l = k - j*(j+|h|)`. If j is odd,
+// the first of these steps moves [1,0]; the next `j-min(h,0)` move [0,-1];
+// and the rest move [-1, 0]. If j is even, the first moves [-1, 0], the next
+// `j - min(h,0)` move [0, 1], and the rest move [1, 0].
+// Although the formulas above could be captured in the mathjs expression
+// language, the result would be tremendously long and complicated, so
+// we define some functions here and pass them in through the evaluation
+// scope for convenience.
+
+const X = 0
+const Y = 1
+const R = 0
+const C = 1
+type NPair = [number, number]
+
+// compute the "horizontality" and start position from the comments above
+function horizontalityStart(r: number, c: number): [number, NPair] {
+    const h = c - r - (c > r ? 1 : 0)
+    const {floor, min} = math
+    const start: NPair = [
+        floor((min(r, c) + 1) / 2),
+        floor(min(r, c) / 2) + 1,
+    ]
+    return [h, start]
+}
+function spiralRC(k: number, r: number, c: number) {
+    // We just follow the computations in the comments above:
+    const [h, start] = horizontalityStart(r, c)
+    const {floor, abs, max, min, add} = math
+    const v = -min(h, 0) // the "verticality"
+
+    // number of completed rectangles:
+    const j = floor((Math.sqrt(h * h + 4 * k) - abs(h)) / 2)
+    const jeven = j % 2 === 0
+    const jsign = jeven ? 1 : -1
+    let cornerOffset = [0, 0]
+    if (j > 0) {
+        if (jeven) cornerOffset = [1 - j / 2, -j / 2]
+        else cornerOffset = add([max(h, 0), v], (j - 1) / 2)
+    }
+    // additional steps
+    let l = k - j * (j + abs(h))
+    const position = add(start, cornerOffset)
+    if (l > 0) {
+        if (j > 0) position[X] += -jsign
+        l -= 1
+    }
+    const turnAt = j + v
+    position[Y] += jsign * min(l, turnAt)
+    if (l > turnAt) position[X] += jsign * (l - turnAt)
+    return position
+}
+// We also need to be able to calculate the inverse of the above function
+// in order to supply the `s` value to the formulas:
+function invSpiral(x: number, y: number, r: number, c: number) {
+    const [h, start] = horizontalityStart(r, c)
+    const {subtract, abs, max, min} = math
+    const ph = max(h, 0) // the "positive horizontality"
+    const v = -min(h, 0) // the "verticality"
+    // The idea is to figure out which direction we would be traveling
+    // at [x,y]. Knowing that lets us compute the number j of completed
+    // rectangles, and then we add the number of extra steps it takes to get
+    // to our location.
+    const [offsetX, offsetY] = subtract([x, y], start)
+    let j = 0 // number of rectangles
+    let l = 0 // additional steps
+    // First: if offsetX is nonpositive and offsetY is in the interval
+    // [offsetX, verticality - offsetX) then we are going down.
+    if (offsetX <= 0 && offsetY >= offsetX && offsetY < v - offsetX) {
+        l = offsetY - offsetX + 1
+        j = -2 * offsetX
+        // Conversely, if offsetX greater than the positive horizontality
+        // and offsetY is in the interval (-offsetX + ph, offsetX - h)
+        // then we are going up.  CHECK HERE!
+    } else if (
+        offsetX > ph
+        && offsetY > ph - offsetX
+        && offsetY < offsetX - h
+    ) {
+        l = offsetX - h - offsetY
+        j = 2 * (offsetX - ph) - 1
+        // For the horizontal directions, if offsetY is negative we are going
+        // left. That's all we need to check because we've dealt with all
+        // cases of vertical motion already:
+    } else if (offsetY < 0) {
+        j = -2 * offsetY - 1
+        l = -3 * offsetY - offsetX + abs(h)
+    } else {
+        // we are going right
+        j = 2 * (offsetY - v)
+        l = j + 1 + offsetX + offsetY
+    }
+    return j * (j + abs(h)) + l
+}
+
+const path: Record<number, string> = {
+    [FillOrder.By_Rows]: '[x, y]',
+    [FillOrder.Spiral]: 'spiral(k)',
+    [FillOrder.Triangle]:
+        '[ceil(c/2) - invTriangular(k-1)'
+        + ' + 2*(k - triangular(invTriangular(k-1)) - 1),'
+        + 'invTriangular(k-1) + 1]',
+}
+
+// now the stuff for drawing shapes
+const black = chroma()
+const white = chroma(1)
+const transparent = dilute(black, 0)
+type DrawData = {
+    cx: number
+    cy: number
+    cw: number
+    ch: number
+    cm: number
+    inset: number
+    x: number
+    y: number
+    text: string
+    sketch: p5
+}
+type Drawer = (data: DrawData) => void
+const drawShape = {
+    rectangle: ({cx, cy, cw, ch, sketch}) => sketch.rect(cx, cy, cw, ch),
+    square: ({cx, cy, cw, ch, cm, inset, sketch}) => {
+        const side = cm * inset
+        sketch.rect(cx + (cw - side) / 2, cy + (ch - side) / 2, side, side)
+    },
+    ellipse: ({cx, cy, cw, ch, sketch}) => {
+        sketch.ellipse(cx + cw / 2, cy + ch / 2, cw, ch)
+    },
+    circle: ({cx, cy, cw, ch, cm, inset, sketch}) => {
+        sketch.circle(cx + cw / 2, cy + ch / 2, cm * inset)
+    },
+    hexagon: ({cx, cy, cw, ch, sketch}) => {
+        sketch.beginShape()
+        // We start 1/6 of the height above the center of the top edge:
+        sketch.vertex(cx + cw / 2, cy - ch / 6)
+        sketch.vertex(cx + (3 * cw) / 2, cy + ch / 6)
+        sketch.vertex(cx + (3 * cw) / 2, cy + (5 * ch) / 6)
+        sketch.vertex(cx + cw / 2, cy + (7 * ch) / 6)
+        sketch.vertex(cx - cw / 2, cy + (5 * ch) / 6)
+        sketch.vertex(cx - cw / 2, cy + ch / 6)
+        sketch.endShape(sketch.CLOSE)
+    },
+    triangle: ({cx, cy, cw, ch, x, y, sketch}) => {
+        const basey = x % 2 === y % 2 ? cy + ch : cy
+        const peaky = 2 * cy + ch - basey
+        sketch.triangle(
+            cx - cw / 2,
+            basey,
+            cx + cw / 2,
+            peaky,
+            cx + (3 * cw) / 2,
+            basey
+        )
+    },
+    text: ({cx, cy, cw, ch, text, sketch}) => {
+        const size = ch / (text.length > 4 ? 4 : 2)
+        sketch.textSize(size).text(text, cx + cw / 2, cy + ch / 2)
+    },
+    mouseover: _dummy => {
+        console.warn('Unhandled mouseover') // should never happen
+    },
+} satisfies Record<string, Drawer>
+
+type Shape = keyof typeof drawShape
+
+const paramDesc = {
+    /** md
+- Dimensions: the number of rows and columns in the grid. Note that you may
+  leave this blank, in which case FormulaGrid will try to choose suitable
+  values to display the selected sequence, or you may specify just the
+  number of rows, in which case FormulaGrid will choose the number of columns
+  to fill the canvas. Or you may explicitly specify both the number of rows
+  and number of columns in the grid, separated by a space or comma.
+    **/
+    dimensions: {
+        default: [],
+        type: ParamType.NUMBER_ARRAY,
+        displayName: 'Dimensions',
+        required: false,
+        placeholder: '',
+        placeholderAlways: true,
+        description:
+            'Number of rows, or number of rows and number of '
+            + 'columns separated by a space or comma, to divide the canvas '
+            + 'into. If unspecified, FormulaGrid will try to display as '
+            + 'much of the sequence as it reasonably can while filling the '
+            + 'canvas.',
+        hideDescription: true,
+        validate: function (dim: number[], status: ValidationStatus) {
+            status.forbid(
+                dim.length > 2,
+                'Just number of rows and number of columns may be specified'
+            )
+            status.mandate(
+                dim.every(d => d > 0),
+                'Each dimension must be positive'
+            )
+            status.mandate(
+                dim.every(d => math.isInteger(d)),
+                'Each dimension must be an integer'
+            )
+        },
+    },
+    /** md
+- Cell aspect: the aspect ratio (width/height) of each cell in the grid.
+  Defaults to the value that will fill the available space in the canvas.
+  If this cell aspect is set and at least the number of columns is
+  unspecified, the dimensions will be chosen to fill the canvas. If this
+  parameter is set and both dimensions are set, the aspect ratio of the
+  portion of the canvas used by FormulaGrid will be set accordingly.
+  For convenience, the special aspect ratio 1/√3 that makes the hexagon
+  and triangle shapes be regular can be entered simply as the character `r`
+  (for "regular ratio").
+    **/
+    aspect: {
+        default: '',
+        type: ParamType.STRING,
+        displayName: 'Cell aspect',
+        required: false,
+        placeholder: '',
+        description:
+            'Cell aspect ratio (width/height). If unspecified, '
+            + 'FormulaGrid will adjust to fill the canvas. Use `r` to '
+            + 'make hexagons/triangles come out regular.',
+        hideDescription: true,
+        validate: function (s: string, status: ValidationStatus) {
+            status.mandate(
+                s === 'r' || /^\d*([.]\d*)?$/.test(s),
+                'Must be a positive number or the letter `r`.'
+            )
+        },
+    },
+    /** md
+- Fill order: the path through the grid in which cells should be filled.
+  Defaults to 'By_Rows', which fills them left-to-right and top-to-bottom.
+  May also be 'Spiral', which makes a rectangular spiral filling the grid,
+  or 'Triangle', which visits cells starting with the top center, then the
+  two immediately left and right in the next row, then three in the middle of
+  the third row, etc. Finally, if this parameter is set to 'Custom', an
+  entry box for the Path formula parameter will pop up, allowing you to
+  explicit specify the _x_ and _y_ coordinates of the _k_-th cell visited
+  in order to create custom paths, scatter plots, etc.
+    **/
+    fillOrder: {
+        default: FillOrder.By_Rows,
+        type: ParamType.ENUM,
+        from: FillOrder,
+        displayName: 'Fill order',
+        required: true,
+    },
+    /** md
+- Path formula: A formula giving the _x_ and _y_ coordinates of the _k_-th
+  cell to be visited as the visualization is drawn. It is only shown/used
+  if Fill order is 'Custom'. The value may be a two-element array giving the
+  _x_ and _y_ coordinates in that order, or a plain object with keys `x`
+  and `y` giving the coordinates. For example, if you want to fill the cells
+  starting from the upper left corner and then proceeding down each column
+  in turn, you could write `[ceil(k/r), k % r + 1]`, or equivalently
+  `{x: ceil(k/r), y: k % r + 1}`. The formula may use any of the variables
+  listed in the description above, where the inputs _x_, _y_, and _s_ are
+  calculated as if the fill order were the default 'By_Rows'. This latter
+  convention is useful if you want to tweak the default fill order.
+    **/
+    pathFormula: {
+        default: new MathFormula(path[FillOrder.By_Rows], formulaSymbols),
+        type: ParamType.FORMULA,
+        symbols: formulaSymbols,
+        displayName: 'Path formula',
+        required: false,
+        description:
+            'A formula giving the coordinates of the k-th cell '
+            + 'to be filled. '
+            + formulaDescription
+            + ' In this case, inputs x, y, and s are computed as if the path '
+            + 'were By_Rows.',
+        hideDescription: true,
+        visibleDependency: 'fillOrder',
+        visibleValue: FillOrder.Custom,
+    },
+    /** md
+- Background color: The color of the background.
+    **/
+    backgroundColor: {
+        default: '#FFFFFF',
+        type: ParamType.COLOR,
+        displayName: 'Background color',
+        required: true,
+    },
+    /** md
+- Speed: Cells filled per animation frame.
+    **/
+    speed: {
+        default: 32,
+        type: ParamType.INTEGER,
+        displayName: 'Speed',
+        required: false,
+        description: 'Cells filled per animation frame',
+        validate: function (s: number, status: ValidationStatus) {
+            status.mandate(s > 0, 'must be positive')
+        },
+    },
+    /** md
+- Fill formula: This parameter specifies the core behavior of Formula Grid,
+  directing what is drawn in each cell as the visualization reaches it.
+  As such, it is documented fully in the overview above.
+    **/
+    fillFormula: {
+        default: new MathFormula('a', formulaSymbols),
+        type: ParamType.FORMULA,
+        symbols: formulaSymbols,
+        displayName: 'Fill formula',
+        required: true,
+        description:
+            'A formula giving the color or array of colors to fill the '
+            + 'cell with, or a plain object associating with some shape '
+            + 'names the color or array of colors to draw them with. Allowed '
+            + 'keys are rectangle, square, ellipse, circle, hexagon, '
+            + 'triangle, text, or mouseover; the values for the last two '
+            + '"shapes" will be (converted to) strings, not colors. '
+            + formulaDescription,
+        hideDescription: true,
+    },
+    /** md
+- Inset formula: An expression giving the side length of the 'square' shape
+  and/or diameter of the 'circle' shape, as a multiple of the shorter
+  dimension of a cell. The value is allowed to be greater than one, in which
+  case the shapes may overlap. This parameter has no effect on any shapes
+  other than circle and square.
+    **/
+    inset: {
+        default: new MathFormula('0.6', formulaSymbols),
+        type: ParamType.FORMULA,
+        symbols: formulaSymbols,
+        displayName: 'Inset formula',
+        required: false,
+        description:
+            'A formula giving the size of circle and/or square as a '
+            + 'multiple of short side of cell.'
+            + formulaDescription,
+        hideDescription: true,
+        visibleDependency: 'fillFormula',
+        visiblePredicate: (fill: MathFormula) =>
+            /square|circle/.test(fill.source),
+    },
+} satisfies GenericParamDescription
+
+class FormulaGrid extends P5Visualizer(paramDesc) {
+    static category = 'Formula Grid'
+    static description =
+        'Fill the cells of a grid using shapes/colors determined by a formula'
+
+    index = 0n
+    rows = 0
+    columns = 0
+    cellwidth = 0
+    cellheight = 0
+    cellmin = 0
+    frames = 0
+    mouseText: string[][] = []
+    popup?: HTMLElement = undefined
+
+    async parametersChanged(names: Set<string>) {
+        if (names.has('fillOrder') && this.fillOrder !== FillOrder.Custom) {
+            const newPath = path[this.fillOrder]
+            if (newPath !== this.pathFormula.source) {
+                this.pathFormula = new MathFormula(newPath, formulaSymbols)
+                names.add('pathFormula')
+                this.refreshParams(new Set(['pathFormula']))
+            }
+        }
+        super.parametersChanged(names)
+    }
+
+    interpretAspect() {
+        if (!this.aspect) return 1
+        if (/^[rR]/.test(this.aspect)) return 1 / Math.sqrt(3)
+        return parseFloat(this.aspect)
+    }
+
+    requestedAspectRatio() {
+        if (
+            this.dimensions.length == 2 // have specified rows and columns
+            && this.aspect !== '' // and the aspect ratio of each cell
+        ) {
+            return (
+                (this.dimensions[C] * this.interpretAspect())
+                / this.dimensions[R]
+            )
+        }
+    }
+
+    setup() {
+        super.setup()
+        // first calculate the sizes of the grid
+        switch (this.dimensions.length) {
+            case 2:
+                ;[this.rows, this.columns] = this.dimensions
+                this.cellwidth = this.sketch.width / this.columns
+                this.cellheight = this.sketch.height / this.rows
+                this.cellmin = Math.min(this.cellwidth, this.cellheight)
+                this.params.dimensions.placeholder = ''
+                break
+            case 1:
+                this.rows = this.dimensions[R]
+                this.cellheight = this.sketch.height / this.rows
+                this.cellwidth = this.interpretAspect() * this.cellheight
+                this.columns = Math.floor(this.sketch.width / this.cellwidth)
+                this.cellmin = Math.min(this.cellwidth, this.cellheight)
+                this.params.dimensions.placeholder =
+                    this.columns + ' (from window width)'
+                break
+            case 0: {
+                const asp = this.interpretAspect()
+                let entries = isFinite(Number(this.seq.length))
+                    ? math.safeNumber(this.seq.length)
+                    : Infinity
+                const columnsPerRow =
+                    this.sketch.width / this.sketch.height / asp
+                if (entries === Infinity) {
+                    entries = Math.floor(
+                        (this.sketch.height / 8) ** 2 * columnsPerRow
+                    )
+                }
+                this.rows = Math.floor(Math.sqrt(entries / columnsPerRow))
+                this.cellheight = this.sketch.height / this.rows
+                this.cellwidth = asp * this.cellheight
+                this.cellmin = Math.min(this.cellwidth, this.cellheight)
+                if (this.cellmin < 0.5) {
+                    if (asp < 1) {
+                        this.cellwidth = 1
+                        this.cellheight = 1 / asp
+                    } else {
+                        this.cellheight = 1
+                        this.cellwidth = asp
+                    }
+                    this.cellmin = 1
+                    this.rows = Math.floor(
+                        this.sketch.height / this.cellheight
+                    )
+                }
+                this.columns = Math.floor(this.sketch.width / this.cellwidth)
+                this.params.dimensions.placeholder =
+                    `${this.rows} ${this.columns} ` + '(from window size)'
+            }
+        }
+        const actualAspect = this.cellwidth / this.cellheight
+        let digits = 3
+        if (math.isInteger(actualAspect)) digits = 0
+        this.params.aspect.placeholder =
+            actualAspect.toFixed(digits) + ' (to fill window)'
+        // now set up to draw
+        this.index = 1n
+        this.frames = 0
+        this.mouseText = []
+        this.sketch
+            .noStroke()
+            .textAlign(this.sketch.CENTER, this.sketch.CENTER)
+            .background(this.backgroundColor)
+        this.hidePopup()
+    }
+
+    draw() {
+        ++this.frames
+        for (let rep = this.speed; rep > 0; --rep) {
+            // See if we've either filled the canvas or exhausted the sequence
+            if (
+                (this.fillOrder !== FillOrder.Custom
+                    && this.index > this.rows * this.columns)
+                || this.index + this.seq.first > this.seq.last
+            ) {
+                this.stop()
+                return
+            }
+
+            // prepare the sequence inputs; before we compute the path position,
+            // we pretend we are doing things by rows:
+            const k = Number(this.index)
+            const tentativeX = ((k - 1) % this.columns) + 1
+            const tentativeY = Math.ceil(k / this.columns)
+            const seqIndex = this.index + this.seq.first - 1n
+            const input = {
+                x: tentativeX,
+                y: tentativeY,
+                s: invSpiral(tentativeX, tentativeY, this.rows, this.columns),
+                r: this.rows,
+                c: this.columns,
+                k,
+                m: Number(this.seq.first),
+                M: Number(this.seq.last),
+                n: Number(seqIndex),
+                a: Number(this.seq.getElement(seqIndex)),
+                f: this.frames,
+                A: (n: number | bigint) =>
+                    Number(this.seq.getElement(BigInt(n))),
+                spiral: (k: number) => spiralRC(k, this.rows, this.columns),
+            }
+            let pos = this.pathFormula.computeWithStatus(
+                this.statusOf.pathFormula,
+                input
+            )
+            if (typeof pos === 'object' && 'x' in pos && 'y' in pos) {
+                pos = [Number(pos.x), Number(pos.y)]
+            } else if (!Array.isArray(pos)) {
+                this.statusOf.pathFormula.addError(
+                    'must return an array, '
+                        + 'or plain object {x: number, y: number}'
+                )
+                return
+            }
+            if (typeof pos[X] !== 'number' || typeof pos[Y] !== 'number') {
+                this.statusOf.pathFormula.addError(
+                    'must return [number, number]'
+                )
+                return
+            }
+            ;[input.x, input.y] = pos
+            if (
+                input.x < 1
+                || input.x > this.columns
+                || input.y < 1
+                || input.y > this.rows
+            ) {
+                // Off screen, so nothing to do
+                continue
+            }
+            input.s = invSpiral(input.x, input.y, this.rows, this.columns)
+            let toFill: MathType | Partial<Record<Shape, MathType>> =
+                this.fillFormula.computeWithStatus(
+                    this.statusOf.fillFormula,
+                    input
+                )
+            if (
+                typeof toFill !== 'object'
+                || Object.keys(toFill).some(k => !(k in drawShape))
+            ) {
+                toFill = {rectangle: toFill as MathType}
+            }
+            let color = chroma(this.backgroundColor)
+            for (const entry of Object.entries(toFill)) {
+                const shape = entry[0] as Shape
+                let spec = entry[1]
+                const text = Array.isArray(spec)
+                    ? spec.map(i => i.toString()).join('')
+                    : spec.toString()
+                if (shape === 'text') {
+                    // Choose black or white to contrast with latest color
+                    let tc = black
+                    if (
+                        chroma.contrast(color, white)
+                        > chroma.contrast(color, tc)
+                    ) {
+                        tc = white
+                    }
+                    this.sketch.fill(tc.hex())
+                } else if (shape === 'mouseover') {
+                    if (!this.mouseText[input.x]) this.mouseText[input.x] = []
+                    this.mouseText[input.x][input.y] = text
+                    continue // don't draw anything now
+                } else {
+                    // all other shapes
+                    if (!Array.isArray(spec)) {
+                        spec = [spec]
+                    }
+                    color = spec.reduce(
+                        (c: Chroma, layer: number | string | Chroma) => {
+                            return overlay(c, chroma(layer))
+                        },
+                        transparent
+                    )
+                    this.sketch.fill(color.hex())
+                }
+                let inset = 1
+                if (shape === 'square' || shape === 'circle') {
+                    inset = Number(
+                        this.inset.computeWithStatus(
+                            this.statusOf.inset,
+                            input
+                        )
+                    )
+                }
+                drawShape[shape]({
+                    cx: (input.x - 1) * this.cellwidth,
+                    cy: (input.y - 1) * this.cellheight,
+                    cw: this.cellwidth,
+                    ch: this.cellheight,
+                    cm: this.cellmin,
+                    inset,
+                    x: input.x,
+                    y: input.y,
+                    text,
+                    sketch: this.sketch,
+                })
+            }
+            ++this.index
+        }
+    }
+
+    mouseMoved(event: MouseEvent) {
+        const where = document.elementFromPoint(event.clientX, event.clientY)
+        const onSketch =
+            where
+            && this.within
+            && (where === this.within || where.contains(this.within))
+        let mousetext = ''
+        let x = 0
+        if (onSketch) {
+            x = Math.floor(this.sketch.mouseX / this.cellwidth) + 1
+            const y = Math.floor(this.sketch.mouseY / this.cellheight) + 1
+            const textRow = this.mouseText[x]
+            if (textRow) mousetext = textRow[y] ?? ''
+        }
+        if (mousetext && onSketch) {
+            const r = where.getBoundingClientRect()
+            this.showPopup(mousetext, [
+                event.clientX - r.x,
+                event.clientY - r.y,
+            ])
+        } else this.hidePopup()
+    }
+
+    showPopup(text: string, [x, y]: NPair) {
+        if (!this.within) return
+        if (!this.popup) {
+            this.popup = document.createElement('div')
+            this.popup.classList.add('shadowed')
+            const sty = this.popup.style
+            sty.background = 'white'
+            sty.opacity = '1'
+            sty.position = 'absolute'
+            sty.padding = '2px'
+            sty.border = '1px solid black'
+            sty.zIndex = '3'
+            this.within.appendChild(this.popup)
+        }
+        this.popup.textContent = text
+        const sty = this.popup.style
+        sty.display = 'block'
+        let popx = x + 16
+        let popy = y + 24
+        const pad = 6
+        let xBlocked = false
+        const popr = this.popup.getBoundingClientRect()
+        const {width, height} = this.within.getBoundingClientRect()
+        if (popx + popr.width + pad > width) {
+            xBlocked = true
+            popx = width - popr.width - pad
+        }
+        if (popy + popr.height + pad > height) {
+            popy = (xBlocked ? y - 4 : height) - popr.height - pad
+        }
+        sty.left = popx + 'px'
+        sty.top = popy + 'px'
+    }
+
+    hidePopup() {
+        if (this.popup) this.popup.style.display = 'none'
+    }
+}
+
+export const exportModule = new VisualizerExportModule(FormulaGrid)
diff --git a/src/visualizers/P5Visualizer.ts b/src/visualizers/P5Visualizer.ts
index 79fc8a7b..4eedccc5 100644
--- a/src/visualizers/P5Visualizer.ts
+++ b/src/visualizers/P5Visualizer.ts
@@ -17,6 +17,7 @@ import type {SequenceInterface} from '@/sequences/SequenceInterface'
 import {CachingError} from '@/shared/math'
 import {Paramable} from '@/shared/Paramable'
 import type {GenericParamDescription, ParamValues} from '@/shared/Paramable'
+import {Specimen} from '@/shared/Specimen'
 
 // Ugh, the gyrations we go through to keep TypeScript happy
 // while only listing the p5 methods once:
@@ -455,7 +456,17 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
             const element = this.within!
             this.stop()
             if (forcePresketch) this.depart(element)
-            await this.inhabit(element, this.size)
+            let size = this.size
+            if (this.within) {
+                size = Specimen.calculateSize(
+                    {
+                        width: element.clientWidth,
+                        height: element.clientHeight,
+                    },
+                    this.requestedAspectRatio()
+                )
+            }
+            await this.inhabit(element, size)
             this.show()
         }
     }
diff --git a/src/visualizers/Turtle.ts b/src/visualizers/Turtle.ts
index e1987d56..2e42e51a 100644
--- a/src/visualizers/Turtle.ts
+++ b/src/visualizers/Turtle.ts
@@ -60,7 +60,7 @@ const formulaSymbols = [
     'n',
     'a',
     'A',
-    's',
+    'k',
     'm',
     'M',
     'f',
@@ -328,11 +328,11 @@ case you inadvertently left out a value.)
 
   `a` The value of the entry.
 
-  `s` The serial number of the step starting from one for the first step
+  `k` The serial number of the step starting from one for the first step
   that the turtle takes.
 
   `m` The minimum index of the sequence being visualized. Note that the
-  above definitions mean that `n`, `s`, and `m` are related by `n = m + s - 1`.
+  above definitions mean that `n`, `k`, and `m` are related by `n = m + k - 1`.
 
   `M` The Maximum index of the sequence being visualized. Note this value
   may be Infinity for sequences that are defined and can be calculated in
@@ -354,7 +354,7 @@ case you inadvertently left out a value.)
 
   `y` The current y-coordinate of the turtle.
 
-  You may also use the symbol `A` as a function symbol in your code, and it
+  You may also use the symbol `A` as a function symbol in your formula, and it
   will provide access to the value of the sequence being visualized for any
   index. For example, the formula `A(n+1) - A(n)` or equivalently `A(n+1) - a`
   would produce the so-called "first differences" of the sequence.
@@ -384,7 +384,7 @@ case you inadvertently left out a value.)
                 turtle.params.ruleMode.description =
                     'The formulas below may use the following symbols: '
                     + '`a` - sequence entry, `n` - sequence index, '
-                    + '`s` - step number, `m` - minimum index, '
+                    + '`k` - step number, `m` - minimum index, '
                     + '`M` - Maximum index, '
                     + '`A(...)` -- sequence entry at any index, '
                     + '`b` - current bearing, `x`,`y` - current position, '
@@ -871,7 +871,7 @@ class Turtle extends P5GLVisualizer(paramDesc) {
             const input = {
                 n: Number(i),
                 a: Number(currElement),
-                s: Number(i - this.seq.first + 1n),
+                k: Number(i - this.seq.first + 1n),
                 m: Number(this.seq.first),
                 M: Number(this.seq.last),
                 f: currentFrames,