Add nice shape generation

voicegardens/static/voicegardens.js

@@ -19,6 +19,13 @@ var screenX;
 var screenY;
 var shapes = [];
 var stopButton;
+var color;
+var centerX;
+var centerY;
+var numberOfEdges;
+var radius;
+var angle;
+
 function record() {
   /**
    * Starting recording.
@@ -132,12 +139,6 @@ class GeneratedShape {
     /**
      * Initialise the new shape.
      **/
-    this.w = 40;
-    this.h = 40;
-
-    this.x = random(windowWidth);
-    this.y = random(windowHeight);
-
     this.xSpeed = 1.4;
     this.ySpeed = 1.6;
 
@@ -145,6 +146,9 @@ class GeneratedShape {
     this.yDirection = 1;
 
     this.synth = new p5.MonoSynth();
+
+    this.points = [];
+    this.calculatePoints();
   }
 
   collide(shapes) {
@@ -210,7 +214,34 @@ class GeneratedShape {
      * Show the shape on the canvas.
      **/
     // TODO: use getSoundInfo function to influence how shape is drawn
-    ellipse(this.x, this.y, this.w, this.h);
+    this.createShape();
+  }
+
+  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);
+    }
+  }
+
+  /*function for drawing the shape on the screen*/
+  createShape() {
+    beginShape();
+
+    var lastItem = this.points.length - 1;
+    curveVertex(this.points[lastItem].x, this.points[lastItem].y);
+
+    for (var i = 0; i < this.points.length; i++){
+      curveVertex(this.points[i].x, this.points[i].y);
+    }
+
+    var firstItem = 0
+    curveVertex(this.points[firstItem].x, this.points[firstItem].y);
+
+    endShape(CLOSE);
   }
 }
 
@@ -219,9 +250,18 @@ 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);
 }
 
 function draw() {
@@ -229,6 +269,7 @@ function draw() {
    * The p5.js draw loop.
    **/
   background("#69D2E7");
+  translate(centerX, centerY);
 
   if (newSoundJustRecorded === true) {
     shapes.push(new GeneratedShape());
@@ -236,7 +277,7 @@ function draw() {
   }
 
   for (var shape of shapes) {
-    shape.move();
+    //shape.move();
     shape.display();
 
     if (shape.collide(shapes) === true) {