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);
+      }
     }
   }
 
@@ -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) {