Sarah Choi – Project 10 – Interactive Sonic Sketch

project-10

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-10-Interactive-Sonic-Sketch

//spiral
var angle = 0;
var bright = 255;
var n = 0;
var m = 0;
var x = 8 * n;
var y = 8 * m;

function preload() {
    // call loadImage() and loadSound() for all media files here
    sound1 = loadSound("birds.wav");
    sound2 = loadSound("thunder.wav");
    //sound3 = loadSound("springday.wav");
    sound4 = loadSound("lightshower.wav");
    sound1.setVolume(0.5);
    sound2.setVolume(0.5);
    //sound3.setVolume(0.5);
    sound4.setVolume(0.5);
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("Interactive Sonic Sketch");

    //======== call the following to use sound =========
    useSound();

    
    rectMode(CENTER);
}

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.Oscillator();
    osc.freq(880);
    osc.amp(0.1);
    osc.start();
}

//--------------------------------------------------------------------

function draw() {
    background(0);
    noStroke();
    if (mouseIsPressed) {
        bright = 255;
    }
    background(bright);
    bright = bright - 5;

    fill(255, 0, 0);
    var m = max(min(mouseX, 200), 20);
    var size = m * 200.0 / 250.0;
    rect(10 + m * 150.0 / 350.0, 400.0,
         size, size);
    fill(0, 0, 255);
    size = 200 + size;
    circle(150, 50 + m * 150 / 250.0,
         size / 2, size / 2);

    push();
    fill(0, 255, 0);
    ellipseMode(CORNER);
    var n = max(min(mouseX, 300), 200);
    var size2 = n * 200.0 / 400.0;
    ellipse(400 , size2, size2 * 2, size2 * 4);
    pop();
    
    if (mouseIsPressed) {
        fill(255, 255, 0);
        noStroke();
        strokeWeight(5);
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(100, 0, 150, 150, 175, 150);
        quad(175, 150, 150, 150, 200, 200, 250, 200);
        triangle(200, 200, 250, 200, 150, 450);
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(300, 0, 275, 150, 250, 150);
        quad(275, 150, 250, 150, 300, 200, 350, 200);
        triangle(300, 200, 350, 200, 250, 450);
        pop();
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(25, 0, 0, 50, -25, 50);
        quad(0, 50, -25, 50, 45, 100, 75, 100);
        triangle(45, 100, 75, 100, 25, 250);
        pop();
        angle = angle + 5;

        sound2.play();
        sound4.play();
    }

    if (x <= width) {
        n += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
    else { 
        m += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }

    sound1.play();
    //sound3.play();
}

I chose these sounds as I thought they gave a good representation of Pittsburgh when it goes from being a nice spring day that suddenly comes with thunderstorms and a light rain shower.