diff --git a/vocoder/static/vocoder.js b/vocoder/static/vocoder.js index 21a4ccd..a068af4 100644 --- a/vocoder/static/vocoder.js +++ b/vocoder/static/vocoder.js @@ -8,8 +8,10 @@ // var archiveUrl = serverUrl + "/add-to-archive/"; +var canvasColour = "white"; var canvasHeight = 500; var canvasWidth = 500; +var frameRate = 30; var microphone; var newSoundJustRecorded = false; var playButton; @@ -109,21 +111,40 @@ class GeneratedShape { /** * Initialise the new shape. **/ - this.displayed = false; + this.w = 10; + this.h = 10; + + this.x = random(width); + this.y = random(height); + + this.xSpeed = 1.3; + this.ySpeed = 0.7; + + this.xDirection = 1; // left or right + this.yDirection = 1; // top or bottom } move() { /** - * Move the shape in some direction. + * 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; + } + + if (this.y > height - this.h || this.y < this.h) { + this.yDirection *= -1; + } } display() { /** * Show the shape on the canvas. **/ - ellipse(random(canvasWidth), random(canvasHeight), 10, 10); // TODO: experimenting for now ... - this.displayed = true; + ellipse(this.x, this.y, this.w, this.h); // TODO: experimenting for now ... } } @@ -133,12 +154,15 @@ function setup() { **/ createCanvas(canvasWidth, canvasHeight); // TODO: experimenting for now ... setupRecording(); + frameRate(frameRate); } function draw() { /** * The p5.js draw loop. **/ + background(canvasColour); + if (newSoundJustRecorded === true) { shapes.push(new GeneratedShape()); newSoundJustRecorded = false; @@ -146,8 +170,7 @@ function draw() { for (var i = 0; i < shapes.length; i++) { var shape = shapes[i]; - if (!shape.displayed) { - shape.display(); - } + shape.move(); + shape.display(); } }