//Danny Cho
//changjuc@andrew.cmu.edu
//Section A
//Project 10
var px = [];
var py = [];
var div = 10;
var noiseOn = false;
var myLeftTop;
var myRightTop;
var myLeftBot;
var myRightBot;
function preload() {
myLeftTop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/LeftTop-1.wav");
myRightTop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/RightTop.wav");
myLeftBot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/LeftBot.wav");
myRightBot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/RightBot.wav");
// call loadImage() and loadSound() for all media files here
}
function soundSetup() { // setup for audio generation
// setting initial volume
myLeftTop.setVolume(0.1);
myLeftBot.setVolume(0.1);
myRightTop.setVolume(0.1);
myRightBot.setVolume(0.1);
}
function setup() {
createCanvas(400, 400); //create canvas
for (var i = 0; i < div; i++) {
px.push(i * (height / div)); //create array for creating grid
py.push(i * (height / div));
}
useSound();
}
function mousePressed() { //play when mouse is pressed
myLeftTop.play();
myLeftBot.play();
myRightTop.play();
myRightBot.play();
}
function draw() {
background(0);
stroke(255);
strokeWeight(0.5);
//creates the grid
for (var i = 0; i < px.length; i++) {
line(px[i], 0, px[i], height);
line(0, py[i], width, py[i]);
}
//draws circles on the grid
for (var i = 0; i < px.length - 1; i++) {
for(var j = 0; j < px.length - 1; j++) {
fill(100, 255/(i), 255/j);
//circles resond to the mouse position
if (dist(mouseX, mouseY, px[i+1], py[j+1]) < 20) {
ellipse(px[i+1], py[j+1], 50, 50);
}
else {
strokeWeight(0);
ellipse(px[i+1], py[j+1],
1300/dist(mouseX, mouseY, px[i+1], py[j+1]),
1300/dist(mouseX, mouseY, px[i+1], py[j+1]));
}
}
}
//the volume of each soundtrack depends on the distance of the mouse to the corners
myLeftTop.setVolume((dist(mouseX, mouseY, 0, 0))^2/2500);
myLeftBot.setVolume((dist(mouseX, mouseY, 0, height))^2/2500);
myRightTop.setVolume((dist(mouseX, mouseY, width, 0))^2/2500);
myRightBot.setVolume((dist(mouseX, mouseY, width, height))^2/2500);
}
I made an interactive sound grid where the position of your mouse determines which of the soundtracks are being played the loudest. The ellipses also change colors and scales accordingly. There is unbalance due to innate volume difference in the sound files. The sound files are all 120bpm to match the beat, but due to the volume imbalance, it’s hard to be aware of individual sounds.