Get stable shape generation working

voicegardens/static/voicegardens.js

@@ -237,10 +237,10 @@ 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 vector = createVector(pointX, pointY);
-        this.points.push(vector);
+      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);
     }
   }
 
@@ -251,11 +251,11 @@ class GeneratedShape {
     var lastItem = this.points.length - 1;
     curveVertex(this.points[lastItem].x, this.points[lastItem].y);
 
-    for (var i = 0; i < this.points.length; i++){
+    for (var i = 0; i < this.points.length; i++) {
       curveVertex(this.points[i].x, this.points[i].y);
     }
 
-    var firstItem = 0
+    var firstItem = 0;
     curveVertex(this.points[firstItem].x, this.points[firstItem].y);
 
     endShape(CLOSE);
@@ -267,18 +267,16 @@ function setup() {
    * The p5.js initial setup function.
    **/
   createCanvas(windowWidth, windowHeight);
-  smooth();
-  setupRecording();
   frameRate(frameRate);
-  fill("#F38630");
-  //center of the window
-  centerX = windowWidth/2;
-  centerY = windowHeight/2;
-
-  //defining all variables
-  numberOfEdges = 4;
-  angle = radians(360 / numberOfEdges);
-  radius = random(120, 140);
+
+  setupRecording();
+
+  centerX = windowWidth / 2;
+  centerY = windowHeight / 2;
+
+  numberOfEdges = 5;
+  angle = radians(180 / numberOfEdges);
+  radius = random(30, 50);
 }
 
 function draw() {
@@ -287,6 +285,10 @@ function draw() {
    **/
   background("#69D2E7");
   translate(centerX, centerX);
+  blendMode(BLEND);
+  fill("#F38630");
+  smooth();
+  noStroke();
 
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());