diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js index 9f2d93b..9d31732 100644 --- a/voicegardens/static/voicegardens.js +++ b/voicegardens/static/voicegardens.js @@ -150,7 +150,8 @@ class GeneratedShape { this.points = []; this.calculatePoints(); - this.colour = this.colour(); + this.opacity = 0; + this.colour = this.chooseColour(); } collide(shapes) { @@ -183,15 +184,6 @@ class GeneratedShape { return false; } - colour() { - /** - * Choose a colour for the shape. - **/ - var colours = ["red", "blue", "green", "black", "white"]; - var index = floor(random(0, colours.length)); - return colours[index]; - } - sound() { /** * Play a sound after a collision is detected. @@ -208,40 +200,48 @@ class GeneratedShape { /** * Move the shape around the canvas. **/ - // this.x = this.x + this.xSpeed * this.xDirection; - // this.y = this.y + this.ySpeed * this.yDirection; - - // if (this.x > width - this.w || this.x < this.w) { - // this.xDirection *= -1; - // } - // if (this.y > height - this.h || this.y < this.h) { - // this.yDirection *= -1; - // } - - // TODO: make the polygon move ... - // for each vector in this.points, add/subtract/etc. - - for (var i = 0; i < this.points.length; i++) { - this.points[i].x = this.points[i].x + this.xSpeed * this.xDirection; - this.points[i].y = this.points[i].y + this.ySpeed * this.yDirection; - - if (this.points[i].x > width || this.points[i].x <= 0) { - this.xDirection *= -1; - console.log('this is the max width: ', width); - } + return; + } - if (this.points[i].y > height || this.points[i].y <= 0) { - this.yDirection *= -1; - console.log('this is the max height: ', height); - } + fadein() { + /** + * Fade intro the shape. + **/ + if (this.opacity < 256) { + let currentAlpha = this.colour._getAlpha(); + this.colour.setAlpha(currentAlpha + random(0, 3)); + } else { + this.opacity = 256; } } + chooseColour() { + /** + * Choose a colour for the shape. + **/ + let colourChoices = [ + color("red"), + color("blue"), + color("green"), + color("black"), + color("white") + ]; + let index = floor(random(0, colourChoices.length)); + let chosenColour = colourChoices[index]; + + chosenColour.setAlpha(this.opacity); + + return chosenColour; + } + display() { /** * Show the shape on the canvas. **/ // TODO: use getSoundInfo function to influence how shape is drawn + if (this.opacity != 256) { + this.fadein(); + } fill(this.colour); this.createShape(); }