diff --git a/doc/onboarding.md b/doc/onboarding.md
index 33387ce9..e7f4b69a 100644
--- a/doc/onboarding.md
+++ b/doc/onboarding.md
@@ -9,15 +9,16 @@ Unless otherwise specified, all commands we ask you to run are supposed to be
 run in a Terminal emulator using a shell like Bash or Zsh (on Linux and macOS)
 or in Git Bash (on Windows). Anything you have to fill in with the proper
 information for your setup (as opposed to execute verbatim as shown) is
-enclosed in brackets `[]`.
+enclosed in brackets `[]`. MacOS specific instructions appear at the end of
+steps where they apply, preceded by "_Mac_:"
 
 ## Accounts, etc.
 
-(Steps 2 and 3 only apply to the members of the Numberscope project at the CU
-Boulder Experimental Mathematics Lab.)
-
-1. If you don't have an account, sign up for [GitHub](https://github.com).
-2. Make sure you've been added to the Numberscope GitHub organization.
+1. If you are planning to contribute code and don't have a GitHub account,
+   [sign up for one](https://github.com).
+2. For members of the Numberscope project at the CU Boulder Experimental
+   Mathematics Lab only: Make sure you've been added to the Numberscope GitHub
+   organization.
 
 ## Setting up your computer for development
 
@@ -31,55 +32,103 @@ Boulder Experimental Mathematics Lab.)
     - TypeScript Vue Plugin (Volar)
     - Vue Language Features (Volar)
 
