feat: add colours to ModFill

src/shared/defineFeatured.ts

@@ -17,18 +17,28 @@ const featuredSIMs = [
         'corners=8&walkers=8&alpha=0.7&pixelsPerFrame=2000'
     ),
     specimenQuery(
-        'Twelve',
+        'Dance no. 163',
         'ModFill',
         'Formula',
-        'modDimension=12',
-        'formula=12'
+        'modDimension=600&alpha=50&fillColor=a51d2d'
+            + '&highlightFormula=%28n%25163*2%29%3E163'
+            + '&highColor=ff7800',
+        'formula=163*n'
     ),
     specimenQuery(
-        'Residue Rise',
+        'Prime Residues',
         'ModFill',
-        'Random',
-        'modDimension=10000',
-        'max=90000'
+        'Formula',
+        'alpha=20&fillColor=1a5fb4&highColor=f66151',
+        'formula=n'
+    ),
+    specimenQuery(
+        'Baffling Beatty Bars',
+        'ModFill',
+        'Formula',
+        'modDimension=250&alpha=70&fillColor=26a269&highlightFormula=floor'
+            + '%28sqrt%283%29*n%29&highColor=1a5fb4',
+        'formula=floor%28sqrt%282%29*n%29'
     ),
     specimenQuery(
         'Chaos Game',

src/visualizers/ModFill.ts

@@ -1,22 +1,33 @@
-import {P5Visualizer} from './P5Visualizer'
+import {P5Visualizer, INVALID_COLOR} from './P5Visualizer'
 import {VisualizerExportModule} from './VisualizerInterface'
 import type {ViewSize} from './VisualizerInterface'
 
-import {math} from '@/shared/math'
+import {math, MathFormula} from '@/shared/math'
 import type {GenericParamDescription} from '@/shared/Paramable'
 import {ParamType} from '@/shared/ParamType'
 import {ValidationStatus} from '@/shared/ValidationStatus'
 
 /** md
 # Mod Fill Visualizer
 
-[image should go here]
-
-The _n_-th row of this triangular diagram has _n_ cells which are turned on
-or off according to whether the corresponding residue modulo _n_ occurs for
-some entry of the sequence. The entries 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.
+[<img src="../../assets/img/ModFill/PrimeResidues.png" width="320"
+style="margin-left: 1em; margin-right: 0.5em"
+/>](../assets/img/ModFill/PrimeResidues.png)
+[<img src="../../assets/img/ModFill/DanceNo73.png" width="320"
+style="margin-left: 1em; margin-right: 0.5em"
+/>](../assets/img/ModFill/DanceNo73.png)
+[<img src="../../assets/img/ModFill/OEISA070826.png" width="320"
+style="margin-left: 1em; margin-right: 0.5em"
+/>](../assets/img/ModFill/OEISA070826.png)
+
+The _m_-th column of this triangular diagram (reading left to right)
+has _m_ cells (lowest is 0, highest is m-1), which are colored
+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.
 
 ## Parameters
 **/
@@ -28,29 +39,99 @@ modulus to consider.
      **/
     // note will be small enough to fit in a `number` when we need it to.
     modDimension: {
-        default: 10n,
+        default: 150n,
         type: ParamType.BIGINT,
-        displayName: 'Mod dimension',
+        displayName: 'Highest modulus',
         required: true,
         validate: function (n: number, status: ValidationStatus) {
             if (n <= 0) status.addError('Must be positive.')
         },
     },
+    /** md
+- Alpha: The rate at which cells darken with repeated hits.  This
+should be set between 1 (very transparent) and 255 (solid).
+     **/
+    alpha: {
+        default: 10,
+        type: ParamType.NUMBER,
+        displayName: 'Transparency',
+        description:
+            'Transparency of each hit'
+            + ' (1 = very transparent; 255 = solid)',
+        required: true,
+        visibleValue: true,
+        validate: function (n: number, status: ValidationStatus) {
+            if (n <= 0 || n > 255)
+                status.addError('Must be between 1 and 255.')
+        },
+    },
+    /** md
+- Fill color: The color used to fill each cell by default.
+     **/
+    fillColor: {
+        default: '#000000',
+        type: ParamType.COLOR,
+        displayName: 'Fill color',
+        required: true,
+        visibleValue: true,
+    },
+    /** md
+- highlightFormula: A formula whose output, modulo 2, determines whether
+to apply the highlight color (residue 0) or fill color (residue 1)
+**/
+    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 */
+            `isPrime(n)`
+            /* **/
+        ),
+        type: ParamType.FORMULA,
+        inputs: ['n'],
+        displayName: 'Highlight Formula',
+        description:
+            "A function in 'n' (index); when output is odd "
+            + '(number) or true (boolean), draws residue of'
+            + 'a(n) in the highlight color.',
+        visibleValue: true,
+        required: false,
+    },
+    /** md
+- Highlight color: The color used for highlighting.
+     **/
+    highColor: {
+        default: '#c98787',
+        type: ParamType.COLOR,
+        displayName: 'Highlight color',
+        required: true,
+        visibleValue: true,
+    },
 } satisfies GenericParamDescription
 
 class ModFill extends P5Visualizer(paramDesc) {
     static category = 'Mod Fill'
     static description =
-        'A triangular grid showing which residues occur, to each modulus'
+        'A triangular grid showing which residues occur, for each modulus'
 
     maxModulus = 0
     rectWidth = 0
     rectHeight = 0
     useMod = 0
+    useFillColor = INVALID_COLOR
+    useHighColor = INVALID_COLOR
     i = 0n
 
     drawNew(num: bigint) {
-        this.sketch.fill(0)
+        if (
+            Number(
+                math.modulo(this.highlightFormula.compute(Number(num)), 2)
+            ) === 1
+        ) {
+            this.sketch.fill(this.useHighColor)
+        } else {
+            this.sketch.fill(this.useFillColor)
+        }
         for (let mod = 1; mod <= this.useMod; mod++) {
             const s = this.seq.getElement(num)
             const x = (mod - 1) * this.rectWidth
@@ -98,6 +179,12 @@ class ModFill extends P5Visualizer(paramDesc) {
         this.rectHeight = this.sketch.height / this.useMod
         this.sketch.noStroke()
         this.i = this.seq.first
+
+        // set fill color info
+        this.useFillColor = this.sketch.color(this.fillColor)
+        this.useHighColor = this.sketch.color(this.highColor)
+        this.useFillColor.setAlpha(this.alpha)
+        this.useHighColor.setAlpha(this.alpha)
     }
 
     draw() {