sunzi effect

src/shared/defineFeatured.ts

@@ -53,9 +53,9 @@ const featuredSIMs = [
         "Picasso's Periods",
         'ModFill',
         'Formula',
-        'modDimension=50&backgroundColor=000000&fillColor=1a5fb4'
-            + '&alpha=0.1&highlightFormula=isPrime%28a%29&highColor=bf8383'
-            + '&alphaHigh=0.4',
+        'modDimension=100&backgroundColor=000000&fillColor=1a5fb4'
+            + '&alpha=0.1&aspectRatio=false&highlightFormula=isPrime%28a%29'
+            + '&highColor=bf8383&alphaHigh=0.4&sunzi=0.03',
         'formula=n%5E3%2B2n%2B1'
     ),
     specimenQuery(

src/visualizers/ModFill.ts

@@ -174,19 +174,51 @@ If the function evaluates below 0, it will behave as 0; if it
     },
     /** md
 - Sunzi mode: Warning: can create a stroboscopic effect.
-The canvas blanks between each term of the sequence, so
-that you see only the residues of a single term in each frame
+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"
+that the long past terms fade their contribution to the
+background color.
      **/
     sunzi: {
-        default: false,
-        type: ParamType.BOOLEAN,
-        displayName: 'Sunzi mode (warning: stroboscopic effect)',
+        default: 0,
+        type: ParamType.NUMBER,
+        displayName: 'Sunzi effect',
         description:
-            'The canvas blanks between each term of the'
-            + 'sequence, so the residues of a single term are shown'
-            + 'in each frame',
+            '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).',
+        required: true,
+        visibleValue: true,
+        validate: function (n: number, status: ValidationStatus) {
+            if (n < 0 || n > 1) status.addError('Must be between 0 and 1.')
+        },
+    },
+    /** md
+- Frame rate:  Terms per second.  Can be useful in combination with
+Sunzi mode.
+     **/
+    frameRate: {
+        default: 60,
+        type: ParamType.NUMBER,
+        displayName: 'Frame rate',
         required: true,
         visibleValue: true,
+        validate: function (n: number, status: ValidationStatus) {
+            if (n < 0 || n > 100)
+                status.addError('Must be between 0 and 100.')
+        },
     },
 } satisfies GenericParamDescription
 
@@ -201,6 +233,7 @@ class ModFill extends P5Visualizer(paramDesc) {
     useMod = 0
     useFillColor = INVALID_COLOR
     useHighColor = INVALID_COLOR
+    useBackColor = INVALID_COLOR
     i = 0n
 
     trySafeNumber(input: bigint) {
@@ -304,23 +337,29 @@ class ModFill extends P5Visualizer(paramDesc) {
         this.rectWidth = this.sketch.width / this.useMod
         this.rectHeight = this.sketch.height / this.useMod
 
+        this.sketch.frameRate(this.frameRate)
         this.sketch.noStroke()
-        this.sketch.background(this.backgroundColor)
+        this.useBackColor = this.sketch.color(this.backgroundColor)
+        this.sketch.background(this.useBackColor)
         this.i = this.seq.first
 
         // set fill color info
         this.useFillColor = this.sketch.color(this.fillColor)
         this.useHighColor = this.sketch.color(this.highColor)
 
-        if (this.sunzi) this.sketch.frameRate(3)
+        this.useBackColor.setAlpha(255 * this.sunzi)
     }
 
     draw() {
         if (this.i > this.seq.last) {
             this.stop()
             return
         }
-        if (this.sunzi) this.sketch.background(this.backgroundColor)
+        // sunzi effect
+        this.sketch.fill(this.useBackColor)
+        this.sketch.rect(0, 0, this.sketch.width, this.sketch.height)
+
+        // draw residues
         this.drawNew(this.i)
         // Important to increment _after_ drawNew completes, because it
         // won't complete on a cache miss, and in that case we don't want to