WIP working towards movement with polygons

voicegardens/static/voicegardens.js

@@ -197,15 +197,32 @@ class GeneratedShape {
     /**
      * Move the shape around the canvas.
      **/
-    this.x = this.x + this.xSpeed * this.xDirection;
-    this.y = this.y + this.ySpeed * this.yDirection;
+    // 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) {
+    // 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.y > height - this.h || this.y < this.h) {
+      if (this.points[i].y > height || this.points[i].y <= 0) {
         this.yDirection *= -1;
+        console.log('this is the max height: ', height);
+      }
     }
   }
 
@@ -220,8 +237,8 @@ class GeneratedShape {
   calculatePoints() {
     /* Calculate the points of the shape */
     for (var i = 0; i < numberOfEdges; i++) {
-        var pointX = cos(angle * i) * radius + random(-77,77);
-        var pointY = sin(angle * i) * radius + random(-77,77);
+        var pointX = cos(angle * i) * radius + random(-77, 77);
+        var pointY = sin(angle * i) * radius + random(-77, 77);
         var vector = createVector(pointX, pointY);
         this.points.push(vector);
     }
@@ -269,7 +286,7 @@ function draw() {
    * The p5.js draw loop.
    **/
   background("#69D2E7");
-  translate(centerX, centerY);
+  translate(centerX, centerX);
 
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());
@@ -277,7 +294,7 @@ function draw() {
   }
 
   for (var shape of shapes) {
-    //shape.move();
+    shape.move();
     shape.display();
 
     if (shape.collide(shapes) === true) {