-    For more info on extensions, see:
-    https://code.visualstudio.com/docs/editor/extension-marketplace.
+    For more info on extensions, see the Visual Studio
+    [extension marketplace](https://code.visualstudio.com/docs/editor/extension-marketplace).
 
 2. If you don't have [Git](https://git-scm.com/) installed, install it. We use
-   Git to keep track of the different versions of our code.
+   Git to keep track of the different versions of our code. _Mac_: The easiest
+   way to install Git is to install the Mac "developer tools." You can do so
+   by opening Settings > General > Software Update and then (in a terminal, as
+   mentioned above) executing `xcode-select --install`. Then follow the
+   prompts in the Software Update window; your computer may need to restart
+   for the changes to take effect.
 3. If you don't have [NodeJS](https://nodejs.org/en/) installed, install it.
    NodeJS allows you to run JavaScript outside of a web browser. We use it in
-   our front end code base.
+   our front end code base. _Mac_: You can obtain Node by first installing the
+   "node version manager" via:
+
+    ```
+    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.2/install.sh | bash
+    ```
+
+    [Note that you may need to change the `v0.40.2` portion of the above URL
+    to the latest version of nvm; it was current at the time of this writing,
+    but you can always find the latest release on its
+    [GitHub page](https://github.com/nvm-sh/nvm/releases).] Now either log out
+    and log back in for the nvm installation to take effect, or instead just
+    execute `. ~/.nvm/nvm.sh`. Finally, to install Node, choose the version of
+    Node you want (latest was 23 at the time of this writing, but you can
+    always look up the
+    [available releases](https://nodejs.org/en/about/previous-releases)). Then
+    execute the command `nvm install [DESIRED_VERSION]`, e.g.,
+    `nvm install 23`.
+
 4. Make sure you have [Make](https://linuxhandbook.com/using-make/) installed.
-   There's a guide for Linux on that page; or you can try these other links
-   for
-   [Windows](https://stackoverflow.com/questions/32127524/how-to-install-and-use-make-in-windows)
-   or [MacOS](https://stackoverflow.com/questions/1469994/using-make-on-os-x).
-5. If you don't have [Python 3](https://www.python.org/) installed, install
-   it. We use Python in frontscope for our documentation site.
-6. Make sure you have a `venv` module by running the following command:
-    ```sh
-    python3 -m venv -h
+   There's a guide for Linux on that page; or you can try this link for
+   [Windows](https://stackoverflow.com/questions/32127524/how-to-install-and-use-make-in-windows).
+   _Mac_: Unfortunately, the version of `make` that Apple includes with its
+   developer tools is too outdated to work with frontscope. Therefore, you
+   must compile and install a more recent version of `make`. One relatively
+   simple way to do this is to install the "Homebrew" package management
+   system for MacOS, via
+
+    ```
+    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
     ```
-    You should see help for the `venv` module. If you don't you might have to
-    install the module separately. How you do this depends on your system and
-    might require some googling. We use `venv` for a "virtual environment". In
-    this context, a virtual environment is an empty box, a clean slate, for
-    all of our Python dependencies. It makes it so that we can use the exact
-    dependencies we list in `requirements.txt`. All of the dependencies in
-    `requirements.txt` are installed into a subdirectory in the `.venv`
-    directory. Once you activate a virtual environment, all of the Python
-    commands you run are run using the dependencies in the virutal
-    environment, and not the dependencies you installed elsewhere on your
-    computer.
-7. Somewhere on your computer, make a directory where you can keep Numberscope
+
+    (Note this command will require administrator access to execute.) When
+    that completes, it will print out some commands that you should execute to
+    finish providing access to Homebrew. Once those are done, you can install
+    the current version of `make` with the command `brew install make`. When
+    it's done, it will print a message about what you need to do to use it as
+    "make"; you don't need to worry about this, as frontscope already uses it
+    as "gmake".
+
+5. _Mac_ (only): The version of the Gnu "bash" command interpreter installed
+   in MacOS is also too outdated to work with frontscope. As a result, you
+   must install a current version. If you installed Homebrew in the previous
+   step, you can perform this installation with `brew install bash`.
+
+6. If you don't have [Python 3](https://www.python.org/) installed, install
+   it. We use Python in frontscope for our documentation site.
+
+7. Make sure you have a `venv` module by running the following command:
+   `python3 -m venv -h`. You should see help for the `venv` module. If you
+   don't you might have to install the module separately. How you do this
+   depends on your system and might require some web searching. We use `venv`
+   for a "virtual environment". In this context, a virtual environment is an
+   empty box, a clean slate, for all of our Python dependencies. It allows us
+   to use the exact dependencies we list in `requirements.txt`. All of the
+   dependencies in `requirements.txt` are installed into a subdirectory in the
+   `.venv` directory. Once you activate a virtual environment, all of the
+   Python commands you run use the dependencies in the virutal environment,
+   and not the dependencies installed elsewhere on your computer.
+
+8. Somewhere on your computer, make a directory where you can keep Numberscope
    code. I like to put a directory called `Code` in my home directory. You can
    call this whatever you want.
-8. Clone the official github repository:
+
+9. Clone the official github repository:
+
     ```sh
     cd [/path/to/your/code/directory]
     git clone https://github.com/numberscope/frontscope.git
     ```
+
     If you have trouble, read
     [this doc](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
-    or ping someone for help.
-9. If you plan to submit new code to become part of Numberscope at some time
-   in the future, _you must_ also "fork" (make your own copy of) the
-   repository:
+    or ask someone for help.
+
+10. If you plan to submit new code to become part of Numberscope at some time
+    in the future, _you must_ also "fork" (make your own copy of) the
+    repository:
+
     - Go to https://github.com/numberscope/frontscope.
     - Click the "Fork" button (in the upper right as of this writing) and then
       follow the instructions GitHub provides. You need to create the fork on
       your GitHub account.
-10. If you are going to submit new code, you will also need to run the
+
+11. If you are going to submit new code, you will also need to run the
     standard tests of the system with your changes in place, and likely add
     new tests for your changes. Running tests requires that you have
     [Docker](https://www.docker.com/) installed on your system. There are many
@@ -88,24 +137,27 @@ Boulder Experimental Mathematics Lab.)
     [Ubuntu Linux](https://linuxconfig.org/quick-docker-installation-on-ubuntu-24-04),
     and
     [Mac OS](https://thesecmaster.com/blog/installing-docker-desktop-on-macos).
-11. Go to the newly cloned `frontscope` directory and install the
+
+12. Go to the newly cloned `frontscope` directory and install the
     dependencies:
+
     ```sh
     cd frontscope
     npm install
     ```
+
     You need NodeJS installed to do this.
-12. Run the development server (this runs a local copy of Numberscope on your
-    computer so you can interact with the webpage):
-    ```sh
-    npm run dev
-    ```
-    This should print a link that you can open in the browser. Open it and see
-    if Numberscope seems to be working.
-13. If you plan on contributing code to Numberscope, _you must_ work in your
+
+13. Run the development server (this runs a local copy of Numberscope on your
+    computer so you can interact with the webpage): `npm run dev`. This should
+    print a link that you can open in the browser. Open it and see if
+    Numberscope seems to be working.
+
+14. If you plan on contributing code to Numberscope, _you must_ work in your
     fork on a dedicated feature branch. To learn how to create a branch, see
     [this doc](working-with-git-and-github.md#create-a-branch).
-14. Finally, before you start changing code, please read
+
+15. Finally, before you start changing code, please read
     [our docs on submitting a pull request](../CONTRIBUTING.md#submit-a-pull-request).
 
 See [the doc on running from source](./running-from-source.md) for more
diff --git a/doc/running-from-source.md b/doc/running-from-source.md
index dc43cd65..49be3588 100644
--- a/doc/running-from-source.md
+++ b/doc/running-from-source.md
@@ -11,6 +11,11 @@
     install the venv module with a command like `apt install python3.11-venv`
     (you may have to replace the "3.11" with the version that is currently
     running in your installation).
+
+    If you are working under MacOS and would like more detail on how to set up
+    all of these tools, take a look at the Mac notes in the
+    [onboarding](onboarding.md) page.
+
 2.  In addition, if you want to build the documentation website for the
     `frontscope` system, you will need the [d2](https://d2lang.com) diagram
     generation software installed on your system. This step is not necessary
diff --git a/doc/visualizer-in-depth.md b/doc/visualizer-in-depth.md
index f5188dd4..b8a9ef27 100644
--- a/doc/visualizer-in-depth.md
+++ b/doc/visualizer-in-depth.md
@@ -494,6 +494,24 @@ browser, often with the JavaScript `Event` structure as shown.
 !}
 ```
 
+### Display a simple informational popup
+
+As a convenience and to prevent code duplication among Visualizers derived
+from P5Visualizer, the base P5Visualizer class provides a simple informational
+popup/tooltip facility, via the following instance method:
+
+`this.simplePopup('Display me', [atX, atY])`
+
+-   Shows the popup with the given text ('Display me' in this example) at the
+    given X and Y coordinates (here `atX` and `atY`). If the text to display
+    is empty (the default), hides the popup instead; thus, you can simply call
+    `this.simplePopup()` to hide the popup. The popup starts invisible and
+    will not be displayed unless/until there is a call to this method with a
+    non-empty first argument.
+
+The popup is styled to coordinate with the overall frontscope visual design;
+there is not currently any mechanism to alter its styling.
+
 ### How to report errors
 
 There are three ways to let people interacting with a visualizer know that
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/DejavuDifferences-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/DejavuDifferences-chromium-linux.png
new file mode 100644
index 00000000..40a18982
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/DejavuDifferences-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/DejavuDifferences-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/DejavuDifferences-firefox-linux.png
new file mode 100644
index 00000000..dfed0d7a
Binary files /dev/null and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/DejavuDifferences-firefox-linux.png differ
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/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png
index 10746f82..02344fb9 100644
Binary files a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-firefox-linux.png b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-firefox-linux.png
index eb9fa271..88c76a63 100644
Binary files a/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-firefox-linux.png and b/e2e/tests/ci_snaps/featured.spec.ts-snapshots/WovenResidues-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/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png
index b3858f5f..2b86979d 100644
Binary files a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png and b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png
index 2d45fc95..2170290e 100644
Binary files a/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png and b/e2e/tests/ci_snaps/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png
index dd6a9ade..4b8ba530 100644
Binary files a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png
index bd4aa0bc..e292eaeb 100644
Binary files a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png
index d5437a6f..287fc4e9 100644
Binary files a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png
index cb9e715e..4549940c 100644
Binary files a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png
index 366fb6cb..08739cd7 100644
Binary files a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-firefox-linux.png
index 5c66975d..529c6d2e 100644
Binary files a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-firefox-linux.png and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/DifferencesA202319-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/FormulaGridA001220-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA001220-chromium-linux.png
new file mode 100644
index 00000000..24bc88b1
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA001220-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA001220-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA001220-firefox-linux.png
new file mode 100644
index 00000000..de0f41f4
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA001220-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA002819-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA002819-chromium-linux.png
new file mode 100644
index 00000000..eb232ebb
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA002819-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA002819-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA002819-firefox-linux.png
new file mode 100644
index 00000000..6dee5089
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/FormulaGridA002819-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/ModFillA007235-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA007235-chromium-linux.png
new file mode 100644
index 00000000..bcb417c9
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA007235-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA007235-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA007235-firefox-linux.png
new file mode 100644
index 00000000..9b1d29fd
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA007235-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/ci_snaps/transversal.spec.ts-snapshots/ModFillA228060-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA228060-chromium-linux.png
new file mode 100644
index 00000000..a5e22c1f
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA228060-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA228060-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA228060-firefox-linux.png
new file mode 100644
index 00000000..082f1ffa
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA228060-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png
new file mode 100644
index 00000000..7f4312c9
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png
new file mode 100644
index 00000000..243bc254
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA001220-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA001220-chromium-linux.png
new file mode 100644
index 00000000..5c0dcca2
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA001220-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA001220-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA001220-firefox-linux.png
new file mode 100644
index 00000000..14045444
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA001220-firefox-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png
new file mode 100644
index 00000000..2bd84eb1
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png differ
diff --git a/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA086677-firefox-linux.png b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA086677-firefox-linux.png
new file mode 100644
index 00000000..56c235dd
Binary files /dev/null and b/e2e/tests/ci_snaps/transversal.spec.ts-snapshots/NumberGlyphA086677-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..2c43f4ef 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/DejavuDifferences-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/DejavuDifferences-chromium-linux.png
new file mode 100644
index 00000000..40a18982
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/DejavuDifferences-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/DejavuDifferences-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/DejavuDifferences-firefox-linux.png
new file mode 100644
index 00000000..dfed0d7a
Binary files /dev/null and b/e2e/tests/featured.spec.ts-snapshots/DejavuDifferences-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-chromium-linux.png
index ce1c5e1f..f7182586 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-firefox-linux.png
index 42f1b1c8..6db3fb00 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-firefox-linux.png and b/e2e/tests/featured.spec.ts-snapshots/GosperFlowsnake-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/HatTrick-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/HatTrick-chromium-linux.png
index 16bdb903..91870798 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/HatTrick-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/HatTrick-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/HatTrick-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/HatTrick-firefox-linux.png
index 53386536..b6cebcfa 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/HatTrick-firefox-linux.png and b/e2e/tests/featured.spec.ts-snapshots/HatTrick-firefox-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/MobiusHeartbeat-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/MobiusHeartbeat-chromium-linux.png
index 3bdb3431..df0c132f 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/MobiusHeartbeat-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/MobiusHeartbeat-chromium-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/PEMDASymmetry-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/PEMDASymmetry-chromium-linux.png
index 527a2df0..d7db59c0 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/PEMDASymmetry-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/PEMDASymmetry-chromium-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/TheRaucousRecam-C3-A1n-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-chromium-linux.png
index 5912503f..150f50f8 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-firefox-linux.png
index 818193b9..c24d74a4 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-firefox-linux.png and b/e2e/tests/featured.spec.ts-snapshots/TheRaucousRecam-C3-A1n-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/TheVertigoofDivergence-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/TheVertigoofDivergence-chromium-linux.png
index ae7663bb..618eca62 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/TheVertigoofDivergence-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/TheVertigoofDivergence-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/ThueTraipse-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/ThueTraipse-chromium-linux.png
index 52ddf81a..666ae319 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/ThueTraipse-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/ThueTraipse-chromium-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/VFibSnowflake-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-chromium-linux.png
index 11939c2b..5cf99fc8 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-firefox-linux.png
index 81a8dcf0..0925098a 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-firefox-linux.png and b/e2e/tests/featured.spec.ts-snapshots/VFibSnowflake-firefox-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/WaitForIt-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/WaitForIt-chromium-linux.png
index 3f4cb107..c1b39421 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/WaitForIt-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/WaitForIt-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png b/e2e/tests/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png
index 10746f82..02344fb9 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png and b/e2e/tests/featured.spec.ts-snapshots/WovenResidues-chromium-linux.png differ
diff --git a/e2e/tests/featured.spec.ts-snapshots/WovenResidues-firefox-linux.png b/e2e/tests/featured.spec.ts-snapshots/WovenResidues-firefox-linux.png
index eb9fa271..88c76a63 100644
Binary files a/e2e/tests/featured.spec.ts-snapshots/WovenResidues-firefox-linux.png and b/e2e/tests/featured.spec.ts-snapshots/WovenResidues-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/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png
index b3858f5f..2b86979d 100644
Binary files a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png and b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-chromium-linux.png differ
diff --git a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png
index c7cfb652..bccaf715 100644
Binary files a/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png and b/e2e/tests/idiot.spec.ts-snapshots/Stress-test-Numberscope-usage-Way-too-big-a-number-1-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png
index dd6a9ade..4b8ba530 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png
index bd4aa0bc..e292eaeb 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA001489-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png
index d5437a6f..287fc4e9 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png
index cb9e715e..4549940c 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA086677-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png
index 366fb6cb..08739cd7 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-firefox-linux.png
index 5c66975d..529c6d2e 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/DifferencesA202319-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/FormulaGridA001220-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA001220-chromium-linux.png
new file mode 100644
index 00000000..24bc88b1
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA001220-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA001220-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA001220-firefox-linux.png
new file mode 100644
index 00000000..de0f41f4
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA001220-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA002819-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA002819-chromium-linux.png
new file mode 100644
index 00000000..eb232ebb
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA002819-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA002819-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA002819-firefox-linux.png
new file mode 100644
index 00000000..6dee5089
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/FormulaGridA002819-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/HistogramA134028-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/HistogramA134028-chromium-linux.png
index 4315298b..184b436b 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/HistogramA134028-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/HistogramA134028-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA007235-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA007235-chromium-linux.png
new file mode 100644
index 00000000..bcb417c9
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA007235-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA007235-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA007235-firefox-linux.png
new file mode 100644
index 00000000..9b1d29fd
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA007235-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/e2e/tests/transversal.spec.ts-snapshots/ModFillA228060-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA228060-chromium-linux.png
new file mode 100644
index 00000000..a5e22c1f
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA228060-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA228060-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA228060-firefox-linux.png
new file mode 100644
index 00000000..082f1ffa
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA228060-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png
index f53d86a4..7f4312c9 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png
index 998c0609..243bc254 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/ModFillA241298-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA001220-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA001220-chromium-linux.png
new file mode 100644
index 00000000..5c0dcca2
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA001220-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA001220-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA001220-firefox-linux.png
new file mode 100644
index 00000000..14045444
Binary files /dev/null and b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA001220-firefox-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png
index 1e60d06d..2bd84eb1 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-chromium-linux.png differ
diff --git a/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-firefox-linux.png b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-firefox-linux.png
index 8fb14843..56c235dd 100644
Binary files a/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-firefox-linux.png and b/e2e/tests/transversal.spec.ts-snapshots/NumberGlyphA086677-firefox-linux.png differ
diff --git a/etc/Makefile b/etc/Makefile
index 655583f4..3620f70c 100644
--- a/etc/Makefile
+++ b/etc/Makefile
@@ -1,7 +1,7 @@
 .RECIPEPREFIX = |
 .PHONY: FORCE playreport phony typecheck vueserve docserve preview prettiest
 
-SHELL = /bin/bash
+SHELL = bash
 
 sources != shopt -s globstar && echo src/** index.html
 docs != shopt -s globstar &&\
diff --git a/package.json b/package.json
index c043bbb8..8df183e4 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
         "help:dev-1": "echo Compiles frontscope and starts a server running it.",
         "help:dev-2": "echo Note the server will hot-reload the code from any",
         "help:dev-3": "echo source files as they change, to ease development.",
-        "dev": "make -f etc/Makefile vueserve",
+        "dev": "gmake -f etc/Makefile vueserve",
         "help:dev:workbench": "run-s -s help:dev:workbench-*",
         "help:dev:workbench-1": "echo Compiles frontscope and starts a server running it in workbench mode,",
         "help:dev:workbench-2": "echo \"with the visualizers in the 'visualizers-workbench' directory loaded.\"",
@@ -19,7 +19,7 @@
         "help:doc:serve-1": "echo \"This is like the 'dev' script, but for the\"",
         "help:doc:serve-2": "echo embedded documentation rather than the",
         "help:doc:serve-3": "echo Numberscope interface itself.",
-        "doc:serve": "make -f etc/Makefile docserve",
+        "doc:serve": "gmake -f etc/Makefile docserve",
         "help:doc:serve:workbench": "run-s -s help:doc:serve:workbench-*",
         "help:doc:serve:workbench-1": "echo \"This is like the 'dev:workbench' script, but\"",
         "help:doc:serve:workbench-2": "echo for the embedded documentation rather than the",
@@ -29,20 +29,20 @@
         "help:build:1": "echo Compiles frontscope and minifies the result,",
         "help:build:2": "echo producing a bundle ready for installation",
         "help:build:3": "echo on a server.",
-        "build": "make -f etc/Makefile",
+        "build": "gmake -f etc/Makefile",
         "help:preview": "run-s -s help:preview:*",
         "help:preview:1": "echo Runs build and then serves the resulting site",
         "help:preview:2": "echo \"(the contents of the 'dist/' directory) \"",
         "help:preview:3": "echo for you to browse. This script differs from",
         "help:preview:4": "echo \"'dev' in that there isn't any hot module\"",
         "help:preview:5": "echo reload. It is what runs in production.",
-        "preview": "make -f etc/Makefile preview",
+        "preview": "gmake -f etc/Makefile preview",
         "help:preview:cmd": "echo Previews w/o rebuild; needed for e2e tests.",
         "preview:cmd": "vite --config etc/vite.config.ts preview",
         "help:test:unit": "echo Typechecks and runs unit tests.",
-        "test:unit": "sh -xc 'make -f etc/Makefile testunit \"cl_args=$*\"' phony",
+        "test:unit": "sh -xc 'gmake -f etc/Makefile testunit \"cl_args=$*\"' phony",
         "help:test:e2e": "echo Runs end-to-end in-browser tests via Docker.",
-        "test:e2e": "sh -xc 'make -f etc/Makefile e2e/certificate \"cl_args=$*\"' phony",
+        "test:e2e": "sh -xc 'gmake -f etc/Makefile e2e/certificate \"cl_args=$*\"' phony",
         "help:test:e2e:cmd": "run-s -s help:test:e2e:cmd-*",
         "help:test:e2e:cmd-1": "echo Runs end-to-end tests directly.",
         "help:test:e2e:cmd-2": "echo However, note that it does not rebuild",
@@ -52,13 +52,13 @@
         "help:test:e2e:cmd-6": "echo use by other scripts.",
         "test:e2e:cmd": "playwright test -c e2e/playwright.config.ts",
         "help:test:e2e:report": "echo Runs e2e and opens report in browser",
-        "test:e2e:report": "sh -xc 'make -f etc/Makefile playreport \"cl_args=$*\"' phony",
+        "test:e2e:report": "sh -xc 'gmake -f etc/Makefile playreport \"cl_args=$*\"' phony",
         "help:test:e2e:ui": "echo Runs interactive end-to-end tests directly.",
         "test:e2e:ui": "npm run build && npm run test:e2e:cmd -- --ui",
         "help:typecheck": "run-s -s help:typecheck:*",
         "help:typecheck:1": "echo Checks for TypeScript errors in both .vue",
         "help:typecheck:2": "echo and .ts files.",
-        "typecheck": "make -f etc/Makefile typecheck",
+        "typecheck": "gmake -f etc/Makefile typecheck",
         "help:lint": "run-s -s help:lintx:*",
         "help:lintx:01": "echo If you would like to format your code before",
         "help:lintx:02": "echo you make a commit with git -- which has hooks",
@@ -74,13 +74,13 @@
         "help:lintx:12": "echo commit, presuming the standard git hooks that",
         "help:lintx:13": "echo this project sets up are in place, the commit",
         "help:lintx:14": "echo will be rejected.",
-        "lint": "make -f etc/Makefile prettiest 'flags=-l --write'",
+        "lint": "gmake -f etc/Makefile prettiest 'flags=-l --write'",
         "help:lint:check": "run-s -s help:lint:check-*",
         "help:lint:check-1": "echo \"This is like the 'lint' script, but it\"",
         "help:lint:check-2": "echo only shows what changes would be made and",
         "help:lint:check-3": "echo reports any unresolved problems; it does",
         "help:lint:check-4": "echo not modify any of your source files.",
-        "lint:check": "make -f etc/Makefile prettiest flags=-s",
+        "lint:check": "gmake -f etc/Makefile prettiest flags=-s",
         "//only lifecycle scripts below here": "echo",
         "prepare": "husky",
         "postinstall": "git config --local include.path ../.gitconfig && python3 -m venv .venv && cd tools && node pyrun.mjs python -m pip install -U pip && node pyrun.mjs pip install -r requirements.txt"
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/sequences/OEIS.ts b/src/sequences/OEIS.ts
index 188e038e..1ac1ea71 100644
--- a/src/sequences/OEIS.ts
+++ b/src/sequences/OEIS.ts
@@ -5,10 +5,12 @@ import type {Factorization} from './SequenceInterface'
 import simpleFactor from './simpleFactor'
 
 import {alertMessage} from '@/shared/alertMessage'
+import {breakableString} from '@/shared/layoutUtilities'
 import {math} from '@/shared/math'
 import type {ExtendedBigint} from '@/shared/math'
 import type {GenericParamDescription} from '@/shared/Paramable'
 import {ParamType} from '@/shared/ParamType'
+import {ValidationStatus} from '@/shared/ValidationStatus'
 
 /** md
 # OEIS sequence
@@ -61,6 +63,9 @@ const paramDesc = {
         required: false,
         description:
             'If nonzero, take the residue of each element to this modulus.',
+        validate: function (n: bigint, status: ValidationStatus) {
+            status.forbid(n < 0n, "can't be negative")
+        },
     },
 } satisfies GenericParamDescription
 
@@ -113,7 +118,7 @@ export class OEIS extends Cached(paramDesc) {
     get description() {
         // Unusual: override the per-instance description
         let desc = this.oeisName
-        if (this.modulus > 0n) desc += ` (mod ${this.modulus})`
+        if (this.modulus) desc += ` (mod ${breakableString(this.modulus)})`
         return desc
     }
 
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..379279ed 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
@@ -373,7 +378,7 @@ export type ParamValues<PD extends GenericParamDescription> = {
 /* NOTE that the rest of the documentation in this file is set off by
    `xmd` comments, rather than `md`, because the remaining documentation
    is extracted by the VisualizerInterface page rather than being part of
-   the `ParamInterface` page directly generated by this file
+   the `Paramable` page directly generated by this file
 */
 
 /** xmd
@@ -530,7 +535,6 @@ export interface ParamableInterface {
     (typically you may want to call `validate()` immediately after
     `loadQuery()`).
 <!-- --> **/
-    /** xmd */
 }
 
 /* Helper functions to realize parameters given parameter description(s)
@@ -858,7 +862,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__/layoutUtilities.spec.ts b/src/shared/__tests__/layoutUtilities.spec.ts
new file mode 100644
index 00000000..1f0ed57b
--- /dev/null
+++ b/src/shared/__tests__/layoutUtilities.spec.ts
@@ -0,0 +1,20 @@
+import {describe, it, expect} from 'vitest'
+
+import {breakableString} from '../layoutUtilities'
+// isMobile not easily unit testable, since it needs a browser context
+
+describe('breakableString', () => {
+    it('leaves small numbers alone', () => {
+        expect(breakableString(2n)).toBe(2n.toString())
+        expect(breakableString(123456789n)).toBe(123456789n.toString())
+        expect(breakableString(-123456789n)).toBe((-123456789n).toString())
+    })
+    it('splits larger numbers into groups of 3 digits from the right', () => {
+        expect(breakableString(1234567890n)).toBe('1 234 567 890')
+        expect(breakableString(12345678901n)).toBe('12 345 678 901')
+        expect(breakableString(123456789012n)).toBe('123 456 789 012')
+        expect(breakableString(-1234567890n)).toBe('-1 234 567 890')
+        expect(breakableString(-12345678901n)).toBe('-12 345 678 901')
+        expect(breakableString(-123456789012n)).toBe('-123 456 789 012')
+    })
+})
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..92b2151a 100644
--- a/src/shared/defineFeatured.ts
+++ b/src/shared/defineFeatured.ts
@@ -1,213 +1,329 @@
-import {specimenQuery} from './specimenEncoding'
+import { specimenQuery } from './specimenEncoding'
 
 // Encodings of the featured specimens
 
 const featuredSIMs = [
-    specimenQuery(
-        'The Raucous Recamán',
-        'Turtle',
-        'OEIS A005132',
-        'domain=0+1&steps=2+3&strokeColor=%235e8d85&bgColor=E5E0F6'
-            + '&speed=20&ruleMode=1&angleFormula=89.674'
-            + '&stepFormula=a%5E%280.7%29%2F2&colorFormula=rainbow%28n%29'
-            + '&colorChooser=813d9c'
-    ),
-    specimenQuery(
-        'Divisor Square',
-        'Chaos',
-        'OEIS A000005',
-        'corners=8&walkers=8&alpha=0.7&pixelsPerFrame=2000'
-    ),
-    specimenQuery(
-        'Dance no. 163',
-        'ModFill',
-        'Formula',
-        'modDimension=600&fillColor=a51d2d&alpha=min(0.4%2C+0.01*m)'
-            + '&highlightFormula=n+mod+163+%3E+81&highColor=ff7800',
-        'formula=163n'
-    ),
-    specimenQuery(
-        "Virahanka's Prime Construct",
-        'ModFill',
-        'OEIS A000045',
-        'modDimension=130&backgroundColor=62a0ea&fillColor=613583'
-            + '&alpha=0.05&aspectRatio=false&highlightFormula=isPrime%28n%29'
-            + '&highColor=e5a50a',
-        ''
-    ),
-    specimenQuery(
-        'Prime Residues',
-        'ModFill',
-        'Formula',
-        'fillColor=1a5fb4&alpha=0.1&highlightFormula=isPrime%28n%29'
-            + '&highColor=f66151',
-        'formula=n'
-    ),
-    specimenQuery(
-        'Baffling Beatty Bars',
-        'ModFill',
-        'Formula',
-        'modDimension=350&fillColor=26a269&alpha=0.3'
-            + '&highlightFormula=floor%28sqrt%283%29n%29&highColor=1a5fb4',
-        'formula=floor%28sqrt%282%29*n%29'
-    ),
-    specimenQuery(
-        'Woven Residues',
-        'ModFill',
-        'Random',
-        'modDimension=5000',
-        'min=10000&max=100000'
-    ),
-    specimenQuery(
-        "Picasso's Periods",
-        'ModFill',
-        'Formula',
-        'modDimension=100&backgroundColor=000000&fillColor=1a5fb4'
-            + '&alpha=0.15&aspectRatio=false&highlightFormula=isPrime%28a%29'
-            + '&highColor=bf8383&alphaHigh=0.4&sunzi=0.03&frameRate=24',
-        'formula=n%5E3%2B2n%2B1'
-    ),
-    specimenQuery(
-        'Chaos Game',
-        'Chaos',
-        'Random',
-        'corners=3&colorStyle=1&dummyDotControl=true'
-            + '&circSize=2&alpha=0.4&darkMode=true',
-        'max=2'
-    ),
-    specimenQuery(
-        'Polyfactors',
-        'Histogram',
-        'Formula',
-        'binSize=1',
-        'formula=n%5E3-n%5E2&length=1000'
-    ),
-    specimenQuery(
-        'Wait For It',
-        'Turtle',
-        'Formula',
-        'domain=-1+1&angles=30+120&steps=30+30&widths=2'
-            + '&strokeColor=%237a106080+%237a9f6f50&bgColor=363071&speed=3'
-            + '&angleFormula=%7B%22-1%22%3A+30%2C+%221%22%3A+120%7D'
-            + '%5Bstring%28a%29%5D&stepFormula=%7B%22-1%22%3A+30%2C'
-            + '+%221%22%3A+30%7D%5Bstring%28a%29%5D&widthFormula'
-            + '=%7B%22-1%22%3A+2%2C+%221%22%3A+2%7D%5Bstring%28a%29%5D'
-            + '&colorFormula=%7B%22-1%22%3A+%237a106080%2C+%221%22%3A'
-            + '+%237a9f6f50%7D%5Bstring%28a%29%5D',
-        'formula=sign%28sin%28n%2B1%29%29'
-    ),
-    specimenQuery(
-        'Mobius Heartbeat',
-        'Turtle',
-        'OEIS A008683',
-        'domain=0+1+-1&angles=0+89+-89&angleMeaning=1&steps=0+10+10'
-            + '&strokeColor=%23E9F4F2+%23DC967E+%237FB7ED&bgColor=080908'
-            + '&speed=20&angleFormula=%7B%220%22%3A+0%2C+%221%22%3A+89%2C'
-            + '+%22-1%22%3A+-89%7D%5Bstring%28a%29%5D&stepFormula=%7B%220'
-            + '%22%3A+0%2C+%221%22%3A+10%2C+%22-1%22%3A+10%7D%5Bstring%28a'
-            + '%29%5D&widthFormula=%7B%220%22%3A+1%2C+%221%22%3A+1%2C+%22'
-            + '-1%22%3A+1%7D%5Bstring%28a%29%5D&colorFormula=%7B%220%22%3A'
-            + '+%23E9F4F2%2C+%221%22%3A+%23DC967E%2C+%22-1%22%3A+%237FB7ED'
-            + '%7D%5Bstring%28a%29%5D&colorChooser=813d9c',
-        ''
-    ),
-    specimenQuery(
-        'Hat Trick',
-        'Turtle',
-        'OEIS A363348',
-        'domain=0+1+2+3&angles=0&steps=15&widths=2&strokeColor=%2390EE90'
-            + '+%2300CED1+%23FF7D4D+%231F93FF+%23B63A71+%23C71585+%23FF7D4D'
-            + '&bgColor=795767&speed=10&ruleMode=1&angleFormula=a*30'
-            + '&widthFormula=3&colorFormula=chroma.scale%28%27YlGnBu%27%29'
-            + '.colors%2850%29%5Bmod%28n%2C30%29%2B1%5D&colorChooser=409CF5',
-        ''
-    ),
-    specimenQuery(
-        'Tau Many Primes',
-        'FactorFence',
-        'OEIS A000594',
-        'signs=false'
-    ),
-    specimenQuery(
-        'VFib Snowflake',
-        'Turtle',
-        'OEIS A000045',
-        'domain=0+1&angles=8+120&steps=40+400'
-            + '&animationControls=true&folds=200+0'
-            + '&bgColor=4f4875&strokeColor=%23cec0c0',
-        'modulus=9&last=999&length=1000'
-    ),
-    specimenQuery(
-        'Beatty DNA',
-        'Turtle',
-        'Formula',
-        'domain=0+1+2&angles=79+0+45&steps=2.5+1.5+3'
-            + '&speed=30&bgColor=354F6B&strokeColor='
-            + '%23DEACAC+%23DFB5C3+%23410510',
-        '&formula=floor%28n*sqrt%282%29%29%253'
-    ),
-    specimenQuery(
-        'Zeta Zero #10143',
-        'Turtle',
-        'Formula',
-        'angleMeaning=1&speed=5&ruleMode=1&angleFormula=log(n)*10000.06534'
-            + '&angleMeasure=1&stepFormula=300%2Fsqrt(n)&bgColor=201E2D'
-            + '&widthFormula=4-n%2F1000'
-            + '&colorFormula=chroma%28%28chroma.scale%28%5B%27%23fafa6e'
-            + '%27%2C+%27%232A4858%27%2C+%27%23fafa6e%27%5D%29.mode%28%27lch%27'
-            + '%29.colors%28360%29%29%5Bfloor%28number%28b+rad%2C+deg%29+%25'
-            + '+360%29%2B1%5D%29.alpha%280.2%2Bn%2F1000%29',
-        'first=1&last=3183&length=3183'
-    ),
-    specimenQuery(
-        'PEMDASymmetry',
-        'Turtle',
-        'Formula',
-        'bgColor=22274e&speed=10&ruleMode=1&angleFormula=30%2B15a'
-            + '&stepFormula=4&colorFormula=rainbow(abs(y-160))',
-        'formula=(n%2F10)^2+-+n%2F10^2&last=8191&length=8192'
-    ),
-    specimenQuery(
-        'Gosper Flowsnake',
-        'Turtle',
-        'OEIS A229214',
-        'domain=-3+-2+-1+1+2+3&angles=-60+-120+180+0+60+120'
-            + '&angleMeaning=1&steps=8&widths=2&strokeColor=%2390EE90'
-            + '+%2300CED1+%23FF7D4D+%231F93FF+%23B63A71+%23C71585'
-            + '&bgColor=22274e&speed=10&angleFormula=%7B%22-3%22%3A'
-            + '+-60%2C+%22-2%22%3A+-120%2C+%22-1%22%3A+180%2C+%221%22'
-            + '%3A+0%2C+%222%22%3A+60%2C+%223%22%3A+120%7D%5Bstring%28a'
-            + '%29%5D&stepFormula=%7B%22-3%22%3A+8%2C+%22-2%22%3A+8%2C+'
-            + '%22-1%22%3A+8%2C+%221%22%3A+8%2C+%222%22%3A+8%2C+%223%22'
-            + '%3A+8%7D%5Bstring%28a%29%5D&widthFormula=%7B%22-3%22%3A+'
-            + '2%2C+%22-2%22%3A+2%2C+%22-1%22%3A+2%2C+%221%22%3A+2%2C+'
-            + '%222%22%3A+2%2C+%223%22%3A+2%7D%5Bstring%28a%29%5D'
-            + '&colorFormula=%7B%22-3%22%3A+%2390EE90%2C+%22-2%22%3A+'
-            + '%2300CED1%2C+%22-1%22%3A+%23FF7D4D%2C+%221%22%3A+'
-            + '%231F93FF%2C+%222%22%3A+%23B63A71%2C+%223%22%3A+'
-            + '%23C71585%7D%5Bstring%28a%29%5D&seq=OEIS+A229214',
-        'last=1040&length=1040'
-    ),
-    specimenQuery(
-        'The Vertigo of Divergence',
-        'Turtle',
-        'Formula',
-        'bgColor=3A3A45&speed=10&ruleMode=1&angleFormula=a%5E1.0012%2F128'
-            + '&angleMeasure=1&stepFormula=13'
-            + '&widthFormula=3'
-            + '&colorFormula=%28chroma.scale%28%5B+%27%2301204e%27%2C%27'
-            + '%23f85525'
-            + '%27%2C+%27%2301204e%27%5D%29.mode%28%27lch%27%29.colors'
-            + '%28120%29%29%5Bn%25120%2B1%5D',
-        'first=100&last=5099&length=5000'
-    ),
-    specimenQuery(
-        'Thue Traipse',
-        'Turtle',
-        'OEIS A010060',
-        'domain=0+1&angles=15+-165&steps=2+1'
-            + '&speed=10&bgColor=e0def7&strokeColor=%231E90FF'
-    ),
+  specimenQuery(
+    'The Raucous Recamán',
+    'Turtle',
+    'OEIS A005132',
+    'domain=0+1&steps=2+3&strokeColor=%235e8d85&bgColor=E5E0F6'
+    + '&speed=20&ruleMode=1&angleFormula=89.674'
+    + '&stepFormula=a%5E%280.7%29%2F2&colorFormula=rainbow%28n%29'
+    + '&colorChooser=813d9c'
+  ),
+  specimenQuery(
+<<<<<<< HEAD
+    "Phoenix Rising",
+    'Chaos',
+    'OEIS A000005',
+    '&corners=12&walkers=3&colorFormula=rainbow%28w*360%2FW%2B65%29.brighten'
+    + '%281%29&pixelsPerFrame=500',
+=======
+    'Divisor Square',
+    'Chaos',
+    'OEIS A000005',
+    'corners=8&walkers=8&alpha=0.7&pixelsPerFrame=2000'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Dance no. 163',
+    'ModFill',
+    'Formula',
+    'modDimension=600&fillColor=min(0.4%2C+m%2F100)'
+    + '+*+(n+mod+163+>+81+%3F+%23ff7800+%3A+%23a51d2d)',
+    'formula=163n'
+  ),
+  specimenQuery(
+    "Virahanka's Prime Construct",
+    'ModFill',
+    'OEIS A000045',
+    'modDimension=130&backgroundColor=62a0ea'
+    + '&fillColor=isPrime(n)+%3F+%23e5a50a0d+%3A+%236135830d'
+  ),
+  specimenQuery(
+    'Prime Residues',
+    'ModFill',
+    'Formula',
+    'fillColor=isPrime(n)+%3F+%23f661511a+%3A+%231a5fb41a'
+  ),
+  specimenQuery(
+    'Baffling Beatty Bars',
+    'ModFill',
+    'Formula',
+    'modDimension=350'
+    + '&fillColor=floor(sqrt(3)n)+%25+2'
+    + '+%3F+%231a5fb44d+%3A+%2326a2694d',
+    'formula=floor(sqrt(2)n)'
+  ),
+  specimenQuery(
+    'Woven Residues',
+    'ModFill',
+    'Random',
+    'modDimension=5000&fillColor=rainbow(n%2F2)',
+    'min=10000&max=100000'
+  ),
+  specimenQuery(
+    "Picasso's Periods",
+    'ModFill',
+    'Formula',
+    'modDimension=100&backgroundColor=00000008'
+    + '&fillColor=isPrime(a)+%3F+%23bf838366+%3A+%231a5fb424'
+    + '&sunzi=true&frameRate=24',
+    'formula=n%5E3%2B2n%2B1'
+  ),
+  specimenQuery(
+    'Chaos Game',
+    'Chaos',
+    'Random',
+<<<<<<< HEAD
+    '&corners=3&pixelsPerFrame=25&seq=Random&max=2&last=10000&length=10001',
+=======
+    'corners=3&colorStyle=1&dummyDotControl=true'
+    + '&circSize=2&alpha=0.4&darkMode=true',
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+    'max=2'
+  ),
+  specimenQuery(
+    'Polyfactors',
+    'Histogram',
+    'Formula',
+    'binSize=1',
+    'formula=n%5E3-n%5E2&length=1000'
+  ),
+  specimenQuery(
+    'Wait For It',
+    'Turtle',
+    'Formula',
+    'domain=-1+1&angles=30+120&steps=30+30&widths=2'
+    + '&strokeColor=%237a106080+%237a9f6f50&bgColor=363071&speed=3'
+    + '&angleFormula=%7B%22-1%22%3A+30%2C+%221%22%3A+120%7D'
+    + '%5Bstring%28a%29%5D&stepFormula=%7B%22-1%22%3A+30%2C'
+    + '+%221%22%3A+30%7D%5Bstring%28a%29%5D&widthFormula'
+    + '=%7B%22-1%22%3A+2%2C+%221%22%3A+2%7D%5Bstring%28a%29%5D'
+    + '&colorFormula=%7B%22-1%22%3A+%237a106080%2C+%221%22%3A'
+    + '+%237a9f6f50%7D%5Bstring%28a%29%5D',
+    'formula=sign%28sin%28n%2B1%29%29'
+  ),
+  specimenQuery(
+    'Mobius Heartbeat',
+    'Turtle',
+    'OEIS A008683',
+    'domain=0+1+-1&angles=0+89+-89&angleMeaning=1&steps=0+10+10'
+    + '&strokeColor=%23E9F4F2+%23DC967E+%237FB7ED&bgColor=080908'
+    + '&speed=20&angleFormula=%7B%220%22%3A+0%2C+%221%22%3A+89%2C'
+    + '+%22-1%22%3A+-89%7D%5Bstring%28a%29%5D&stepFormula=%7B%220'
+    + '%22%3A+0%2C+%221%22%3A+10%2C+%22-1%22%3A+10%7D%5Bstring%28a'
+    + '%29%5D&widthFormula=%7B%220%22%3A+1%2C+%221%22%3A+1%2C+%22'
+    + '-1%22%3A+1%7D%5Bstring%28a%29%5D&colorFormula=%7B%220%22%3A'
+    + '+%23E9F4F2%2C+%221%22%3A+%23DC967E%2C+%22-1%22%3A+%237FB7ED'
+<<<<<<< HEAD
+    + '%7D%5Bstring%28a%29%5D&colorChooser=813d9c',
+    ''
+=======
+    + '%7D%5Bstring%28a%29%5D&colorChooser=813d9c'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Hat Trick',
+    'Turtle',
+    'OEIS A363348',
+    'domain=0+1+2+3&angles=0&steps=15&widths=2&strokeColor=%2390EE90'
+    + '+%2300CED1+%23FF7D4D+%231F93FF+%23B63A71+%23C71585+%23FF7D4D'
+    + '&bgColor=795767&speed=10&ruleMode=1&angleFormula=a*30'
+    + '&widthFormula=3&colorFormula=chroma.scale%28%27YlGnBu%27%29'
+<<<<<<< HEAD
+    + '.colors%2850%29%5Bmod%28n%2C30%29%2B1%5D&colorChooser=409CF5',
+    ''
+=======
+    + '.colors%2850%29%5Bmod%28n%2C30%29%2B1%5D&colorChooser=409CF5'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Tau Many Primes',
+    'FactorFence',
+    'OEIS A000594',
+    'signs=false'
+  ),
+  specimenQuery(
+    'VFib Snowflake',
+    'Turtle',
+    'OEIS A000045',
+    'domain=0+1&angles=8+120&steps=40+400'
+    + '&animationControls=true&folds=200+0'
+    + '&bgColor=4f4875&strokeColor=%23cec0c0',
+    'modulus=9&last=999&length=1000'
+  ),
+  specimenQuery(
+    'Beatty DNA',
+    'Turtle',
+    'Formula',
+    'domain=0+1+2&angles=79+0+45&steps=2.5+1.5+3'
+    + '&speed=30&bgColor=354F6B&strokeColor='
+    + '%23DEACAC+%23DFB5C3+%23410510',
+<<<<<<< HEAD
+    '&formula=floor%28n*sqrt%282%29%29%253'
+=======
+    'formula=floor%28n*sqrt%282%29%29%253'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Zeta Zero #10143',
+    'Turtle',
+    'Formula',
+    'angleMeaning=1&speed=5&ruleMode=1&angleFormula=-log(n)*10000.06534'
+    + '&angleMeasure=1&stepFormula=300%2Fsqrt(n)&bgColor=201E2D'
+    + '&widthFormula=4-n%2F1000'
+    + '&colorFormula=chroma%28chroma.scale%28%5B%23fafa6e%2C'
+    + '+%232A4858%2C+%23fafa6e%5D%29.mode%28%27lch%27'
+    + '%29.colors%28360%29%5Bfloor%28number%28b+rad%2C+deg%29+%25'
+    + '+360%29%2B1%5D%29.alpha%280.2%2Bn%2F1000%29',
+    'first=1&last=3183&length=3183'
+  ),
+  specimenQuery(
+    'PEMDASymmetry',
+    'Turtle',
+    'Formula',
+    'bgColor=22274e&speed=10&ruleMode=1&angleFormula=30%2B15a'
+    + '&stepFormula=4&colorFormula=rainbow(abs(y-160))',
+    'formula=(n%2F10)^2+-+n%2F10^2&last=8191&length=8192'
+  ),
+  specimenQuery(
+    'Gosper Flowsnake',
+    'Turtle',
+    'OEIS A229214',
+    'domain=-3+-2+-1+1+2+3&angles=-150+150+90+-90+-30+30'
+    + '&angleMeaning=1&steps=12&widths=2&strokeColor=%2390EE90'
+    + '+%2300CED1+%23FF7D4D+%231F93FF+%23B63A71+%23C71585'
+    + '&bgColor=22274e&speed=10&angleFormula=%7B%22-3%22%3A'
+    + '+-60%2C+%22-2%22%3A+-120%2C+%22-1%22%3A+180%2C+%221%22'
+    + '%3A+0%2C+%222%22%3A+60%2C+%223%22%3A+120%7D%5Bstring%28a'
+    + '%29%5D&stepFormula=%7B%22-3%22%3A+8%2C+%22-2%22%3A+8%2C+'
+    + '%22-1%22%3A+8%2C+%221%22%3A+8%2C+%222%22%3A+8%2C+%223%22'
+    + '%3A+8%7D%5Bstring%28a%29%5D&widthFormula=%7B%22-3%22%3A+'
+    + '2%2C+%22-2%22%3A+2%2C+%22-1%22%3A+2%2C+%221%22%3A+2%2C+'
+    + '%222%22%3A+2%2C+%223%22%3A+2%7D%5Bstring%28a%29%5D'
+    + '&colorFormula=%7B%22-3%22%3A+%2390EE90%2C+%22-2%22%3A+'
+    + '%2300CED1%2C+%22-1%22%3A+%23FF7D4D%2C+%221%22%3A+'
+    + '%231F93FF%2C+%222%22%3A+%23B63A71%2C+%223%22%3A+'
+    + '%23C71585%7D%5Bstring%28a%29%5D&seq=OEIS+A229214',
+    'last=1040&length=1040'
+  ),
+  specimenQuery(
+    'The Vertigo of Divergence',
+    'Turtle',
+    'Formula',
+    'bgColor=3A3A45&speed=10&ruleMode=1&angleFormula=a%5E1.0012%2F128'
+    + '&angleMeasure=1&stepFormula=13'
+    + '&widthFormula=3'
+    + '&colorFormula=%28chroma.scale%28%5B+%27%2301204e%27%2C%27'
+    + '%23f85525'
+    + '%27%2C+%27%2301204e%27%5D%29.mode%28%27lch%27%29.colors'
+    + '%28120%29%29%5Bn%25120%2B1%5D',
+    'first=100&last=5099&length=5000'
+  ),
+  specimenQuery(
+    'Thue Traipse',
+    'Turtle',
+    'OEIS A010060',
+    'domain=0+1&angles=15+-165&steps=2+1'
+    + '&speed=10&bgColor=e0def7&strokeColor=%231E90FF'
+  ),
+  specimenQuery(
+    "Pascal's Triangle",
+    'FormulaGrid',
+    'OEIS A007318',
+<<<<<<< HEAD
+    '&aspect=r&fillOrder=2&pathFormula=%5Bceil%28c%2F2%29+-+invTriangular'
+=======
+    'aspect=r&fillOrder=2&pathFormula=%5Bceil%28c%2F2%29+-+invTriangular'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+    + '%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'
+<<<<<<< HEAD
+    + '%281.2%29.brighten%280.8%29%7D',
+    ''
+=======
+    + '%281.2%29.brighten%280.8%29%7D'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Lattice Murmuration',
+    'FormulaGrid',
+    'OEIS A293773',
+<<<<<<< HEAD
+    '&dimensions=200+5000&fillOrder=3&pathFormula=%5Bk%2C+floor'
+    + '%28r%2F2%29+-+a%5D&backgroundColor=D2E1FBFF'
+    + '&fillFormula={circle%3A+black}&inset=12',
+    ''
+=======
+    'dimensions=200+5000&fillOrder=3&pathFormula=%5Bk%2C+floor'
+    + '%28r%2F2%29+-+a%5D&backgroundColor=D2E1FBFF'
+    + '&fillFormula={circle%3A+black}&inset=12'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  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'
+<<<<<<< HEAD
+    + '+mod%28x+y%2C+c%29%5D%7D',
+    ''
+=======
+    + '+mod%28x+y%2C+c%29%5D%7D'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Ulam Divisors',
+    'FormulaGrid',
+    'OEIS A000005',
+<<<<<<< HEAD
+    '&dimensions=200+200&aspect=1&fillOrder=1&pathFormula=spiral%28k%29'
+=======
+    'dimensions=200+200&aspect=1&fillOrder=1&pathFormula=spiral%28k%29'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+    + '&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'
+<<<<<<< HEAD
+    + '&inset=0.8',
+    ''
+=======
+    + '&inset=0.8'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
+  specimenQuery(
+    'Integerstellar',
+    'FormulaGrid',
+    'Formula',
+<<<<<<< HEAD
+    '&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',
+    ''
+=======
+    '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'
+  ),
+  specimenQuery(
+    'Deja vu Differences',
+    'Differences',
+    'OEIS A000045',
+    'levels=25'
+>>>>>>> 80d2bd7 (featured, remove console log, warnings)
+  ),
 ]
 
 // Is there any reason for us to associate dates with featured specimens? Do
@@ -215,9 +331,9 @@ const featuredSIMs = [
 // Also, we freeze each featured specimen to make sure it is an error if
 // any part of frontscope tries to modify it.
 const theSIMs = featuredSIMs.map(query => {
-    return Object.freeze({query, date: '', canDelete: false})
+  return Object.freeze({ query, date: '', canDelete: false })
 })
 
 export function getFeatured() {
-    return theSIMs
+  return theSIMs
 }
diff --git a/src/shared/layoutUtilities.ts b/src/shared/layoutUtilities.ts
index 7f1a863a..a61303cf 100644
--- a/src/shared/layoutUtilities.ts
+++ b/src/shared/layoutUtilities.ts
@@ -7,3 +7,22 @@ export function isMobile() {
     )
     return window.innerWidth < tabletBreakpoint
 }
+
+// Returns the decimal string of a big number with (breaking) thin spaces
+// every three characters if it is over nine digits long
+export function breakableString(n: bigint) {
+    let s = n.toString()
+    const minus = Number(n < 0) // stupid typescript, Number conversion auto
+    const breaklength = 10 + minus
+    if (s.length < breaklength) return s
+    let firstblock = s.length % 3
+    if (firstblock === 1 && minus) firstblock = 4
+    let prefix = ''
+    if (firstblock) {
+        prefix = s.substr(0, firstblock)
+        s = s.substr(firstblock)
+    }
+    const parts = Array.from(s.match(/.{3}/g) ?? [])
+    if (prefix) parts.unshift(prefix)
+    return parts.join('\u2009') // thin space
+}
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/views/minor/NavBar.vue b/src/views/minor/NavBar.vue
index 85282d46..f942315e 100644
--- a/src/views/minor/NavBar.vue
+++ b/src/views/minor/NavBar.vue
@@ -25,7 +25,7 @@
                         Gallery
                     </RouterLink>
                     <div class="help-popper">
-                        Help
+                        <a href="/doc/">Help</a>
                         <div id="help-popup" class="shadowed">
                             <div class="nav-link">
                                 <a href="/doc/doc/user_guide/">User Guide</a>
@@ -150,6 +150,14 @@
                 position: relative;
                 padding-right: 0.5em;
 
+                a {
+                    font-family: var(--ns-font-display);
+                    text-decoration: none;
+                }
+                a:hover {
+                    text-decoration: underline;
+                }
+
                 #help-popup {
                     visibility: hidden;
                     display: flex;
diff --git a/src/visualizers/ShiftCompare.ts b/src/visualizers-workbench/ShiftCompare.ts
similarity index 96%
rename from src/visualizers/ShiftCompare.ts
rename to src/visualizers-workbench/ShiftCompare.ts
index e2c6cc20..ba713fc3 100644
--- a/src/visualizers/ShiftCompare.ts
+++ b/src/visualizers-workbench/ShiftCompare.ts
@@ -1,7 +1,7 @@
 import p5 from 'p5'
 
-import {P5Visualizer} from './P5Visualizer'
-import {VisualizerExportModule} from './VisualizerInterface'
+import {P5Visualizer} from '../visualizers/P5Visualizer'
+import {VisualizerExportModule} from '../visualizers/VisualizerInterface'
 
 import {math} from '@/shared/math'
 import type {GenericParamDescription} from '@/shared/Paramable'
diff --git a/src/visualizers/ShowFactors.ts b/src/visualizers-workbench/ShowFactors.ts
similarity index 93%
rename from src/visualizers/ShowFactors.ts
rename to src/visualizers-workbench/ShowFactors.ts
index 4ded74af..1c5ea3a7 100644
--- a/src/visualizers/ShowFactors.ts
+++ b/src/visualizers-workbench/ShowFactors.ts
@@ -1,5 +1,5 @@
-import {P5Visualizer} from './P5Visualizer'
-import {VisualizerExportModule} from './VisualizerInterface'
+import {P5Visualizer} from '../visualizers/P5Visualizer'
+import {VisualizerExportModule} from '../visualizers/VisualizerInterface'
 
 import {math} from '@/shared/math'
 
diff --git a/src/visualizers/Chaos.ts b/src/visualizers/Chaos.ts
index 92e060a1..228ed010 100644
--- a/src/visualizers/Chaos.ts
+++ b/src/visualizers/Chaos.ts
@@ -1,12 +1,21 @@
 import p5 from 'p5'
+import { markRaw } from 'vue'
 
-import {P5Visualizer, INVALID_COLOR} from './P5Visualizer'
-import {VisualizerExportModule} from './VisualizerInterface'
+import interFont from '@/assets/fonts/inter/Inter-VariableFont_slnt,wght.ttf'
+import { INVALID_COLOR } from './P5Visualizer'
+import { P5GLVisualizer } from './P5GLVisualizer'
+import { VisualizerExportModule } from './VisualizerInterface'
 
-import {math} from '@/shared/math'
-import type {GenericParamDescription, ParamValues} from '@/shared/Paramable'
-import {ParamType} from '@/shared/ParamType'
-import {ValidationStatus} from '@/shared/ValidationStatus'
+import { math, MathFormula, CachingError } from '@/shared/math'
+import type { GenericParamDescription, ParamValues } from '@/shared/Paramable'
+import { ParamType } from '@/shared/ParamType'
+import { ValidationStatus } from '@/shared/ValidationStatus'
+
+//[<img
+//  src="../../assets/img/Chaos/TODO.png"
+//  width=500
+//  style="margin-left: 1em; margin-right: 0.5em"
+///>](../assets/img/Chaos/TODO.png)
 
 /** md
 # Chaos Visualizer
@@ -15,416 +24,771 @@ This visualizer interprets the sequence entries as instructions for walkers
 traversing the region bounded by the vertices of a regular _n_-gon, and displays
 the locations that the walkers visit.
 
-_This visualizer documentation page is a stub. You can improve Numberscope
-by adding detail._
-**/
+More precisely, the walker begins in the centre of the polygon.  As it reads
+each sequence entry a_k, it interprets that sequence entry as a polygon corner
+(typically by taking it modulo n; but a customizable formula is optional),
+and walks a proportion of the distance from its current location to the
+corner (typically halfway).  Then it paints a dot in its current
+location, and repeats using the next sequence term, etc.
 
-// p5 Colour palette class
-class Palette {
-    colorList: p5.Color[] = []
-    backgroundColor: p5.Color
-    textColor: p5.Color
-
-    constructor(
-        sketch: p5 | undefined = undefined,
-        hexList: string[] = [],
-        hexBack = '#000000',
-        hexText = '#FFFFFF'
-    ) {
-        if (sketch) {
-            this.colorList = hexList.map(colorSpec => sketch.color(colorSpec))
-            this.backgroundColor = sketch.color(hexBack)
-            this.textColor = sketch.color(hexText)
-        } else {
-            this.backgroundColor = INVALID_COLOR
-            this.textColor = INVALID_COLOR
-        }
-    }
-}
+When this process is performed with a random sequence, this is called the
+`chaos game.'  The chaos game on a square produces a uniformly coloured
+square, but on other shapes it produces fractal images.  For example, on
+a triangle, one obtains the Sierpinsky gasket in the limit.
 
-enum ColorStyle {
-    Walker,
-    Destination,
-    Index,
-    Highlighting_one_walker,
-}
+For non-random sequences, the distribution of dots can pick up information
+about local correlations and overall distribution.
+**/
+
+// the symbols available for the colour and step formulas
+const formulaSymbols = [
+  'n',
+  'a',
+  'A',
+  's',
+  'm',
+  'M',
+  'f',
+  'c',
+  'p',
+  'C',
+  'w',
+  'W',
+  'x',
+  'y',
+] as const
+
+// the symbols available for the corner formula
+// excludes C (corner walking too)
+// since that would be circular
+const formulaSymbolsCorner = [
+  'n',
+  'a',
+  'A',
+  's',
+  'm',
+  'M',
+  'f',
+  'c',
+  'p',
+  'w',
+  'W',
+  'x',
+  'y',
+] as const
+
+// the symbols available for the walker formula
+// excludes C,w,c,x,y
+// since which walker you are choosing
+// cannot depend on properties of the walker
+// and this is determined before a corner
+// is chosen
+const formulaSymbolsWalker = [
+  'n',
+  'a',
+  'A',
+  's',
+  'm',
+  'M',
+  'f',
+  'p',
+  'W',
+] as const
 
 const paramDesc = {
-    corners: {
-        default: 4,
-        type: ParamType.INTEGER,
-        displayName: 'Number of corners',
-        required: true,
-        description:
-            'The number of vertices of the polygon; this value is also '
-            + 'used as a modulus applied to the entries.',
-        validate(c: number, status: ValidationStatus) {
-            if (c < 2) status.addError('must be at least 2')
-        },
-    },
-    frac: {
-        default: 0.5,
-        type: ParamType.NUMBER,
-        displayName: 'Fraction to walk',
-        required: false,
-        description:
-            'What fraction of the way each step takes you toward the '
-            + 'vertex specified by the entry.',
-        validate(f: number, status: ValidationStatus) {
-            if (f < 0 || f > 1) {
-                status.addError('must be between 0 and 1, inclusive')
-            }
-        },
-    },
-    walkers: {
-        default: 1,
-        type: ParamType.INTEGER,
-        displayName: 'Number of walkers',
-        required: false,
-        description:
-            'The number w of walkers. The sequence will be broken into '
-            + 'subsequences based on the residue mod w '
-            + 'of the index, each with a separate walker.',
-        validate(w: number, status: ValidationStatus) {
-            if (w < 1) status.addError('must be at least 1')
-        },
-    },
-    colorStyle: {
-        default: ColorStyle.Walker,
-        type: ParamType.ENUM,
-        from: ColorStyle,
-        displayName: 'Color dots by',
-        required: true,
-        description: 'The way the dots should be colored.',
-    },
-    gradientLength: {
-        default: 10000,
-        type: ParamType.INTEGER,
-        displayName: 'Color cycling length',
-        required: false,
-        visibleDependency: 'colorStyle',
-        visibleValue: ColorStyle.Index,
-        description:
-            'The number of entries before recycling the color sequence.',
-        validate(gl: number, status: ValidationStatus) {
-            if (gl < 1) status.addError('must be at least 1')
-        },
-    },
-    highlightWalker: {
-        default: 0,
-        type: ParamType.INTEGER,
-        displayName: 'Number of walker to highlight',
-        required: false,
-        visibleDependency: 'colorStyle',
-        visibleValue: ColorStyle.Highlighting_one_walker,
-        validate(hw: number, status: ValidationStatus) {
-            if (hw < 0) status.addError('must be 0 or higher')
-        },
-    },
-    dummyDotControl: {
-        default: false,
-        type: ParamType.BOOLEAN,
-        displayName: 'Show additional parameters for the dots ↴',
-        required: false,
-    },
-    circSize: {
-        default: 1,
-        type: ParamType.NUMBER,
-        displayName: 'Size (pixels)',
-        required: false,
-        visibleDependency: 'dummyDotControl',
-        visibleValue: true,
-        validate(cs: number, status: ValidationStatus) {
-            if (cs <= 0) status.addError('must be positive')
-        },
-    },
-    alpha: {
-        default: 0.9,
-        type: ParamType.NUMBER,
-        displayName: 'Alpha',
-        required: false,
-        description:
-            'Alpha factor (from 0.0=transparent to 1.0=solid) of the dots.',
-        visibleDependency: 'dummyDotControl',
-        visibleValue: true,
-        validate(a: number, status: ValidationStatus) {
-            if (a < 0 || a > 1) {
-                status.addError('must be between 0 and 1, inclusive')
-            }
-        },
-    },
-    pixelsPerFrame: {
-        default: 400n,
-        type: ParamType.BIGINT,
-        displayName: 'Dots to draw per frame',
-        required: false,
-        description: '(more = faster).',
-        visibleDependency: 'dummyDotControl',
-        visibleValue: true,
-        validate(p: number, status: ValidationStatus) {
-            if (p < 1) status.addError('must be at least 1')
-        },
-    },
-    showLabels: {
-        default: false,
-        type: ParamType.BOOLEAN,
-        displayName: 'Label corners of polygon?',
-        required: false,
+  /** md
+- **Corners**: the number of corners on the polygon.
+There must be at least two.
+If there are n corners, then the corners are numbered 0, 1,
+2, ..., n-1 (for use in the formulas via the `c' variable).
+**/
+  corners: {
+    default: 4,
+    type: ParamType.INTEGER,
+    displayName: 'Number of corners',
+    required: true,
+    description: 'The number of vertices of the polygon',
+    validate(c: number, status: ValidationStatus) {
+      if (c < 2) status.addError('must be at least 2')
+      if (c > 100)
+        status.addWarning(
+          'a large number may affect' + ' performance'
+        )
     },
-    darkMode: {
-        default: false,
-        type: ParamType.BOOLEAN,
-        displayName: 'Use dark mode?',
-        required: false,
-        description: 'If checked, uses light colors on a dark background.',
+  },
+  /** md
+- **Walkers**: the number of separate walkers (each one having its
+own independent state variables).
+If there are n walkers, then the walkers are numbered 0, 1,
+2, ..., n-1 (for use in formulas via the `w' variable).
+**/
+  walkers: {
+    default: 1,
+    type: ParamType.INTEGER,
+    displayName: 'Number of walkers',
+    required: false,
+    description:
+      'The number w of walkers. The sequence will be broken into '
+      + 'subsequences based on a formula,'
+      + 'each with a separate independent walker.',
+    validate(w: number, status: ValidationStatus) {
+      if (w < 1) status.addError('must be at least 1')
+      if (w > 100)
+        status.addWarning(
+          'a large number may affect' + ' performance'
+        )
     },
-} satisfies GenericParamDescription
+  },
+  /** md
+- **Background color**: The color of the visualizer canvas.
+**/
+  bgColor: {
+    default: '#000000FF',
+    type: ParamType.COLOR,
+    displayName: 'Background color',
+    required: true,
+  },
 
-// other ideas:  previous parts of the sequence fade over time,
-// or shrink over time;
-// circles fade to the outside
+  /** md
+- **Walker Formula**:  The walker to move on the next term.
+(Outputs are floored and move no walker if no such walker exists.)
 
-class Chaos extends P5Visualizer(paramDesc) {
-    static category = 'Chaos'
-    static description = 'Chaos game played using a sequence to select moves'
+It can depend on:
 
-    // current state variables (used in setup and draw)
-    private myIndex = 0n
-    private cornersList: p5.Vector[] = []
-    private walkerPositions: p5.Vector[] = []
+`n` The index of the entry in the sequence being visualized.
 
-    // colour palette
-    private currentPalette = new Palette()
+`a` The value of the entry.
 
-    checkParameters(params: ParamValues<typeof paramDesc>) {
-        const status = super.checkParameters(params)
+`s` The serial number of the step starting from one for the first dot.
 
-        if (params.highlightWalker >= params.walkers) {
-            status.addError(
-                'The highlighted walker must be less than '
-                    + 'the number of walkers.'
-            )
-            this.statusOf.highlightWalker.addWarning(
-                'must be less than the number of walkers'
-            )
-            this.statusOf.walkers.addWarning(
-                'must be larger than the highlighted walker'
-            )
-        }
-        return status
-    }
+`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`.
 
-    chaosWindow(center: p5.Vector, radius: number) {
-        // creates corners of a polygon with given centre and radius
-        const pts: p5.Vector[] = []
-        for (let i = 0; i < this.corners; i++) {
-            const angle = this.sketch.radians(45 + (360 * i) / this.corners)
-            pts.push(p5.Vector.fromAngle(angle, radius).add(center))
-        }
-        return pts
-    }
+`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
+principle for any index.
 
-    setup() {
-        super.setup()
-        // decide which palette to set by default
-        // we need a colourpicker in the params eventually
-        // right now this is a little arbitrary
-        const defaultColorList = [
-            '#588dad', // blue greenish
-            '#daa520', // orange
-            '#008a2c', // green
-            '#ff6361', // fuschia
-            '#ffa600', // bright orange
-            '#bc5090', // lerp toward purple
-            '#655ca3', // purple
-        ]
-        const darkColor = '#262626'
-        const lightColor = '#f5f5f5'
-        if (this.darkMode) {
-            this.currentPalette = new Palette(
-                this.sketch,
-                defaultColorList,
-                darkColor,
-                lightColor
-            )
-        } else {
-            this.currentPalette = new Palette(
-                this.sketch,
-                defaultColorList,
-                lightColor,
-                darkColor
-            )
-        }
-        if (
-            (this.colorStyle === ColorStyle.Walker
-                && this.walkers > defaultColorList.length)
-            || (this.colorStyle === ColorStyle.Destination
-                && this.corners > defaultColorList.length)
-        ) {
-            let paletteSize = 0
-            if (this.colorStyle === ColorStyle.Walker) {
-                paletteSize = this.walkers
-            }
-            if (this.colorStyle === ColorStyle.Destination) {
-                paletteSize = this.corners
-            }
-            const colorList: string[] = []
-            for (let c = 0; c < paletteSize; c++) {
-                let hexString = ''
-                for (let h = 0; h < 6; h++) {
-                    hexString += math.randomInt(16).toString(16)
-                }
-                colorList.push('#' + hexString)
-            }
-            this.currentPalette = new Palette(
-                this.sketch,
-                colorList,
-                this.darkMode ? darkColor : lightColor,
-                this.darkMode ? lightColor : darkColor
-            )
-        }
+'p' The number of corners.
 
-        // set center coords and size
-        const center = this.sketch.createVector(
-            this.sketch.width * 0.5,
-            this.sketch.height * 0.5
-        )
-        const radius = this.sketch.width * 0.4
+`f` The frame number of this drawing pass. If you use this variable, the
+visualization will be redrawn from the beginning on every frame,
+animating the shape of the path.
 
-        // text appearance control
-        const labelOutset = 1.1
-        const shrink = Math.log(this.corners)
-        // Shrink the numbers appropriately (up to about 100 corners or so):
-        const textSize = (this.sketch.width * 0.04) / shrink
-        // No stroke right now, but could be added
-        const textStroke = this.sketch.width * 0
+You may also use the symbol `A` as a function symbol in your code, 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.
 
-        this.myIndex = this.seq.first
+**/
+  walkerFormula: {
+    default: new MathFormula('mod(n,W)'),
+    type: ParamType.FORMULA,
+    symbols: formulaSymbolsWalker,
+    displayName: 'Walker formula',
+    description: 'The walker to move.',
+    required: false,
+    level: 0,
+  },
 
-        // set up arrays of walkers
-        this.walkerPositions = Array.from({length: this.walkers}, () =>
-            center.copy()
-        )
+  /** md
+- **Corner Formula**:  The corner heading of the next term.
 
-        // Set up the windows and return the coordinates of the corners
-        this.cornersList = this.chaosWindow(center, radius)
-
-        // Set frame rate
-        this.sketch.frameRate(10)
-
-        // canvas clear/background
-        this.sketch.clear(0, 0, 0, 0)
-        this.sketch.background(this.currentPalette.backgroundColor)
-
-        // Draw corner labels if desired
-        if (this.showLabels) {
-            this.sketch
-                .stroke(this.currentPalette.textColor)
-                .fill(this.currentPalette.textColor)
-                .strokeWeight(textStroke)
-                .textSize(textSize)
-                .textAlign(this.sketch.CENTER, this.sketch.CENTER)
-            // Get appropriate locations for the labels
-            const cornersLabels = this.chaosWindow(
-                center,
-                radius * labelOutset
-            )
-            for (let c = 0; c < this.corners; c++) {
-                const label = cornersLabels[c]
-                this.sketch.text(String(c), label.x, label.y)
-            }
+Besides the previous variables, it can additionally depend on:
+
+'c' The corner we just stepped toward.
+
+'w' The walker.
+
+`x` The x-coordinate of the dot (before stepping).
+
+`y` The y-coordinate of the dot (before stepping).
+
+**/
+  cornerFormula: {
+    default: new MathFormula('mod(a,p)'),
+    type: ParamType.FORMULA,
+    symbols: formulaSymbolsCorner, // can't depend on corner
+    displayName: 'Corner formula',
+    description: 'Computes the corner dot walks toward',
+    required: false,
+    level: 0,
+  },
+
+  /** md
+- **Size Formula**:  The size of each dot.
+
+Besides the previous variables, it can additionally depend on:
+
+'C' The corner we are about to step toward.
+
+**/
+  sizeFormula: {
+    default: new MathFormula('1'),
+    type: ParamType.FORMULA,
+    symbols: formulaSymbols,
+    displayName: 'Size formula',
+    description: 'Computes the size of each dot',
+    required: false,
+    level: 0,
+  },
+  /** md
+- **Step Formula**:  What fraction of distance to corner to walk.
+Variables are as for the Size Formula.
+**/
+  stepFormula: {
+    default: new MathFormula('0.5'),
+    type: ParamType.FORMULA,
+    symbols: formulaSymbols,
+    displayName: 'Step formula',
+    description:
+      'Computes the fraction of distance to corner'
+      + ' to walk (can exceed 1 or be negative)',
+    required: false,
+    level: 0,
+  },
+
+  /** md
+- **Color formula**: an expression to compute the color of each dot.
+Variables are as for the Size Formula.
+**/
+  colorFormula: {
+    default: new MathFormula('#c98787ff'),
+    type: ParamType.FORMULA,
+    symbols: formulaSymbols,
+    displayName: 'Color formula',
+    description: 'Computes the color of each dot',
+    required: false,
+    level: 0,
+  },
+  /** md
+- **Color chooser**: This color picker does not directly control the display.
+Instead, whenever you select a color with it, the corresponding color
+string is inserted in the **Color formula** box.
+**/
+  colorChooser: {
+    default: '#00d0d0',
+    type: ParamType.COLOR,
+    displayName: 'Color chooser:',
+    required: true,
+    description:
+      'Inserts choice into the Color formula, replacing current '
+      + 'selection therein, if any.',
+    updateAction: function (newColor: string) {
+      const chaos = this instanceof Chaos ? this : null
+      if (chaos === null) return
+      const cfIn = document.querySelector('.param-field #colorFormula')
+      if (!(cfIn instanceof HTMLInputElement)) return
+      const cf = chaos.tentativeValues.colorFormula
+      const start = cfIn.selectionStart ?? cf.length
+      const end = cfIn.selectionEnd ?? start
+      chaos.tentativeValues.colorFormula =
+        cf.substr(0, start) + newColor + cf.substr(end)
+    },
+  },
+
+  /** md
+- **Dots per frame**:  How fast the visualization fills in the dots.
+**/
+
+  pixelsPerFrame: {
+    default: 50,
+    type: ParamType.NUMBER,
+    displayName: 'Dots to draw per frame',
+    required: false,
+    description: '(more = faster).',
+    validate(p: number, status: ValidationStatus) {
+      if (p < 1) status.addError('must be at least 1')
+      if (p > 1000)
+        status.addWarning('a large number may affect performance')
+    },
+  },
+
+  /** md
+- **Show Labels**:  Labels the corners of the polygon.
+**/
+
+  showLabels: {
+    default: false,
+    type: ParamType.BOOLEAN,
+    displayName: 'Label corners of polygon?',
+    required: false,
+  },
+} satisfies GenericParamDescription
+
+// How many dots to gather into a reusable Geometry object
+// Might need tuning
+const CHUNK_SIZE = 256
+
+class Chaos extends P5GLVisualizer(paramDesc) {
+  static category = 'Chaos'
+  static description =
+    'Terms of the sequence attract a walker to a corner of the polygon'
+
+  // sides of "circle" to draw for the dot
+  // more = laggier but prettier
+  private sides: number = 6
+  // current state variables (used in setup and draw)
+  private cornersList: p5.Vector[] = [] // locations of polygon corners
+  private radius = 0 // of polygon
+  private labelOutset = 1.1 // text offset outward
+  private fontsLoaded = false
+
+  // variables recording the drawing data (dots)
+  // this.dots consists of this.walkers number of arrays, i.e.
+  // it is an array of arrays
+  // similar for the other data (sizes, colors)
+  private dots = markRaw([[new p5.Vector()]]) as p5.Vector[][]
+  private dotsIndices = markRaw([[1n]]) as bigint[][]
+  private dotsSizes = markRaw([[1]]) as number[][]
+  private dotsColors = markRaw([[INVALID_COLOR]]) as p5.Color[][]
+  private dotsCorners = markRaw([[0]]) as number[][]
+  private chunks: p5.Geometry[] = markRaw([]) // "frozen" chunks of data
+  private cursor = 0 // where in data to start drawing
+  private pathFailure = false // for cache errors
+
+  // misc
+  private firstIndex = 0n // first term
+  private dotLimit = 100000 // limit # of dots (prevent lag)
+  private maxLength = 0 // current dot limit (can change)
+
+  checkParameters(params: ParamValues<typeof paramDesc>) {
+    const status = super.checkParameters(params)
+
+    // warn when not using entire sequence
+    if (this.seq.length > this.dotLimit) {
+      status.addWarning(
+        `Using only the first ${this.dotLimit} terms `
+        + 'to prevent lag.'
+      )
+    }
+
+    return status
+  }
+
+  chaosWindow(radius: number) {
+    // creates corners of a polygon with given radius
+    const pts: p5.Vector[] = []
+    for (let i = 0; i < this.corners; i++) {
+      const angle = this.sketch.radians(270 + (360 * i) / this.corners)
+      pts.push(p5.Vector.fromAngle(angle, radius))
+    }
+    return pts
+  }
+
+  setup() {
+    super.setup()
+
+    this.fontsLoaded = false
+    this.sketch.loadFont(interFont, font => {
+      this.sketch.textFont(font)
+      this.fontsLoaded = true
+    })
+
+    this.firstIndex = this.seq.first
+    this.maxLength = math.min(Number(this.seq.length), this.dotLimit)
+
+    // size of polygon
+    this.radius = math.min(this.sketch.height, this.sketch.width) * 0.4
+
+    // Set up the windows and return the coordinates of the corners
+    this.cornersList = this.chaosWindow(this.radius)
+
+    this.sketch.frameRate(60)
+
+    this.sketch.clear(0, 0, 0, 0)
+
+    // no stroke (in particular, no outline on circles)
+    this.sketch.strokeWeight(0)
+
+    // draw from beginning
+    this.cursor = 0
+
+    // set up the arrays
+    this.refresh()
+  }
+
+  // reset the computed dots (arrays)
+  // lose all the old data
+  refresh() {
+    this.chunks = markRaw([])
+    const firstSize = 1
+    const firstColor = this.sketch.color(this.bgColor)
+    // put the first walker dot into the arrays
+    this.dots = markRaw([[new p5.Vector()]])
+    this.dotsIndices = markRaw([[0n]])
+    this.dotsSizes = markRaw([[firstSize]])
+    this.dotsColors = markRaw([[firstColor]])
+    this.dotsCorners = markRaw([[0]])
+    // for every other walker, push another walker array
+    // keep in mind the first entry in the arrays is a "dummy" indicating
+    // that you start at the origin, but we don't draw that dot
+    for (let currWalker = 0; currWalker < this.walkers; currWalker++) {
+      this.dots.push([new p5.Vector()])
+      this.dotsIndices.push([0n])
+      this.dotsSizes.push([firstSize])
+      this.dotsColors.push([firstColor])
+      this.dotsCorners.push([0])
+    }
+    this.redraw()
+  }
+
+  // reset the drawing without resetting the computed dots
+  // blanks the screen and sets up to redraw the dots
+  redraw() {
+    this.cursor = 0
+    // prepare canvas with polygon labels
+    this.sketch.background(this.bgColor)
+    this.drawLabels()
+  }
+
+  drawLabels() {
+    if (!this.showLabels) return
+
+    // text appearance control
+    const shrink = Math.log(this.corners)
+    // Shrink the numbers appropriately (up to about 100 corners or so)
+    const textSize = (this.sketch.width * 0.04) / shrink
+
+    // labels are currently white: TODO make contrast background
+    this.sketch
+      .stroke('white')
+      .fill('white')
+      .strokeWeight(0)
+      .textSize(textSize)
+
+    // Find locations for labels
+    const cornersLabels = this.chaosWindow(this.radius * this.labelOutset)
+
+    // Draw the labels
+    for (let c = 0; c < this.corners; c++) {
+      const label = cornersLabels[c]
+      // WebGL is warning here, but we HAVE loaded a font back in setup??
+      this.sketch.text(String(c), label.x, label.y)
+    }
+  }
+
+  // Draws the dots between start and end INCLUSIVE
+  drawVertices(start: number, end: number) {
+    const sketch = this.sketch
+    for (let currWalker = 0; currWalker < this.walkers; currWalker++) {
+      // for each walker we look in dotsIndices
+      // to check if we are between
+      // start and end; this could be empty
+      const startArrayIndex = math.max(
+        this.dotsIndices[currWalker].findIndex(
+          n => n >= BigInt(start)
+        ),
+        0
+      )
+      let lastPos = this.dots[currWalker][startArrayIndex]
+      for (
+        // avoid i=0, dummy position
+        let i = math.max(1, startArrayIndex + 1);
+        this.dotsIndices[currWalker][i] <= end;
+        i++
+      ) {
+        const pos = this.dots[currWalker][i]
+        if (pos.x !== lastPos.x || pos.y !== lastPos.y) {
+          sketch.fill(this.dotsColors[currWalker][i])
+          const size = this.dotsSizes[currWalker][i]
+          //sketch.push()
+          //sketch.translate(lastPos.x, lastPos.y)
+          //sketch.circle(pos.x, pos.y, this.dotsSizes[currWalker][i])
+          //sketch.rect(pos.x, pos.y, size, size)
+          this.polygon(pos.x, pos.y, size)
+          //sketch.pop()
         }
+        lastPos = pos
+      }
+    }
+  }
+  // from p5.js docs examples
+  polygon(x: number, y: number, radius: number) {
+    const angle = this.sketch.TWO_PI / this.sides
+    this.sketch.beginShape()
+    for (let a = 0; a < this.sketch.TWO_PI; a += angle) {
+      const sx = x + this.sketch.cos(a) * radius
+      const sy = y + this.sketch.sin(a) * radius
+      this.sketch.vertex(sx, sy)
+    }
+    this.sketch.endShape(this.sketch.CLOSE)
+  }
+  mouseWheel(event: WheelEvent) {
+    super.mouseWheel(event)
+    this.cursor = 0 // make sure we redraw
+  }
+
+  // how many dots do we have stored?
+  currentLength() {
+    let currentLength = -this.walkers // ignore dummy dots
+    for (let currWalker = 0; currWalker < this.walkers; currWalker++) {
+      currentLength += this.dots[currWalker].length
+    }
+    return currentLength
+  }
+
+  draw() {
+    // check if we are zoom/panning, redraw if so
+    // p5 is doing something terrible right here
+    // its terribleness is proportional to the
+    // size of the stored dot data
+    // sometimes image degrades during this pause
+    if (this.handleDrags()) this.cursor = 0
+    const sketch = this.sketch
+    if (this.cursor === 0) this.redraw()
+
+    // how much data have we got?
+    let currentLength = this.currentLength()
+
+    // how far do we want to draw?
+    let targetCursor = Math.min(
+      this.cursor + this.pixelsPerFrame,
+      this.maxLength
+    )
+    // if we are redrawing (e.g. drag),
+    // then first frame should
+    // advance all the way to where we have
+    // computed
+    if (this.cursor == 0) {
+      targetCursor = Math.min(
+        currentLength + this.pixelsPerFrame,
+        this.maxLength
+      )
+    }
+
+    // extend (compute dots) if needed
+    if (targetCursor > currentLength) {
+      this.extendVertices(sketch.frameCount, targetCursor)
+    }
+    currentLength = this.currentLength()
+
+    // Now draw dots from cursor to target
+
+    // First see if we can use any chunks
+    // How many chunks in what's already drawn
+    const fullChunksDrawn = Math.floor(this.cursor / CHUNK_SIZE)
+    // How many chunks are stored between cursor and target
+    const fullChunksExisting = math.min(
+      this.chunks.length,
+      Math.floor(targetCursor / CHUNK_SIZE)
+    )
+    let drewSome = false
+    // draw available chunks not yet drawn
+    for (
+      let chunk = fullChunksDrawn;
+      chunk < fullChunksExisting;
+      ++chunk
+    ) {
+      sketch.model(this.chunks[chunk])
+      drewSome = true
+    }
+    if (drewSome) this.cursor = fullChunksExisting * CHUNK_SIZE
 
-        // no stroke (in particular, no outline on circles)
-        this.sketch.strokeWeight(0)
+    // draw remaining dots
+    if (this.cursor < targetCursor) {
+      this.drawVertices(this.cursor, targetCursor)
+      this.cursor = targetCursor
+    }
+
+    // See if we can create a new chunk
+    // how many chunks ought to be possible
+    const fullChunks = Math.floor(this.cursor / CHUNK_SIZE)
+    // if we don't have that many
+    if (fullChunks > this.chunks.length) {
+      for (
+        let chunk = fullChunksExisting + 1;
+        chunk < fullChunks;
+        chunk++
+      ) {
+        // @ts-expect-error  The @types/p5 package omitted this function
+        sketch.beginGeometry()
+        this.drawVertices(
+          (chunk - 1) * CHUNK_SIZE,
+          chunk * CHUNK_SIZE
+        )
+        // @ts-expect-error  Ditto :-(
+        this.chunks.push(sketch.endGeometry())
+      }
+      this.cursor = 0
     }
 
-    draw() {
-        const sketch = this.sketch
-        // We attempt to draw pixelsPerFrame pixels each time through the
-        // draw cycle; this "chunking" speeds things up -- that's essential,
-        // because otherwise the overall patterns created by the chaos are
-        // much too slow to show up, especially at small pixel sizes.
-        // Note that we might end up drawing fewer pixels if, for example,
-        // we hit a cache boundary during a frame (at which point getElement
-        // will throw a CachingError, breaking out of draw() altogether). But
-        // in the next frame, likely the caching is done (or at least has moved
-        // to significantly higher indices), and drawing just picks up where
-        // it left off.
-        let pixelsLimit = this.myIndex + this.pixelsPerFrame
-        if (pixelsLimit > this.seq.last) {
-            pixelsLimit = BigInt(this.seq.last) + 1n
-            // have to add one to make sure we eventually stop
+    // stop the draw() loop if there's nothing left to do
+    if (
+      !sketch.mouseIsPressed
+      && currentLength >= this.maxLength // computed it all
+      && this.cursor >= this.maxLength // drew it all
+      && !this.pathFailure
+    ) {
+      // we have drawn it all, now we can pan & zoom
+      // without doing a slow redraw
+      // so we increase pixelsPerFrame
+      this.pixelsPerFrame = this.maxLength
+      //           this.cursor = 0
+      //            this.stop()
+    }
+  }
+
+  // This should be run each time more dots are needed.
+  extendVertices(currentFrames: number, targetLength: number) {
+    this.pathFailure = false
+
+    // infer the start index from what's stored / not
+    // computes the total drawable dots stored in the arrays
+    const len = this.currentLength()
+    const startIndex = this.firstIndex + BigInt(len)
+    // can change if cache error
+    // end index is how much more of the sequence to compute
+    const endIndex = this.firstIndex + BigInt(targetLength)
+
+    let currElement = 0n
+    for (let i = startIndex; i < endIndex; i++) {
+      // try to get the new element and store its data
+      try {
+        currElement = this.seq.getElement(i)
+      } catch (e) {
+        this.pathFailure = true
+        if (e instanceof CachingError) {
+          return // need to wait for more elements
+        } else {
+          // don't know what to do with this
+          throw e
         }
-        for (; this.myIndex < pixelsLimit; this.myIndex++) {
-            // get the term
-            const myTerm = this.seq.getElement(this.myIndex)
-
-            // check its modulus to see which corner to walk toward
-            // (Safe to convert to number since this.corners is "small")
-            const myCorner = Number(math.modulo(myTerm, this.corners))
-            const myCornerPosition = this.cornersList[myCorner]
-
-            // check the index modulus to see which walker is walking
-            // (Ditto on safety.)
-            const myWalker = Number(math.modulo(this.myIndex, this.walkers))
-
-            // update the walker position
-            this.walkerPositions[myWalker].lerp(myCornerPosition, this.frac)
-
-            // choose colour to mark position
-            let myColor = sketch.color(0)
-            switch (this.colorStyle) {
-                case ColorStyle.Walker:
-                    myColor = this.currentPalette.colorList[myWalker]
-                    break
-                case ColorStyle.Destination:
-                    myColor = this.currentPalette.colorList[myCorner]
-                    break
-                case ColorStyle.Index:
-                    if (typeof this.seq.length === 'bigint') {
-                        myColor = sketch.lerpColor(
-                            this.currentPalette.colorList[0],
-                            this.currentPalette.colorList[1],
-                            Number(
-                                (this.myIndex - this.seq.first)
-                                    / this.seq.length
-                            )
-                        )
-                    } else {
-                        myColor = sketch.lerpColor(
-                            this.currentPalette.colorList[0],
-                            this.currentPalette.colorList[1],
-                            Number(
-                                // Safe since gradientLength is "small"
-                                math.modulo(this.myIndex, this.gradientLength)
-                            ) / this.gradientLength
-                        )
-                    }
-                    break
-                case ColorStyle.Highlighting_one_walker:
-                    if (myWalker == this.highlightWalker) {
-                        myColor = this.currentPalette.colorList[0]
-                    } else {
-                        myColor = this.currentPalette.colorList[1]
-                    }
-                    break
-            }
-            // The following "255" is needed when in RGB mode;
-            // can change in other modes; see p5.js docs on setAlpha
-            myColor.setAlpha(255 * this.alpha)
-
-            // draw a circle
-            sketch.fill(myColor)
-            sketch.circle(
-                this.walkerPositions[myWalker].x,
-                this.walkerPositions[myWalker].y,
-                this.circSize
+      }
+
+      // variables you can use in walker formula
+      // excludes C,c,w,x,y
+      const inputWalker = {
+        n: Number(i),
+        a: Number(currElement),
+        s: Number(i - this.seq.first + 1n),
+        m: Number(this.seq.first),
+        M: Number(this.seq.last),
+        f: currentFrames,
+        p: this.corners,
+        W: this.walkers,
+        A: (n: number | bigint) =>
+          Number(this.seq.getElement(BigInt(n))),
+      }
+
+      // which walker do we move
+      let currWalker = 0
+      // gives bad data on bigints
+      currWalker =
+        math.floor(
+          math.safeNumber(
+            this.walkerFormula.computeWithStatus(
+              this.statusOf.walkerFormula,
+              inputWalker
             )
-        }
-        // stop drawing if we exceed available terms
-        if (this.myIndex > this.seq.last) this.stop()
+          ) ?? 0
+        )
+      if (this.statusOf.walkerFormula.invalid()) return
+      if (currWalker < 0 || currWalker >= this.walkers) {
+        throw 'walker formula out of bounds'
+        currWalker = 0 // is this code unreachable?
+      }
+
+      // look up last position of this walker
+      const currlen = this.dots[currWalker].length - 1
+      const position = this.dots[currWalker][currlen].copy()
+      const lastCorner = this.dotsCorners[currWalker][currlen]
+
+      // variables you can use in corner formula (excludes C)
+      const inputCorner = {
+        n: Number(i),
+        a: Number(currElement),
+        s: Number(i - this.seq.first + 1n),
+        m: Number(this.seq.first),
+        M: Number(this.seq.last),
+        f: currentFrames,
+        c: lastCorner,
+        p: this.corners,
+        w: currWalker,
+        W: this.walkers,
+        x: position.x,
+        y: position.y,
+        A: (n: number | bigint) =>
+          Number(this.seq.getElement(BigInt(n))),
+      }
+
+      // what corner should I head for?
+      let myCorner = 0
+      myCorner =
+        math.safeNumber(
+          this.cornerFormula.computeWithStatus(
+            this.statusOf.cornerFormula,
+            inputCorner
+          )
+        ) ?? 1
+      if (this.statusOf.cornerFormula.invalid()) return
+      if (myCorner < 0 || myCorner >= this.corners) {
+        throw 'corner formula out of bounds'
+        myCorner = 0
+      }
+
+      const input = {
+        n: Number(i),
+        a: Number(currElement),
+        s: Number(i - this.seq.first + 1n),
+        m: Number(this.seq.first),
+        M: Number(this.seq.last),
+        f: currentFrames,
+        c: lastCorner,
+        p: this.corners,
+        C: myCorner,
+        w: currWalker,
+        W: this.walkers,
+        x: position.x,
+        y: position.y,
+        A: (n: number | bigint) =>
+          Number(this.seq.getElement(BigInt(n))),
+      }
+
+      // determine new color
+      let clr: unknown = null
+      clr =
+        this.colorFormula.computeWithStatus(
+          this.statusOf.colorFormula,
+          input
+        ) ?? 0
+      if (this.statusOf.colorFormula.invalid()) return
+      // determine new dot size
+      let circSize = 0
+      circSize =
+        math.safeNumber(
+          this.sizeFormula.computeWithStatus(
+            this.statusOf.sizeFormula,
+            input
+          )
+        ) ?? 1
+      if (this.statusOf.sizeFormula.invalid()) return
+      // determine new stepsize
+      let step = 0
+      step =
+        math.safeNumber(
+          this.stepFormula.computeWithStatus(
+            this.statusOf.stepFormula,
+            input
+          )
+        ) ?? 1
+      if (this.statusOf.stepFormula.invalid()) return
+      // determine new position
+      const myCornerPosition = this.cornersList[myCorner]
+      position.lerp(myCornerPosition, step)
+
+      // push everything
+      this.dots[currWalker].push(position.copy())
+      this.dotsSizes[currWalker].push(math.safeNumber(circSize))
+      this.dotsIndices[currWalker].push(i)
+      this.dotsCorners[currWalker].push(myCorner)
+      if (typeof clr === 'string') {
+        this.dotsColors[currWalker].push(this.sketch.color(clr))
+      } else if (math.isChroma(clr)) {
+        this.dotsColors[currWalker].push(this.sketch.color(clr.hex()))
+      } else
+        this.dotsColors[currWalker].push(this.sketch.color('white'))
     }
+  }
 }
 
 export const exportModule = new VisualizerExportModule(Chaos)
diff --git a/src/visualizers/Differences.ts b/src/visualizers/Differences.ts
index 93260d1f..9e94f16b 100644
--- a/src/visualizers/Differences.ts
+++ b/src/visualizers/Differences.ts
@@ -2,7 +2,7 @@ import {P5Visualizer} from './P5Visualizer'
 import {VisualizerExportModule} from './VisualizerInterface'
 
 import {math} from '@/shared/math'
-import type {GenericParamDescription} from '@/shared/Paramable'
+import type {GenericParamDescription, ParamValues} from '@/shared/Paramable'
 import {ParamType} from '@/shared/ParamType'
 import {ValidationStatus} from '@/shared/ValidationStatus'
 
@@ -27,7 +27,7 @@ difference of.
 const paramDesc = {
     /** md
 - **Number of rows:** How many rows to produce. _(Positive integer, no larger
-than the number of elements in the sequence')_
+  than the number of elements in the sequence)_
      **/
     levels: {
         default: 12n,
@@ -38,6 +38,28 @@ than the number of elements in the sequence')_
             if (l < 1n) stat.addError('Need at least one row')
         },
     },
+    /** md
+- **Digits displayed:** The maximum amount of digits to display for each
+  number shown. If a number to be shown has more digits, only the most
+  significant ones will be displayed, with an ellipsis, and mousing over
+  the number will show its full value in a popup.
+     **/
+    digits: {
+        default: 4,
+        type: ParamType.INTEGER,
+        displayName: 'Digits displayed',
+        required: true,
+        description:
+            'Maximum digits of each entry to display; excess will be '
+            + 'replaced with an ellipsis.',
+        hideDescription: true,
+        validate: function (n: number, stat: ValidationStatus) {
+            stat.forbid(
+                n < 2,
+                'Room for at least 2 digits per entry required'
+            )
+        },
+    },
 } satisfies GenericParamDescription
 
 class Differences extends P5Visualizer(paramDesc) {
@@ -46,40 +68,60 @@ class Differences extends P5Visualizer(paramDesc) {
         'Produces a table of differences '
         + 'between consecutive entries, potentially iterated several times'
 
-    // Dummy values, actually computed in setup()
+    // Some fixed configuration values:
+    fontSize = 20
+    firstY = 30
+    yDelta = 50
+    leftMargin = 10
+
+    // Dummy values, actually computed in setup() / draw()
     useTerms = -1n
     useLevels = -1n
+    xDelta = -1
+    entries = [['0']]
 
-    setup() {
-        super.setup()
-        this.useTerms = 40n // Typically more than enough to fill screen
-        if (this.seq.last < this.seq.first + this.useTerms - 1n) {
-            this.useTerms = BigInt(this.seq.last) - this.seq.first + 1n
+    calcLevelsTerms(inLevels: bigint): [bigint, bigint] {
+        let useTerms = inLevels + 40n
+        if (this.seq.last < this.seq.first + useTerms - 1n) {
+            useTerms = BigInt(this.seq.last) - this.seq.first + 1n
         }
-        this.useLevels = this.levels
-        if (this.useLevels > this.useTerms) {
-            this.useLevels = this.useTerms
-            // TODO IN OVERHAUL: Should really warn about this situation
-            // So some of this code will have to move into checkParameters
-            // maybe there will need to be a common helper function called
-            // from both there and here.
+        const useLevels = inLevels < useTerms ? inLevels : useTerms
+        return [useLevels, useTerms]
+    }
+
+    checkParameters(params: ParamValues<typeof paramDesc>) {
+        const status = super.checkParameters(params)
+
+        const [useLevels] = this.calcLevelsTerms(params.levels)
+        this.statusOf.levels.warnings.length = 0
+        if (params.levels > useLevels) {
+            this.statusOf.levels.addWarning(
+                `too few sequence entries for ${params.levels} rows; `
+                    + `using ${useLevels}`
+            )
         }
+        return status
+    }
+
+    setup() {
+        super.setup()
+        ;[this.useLevels, this.useTerms] = this.calcLevelsTerms(this.levels)
+        this.sketch
+            .background('black')
+            .textAlign(this.sketch.CENTER)
+            .textFont('Arial')
+            .textSize(this.fontSize)
+            .textStyle(this.sketch.BOLD)
+            .colorMode(this.sketch.HSB, 255)
+        const demoString = '˗' + '0'.repeat(this.digits) + ' '
+        this.xDelta = this.sketch.textWidth(demoString)
+        this.entries = []
+        for (let i = 0; i < this.useLevels; ++i) this.entries.push([])
     }
 
     draw() {
         const sketch = this.sketch
         const sequence = this.seq
-        const fontSize = 20
-        const xDelta = 50
-        const yDelta = 50
-        let firstX = 30
-        const firstY = 30
-        sketch
-            .background('black')
-            .textFont('Arial')
-            .textSize(fontSize)
-            .textStyle(sketch.BOLD)
-            .colorMode(sketch.HSB, 255)
         let myColor = sketch.color(100, 255, 150)
         let hue = 0
 
@@ -98,13 +140,23 @@ class Differences extends P5Visualizer(paramDesc) {
             hue = ((i * 255) / 6) % 255
             myColor = sketch.color(hue, 150, 200)
             sketch.fill(myColor)
+            let curX = ((i + 1) * this.xDelta) / 2 + this.leftMargin
+
             /* Draw the row, updating workingSequence: */
             for (let j = 0; j < workingSequence.length; j++) {
-                sketch.text(
-                    workingSequence[j].toString(),
-                    firstX + j * xDelta,
-                    firstY + i * yDelta
-                )
+                const num = workingSequence[j]
+                const abs = num < 0 ? -num : num
+                let newEntry = num.toString()
+                let s = abs.toString()
+                if (s.length > this.digits) {
+                    const lessDigits = Math.max(1, this.digits - 2)
+                    const suffix = this.digits === 2 ? '..' : '…'
+                    s = s.substr(0, lessDigits) + suffix
+                } else newEntry = ''
+                this.entries[i].push(newEntry)
+                if (num < 0) s = '˗' + s
+                sketch.text(s, curX, this.firstY + i * this.yDelta)
+                curX += this.xDelta
                 if (j < workingSequence.length - 1) {
                     workingSequence[j] =
                         workingSequence[j + 1] - workingSequence[j]
@@ -112,11 +164,22 @@ class Differences extends P5Visualizer(paramDesc) {
             }
 
             workingSequence.pop()
-            // Move the next row forward half an entry, for a pyramid shape.
-            firstX = firstX + (1 / 2) * xDelta
         }
         this.stop()
     }
+
+    mouseMoved(_event: MouseEvent) {
+        this.simplePopup()
+        const sk = this.sketch
+        const adjY = sk.mouseY + this.yDelta - this.firstY
+        const row = Math.floor(adjY / this.yDelta)
+        const posInRow = adjY % this.yDelta
+        if (posInRow < this.yDelta - this.fontSize) return
+
+        const adjX = sk.mouseX - (row * this.xDelta) / 2 - this.leftMargin
+        const col = Math.floor(adjX / this.xDelta)
+        this.simplePopup(this.entries[row][col], [sk.mouseX, sk.mouseY])
+    }
 }
 
 export const exportModule = new VisualizerExportModule(Differences)
diff --git a/src/visualizers/FactorFence.ts b/src/visualizers/FactorFence.ts
index 894dd33c..21780d98 100644
--- a/src/visualizers/FactorFence.ts
+++ b/src/visualizers/FactorFence.ts
@@ -359,9 +359,6 @@ class FactorFence extends P5Visualizer(paramDesc) {
         // no stroke (rectangles without borders)
         this.sketch.strokeWeight(0)
         this.sketch.frameRate(30)
-
-        // Only need a couple of frames to start with:
-        this.stop(tryFrames)
     }
 
     /** md
@@ -372,6 +369,29 @@ term that the mouse is above. Clicking a prime will set it as the persistent
 highlight value. You can drag the chart in any direction to pan the view.
 
     **/
+    // Implementation notes: control events (keypresses and mouse gestures) are
+    // handled in this code in a slightly roundabout way: every draw() call
+    // checks whether a keypress is in effect and/or whether any mouse
+    // gestures are occurring, and handles them accordingly. But since the
+    // graph doesn't change except as a result of these actions (or the cache
+    // filling), the draw loop can generally stop. So the interaction checkers
+    // have to extend the draw loop if they fire. And then finally, since
+    // the draw loop tends to stop, pretty much all that the actual
+    // event-handling functions (mousePressed() etc, well below here in this
+    // file) have to do is restart the draw loop, and then the interaction
+    // checkers in draw() will actually implement the behaviors that should
+    // be invoked by those events.
+    // It might be more natural-seeming to implement the behaviors directly
+    // in the event-handling functions. That simpler scheme would likely work
+    // for the mouse events. However, it is unclear how, in that scheme, one
+    // could implement the behavior that the graph continues to zoom (or
+    // stretch or whatever) as you hold the corresponding key down. That's
+    // because you can only rely on a single keyPressed() event and a single
+    // keyReleased() event, no matter how long you hold a key down.
+    // So something has to run in the meantime and check if the key is still
+    // down, and it seems as though that has to be the draw() call. And
+    // as long as the draw() call is implementing the key controls, it seems
+    // that for consistency, it might as well do all the controls.
     mouseCheckDrag() {
         const movement = new p5.Vector(this.sketch.mouseX, this.sketch.mouseY)
         movement.sub(this.dragStart)
@@ -381,6 +401,7 @@ highlight value. You can drag the chart in any direction to pan the view.
             this.dragging = true
             movement.mult(1 / this.scaleFactor)
             this.graphCorner = this.graphCornerStart.copy().add(movement)
+            this.extendLoop()
         }
     }
 
@@ -404,37 +425,36 @@ In addition, several keypress commands are recognized:
                 : 0.97
             this.scaleFactor *= keyScale
             this.graphCorner.y = this.graphCorner.y / keyScale
-        }
-        /** md
+        } else if (this.sketch.keyIsDown(this.sketch.UP_ARROW)) {
+            /** md
 - up and down arrow: stretch the bars vertically
-        **/
-        if (this.sketch.keyIsDown(this.sketch.UP_ARROW)) {
+             **/
             // stretch up UP
             this.heightScale *= 1.03
-        }
-        if (this.sketch.keyIsDown(this.sketch.DOWN_ARROW)) {
+        } else if (this.sketch.keyIsDown(this.sketch.DOWN_ARROW)) {
             // contract down DOWN
             this.heightScale *= 0.97
-        }
-        /** md
+        } else if (this.sketch.keyIsDown(74)) {
+            /** md
 - J/I/K/L: pan the chart left/up/down/right
-        **/
-        if (this.sketch.keyIsDown(74)) {
+             **/
             // pan left J
             this.graphCorner.x -= 10 / this.scaleFactor
-        }
-        if (this.sketch.keyIsDown(76)) {
+        } else if (this.sketch.keyIsDown(76)) {
             // pan right L
             this.graphCorner.x += 10 / this.scaleFactor
-        }
-        if (this.sketch.keyIsDown(73)) {
+        } else if (this.sketch.keyIsDown(73)) {
             // pan up I
             this.graphCorner.y -= 10 / this.scaleFactor
-        }
-        if (this.sketch.keyIsDown(75)) {
+        } else if (this.sketch.keyIsDown(75)) {
             // pan down K
             this.graphCorner.y += 10 / this.scaleFactor
+        } else {
+            // no key we care about
+            return
         }
+        // Make sure that if we keep the key down, the drawing keeps adjusting:
+        this.extendLoop()
     }
 
     draw() {
@@ -516,6 +536,8 @@ In addition, several keypress commands are recognized:
         // If we are waiting on elements or factorizations, extend lifetime
         if (this.collectFailed || this.firstFailure < barsInfo.maxBars) {
             this.extendLoop()
+        } else {
+            this.stop(tryFrames)
         }
     }
 
@@ -677,12 +699,17 @@ In addition, several keypress commands are recognized:
         this.extendLoop()
     }
 
+    mouseDragged(event: MouseEvent) {
+        this.mouseLast = event
+        this.extendLoop()
+    }
+
     mousePressed() {
         if (!this.mouseOnSketch()) return
         this.mouseDown = true
         this.dragStart = new p5.Vector(this.sketch.mouseX, this.sketch.mouseY)
         this.graphCornerStart = this.graphCorner.copy()
-        this.continue()
+        this.extendLoop()
     }
 
     mouseReleased() {
diff --git a/src/visualizers/FormulaGrid.ts b/src/visualizers/FormulaGrid.ts
new file mode 100644
index 00000000..300ef73b
--- /dev/null
+++ b/src/visualizers/FormulaGrid.ts
@@ -0,0 +1,862 @@
+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[][] = []
+
+    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.simplePopup()
+    }
+
+    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.simplePopup(mousetext, [
+                event.clientX - r.x,
+                event.clientY - r.y,
+            ])
+        } else this.simplePopup()
+    }
+}
+
+export const exportModule = new VisualizerExportModule(FormulaGrid)
diff --git a/src/visualizers/ModFill.ts b/src/visualizers/ModFill.ts
index 58b1f224..eb298651 100644
--- a/src/visualizers/ModFill.ts
+++ b/src/visualizers/ModFill.ts
@@ -7,11 +7,6 @@ import type {GenericParamDescription} from '@/shared/Paramable'
 import {ParamType} from '@/shared/ParamType'
 import {ValidationStatus} from '@/shared/ValidationStatus'
 
-/* Helper for parameter specifications: */
-function nontrivialFormula(fmla: string) {
-    return fmla !== '' && fmla !== '0' && fmla !== 'false'
-}
-
 /** md
 # Mod Fill Visualizer
 
@@ -31,8 +26,9 @@ each time the corresponding residue modulo _m_ occurs for
 some entry of the sequence. The sequence terms _a_(_n_) are considered in
 order, filling the corresponding cells in turn, so you can get an
 idea of when various residues occur by watching the order
-the cells are filled in as the diagram is drawn.  There are options
-to control color and transparency of the fill.
+the cells are filled in as the diagram is drawn. You specify how to compute
+the color used for filling each cell with the formula in the `Fill color`
+option.
 
 ## Parameters
 **/
@@ -55,43 +51,34 @@ to the largest modulus to consider.
 - Background color: The color of the background
      **/
     backgroundColor: {
-        default: '#FFFFFF',
+        default: '#FFFFFFFF',
         type: ParamType.COLOR,
         displayName: 'Background color',
         required: true,
     },
     /** md
-- Fill color: The color used to fill each cell by default.
+- Fill color: A formula which computes the color used to fill each cell as it
+is drawn. See the [Chroma](../shared/Chroma.md) documentation for ways to
+specify colors in a formula. The formula may use any of the following variables,
+the values of which will be predefined for you:
+     - `a`, the current entry of the sequence,
+     - `n`, the current index in the sequence,
+     - `m`, the modulus represented by the current cell.
+
+To recover the residue of the current cell being filled, use the expression
+`a % m`.
+
      **/
     fillColor: {
-        default: '#000000',
-        type: ParamType.COLOR,
-        displayName: 'Fill color',
-        required: true,
-    },
-    /** md
-- Opacity: The rate at which cells darken with repeated drawing.  This
-should be set between 0 (transparent) and 1 (solid), typically as a constant,
-but can be set as a function of _n_, the sequence index, _a_, the sequence
-entry, and/or _m_, the modulus.
-If the function evaluates to a number less than 0, it will behave as 0; if it
- evaluates to more than 1, it will behave as 1.  Default:
-     **/
-    alpha: {
-        default: new MathFormula(
-            /** md */
-            `1`
-            /* **/
-        ),
+        default: new MathFormula('black'),
         type: ParamType.FORMULA,
         symbols: ['n', 'a', 'm'],
-        displayName: 'Opacity',
+        displayName: 'Fill color',
         description:
-            'The opacity of each new rectangle (rate at which cells'
-            + ' darken with repeated drawing).  Between 0 '
-            + '(transparent) and 1 (solid).  '
-            + "Can be a function in 'n' (index), 'a' (entry) "
-            + "and 'm' (modulus).",
+            'A formula to compute the color that each cell relating '
+            + 'to a given sequence entry will be filled with. May use '
+            + 'variables `a` for the current sequence entry, `n` for the '
+            + 'sequence index, and/or `m` for the modulus.',
         required: false,
     },
     /** md
@@ -105,106 +92,26 @@ Defaults to false.
         required: false,
     },
     /** md
-- Highlight formula: A formula whose output, modulo 2, determines whether
-to apply the highlight color (residue 0) or fill color (residue 1).
-Note that a boolean `true` value counts as 1 and `false` as 0. As with
-Opacity, the formula can involve variables _n_ (index), _a_ (entry) and/or
-_m_ (modulus).  Default:
-**/
-    highlightFormula: {
-        default: new MathFormula(
-            // Note: he markdown comment closed with */ means to include code
-            // into the docs, until mkdocs reaches a comment ending with **/
-            /** md */
-            `false`
-            /* **/
-        ),
-        type: ParamType.FORMULA,
-        symbols: ['n', 'a', 'm'],
-        displayName: 'Highlighting',
-        description:
-            "A function in 'n' (index), 'a' (entry) "
-            + "and 'm' (modulus); "
-            + 'when output is odd '
-            + '(number) or true (boolean), draws residue of '
-            + 'a(n) in the highlight color.'
-            /** md
-{! ModFill.ts extract:
-    start: '[*] EXAMPLES [*]'
-    stop: 'required[:]'
-    replace: [['^\s*[+]\s"(.*)"[\s,]*$', '       \1']]
-!}
-        **/
-            /* EXAMPLES */
-            + 'Examples: `isPrime(n)` highlights entries with prime index; '
-            + '`a` highlights entries with odd value; and `m == 30` '
-            + 'highlights the modulus 30 column.',
-        required: false,
-    },
-    /** md
-- Highlight color: The color used for highlighting.
-     **/
-    highColor: {
-        default: '#c98787',
-        type: ParamType.COLOR,
-        displayName: 'Highlight color',
-        required: true,
-        visibleDependency: 'highlightFormula',
-        visiblePredicate: (dependentValue: MathFormula) =>
-            nontrivialFormula(dependentValue.source),
-    },
-    /** md
-- Highlight opacity: The rate at which cells darken with repeated
-highlighting.  This should be set between 0 (transparent) and 1 (opaque),
-and has the analogous meaning and may use the same variables as Opacity.
-Default: if this parameter is not specified, the same value/formula for
-Opacity as described above will be used.
-     **/
-    alphaHigh: {
-        default: new MathFormula(''),
-        type: ParamType.FORMULA,
-        symbols: ['n', 'a', 'm'],
-        displayName: 'Highlight opacity',
-        description:
-            'The opacity of each new rectangle (rate at which cells'
-            + ' darken with repeated drawing).  Between 0'
-            + '(transparent) and 1 (opaque).  '
-            + "Can be a function in 'n' (index), 'a' (value) "
-            + "and 'm' (modulus).",
-        placeholder: '[same as Opacity]',
-        required: false,
-        visibleDependency: 'highlightFormula',
-        visiblePredicate: (dependentValue: MathFormula) =>
-            nontrivialFormula(dependentValue.source),
-    },
-    /** md
-- Sunzi mode: Warning: can create a stroboscopic effect.
-This sets the opacity of the background color
-overlay added at each step.  If 0, there is no effect.
-If 1, then the canvas completely blanks between terms,
-allowing you to see each term of the sequence individually.
-In that case, it helps to turn down the Frame rate (it
-can create quite a stroboscopic effect).  If
-set in the region of 0.05, it has a "history fading effect"
-in that the contribution of long past terms fades into the background.
-This parameter is named for Sunzi's Theorem (also known as the
-Chinese Remainder Theorem).
+- Sunzi mode: Warning: can create a stroboscopic effect. If true, the
+background is redrawn on every frame. If the background color is opaque or
+nearly so, this mode creates a stroboscopic effect in which only the residues
+of the current sequence element are visible in each frame. (It can help to
+turn down the Frame rate if the visual effect is too jarring.) If the opacity
+of the background is roughly 0.05, turning on the Sunzi mode has a
+"history fading effect," in that the contribution of long past terms fades
+into the background. This parameter is named for Sunzi's Theorem (also known
+as the Chinese Remainder Theorem).
      **/
     sunzi: {
         default: 0,
-        type: ParamType.NUMBER,
+        type: ParamType.BOOLEAN,
         displayName: 'Sunzi effect',
         description:
-            'The canvas background colour is painted at this '
-            + 'opacity between '
-            + 'each term of the '
-            + 'sequence.  '
-            + 'If 0, no effect.  If 1, canvas completely '
-            + 'blanks between terms (warning! can be '
-            + 'stroboscopic), so the residues of only a '
-            + 'single term are shown '
-            + 'in each frame.  '
-            + 'Otherwise a history fading effect (try 0.05).',
+            'If true, the canvas background colour is re-painted between '
+            + 'each term of the sequence.  Warning: a true setting can '
+            + 'create a stroboscopic effect. With a nearly transparent '
+            + 'background color, this creates an effect of fading the '
+            + 'residues displayed by earlier sequence values over time.',
         required: false,
         validate: function (n: number, status: ValidationStatus) {
             if (n < 0 || n > 1) status.addError('Must be between 0 and 1.')
@@ -212,7 +119,7 @@ Chinese Remainder Theorem).
     },
     /** md
 - Frame rate: Entries displayed per second.  Can be useful in combination with
-Sunzi mode. Only visible when Sunzi mode is nonzero.
+Sunzi mode. Only visible when Sunzi mode is true.
      **/
     frameRate: {
         default: 60,
@@ -220,7 +127,7 @@ Sunzi mode. Only visible when Sunzi mode is nonzero.
         displayName: 'Frame rate',
         required: false,
         visibleDependency: 'sunzi',
-        visiblePredicate: s => s !== 0,
+        visiblePredicate: s => s,
         validate: function (n: number, status: ValidationStatus) {
             if (n < 0 || n > 100)
                 status.addError('Must be between 0 and 100.')
@@ -237,8 +144,6 @@ class ModFill extends P5Visualizer(paramDesc) {
     rectWidth = 0
     rectHeight = 0
     useMod = 0
-    useFillColor = INVALID_COLOR
-    useHighColor = INVALID_COLOR
     useBackColor = INVALID_COLOR
     i = 0n
 
@@ -255,14 +160,11 @@ class ModFill extends P5Visualizer(paramDesc) {
     }
 
     drawNew(num: bigint) {
-        let drawColor = this.useFillColor
-        let alphaFormula = this.alpha
-        let alphaStatus = this.statusOf.alpha
-        let alphaVars = this.alpha.freevars
+        const sketch = this.sketch
         const value = this.seq.getElement(num)
 
-        // determine alpha
-        const vars = this.highlightFormula.freevars
+        // determine color
+        const vars = this.fillColor.freevars
         let useNum = 0
         let useValue = 0
 
@@ -273,43 +175,21 @@ class ModFill extends P5Visualizer(paramDesc) {
         let x = 0
         for (let mod = 1; mod <= this.useMod; mod++) {
             // needs to take BigInt when implemented
-            const highValue = this.highlightFormula.computeWithStatus(
-                this.statusOf.highlightFormula,
+            const clr = this.fillColor.computeWithStatus(
+                this.statusOf.fillColor,
                 useNum,
                 useValue,
                 mod
             )
-            let high = false
-            if (typeof highValue === 'boolean') high = highValue
-            else if (
-                typeof highValue === 'number'
-                || typeof highValue === 'bigint'
-            ) {
-                high = math.modulo(highValue, 2) === 1n
-            }
-            // set color
-            if (high) {
-                drawColor = this.useHighColor
-                if (this.alphaHigh.source !== '') {
-                    alphaFormula = this.alphaHigh
-                    alphaStatus = this.statusOf.alphaHigh
-                    alphaVars = this.alphaHigh.freevars
-                }
-            }
-            if (alphaVars.has('n')) useNum = this.trySafeNumber(num)
-            if (alphaVars.has('a')) useValue = this.trySafeNumber(value)
-            const alphaValue = alphaFormula.computeWithStatus(
-                alphaStatus,
-                useNum,
-                useValue,
-                mod
-            )
-            if (typeof alphaValue === 'number') {
-                drawColor.setAlpha(255 * alphaValue)
-            }
-
+            if (this.statusOf.fillColor.invalid()) return
             // draw rectangle
-            this.sketch.fill(drawColor)
+            const sketchColor =
+                typeof clr === 'string'
+                    ? sketch.color(clr)
+                    : math.isChroma(clr)
+                      ? sketch.color(clr.hex())
+                      : sketch.color('black')
+            this.sketch.fill(sketchColor)
             const y =
                 this.sketch.height
                 - Number(math.modulo(value, mod) + 1n) * this.rectHeight
@@ -360,16 +240,15 @@ class ModFill extends P5Visualizer(paramDesc) {
 
         // set color info
         this.useBackColor = this.sketch.color(this.backgroundColor)
-        this.useFillColor = this.sketch.color(this.fillColor)
-        this.useHighColor = this.sketch.color(this.highColor)
+        const opaqueBack = this.sketch.color(this.backgroundColor)
+        opaqueBack.setAlpha(255)
 
         // Set up to draw:
         this.sketch
             .frameRate(this.frameRate)
             .noStroke()
-            .background(this.useBackColor)
+            .background(opaqueBack)
         this.i = this.seq.first
-        this.useBackColor.setAlpha(255 * this.sunzi)
     }
 
     draw() {
@@ -378,8 +257,10 @@ class ModFill extends P5Visualizer(paramDesc) {
             return
         }
         // sunzi effect
-        this.sketch.fill(this.useBackColor)
-        this.sketch.rect(0, 0, this.sketch.width, this.sketch.height)
+        if (this.sunzi) {
+            this.sketch.fill(this.useBackColor)
+            this.sketch.rect(0, 0, this.sketch.width, this.sketch.height)
+        }
 
         // draw residues
         this.drawNew(this.i)
diff --git a/src/visualizers/P5Visualizer.ts b/src/visualizers/P5Visualizer.ts
index 79fc8a7b..ad84f73a 100644
--- a/src/visualizers/P5Visualizer.ts
+++ b/src/visualizers/P5Visualizer.ts
@@ -17,6 +17,14 @@ 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'
+
+/* NOTE: There is not embedded markdown documentation here, because
+   the P5Visualizer is reasonably thoroughly documented in
+   doc/visualizer-in-depth.md. That situation unfortunately means that
+   if you make feature changes here, you likely need to edit that doc
+   file to keep code and documentation in sync. :-/
+ */
 
 // Ugh, the gyrations we go through to keep TypeScript happy
 // while only listing the p5 methods once:
@@ -92,6 +100,8 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
         drawingState: DrawingState = DrawingUnmounted
 
         within?: HTMLElement
+        popup?: HTMLElement = undefined
+
         usesGL() {
             return false
         }
@@ -190,7 +200,11 @@ export function P5Visualizer<PD extends GenericParamDescription>(desc: PD) {
                         ) {
                             sketch[method] = (event: KeyboardEvent) => {
                                 const active = document.activeElement
-                                if (active && active.tagName === 'INPUT') {
+                                if (
+                                    active
+                                    && (active.tagName === 'INPUT'
+                                        || active.tagName === 'TEXTAREA')
+                                ) {
                                     return true
                                 }
                                 return this[method](event)
@@ -455,9 +469,58 @@ 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()
         }
+
+        simplePopup(text: string = '', [x, y]: [number, number] = [0, 0]) {
+            if (!this.within) return
+            if (!text) {
+                // Hide the popup
+                if (this.popup) this.popup.style.display = 'none'
+                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'
+        }
     }
 
     type P5VisInstance = InstanceType<typeof P5Visualizer>
diff --git a/src/visualizers/Turtle.ts b/src/visualizers/Turtle.ts
index e1987d56..a9a6404d 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, '
@@ -622,10 +622,9 @@ class Turtle extends P5GLVisualizer(paramDesc) {
             && this.seq.length > this.throttleWarn
             && this.seq.length <= this.throttleLimit
         ) {
-            // bug... why isn't this displaying?
             status.addWarning(
                 `Animating with more than ${this.throttleWarn} steps is `
-                    + 'likely to be quite laggy.'
+                    + 'likely to have a very low frame rate.'
             )
         }
         if (animating && this.seq.length > this.throttleLimit) {
@@ -634,30 +633,6 @@ class Turtle extends P5GLVisualizer(paramDesc) {
                     + 'entries of the sequence.'
             )
         }
-
-        // Check that the domain seems suitable for the sequence:
-        const toTest = 100n
-        const threshold = 10
-        if (this.seq.length >= toTest) {
-            let nIn = 0
-            const limit = this.seq.first + toTest
-            for (let i = this.seq.first; i < limit; ++i) {
-                try {
-                    const val = this.seq.getElement(i)
-                    if (params.domain.includes(val)) ++nIn
-                } catch {
-                    // bag the test
-                    return status
-                }
-            }
-            if (nIn < threshold) {
-                this.statusOf.domain.addWarning(
-                    `only ${nIn} of the first ${toTest} sequence entries `
-                        + 'are in this list; consider adjusting'
-                )
-            }
-        }
-
         return status
     }
 
@@ -778,6 +753,7 @@ class Turtle extends P5GLVisualizer(paramDesc) {
             if (pos.x !== lastPos.x || pos.y !== lastPos.y) {
                 sketch.fill(this.pathColors[i])
                 sketch.push()
+                sketch.scale(1, -1, 1)
                 sketch.translate(lastPos.x, lastPos.y).rotateZ(radBearing)
                 if (Math.abs(length) > width / 3) {
                     sketch.rect(0, -width / 2, length - width / 3, width)
@@ -853,6 +829,9 @@ class Turtle extends P5GLVisualizer(paramDesc) {
         const position = this.vertices[len].copy()
         const startIndex = this.firstIndex + BigInt(len)
         const endIndex = this.firstIndex + BigInt(targetLength)
+        let checked = 0
+        let inDomain = 0
+        const threshold = 0.03
         for (let i = startIndex; i < endIndex; i++) {
             // get the current sequence element and infer
             // the rotation/step
@@ -868,10 +847,14 @@ class Turtle extends P5GLVisualizer(paramDesc) {
                     throw e
                 }
             }
+            if (this.ruleMode === RuleMode.List) {
+                ++checked
+                if (this.domain.includes(currElement)) inDomain++
+            }
             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,
@@ -942,10 +925,20 @@ class Turtle extends P5GLVisualizer(paramDesc) {
             this.pathBearings.push(this.bearing)
             this.vertices.push(position.copy())
         }
+        if (this.ruleMode === RuleMode.List) {
+            this.statusOf.domain.warnings.length = 0 // clear prior warning
+            if (inDomain / checked < threshold) {
+                this.statusOf.domain.addWarning(
+                    `only ${inDomain} of current group of ${checked} sequence`
+                        + 'entries are in this list; consider adjusting'
+                )
+            }
+        }
     }
 
-    async resized(_toSize: ViewSize) {
+    async resized(toSize: ViewSize) {
         this.cursor = 0 // make sure we redraw
+        this.sketch.resizeCanvas(toSize.width, toSize.height)
         return true // we handled it; framework need not do anything
     }