diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js index 88d90f5..26af5e4 100644 --- a/voicegardens/static/voicegardens.js +++ b/voicegardens/static/voicegardens.js @@ -197,15 +197,32 @@ class GeneratedShape { /** * Move the shape around the canvas. **/ - this.x = this.x + this.xSpeed * this.xDirection; - this.y = this.y + this.ySpeed * this.yDirection; - - if (this.x > width - this.w || this.x < this.w) { - this.xDirection *= -1; - } + // this.x = this.x + this.xSpeed * this.xDirection; + // this.y = this.y + this.ySpeed * this.yDirection; + + // if (this.x > width - this.w || this.x < this.w) { + // this.xDirection *= -1; + // } + // if (this.y > height - this.h || this.y < this.h) { + // this.yDirection *= -1; + // } + + // TODO: make the polygon move ... + // for each vector in this.points, add/subtract/etc. + + for (var i = 0; i < this.points.length; i++) { + this.points[i].x = this.points[i].x + this.xSpeed * this.xDirection; + this.points[i].y = this.points[i].y + this.ySpeed * this.yDirection; + + if (this.points[i].x > width || this.points[i].x <= 0) { + this.xDirection *= -1; + console.log('this is the max width: ', width); + } - if (this.y > height - this.h || this.y < this.h) { - this.yDirection *= -1; + if (this.points[i].y > height || this.points[i].y <= 0) { + this.yDirection *= -1; + console.log('this is the max height: ', height); + } } } @@ -220,8 +237,8 @@ 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 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); } @@ -269,7 +286,7 @@ function draw() { * The p5.js draw loop. **/ background("#69D2E7"); - translate(centerX, centerY); + translate(centerX, centerX); if (newSoundJustRecorded === true) { shapes.push(new GeneratedShape()); @@ -277,7 +294,7 @@ function draw() { } for (var shape of shapes) { - //shape.move(); + shape.move(); shape.display(); if (shape.collide(shapes) === true) {