Integrate soft body dynamics

voicegardens/static/voicegardens.js

@@ -24,7 +24,7 @@ var centerX;
 var centerY;
 var numberOfEdges;
 var radius;
-var angle;
+var rotAngle;
 
 function record() {
   /**
@@ -141,13 +141,41 @@ class GeneratedShape {
      **/
     this.synth = new p5.MonoSynth();
 
-    this.points = [];
-    this.calculatePoints();
-
     this.opacity = 0;
     this.colour = this.chooseColour();
 
-    this.curveTightness = -5;
+    this.accelX = 0.0;
+    this.accelY = 0.0;
+    this.deltaX = 0.0;
+    this.deltaY = 0.0;
+    this.springing = 0.0009;
+    this.damping = 0.98;
+    this.organicConstant = 1.0;
+
+    this.startXs = [];
+    this.startYs = [];
+    this.xs = [];
+    this.ys = [];
+    this.angle = [];
+    this.frequency = [];
+
+    this.initialise();
+  }
+
+  initialise() {
+    /**
+     * Initialise all movement related arrays.
+     **/
+    for (let i = 0; i < numberOfEdges; 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++) {
+      this.frequency[i] = random(5, 12);
+    }
   }
 
   collide(shapes) {
@@ -166,17 +194,9 @@ class GeneratedShape {
     return;
   }
 
-  move() {
-    /**
-     * Move the shape around the canvas.
-     **/
-    // TODO: implement once again
-    return;
-  }
-
   fadein() {
     /**
-     * Fade intro the shape.
+     * Fade-in the shape using alpha values.
      **/
     if (this.opacity < 256) {
       let currentAlpha = this.colour._getAlpha();
@@ -199,55 +219,62 @@ class GeneratedShape {
     ];
     let index = floor(random(0, colourChoices.length));
     let chosenColour = colourChoices[index];
-
     chosenColour.setAlpha(this.opacity);
-
     return chosenColour;
   }
 
-  display() {
+  draw() {
     /**
-     * Show the shape on the canvas.
+     * Draw the shape vectors.
      **/
-    // TODO: use getSoundInfo function to influence how shape is drawn
-    if (this.opacity != 256) {
-      this.fadein();
-    }
+    if (this.opacity != 256) this.fadein();
     fill(this.colour);
-    this.createShape();
+
+    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;
     }
 
-  calculatePoints() {
-    /**
-     * Calculate the vectors 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);
+    curveTightness(-5);
+    beginShape();
+    for (let i = 0; i < numberOfEdges; i++) {
+      curveVertex(this.xs[i], this.ys[i]);
+    }
+    for (let i = 0; i < numberOfEdges - 1; i++) {
+      curveVertex(this.xs[i], this.ys[i]);
     }
+    endShape(CLOSE);
   }
 
-  createShape() {
+  move() {
     /**
-     * Draw curved vectors of the shape.
+     * Move the shape vectors.
      **/
-    curveTightness(this.curveTightness);
 
-    beginShape();
+    this.deltaX = mouseX - centerX;
+    this.deltaY = mouseY - centerY;
 
-    var lastItem = this.points.length - 1;
-    curveVertex(this.points[lastItem].x, this.points[lastItem].y);
+    this.deltaX *= this.springing;
+    this.deltaY *= this.springing;
+    this.accelX += this.deltaX;
+    this.accelY += this.deltaY;
 
-    for (var i = 0; i < this.points.length; i++) {
-      curveVertex(this.points[i].x, this.points[i].y);
-    }
+    centerX += this.accelX;
+    centerY += this.accelY;
 
-    var firstItem = 0;
-    curveVertex(this.points[firstItem].x, this.points[firstItem].y);
+    this.accelX *= this.damping;
+    this.accelY *= this.damping;
 
-    endShape(CLOSE);
+    this.organicConstant = 1 - (abs(this.accelX) + abs(this.accelY)) * 0.1;
+
+    for (let i = 0; i < numberOfEdges; i++) {
+      this.xs[i] =
+        this.startXs[i] + sin(radians(this.angle[i])) * (this.accelX * 2);
+      this.ys[i] =
+        this.startYs[i] + sin(radians(this.angle[i])) * (this.accelY * 2);
+      this.angle[i] += this.frequency[i];
+    }
   }
 }
 
@@ -264,8 +291,8 @@ function setup() {
   centerY = windowHeight / 2;
 
   numberOfEdges = 5;
-  angle = radians(180 / numberOfEdges);
-  radius = random(30, 50);
+  radius = 45;
+  rotAngle = -90;
 }
 
 function draw() {
@@ -273,7 +300,6 @@ function draw() {
    * The p5.js draw loop.
    **/
   background("#69D2E7");
-  translate(centerX, centerY);
   blendMode(BLEND);
   smooth();
   noStroke();
@@ -284,7 +310,7 @@ function draw() {
   }
 
   for (var shape of shapes) {
-    shape.display();
+    shape.draw();
     shape.move();
     if (shape.collide(shapes) === true) {
       shape.sound();