Figure out random shape generation

voicegardens/static/voicegardens.js

@@ -160,13 +160,16 @@ class GeneratedShape {
     this.xs = [];
     this.ys = [];
 
-    this.angle = [];
+    this.angles = [];
     this.frequency = [];
 
-    this.edges = 5;
+    this.randXs = [];
+    this.randYs = [];
+
+    this.edges = random(3, 10);
 
     this.radius = random(120, 140);
-    this.rotAngle = radians(360 / this.edges);
+    this.angle = radians(360 / this.edges);
 
     this.destX = random(canvasWidth);
     this.destY = random(canvasHeight);
@@ -179,15 +182,18 @@ class GeneratedShape {
 
   initialise() {
     /**
-     * Initialise all movement related arrays.
+     * Initialise the shape.
      **/
     for (let i = 0; i < this.edges; i++) {
       this.startXs[i] = 0;
       this.startYs[i] = 0;
       this.ys[i] = 0;
       this.xs[i] = 0;
-      this.angle[i] = 0;
+      this.angles[i] = 0;
+      this.randXs[i] = random(-77, 77);
+      this.randYs[i] = random(-77, 77);
     }
+
     for (let i = 0; i < this.edges; i++) {
       this.frequency[i] = random(5, 12);
     }
@@ -247,10 +253,9 @@ class GeneratedShape {
 
     for (let i = 0; i < this.edges; i++) {
       this.startXs[i] =
-        this.centerX + cos(radians(this.rotAngle)) * this.radius;
+        this.centerX + cos(this.angle * i) * this.radius + this.randXs[i];
       this.startYs[i] =
-        this.centerY + sin(radians(this.rotAngle)) * this.radius;
+        this.centerY + sin(this.angle * i) * this.radius + this.randYs[i];
-      this.rotAngle += 360 / this.edges;
     }
 
     curveTightness(this.organicConstant);
@@ -284,10 +289,10 @@ class GeneratedShape {
 
     for (let i = 0; i < this.edges; i++) {
       this.xs[i] =
-        this.startXs[i] + sin(radians(this.angle[i])) * (this.accelX * 2);
+        this.startXs[i] + sin(radians(this.angles[i])) * (this.accelX * 2);
       this.ys[i] =
-        this.startYs[i] + sin(radians(this.angle[i])) * (this.accelY * 2);
+        this.startYs[i] + sin(radians(this.angles[i])) * (this.accelY * 2);
-      this.angle[i] += this.frequency[i];
+      this.angles[i] += this.frequency[i];
     }
   }
 }