Get fading in working

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;
+    return;
-    // 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);
-      }
 
-      if (this.points[i].y > height || this.points[i].y <= 0) {
+  fadein() {
-        this.yDirection *= -1;
+    /**
-        console.log('this is the max height: ', height);
+     * 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();
   }