DTL (Test > Levelbuilder): 6bf57379

apps/package.json

@@ -59,7 +59,7 @@
     "@code-dot-org/maze": "2.14.0",
     "@code-dot-org/ml-activities": "0.0.26",
     "@code-dot-org/ml-playground": "0.0.39",
-    "@code-dot-org/p5.play": "^1.3.17-cdo",
+    "@code-dot-org/p5.play": "^1.3.18-cdo",
     "@code-dot-org/piskel": "0.13.0-cdo.6",
     "@code-dot-org/redactable-markdown": "0.4.0",
     "@react-bootstrap/pagination": "^1.0.0",

apps/src/p5lab/spritelab/libraries/PoemBotLibrary.js

@@ -320,8 +320,10 @@ export default class PoemBotLibrary extends CoreLibrary {
     }
     this.p5.textSize(renderInfo.lineSize);
     renderInfo.lines.forEach(item => {
-      let color = this.getP5Color(renderInfo.font.fill, item.alpha);
-      this.p5.fill(color);
+      let fillColor = this.getP5Color(renderInfo.font.fill, item.alpha);
+      this.p5.fill(fillColor);
+      let strokeColor = this.getP5Color(renderInfo.font.stroke, item.alpha);
+      this.p5.stroke(strokeColor);
       this.p5.text(item.text, item.x, item.y);
     });
   }

apps/src/p5lab/spritelab/poembot/commands/backgroundEffects.js

@@ -284,6 +284,62 @@ export const commands = {
 
         break;
       }
+      case 'ripples': {
+        palette = PALETTES[palette];
+        let ripples = [];
+        let startRipple = false;
+        let colorIndex = 0;
+        const rippleSpacing = 30;
+        const rippleSpeed = 4;
+        const frameDelay = 4;
+        const rippleNumber = palette.length - 1;
+
+        for (let i = 0; i < rippleNumber; i++) {
+          ripples.push({
+            size: (i + 1) * rippleSpacing,
+            color: palette[colorIndex]
+          });
+          colorIndex = (colorIndex + 1) % palette.length;
+        }
+
+        this.backgroundEffect = () => {
+          this.p5.push();
+          this.p5.noFill();
+          this.p5.strokeWeight(3);
+          if (startRipple && this.p5.frameCount % frameDelay === 0) {
+            ripples.push({
+              size:
+                rippleSpacing +
+                ripples.length * (rippleSpacing + rippleSpeed * frameDelay),
+              color: palette[colorIndex]
+            });
+            colorIndex = (colorIndex + 1) % palette.length;
+            if (ripples.length === rippleNumber) {
+              startRipple = false;
+            }
+          }
+
+          if (ripples.length > 0) {
+            // the actual background color is not fully opaque so we need to
+            // "clear out" the previous frame first so we don't see a remnant of it.
+            this.p5.background('white');
+            this.p5.background(this.getP5Color(ripples[0].color, 100));
+          }
+
+          ripples.forEach(ripple => {
+            const alpha = this.p5.map(ripple.size, 400, 0, 0, 255);
+            this.p5.stroke(this.getP5Color(ripple.color, alpha));
+            this.p5.ellipse(200, 200, ripple.size, ripple.size);
+            ripple.size += rippleSpeed;
+          });
+          ripples = ripples.filter(ripple => ripple.size < 500);
+          if (ripples.length === 0) {
+            startRipple = true;
+          }
+          this.p5.pop();
+        };
+        break;
+      }
     }
   }
 };

apps/yarn.lock

@@ -1657,17 +1657,17 @@
     react-chartjs-2 "^2.11.1"
     reselect "^4.0.0"
 
-"@code-dot-org/p5.play@^1.3.17-cdo":
-  version "1.3.17-cdo"
-  resolved "https://registry.yarnpkg.com/@code-dot-org/p5.play/-/p5.play-1.3.17-cdo.tgz#c7d3dd3744c626dd2d2b90bda735fe64f64be662"
-  integrity sha512-0H423zbBWym1EyuJ7HfaCb68W4bGQd0E6DD5ENjmLBPZq/PXyf6Rn/agBnlKPZ1OGMStEVwlgRbg8IhpYRhWZA==
+"@code-dot-org/p5.play@^1.3.18-cdo":
+  version "1.3.18-cdo"
+  resolved "https://registry.yarnpkg.com/@code-dot-org/p5.play/-/p5.play-1.3.18-cdo.tgz#5ff3e155cb019a1b9e81e3cfe1f71ed2d11e7aa4"
+  integrity sha512-lcJp8a8exbUOLaZ29KIpmEN6wvckSi5vURxb6ZewlO5ASpz3GONMLvHoWU3RSd6ON9ippWRuWp9kzi7mHBDX+Q==
   dependencies:
-    "@code-dot-org/p5" "0.5.4-cdo.9"
+    "@code-dot-org/p5" "0.5.4-cdo.10"
 
-"@code-dot-org/p5@0.5.4-cdo.9":
-  version "0.5.4-cdo.9"
-  resolved "https://registry.yarnpkg.com/@code-dot-org/p5/-/p5-0.5.4-cdo.9.tgz#8d5e7a75130bf3b4ee21678a7601fabed9858c7d"
-  integrity sha512-spJZkp8f2Hfqq6Xg8aiZlFSEtoPLln01e/MCX0ak4/7uX+NpgN0SkPKfzREp+NaLCOEZG0u+45XkSWYaFAGXvA==
+"@code-dot-org/p5@0.5.4-cdo.10":
+  version "0.5.4-cdo.10"
+  resolved "https://registry.yarnpkg.com/@code-dot-org/p5/-/p5-0.5.4-cdo.10.tgz#4a915c4af0a762e59606bf3582dbb22a4c625139"
+  integrity sha512-UnlIasrM4YOULFhWLnnvx2DFznQEuEtSwL9JGD1zWfpEWoQ5hnfJcDuTKvmy7wUlt5hrE2M5aF2aMwxBfEYGTQ==
   dependencies:
     opentype.js "^0.4.9"
     reqwest "^1.1.5"

dashboard/config/blocks/PoemBot/PoemBot_setBackgroundEffect.json

@@ -27,17 +27,17 @@
             "Dark Circles",
             "\"darkCircles\""
           ],
-          [
-            "Cloudy",
-            "\"cloudy\""
-          ],
           [
             "Color Fade",
             "\"fadeColors\""
           ],
           [
             "Blooming",
             "\"blooming\""
+          ],
+          [
+            "Ripples",
+            "\"ripples\""
           ]
         ]
       },