Generated dancer: render quality

src/GeneratedDancer.js

@@ -1,3 +1,5 @@
+const constants = require('./constants');
+
 // Thin p5 adapter: owns a p5.Graphics mid-layer and gives its 2D context
 // to the external renderer. CommonJS to match the rest of dance-party.
 
@@ -38,7 +40,13 @@ class GeneratedDancer {
     this.p5 = p5;
     this.renderer = renderer;
 
-    this.graphics = this.p5.createGraphics(worldW, worldH);
+    // Create a canvas to render into.  With a pixel density of 2, this will be 600px in width and height.
+    const pixelDensity = this.p5._pixelDensity;
+    const imageWidth = worldW * pixelDensity * constants.GENERATED_DANCER_SCALE;
+    const imageHeight =
+      worldH * pixelDensity * constants.GENERATED_DANCER_SCALE;
+
+    this.graphics = this.p5.createGraphics(imageWidth, imageHeight);
     this.graphics.pixelDensity(1);
     this.danceMove = null;
 

src/constants.js

@@ -43,7 +43,8 @@ module.exports = {
     {name: 'XSlide', mirror: false, shortBurst: true},
   ],
   RANDOM_EFFECT_KEY: 'rand',
-  BACKGROUND_EFFECTS: [ // Effect name in Code.org Dance Party (if different than key listed here)
+  BACKGROUND_EFFECTS: [
+    // Effect name in Code.org Dance Party (if different than key listed here)
     'blooming_petals',
     'circles',
     'clouds',
@@ -71,9 +72,10 @@ module.exports = {
     'starburst',
     'stars',
     'swirl', // Hypno
-    'text' // Song Names
+    'text', // Song Names
   ],
-  FOREGROUND_EFFECTS: [ // Effect name in Code.org Dance Party (if different than key listed here)
+  FOREGROUND_EFFECTS: [
+    // Effect name in Code.org Dance Party (if different than key listed here)
     'bubbles',
     'color_lights', // Stage Lights
     'confetti',
@@ -90,7 +92,7 @@ module.exports = {
     'raining_tacos', // Tacos
     'smile_face', // Smiles
     'smiling_poop', // Poop
-    'spotlight'
+    'spotlight',
   ],
   PALETTES: {
     default: ['#ffa899', '#99aaff', '#99ffac', '#fcff99', '#ffdd99'],
@@ -104,7 +106,15 @@ module.exports = {
     rave: ['#000000', '#5b6770', '#c6cacd', '#e7e8ea', '#ffffff'],
     // Color palettes from poetry lab - a few of the color values have been changed
     // so that the sprite dancers are more visible or 'pop' against the background.
-    grayscale: ['#000000', '#333333', '#626C7D', '#999999', '#CCCCCC', '#EEEEEE', '#FFFFFF'],
+    grayscale: [
+      '#000000',
+      '#333333',
+      '#626C7D',
+      '#999999',
+      '#CCCCCC',
+      '#EEEEEE',
+      '#FFFFFF',
+    ],
     sky: ['#3878A4', '#82A9B1', '#ECCEC4', '#F8B8A8', '#E4929C', '#7D7095'],
     ocean: ['#82A9B1', '#3FABE3', '#2C7DBB', '#1D57A0', '#144188', '#061F4B'],
     sunrise: ['#F5DC72', '#FC9103', '#F48363', '#F15C4C', '#372031'],
@@ -147,4 +157,7 @@ module.exports = {
     BACKGROUND: 1,
     FOREGROUND: 0.8,
   },
+  // Scale factor: make the generated dancer appear the same size as other dance sprites.
+  // At 1.0 scale, the rendered frame takes up the entire canvas.
+  GENERATED_DANCER_SCALE: 0.75,
 };

src/p5.dance.js

@@ -33,10 +33,6 @@ const WATCHED_RANGES = [0, 1, 2];
 const SIZE = constants.SIZE;
 const FRAMES = constants.FRAMES;
 
-// Scale factor make the generated dancer appear the same size as other dance sprites.
-// At 1.0 scale, the rendered frame takes up the entire canvas.
-const GENERATED_DANCER_SCALE = 0.75;
-
 // NOTE: min and max are inclusive
 function randomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -650,7 +646,7 @@ module.exports = class DanceParty {
     var sprite = this.p5_.createSprite(location.x, location.y);
     sprite.isGenDancer = true;
 
-    sprite.scale = GENERATED_DANCER_SCALE;
+    sprite.scale = 1;
     sprite.mirroring = 1;
     sprite.looping_move = 0;
     sprite.looping_frame = 0;
@@ -697,11 +693,10 @@ module.exports = class DanceParty {
         sprite.mirrorX(
           this.generatedDancer.shouldMirror(this.getCurrentMeasure()) ? -1 : 1
         );
-        this.p5_.image(
-          this.generatedDancer.graphics,
-          sprite.x - location.x,
-          sprite.y - location.y
-        );
+        this.p5_.push();
+        this.p5_.scale(1 / this.p5_._pixelDensity);
+        this.p5_.image(this.generatedDancer.graphics, 0, 0);
+        this.p5_.pop();
       }
     };
 
@@ -1207,9 +1202,6 @@ module.exports = class DanceParty {
 
     if (property === 'scale') {
       sprite.scale = val / 100;
-      if (sprite.isGenDancer) {
-        sprite.scale *= GENERATED_DANCER_SCALE;
-      }
       this.adjustSpriteDepth_(sprite);
     } else if (property === 'width' || property === 'height') {
       sprite[property] = SIZE * (val / 100);
@@ -1414,13 +1406,10 @@ module.exports = class DanceParty {
   }
 
   getAdjustedSpriteDepth(sprite) {
-    const spriteScale = sprite.isGenDancer
-      ? sprite.scale / GENERATED_DANCER_SCALE
-      : sprite.scale;
     // Bias scale heavily (especially since it largely hovers around 1.0) but use
     // Y coordinate as the first tie-breaker and X coordinate as the second.
     // (Both X and Y range from 0-399 pixels.)
-    return 10000 * spriteScale + (100 * sprite.y) / 400 + (1 * sprite.x) / 400;
+    return 10000 * sprite.scale + (100 * sprite.y) / 400 + (1 * sprite.x) / 400;
   }
 
   // Behaviors