Hi, I've created an interactive code using p5js, and its sound function.
It works on the editor, but somehow doesn't work the same in the live site.
This is the code:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
<script>
let mic;
let micLevel;
let bg;
var outerDiam = 0;
function setup() {
var cnv = createCanvas(windowWidth, windowHeight);
var x = (windowWidth - width) / 2;
var y = (windowHeight - height) / 2;
cnv.position(x, y);
background(255);
mic = new p5.AudioIn();
mic.start();
bg = createGraphics(width, height);
bg.background(230,20);
bg.noStroke();
for (let i = 0; i < 300000; i++) {
let x = random(width);
let y = random(height);
let s = noise(x*0.01, y*0.01)*2;
bg.fill(250, 20);
bg.rect(x, y, s, s);
}
}
function windowResized() {
centerCanvas();
}
function draw() {
randomSeed(0);
micLevel = mic.getLevel()
stroke(200, round(micLevel * 1000), round(micLevel*255));
strokeWeight(micLevel * 500);
noStroke();
blendMode(BLEND)
for (var i = 0; i < 100; i++){
var diam = outerDiam - 30 * i;
if (diam > 0){
var fade = map(diam, 0, width, 0, 255);
stroke(fade);
noFill();
ellipse(i*100, micLevel*20 + random(40)+height/2, diam);
}
}
outerDiam = outerDiam + 2;
image(bg,0,0);
}
</script>
</body>
I have also included the HTML in advanced section:
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/p5.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
