From 4df698440f28019b93c87d0106d223b5f0874dae Mon Sep 17 00:00:00 2001 From: Luke Murphy Date: Mon, 27 Jan 2020 11:55:19 +0100 Subject: [PATCH] Add nice shape generation --- voicegardens/static/voicegardens.js | 57 +++++++++++++++++++++++++---- 1 file changed, 49 insertions(+), 8 deletions(-) diff --git a/voicegardens/static/voicegardens.js b/voicegardens/static/voicegardens.js index c92cefc..88d90f5 100644 --- a/voicegardens/static/voicegardens.js +++ b/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) {