This code works(just copy and paste the sketch.js code below into the online p5.js editor: https://editor.p5js.org/ ) but every note plays emits a static-sound when the synth turns on. Can anyone suggest a way to eliminate the static sound? Maybe leave the synth running all the time and switching frequencies as notes are needed? Thank you.(to run this on your own editor you need p5.js and p5.sound.min.js files in your project folder.)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
style.CSS
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
sketch.js
// Removing Objects from Arrays
// Code! Programming with p5.js
// The Coding Train / Daniel Shiffman
// https://thecodingtrain.com/beginners/p5js/7.5-removing-objects-from-array.html
// https://youtu.be/tA_ZgruFF9k
// Main Sketch: https://editor.p5js.org/codingtrain/sketches/smC4Jedi
// Trail Sketch: https://editor.p5js.org/codingtrain/sketches/9Ve9S6Mx
var wave;
var playing = false;
let bubbles = [];
let time = .25;
let t = 1;
let waves = [];
let freqs = [392, 440, 392, 494, 523, 523, 330, 370, 392, 494, 587, 294, 294, 392, 440, 294, 330, 294, 294, 370, 392, 294, 330, 294, 294];
var freq;
let xs = [410, 500, 410, 600, 700, 700, 200, 350, 410, 700, 800, 100, 100, 410, 500, 100, 200, 100, 100, 350, 410, 100, 200, 100, 100];
let ys = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000, 1050, 1100, 1150, 1200, ];
function setup() {
createCanvas(1600, 2000);
wave = new p5.Oscillator();
for (let i = 0; i < 25; i++) {
let x = xs[i];
let y = ys[i];
let r = 24;
let b = new Bubble(x, y, r);
bubbles.push(b);
}
}
function mousePressed() {
for (let i = bubbles.length - 1; i >= 0; i--) {
if (bubbles[i].contains(mouseX, mouseY)) {
//bubbles.splice(i, 1);
wave.setType('sine');
wave.start();
wave.freq(freqs[i]);
wave.amp(1);
playing = true;
wave.stop(time);
waves.push(wave);
}
}
console.log(waves);
console.log(bubbles);
}
function draw() {
background(0);
strokeWeight(5);
//stroke(255,0,255);
fill(255, 255, 255);
rect(60, 1400, 90, 180);
rect(160, 1400, 90, 180);
rect(260, 1400, 90, 180);
rect(360, 1400, 90, 180);
rect(460, 1400, 90, 180);
rect(560, 1400, 90, 180);
rect(660, 1400, 90, 180);
rect(760, 1400, 90, 180);
rect(860, 1400, 90, 180);
stroke(0, 0, 255);
fill(0, 0, 0);
rect(10, 1300, 82, 180);
rect(110, 1300, 82, 180);
rect(310, 1300, 82, 180);
rect(410, 1300, 82, 180);
rect(510, 1300, 82, 180);
rect(710, 1300, 82, 180);
rect(810, 1300, 82, 180);
for (let i = 0; i < bubbles.length; i++) {
if (bubbles[i].contains(mouseX, mouseY)) {
bubbles[i].changeColor('magenta');
} else {
bubbles[i].changeColor(0);
}
bubbles[i].move();
bubbles[i].show();
}
}
class Bubble {
constructor(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
this.brightness = 0;
}
changeColor(bright) {
color = bright;
}
contains(px, py) {
let d = dist(px, py, this.x, this.y);
if (d < this.r) {
return true;
} else {
return false;
}
}
move() {
this.x = this.x;
this.y = this.y + 1.95;
}
show() {
stroke(255);
strokeWeight(4);
fill(color);
ellipse(this.x, this.y, this.r * 2);
}
}