Danny Cho – SonicSketch Project 10

sketch

//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.