Merge 5154801 into 5c6c6b8

code-dot-org · Dec 6, 2023 · d3e2b2c · d3e2b2c
2 parents 5c6c6b8 + 5154801
commit d3e2b2c
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 141 deletions.
diff --git a/src/Effects.js → src/BackgroundEffects.js b/src/Effects.js → src/BackgroundEffects.js
@@ -1,6 +1,6 @@
 const constants = require('./constants');
+const utils = require('./utils');
 
-// background
 const discoBall = require('./effects/background/discoBall');
 const higherPower = require('./effects/background/higherPower');
 const rainbow = require('./effects/background/rainbow');
@@ -30,68 +30,30 @@ const growingStars = require('./effects/background/growingStars');
 const squiggles = require('./effects/background/squiggles');
 const musicWave = require('./effects/background/musicWave');
 
-// foreground
-const rain = require('./effects/foreground/rain');
-const rainingTacos = require('./effects/foreground/rainingTacos');
-const pineapples = require('./effects/foreground/pineapples');
-const spotlight = require('./effects/foreground/spotlight');
-const colorLights = require('./effects/foreground/colorLights');
-const smilingPoop = require('./effects/foreground/smilingPoop');
-const heartsRed = require('./effects/foreground/heartsRed');
-const heartsColorful = require('./effects/foreground/heartsColorful');
-const floatingRainbows = require('./effects/foreground/floatingRainbows');
-const bubbles = require('./effects/foreground/bubbles');
-const explodingStars = require('./effects/foreground/explodingStars');
-const pizzas = require('./effects/foreground/pizzas');
-const smileFace = require('./effects/foreground/smileFace');
-const confetti = require('./effects/foreground/confetti');
-const musicNotes = require('./effects/foreground/musicNotes');
-const paintDrip = require('./effects/foreground/paintDrip');
-const emojis = require('./effects/foreground/emojis');
-
-module.exports = class Effects {
-  constructor(p5, alpha, extraImages, blend, currentPalette = 'default') {
+module.exports = class BackgroundEffects {
+  constructor(p5, alpha, getEffectsInPreviewMode, extraImages) {
     this.p5_ = p5;
-    this.extraImages = extraImages;
-    this.blend = blend || p5.BLEND;
-    this.currentPalette = currentPalette;
-    this.inPreviewMode = false;
-    const getInPreviewMode = this.getInPreviewMode.bind(this);
-
+    this.currentPalette = 'default';
 
+    // Duplicated in ForegroundEffects
     function randomNumber(min, max) {
       return Math.round(p5.random(min, max));
     }
 
+    // Duplicated in ForegroundEffects
     function colorFromHue(h, s = 100, l = 80, a = alpha) {
       return p5.color(
         'hsla(' + Math.floor(h % 360) + ', ' + s + '%, ' + l + '%,' + a + ')'
       );
     }
 
-    function randomColor(s = 100, l = 80, a = alpha) {
-      return colorFromHue(randomNumber(0, 359), s, l, a);
-    }
-
     const colorFromPalette = n => {
       const palette = constants.PALETTES[this.currentPalette];
       return palette[n % palette.length];
     };
 
     const lerpColorFromPalette = amount => {
-      return lerpColorFromSpecificPalette(this.currentPalette, amount);
-    };
-
-    const lerpColorFromSpecificPalette = (paletteName, amount) => {
-      const palette = constants.PALETTES[paletteName];
-      const which = amount * palette.length;
-      const n = Math.floor(which);
-      const remainder = which - n;
-
-      const prev = palette[n % palette.length];
-      const next = palette[(n + 1) % palette.length];
-
-      return p5.lerpColor(p5.color(prev), p5.color(next), remainder);
+      return utils.lerpColorFromSpecificPalette(p5, this.currentPalette, amount);
     };
 
     const randomColorFromPalette = () => {
@@ -109,7 +71,6 @@ module.exports = class Effects {
       },
     };
 
-    // background
     this.disco_ball = discoBall(p5, lerpColorFromPalette, colorFromPalette);
     this.higher_power = higherPower(p5, getCurrentPalette, extraImages);
     this.rainbow = rainbow(p5, lerpColorFromPalette);
@@ -122,57 +83,23 @@ module.exports = class Effects {
     this.clouds = clouds(p5, lerpColorFromPalette);
     this.frosted_grid = frostedGrid(p5, getCurrentPalette, randomNumber);
     this.starburst = starburst(p5, lerpColorFromPalette, randomColorFromPalette, randomNumber);
-    this.diamonds = diamonds(p5, lerpColorFromPalette, getInPreviewMode);
+    this.diamonds = diamonds(p5, lerpColorFromPalette, getEffectsInPreviewMode);
     this.circles = circles(p5, lerpColorFromPalette);
     this.sparkles = sparkles(p5, randomColorFromPalette, randomNumber);
-    this.text = text(p5, lerpColorFromPalette, colorFromHue, randomNumber, getInPreviewMode);
+    this.text = text(p5, lerpColorFromPalette, colorFromHue, randomNumber, getEffectsInPreviewMode);
     this.splatter = splatter(p5, randomColorFromPalette);
     this.swirl = swirl(p5, randomColorFromPalette);
     this.spiral = spiral(p5, lerpColorFromPalette);
-    this.lasers = lasers(p5, lerpColorFromPalette, getInPreviewMode);
+    this.lasers = lasers(p5, lerpColorFromPalette, getEffectsInPreviewMode);
     this.quads = quads(p5, colorFromPalette);
     this.kaleidoscope = kaleidoscope(p5, colorFromPalette);
-    this.snowflakes = snowflakes(p5, lerpColorFromPalette, getInPreviewMode);
+    this.snowflakes = snowflakes(p5, lerpColorFromPalette, getEffectsInPreviewMode);
     this.fireworks = fireworks(p5, randomColorFromPalette, randomNumber);
-    this.stars = stars(p5, randomColorFromPalette, getInPreviewMode);
-    this.galaxy = galaxy(p5, randomColorFromPalette, randomNumber, getInPreviewMode);
+    this.stars = stars(p5, randomColorFromPalette, getEffectsInPreviewMode);
+    this.galaxy = galaxy(p5, randomColorFromPalette, randomNumber, getEffectsInPreviewMode);
     this.growing_stars = growingStars(p5, colorFromPalette);
     this.squiggles = squiggles(p5, lerpColorFromPalette);
     this.music_wave = musicWave(p5, lerpColorFromPalette);
-
-    // foreground
-    this.rain = rain(p5, randomNumber);
-    this.raining_tacos = rainingTacos(p5, randomNumber, getInPreviewMode);
-    this.pineapples = pineapples(p5, randomNumber, getInPreviewMode);
-    this.spotlight = spotlight(p5, randomNumber);
-    this.color_lights = colorLights(p5, randomNumber, randomColor);
-    this.smiling_poop = smilingPoop(p5, randomNumber, getInPreviewMode);
-    this.hearts_red = heartsRed(p5, randomNumber);
-    this.hearts_colorful = heartsColorful(p5, randomNumber, randomColor);
-    this.floating_rainbows = floatingRainbows(p5, randomNumber, getInPreviewMode);
-    this.bubbles = bubbles(p5, randomColor, getInPreviewMode);
-    this.exploding_stars = explodingStars(p5, randomNumber, randomColor, getInPreviewMode);
-    this.pizzas = pizzas(p5, randomNumber, getInPreviewMode);
-    this.smile_face = smileFace(p5, randomNumber, getInPreviewMode);
-    this.confetti = confetti(p5, randomColor, getInPreviewMode);
-    this.music_notes = musicNotes(p5, randomNumber, getInPreviewMode);
-    this.paint_drip = paintDrip(p5, lerpColorFromSpecificPalette, getInPreviewMode);
-    this.emojis = emojis(p5, randomNumber, getInPreviewMode);
-  }
-
-  setInPreviewMode(inPreviewMode) {
-    this.inPreviewMode = inPreviewMode;
-  }
-
-  getInPreviewMode() {
-    return this.inPreviewMode;
-  }
-
-  randomForegroundEffect() {
-    const effects = constants.FOREGROUND_EFFECTS.filter(name =>
-      this.hasOwnProperty(name)
-    );
-    return this.sample_(effects);
   }
 
   randomBackgroundEffect() {
@@ -186,6 +113,7 @@ module.exports = class Effects {
     return this.sample_(Object.keys(constants.PALETTES));
   }
 
+  // Duplicated in ForegroundEffects
   /**
    * Randomly pick one element out of an array.
    * @param {Array.<T>} collection

diff --git a/src/ForegroundEffects.js b/src/ForegroundEffects.js
@@ -0,0 +1,84 @@
+const constants = require('./constants');
+const utils = require('./utils');
+
+const rain = require('./effects/foreground/rain');
+const rainingTacos = require('./effects/foreground/rainingTacos');
+const pineapples = require('./effects/foreground/pineapples');
+const spotlight = require('./effects/foreground/spotlight');
+const colorLights = require('./effects/foreground/colorLights');
+const smilingPoop = require('./effects/foreground/smilingPoop');
+const heartsRed = require('./effects/foreground/heartsRed');
+const heartsColorful = require('./effects/foreground/heartsColorful');
+const floatingRainbows = require('./effects/foreground/floatingRainbows');
+const bubbles = require('./effects/foreground/bubbles');
+const explodingStars = require('./effects/foreground/explodingStars');
+const pizzas = require('./effects/foreground/pizzas');
+const smileFace = require('./effects/foreground/smileFace');
+const confetti = require('./effects/foreground/confetti');
+const musicNotes = require('./effects/foreground/musicNotes');
+const paintDrip = require('./effects/foreground/paintDrip');
+const emojis = require('./effects/foreground/emojis');
+
+module.exports = class ForegroundEffects {
+  constructor(p5, alpha, getEffectsInPreviewMode) {
+    this.p5_ = p5;
+
+    // Duplicated in BackgroundEffects
+    function randomNumber(min, max) {
+      return Math.round(p5.random(min, max));
+    }
+
+    // Duplicated in BackgroundEffects
+    function colorFromHue(h, s = 100, l = 80, a = alpha) {
+      return p5.color(
+        'hsla(' + Math.floor(h % 360) + ', ' + s + '%, ' + l + '%,' + a + ')'
+      );
+    }
+
+    function randomColor(s = 100, l = 80, a = alpha) {
+      return colorFromHue(randomNumber(0, 359), s, l, a);
+    }
+
+    // selecting "none" as a foreground is a no-op,
+    // whereas selecting it as a background actually draws a white background.
+    this.none = {
+      draw: utils.noOp,
+    };
+
+    this.rain = rain(p5, randomNumber);
+    this.raining_tacos = rainingTacos(p5, randomNumber, getEffectsInPreviewMode);
+    this.pineapples = pineapples(p5, randomNumber, getEffectsInPreviewMode);
+    this.spotlight = spotlight(p5, randomNumber);
+    this.color_lights = colorLights(p5, randomNumber, randomColor);
+    this.smiling_poop = smilingPoop(p5, randomNumber, getEffectsInPreviewMode);
+    this.hearts_red = heartsRed(p5, randomNumber);
+    this.hearts_colorful = heartsColorful(p5, randomNumber, randomColor);
+    this.floating_rainbows = floatingRainbows(p5, randomNumber, getEffectsInPreviewMode);
+    this.bubbles = bubbles(p5, randomColor, getEffectsInPreviewMode);
+    this.exploding_stars = explodingStars(p5, randomNumber, randomColor, getEffectsInPreviewMode);
+    this.pizzas = pizzas(p5, randomNumber, getEffectsInPreviewMode);
+    this.smile_face = smileFace(p5, randomNumber, getEffectsInPreviewMode);
+    this.confetti = confetti(p5, randomColor, getEffectsInPreviewMode);
+    this.music_notes = musicNotes(p5, randomNumber, getEffectsInPreviewMode);
+    this.paint_drip = paintDrip(p5, getEffectsInPreviewMode);
+    this.emojis = emojis(p5, randomNumber, getEffectsInPreviewMode);
+  }
+
+  randomForegroundEffect() {
+    const effects = constants.FOREGROUND_EFFECTS.filter(name =>
+      this.hasOwnProperty(name)
+    );
+    return this.sample_(effects);
+  }
+
+  // Duplicated in BackgroundEffects
+  /**
+   * Randomly pick one element out of an array.
+   * @param {Array.<T>} collection
+   * @returns {T}
+   * @private
+   */
+  sample_(collection) {
+    return collection[Math.floor(this.p5_.random(0, collection.length))];
+  }
+};
diff --git a/src/effects/foreground/paintDrip.js b/src/effects/foreground/paintDrip.js
@@ -1,4 +1,6 @@
-module.exports = function (p5, lerpColorFromSpecificPalette, getInPreviewMode) {
+const utils = require('../../utils');
+
+module.exports = function (p5, getInPreviewMode) {
   return {
     current_drip: 0,
     current_drip_height: 0,
@@ -26,7 +28,7 @@ module.exports = function (p5, lerpColorFromSpecificPalette, getInPreviewMode) {
     },
     draw: function () {
       for (let i = 0; i < this.crayons.length; i++) {
-        let c = lerpColorFromSpecificPalette('neon', i / this.crayons.length);
+        let c = utils.lerpColorFromSpecificPalette(p5, 'neon', i / this.crayons.length);
         p5.fill(c);
         p5.noStroke();
         let rectHeight = this.getPreviewCustomizations().getRectHeight();

diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,13 @@
 const DanceParty = require('./p5.dance');
-const Effects = require('./Effects');
+const BackgroundEffects = require('./BackgroundEffects');
+const ForegroundEffects = require('./ForegroundEffects');
 const ResourceLoader = require('./ResourceLoader');
 const constants = require('./constants');
 
 module.exports = {
   DanceParty,
-  Effects,
+  BackgroundEffects,
+  ForegroundEffects,
   ResourceLoader,
   constants,
 };
diff --git a/src/p5.dance.js b/src/p5.dance.js
@@ -1,7 +1,8 @@
 /* eslint-disable no-unused-vars, curly, eqeqeq */
 
 const P5 = require('./loadP5');
-const Effects = require('./Effects');
+const BackgroundEffects = require('./BackgroundEffects');
+const ForegroundEffects = require('./ForegroundEffects');
 const replayLog = require('./replay');
 const constants = require('./constants');
 const modifySongData = require('./modifySongData');
@@ -59,6 +60,7 @@ module.exports = class DanceParty {
     this.showMeasureLabel = showMeasureLabel;
     this.i18n = i18n;
     this.resourceLoader_ = resourceLoader;
+    this.inPreviewMode = false;
 
     const containerElement = document.getElementById(container);
     this.rtl =
@@ -335,8 +337,11 @@ module.exports = class DanceParty {
   }
 
   setEffectsInPreviewMode(inPreviewMode) {
-    this.fgEffects_ && this.fgEffects_.setInPreviewMode(inPreviewMode);
-    this.bgEffects_ && this.bgEffects_.setInPreviewMode(inPreviewMode);
+    this.inPreviewMode = inPreviewMode;
+  }
+
+  getEffectsInPreviewMode() {
+    return this.inPreviewMode;
   }
 
   setAnimationSpriteSheet(sprite, moveIndex, spritesheet, mirror, animation) {
@@ -348,8 +353,8 @@ module.exports = class DanceParty {
   }
 
   setup() {
-    this.bgEffects_ = new Effects(this.p5_, 1, this.extraImages);
-    this.fgEffects_ = new Effects(this.p5_, 0.8, this.extraImages);
+    this.bgEffects_ = new BackgroundEffects(this.p5_, 1, this.getEffectsInPreviewMode.bind(this), this.extraImages);
+    this.fgEffects_ = new ForegroundEffects(this.p5_, 0.8, this.getEffectsInPreviewMode.bind(this));
 
     this.performanceData_.initTime = timeSinceLoad();
     this.onInit && this.onInit(this);
@@ -360,13 +365,7 @@ module.exports = class DanceParty {
   }
 
   getForegroundEffect() {
-    if (
-      this.world.fg_effect &&
-      this.world.fg_effect !== null &&
-      this.world.fg_effect !== 'none'
-    ) {
-      return this.fgEffects_[this.world.fg_effect];
-    }
+    return this.fgEffects_[this.world.fg_effect || 'none'];
   }
 
   getCurrentPalette() {
@@ -1568,7 +1567,6 @@ module.exports = class DanceParty {
 
     if (this.getForegroundEffect()) {
       this.p5_.push();
-      this.p5_.blendMode(this.fgEffects_.blend);
       this.getForegroundEffect().draw(context);
       this.p5_.pop();
     }

diff --git a/src/utils.js b/src/utils.js
@@ -1,3 +1,4 @@
+const constants = require("./constants");
 module.exports = {
   hexToRgb: function (hexColor) {
     const R = parseInt(hexColor.substr(1, 2), 16);
@@ -19,4 +20,16 @@ module.exports = {
     }
     return color;
   },
+  lerpColorFromSpecificPalette: function (p5, paletteName, amount) {
+    const palette = constants.PALETTES[paletteName];
+    const which = amount * palette.length;
+    const n = Math.floor(which);
+    const remainder = which - n;
+
+    const prev = palette[n % palette.length];
+    const next = palette[(n + 1) % palette.length];
+
+    return p5.lerpColor(p5.color(prev), p5.color(next), remainder);
+  },
+  noOp: () => {},
 };