Katrina Hu – Project 10 – Sonic Sketch

sketch_project10

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project10_SonicSketch*/

var eyeSize1 = 10;
var mouthWidth1 = 30;
var eyeSize2 = 10;
var mouthWidth2 = 30;
var eyeSize3 = 10;
var mouthWidth3 = 30;
var eyeSize4 = 10;
var mouthWidth4 = 30;

var evilLaugh;
var womanLaugh;
var maniacalLaugh;
var childLaugh;

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

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

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

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


function setup() {
    createCanvas(480, 120);
}


function soundSetup() { 

}


function draw() {
    noStroke();
    //blue background
    fill(204, 224, 255);
    rect(0, 0, 120, 120);
    fill(74, 143, 255);
    ellipse(60, 60, 100, 100);
    fill(0);
    ellipse(40, 40, eyeSize1);
    ellipse(80, 40, eyeSize1);
    fill(255, 255, 255);
    ellipse(40, 38, eyeSize1 / 3);
    ellipse(80, 38, eyeSize1 / 3);
    fill(189, 100, 87);
    arc(60, 60, mouthWidth1, 30, 0, PI, CHORD);
    //yellow background
    fill(255, 252, 204);
    rect(120, 0, 120, 120);
    fill(255, 246, 82);
    ellipse(180, 60, 100, 100);
    fill(0);
    ellipse(160, 40, eyeSize2);
    ellipse(200, 40, eyeSize2);
    fill(255, 255, 255);
    ellipse(160, 38, eyeSize2 / 3);
    ellipse(200, 38, eyeSize2 / 3);
    fill(189, 100, 87);
    arc(180, 60, mouthWidth2, 30, 0, PI, CHORD);
    //pink background
    fill(255, 204, 204);
    rect(240, 0, 120, 120);
    fill(255, 90, 82);
    ellipse(300, 60, 100, 100);
    fill(0);
    ellipse(280, 40, eyeSize3);
    ellipse(320, 40, eyeSize3);
    fill(255, 255, 255);
    ellipse(280, 38, eyeSize3 / 3);
    ellipse(320, 38, eyeSize3 / 3);
    fill(189, 100, 87);
    arc(300, 60, mouthWidth3, 30, 0, PI, CHORD);
    //green background
    fill(222, 255, 214);
    rect(360, 0, 120, 120);
    fill(138, 255, 138);
    ellipse(420, 60, 100, 100);
    fill(0);
    ellipse(400, 40, eyeSize4);
    ellipse(440, 40, eyeSize4);
    fill(255, 255, 255);
    ellipse(400, 38, eyeSize4 / 3);
    ellipse(440, 38, eyeSize4 / 3);
    fill(189, 100, 87);
    arc(420, 60, mouthWidth4, 30, 0, PI, CHORD);
}

function mousePressed() {
    //play sound if pressed in blue box
    if(mouseX <= 120) {
        eyeSize1 = random(8, 15);
        mouthWidth1 = random(40, 55);
        evilLaugh.play();
    }
    //play sound if pressed in yellow box
    if(mouseX > 120 & mouseX <= 240) {
        eyeSize2 = random(8, 15);
        mouthWidth2 = random(40, 55);
        womanLaugh.play();
    }
    //play sound if pressed in pink box
    if(mouseX > 240 & mouseX <= 360) {
        eyeSize3 = random(8, 15);
        mouthWidth3 = random(40, 55);
        maniacalLaugh.play();
    }
    //play sound if pressed in green box
    if(mouseX > 360 & mouseX <= 480) {
        eyeSize4 = random(8, 15);
        mouthWidth4 = random(40, 55);
        childLaugh.play();
    }

}

The sounds play when you click on the various 4 faces. Each face has a different laugh, and the facial features change as you click on them as well.