Nawon Choi— Project 10 Sonic Sketch

sketch

// Nawon Choi
// Section C
// nawonc@andrew.cmu.edu
// Project 10 Sonic Sketch

var s = 50;
// balloon coordinates
var balloonY = 200;
var balloonX = 200;
// balloon width & height
var bw;
var bh;

function preload() {
    p = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/pop-1.wav");
    p.setVolume(0.5);

    air = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/air.wav");
    air.setVolume(0.5);

    // top bgm
    bgm = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/background.wav");
    bgm.setVolume(0.5);
    // bottom bgm
    bgm2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bgm2.wav");
    bgm2.setVolume(0.5);

}


function setup() {
    createCanvas(400, 400);
    background(200);
    useSound();
}


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

    bgm.amp(0);
    bgm2.amp(0);
    bgm.play();
    bgm2.play();
}


function draw() {
    background("#FFDC73");
    fill("#FFBF00");
    rect(0, 200, 400, 200);


    // balloon
    strokeWeight(5);
    stroke("white");
    line(balloonX, height, balloonX, balloonY);


    bw = s + 25;
    bh = s + 50;
    noStroke();
    fill("#eb3713");
    ellipse(balloonX, balloonY, bw, bh);
    // triangle(100, 135, 110, 150, 90, 150);

}

function mousePressed() {
    // balloon grows when clicked
    var xdist = bw / 2;
    var ydist = bh / 2;
    if (mouseX > (balloonX - xdist) & mouseX < (balloonX + xdist)) {
        if (mouseY > (balloonY - ydist) && mouseY < (balloonY + ydist)) {
            if (s >= 50 && s < 100) {
                air.play();
                s += 10;
            } else if (s >= 100) {
                // balloon pops and resets
                p.play();
                s = 50;
            }
        }
    }

    // play different bgm based on top or bottom half click
    if (mouseY < 200) {
        bgm.amp(1);
        bgm2.amp(0);
        
    } else if (mouseY > 200) {
        bgm.amp(0);
        bgm2.amp(1);
    } 
}

Clicking on the red balloon will expand it, until it pops and returns back to its original size. Clicking on the top or bottom half will play different types of background music.

I had fun playing around with the whimsical visualizations and sounds, as well as the interactive visual and audio elements.