diff --git a/src/GeneratedDancer.js b/src/GeneratedDancer.js index 68f8b3ef..da4f21a9 100644 --- a/src/GeneratedDancer.js +++ b/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; diff --git a/src/constants.js b/src/constants.js index 55248cfe..a38474f5 100644 --- a/src/constants.js +++ b/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, }; diff --git a/src/p5.dance.js b/src/p5.dance.js index fcd34e75..52030359 100644 --- a/src/p5.dance.js +++ b/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