Consolidate variables into shape

voicegardens/static/voicegardens.js

@@ -6,25 +6,18 @@
 
 var archiveUrl = window.location + "add-to-archive";
 var canvas;
-var microphone;
+var centerX;
+var centerY;
 var frameRate = 60;
-var mouseInitialDrag = false;
+var microphone;
 var newSoundJustRecorded = false;
 var playButton;
 var recordButton;
 var recorder;
 var recording;
 var recordingTimeout = 30000; // 30 seconds (in milliseconds)
-var screenX;
-var screenY;
 var shapes = [];
 var stopButton;
-var color;
-var centerX;
-var centerY;
-var numberOfEdges;
-var radius;
-var rotAngle;
 
 function record() {
   /**
@@ -159,6 +152,10 @@ class GeneratedShape {
     this.angle = [];
     this.frequency = [];
 
+    this.edges = 5;
+    this.radius = random(10, 180);
+    this.rotAngle = random(10, 140);
+
     this.initialise();
   }
 
@@ -166,14 +163,14 @@ class GeneratedShape {
     /**
      * Initialise all movement related arrays.
      **/
-    for (let i = 0; i < numberOfEdges; i++) {
+    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;
     }
-    for (let i = 0; i < numberOfEdges; i++) {
+    for (let i = 0; i < this.edges; i++) {
       this.frequency[i] = random(5, 12);
     }
   }
@@ -230,18 +227,15 @@ class GeneratedShape {
     if (this.opacity != 256) this.fadein();
     fill(this.colour);
 
-    for (let i = 0; i < numberOfEdges; i++) {
-      this.startXs[i] = centerX + cos(radians(rotAngle)) * radius;
-      this.startYs[i] = centerY + sin(radians(rotAngle)) * radius;
-      rotAngle += 360.0 / numberOfEdges;
+    for (let i = 0; i < this.edges; i++) {
+      this.startXs[i] = centerX + cos(radians(this.rotAngle)) * this.radius;
+      this.startYs[i] = centerY + sin(radians(this.rotAngle)) * this.radius;
+      this.rotAngle += 360 / this.edges;
     }
 
     curveTightness(this.organicConstant);
     beginShape();
-    for (let i = 0; i < numberOfEdges; i++) {
-      curveVertex(this.xs[i], this.ys[i]);
-    }
-    for (let i = 0; i < numberOfEdges - 1; i++) {
+    for (let i = 0; i < this.edges; i++) {
       curveVertex(this.xs[i], this.ys[i]);
     }
     endShape(CLOSE);
@@ -268,7 +262,7 @@ class GeneratedShape {
 
     this.organicConstant = 1 - (abs(this.accelX) + abs(this.accelY)) * 0.1;
 
-    for (let i = 0; i < numberOfEdges; i++) {
+    for (let i = 0; i < this.edges; i++) {
       this.xs[i] =
         this.startXs[i] + sin(radians(this.angle[i])) * (this.accelX * 2);
       this.ys[i] =
@@ -289,10 +283,6 @@ function setup() {
 
   centerX = windowWidth / 2;
   centerY = windowHeight / 2;
-
-  numberOfEdges = 5;
-  radius = 45;
-  rotAngle = -90;
 }
 
 function draw() {