diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js index 183d6cf..b549d02 100644 --- a/voicegardens/static/voicegardens.js +++ b/voicegardens/static/voicegardens.js @@ -20,7 +20,8 @@ var shapes = []; var stopButton; var canvasWidth; var canvasHeight; -var timer; +var timer = 0; +var secondTick = false; function record() { /** @@ -170,6 +171,9 @@ class GeneratedShape { this.destX = random(canvasWidth); this.destY = random(canvasHeight); + this.centerX = centerX; + this.centerY = centerY; + this.initialise(); } @@ -243,9 +247,13 @@ class GeneratedShape { for (let i = 0; i < this.edges; i++) { this.startXs[i] = - centerX + cos(radians(this.rotAngle) * i) * this.radius + this.randomX; + this.centerX + + cos(radians(this.rotAngle) * i) * this.radius + + this.randomX; this.startYs[i] = - centerY + sin(radians(this.rotAngle) * i) * this.radius + this.randomY; + this.centerY + + sin(radians(this.rotAngle) * i) * this.radius + + this.randomY; this.rotAngle += 360 / this.edges; } @@ -261,8 +269,8 @@ class GeneratedShape { /** * Move the shape vectors. **/ - this.deltaX = this.destX - centerX; - this.deltaY = this.destY - centerY; + this.deltaX = this.destX - this.centerX; + this.deltaY = this.destY - this.centerY; this.deltaX *= this.springing; this.deltaY *= this.springing; @@ -270,8 +278,8 @@ class GeneratedShape { this.accelX += this.deltaX; this.accelY += this.deltaY; - centerX += this.accelX; - centerY += this.accelY; + this.centerX += this.accelX; + this.centerY += this.accelY; this.accelX *= this.damping; this.accelY *= this.damping; @@ -318,11 +326,16 @@ function draw() { newSoundJustRecorded = false; } + if (millis() >= 2000 + timer) { + secondTick = true; + timer = millis(); + } + for (var shape of shapes) { shape.draw(); shape.move(); - if (millis() >= 500 + timer) { + if (secondTick) { shape.destX = random(canvasWidth); shape.destY = random(canvasHeight); } @@ -331,6 +344,5 @@ function draw() { shape.sound(); } } - - timer = millis(); + secondTick = false; }