Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2024-12-26 11:33:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

simplifying example by removing FunkyShape class

Browse source
This commit is contained in:
Yotam Mann 2020-07-19 10:19:01 -07:00
parent c4578ce047
commit 93cec01dd4
1 changed files with 13 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
examples/funkyShape.html
View file

@ -30,48 +30,6 @@
<script type="text/javascript">
new p5((p5) => {
class FunkyShape {
/*
FunkyShape init gives initial and offset values for
the perlin noise functions in update.
Giving different initial values ensures that
each funky shape follows its own funky path
*/
init(xInc, yInc, xOff, yOff, radius) {
this.xInc = xInc;
this.yInc = yInc;
this.xOff = xOff;
this.yOff = yOff;
this.radius = radius;
this.xPos = 0;
this.yPos = 0;
}
// updates the x, y, and radius values of the shape
update(envelope) {
this.xPos = p5.noise(this.xOff) * p5.width;
this.yPos = p5.noise(this.yOff) * p5.height;
this.xOff += this.xInc;
this.yOff += this.yInc;
this.sRadius = this.radius * envelope;
return {
xPos: this.xPos,
yPos: this.yPos,
radius: this.sRadius
};
};
}
// using our FunkyShape class
// to create a funkyCircle class
const funkyCircle = new FunkyShape();
// creating an empty array
const funkySquare = [];
// and populating it with 3 FunkyShapes
for (let i = 0; i < 3; i++) {
funkySquare[i] = new FunkyShape();
}
p5.setup = () => {
// create a canvas width and height of the screen
// document.querySelector('canvas')
@ -80,15 +38,6 @@
p5.fill(255);
p5.strokeWeight(1);
p5.rectMode(p5.CENTER);
// initializing our funky circle
funkyCircle.init(0.01, 0.02, 0.0, 0.0, 400);
// initializing our squares with random values
// to ensure they don't follow the same path
for (let i = 0; i < 3; i++) {
const xInc = Math.random() / 10;
const yInc = Math.random() / 10;
funkySquare[i].init(xInc, yInc, 0, 0, 800);
}
};
let phase = 0;
@ -112,15 +61,19 @@
// not be standing and looks more dynamic
phase += 1;
// updating circle and square positions with
// bass and bleep envelope values
const circlePos = funkyCircle.update(bassEnvelope.value);
// circlePos returns x and y positions as an object
p5.ellipse(circlePos.xPos, circlePos.yPos, circlePos.radius, circlePos.radius);
// bass envelop visualizer
const bassRadius = p5.height * bassEnvelope.value;
p5.stroke("red");
for (let i = 0; i < 3; i++) {
const squarePos = funkySquare[i].update(bleepEnvelope.value);
p5.rect(squarePos.xPos, squarePos.yPos, squarePos.radius, squarePos.radius);
}
const bassX = p5.noise(p5.millis() / 1000) * p5.width;
const bassY = p5.noise(phase / 100) * p5.height;
p5.ellipse(bassX, bassY, bassRadius, bassRadius);
// beep envelope viz
const beepX = p5.noise(p5.millis() / 500) * p5.width;
const beepY = p5.noise(phase / 50) * p5.height;
const beepSize = p5.height * bleepEnvelope.value;
p5.stroke("green");
p5.rect(beepX, beepY, beepSize, beepSize);
};
}, document.querySelector("#content"));