Gretchen Kupferschmid-Project 10 Sonic Sketch

sketch

//gretchen kupferschmid
//gkupfers@andrew.cmu.edu
//project 10
//section e

var banana;
var lick;
var mouth;
var eyes;


function preload() {
    // call loadImage() and loadSound() for all media files here
    banana = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/banana.wav");
    lick = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lick.wav");
    mouth = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mouth.wav");
    eyes = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/eyes.wav");
    
}


function setup() {
    createCanvas(480, 480);
    useSound();
    //======== call the following to use sound =========
   
}
function soundSetup() { // setup for audio generation
    banana.setVolume(0.5); 
    lick.setVolume(0.5); 
    mouth.setVolume(0.5); 
    eyes.setVolume(0.5); 
}



function draw() {
    background(241,198,217);
    
    
    //mouth lips
    noStroke();
    fill(255,0,0);
    beginShape();
    curveVertex(68,359);
    curveVertex(101,319);
    curveVertex(133,304);
    curveVertex(150,312);
    curveVertex(175,302);
    curveVertex(196,329);
    curveVertex(188,360);
    curveVertex(197,416);
    curveVertex(156,431);
    curveVertex(111,404);
    curveVertex(68,359);
    curveVertex(101,319);
    endShape();
    
    
    //mouth black
    fill(0);
    beginShape();
    curveVertex(87,357);
    curveVertex(100,350);
    curveVertex(112,337);
    curveVertex(130,328);
    curveVertex(146,327);
    curveVertex(170,320);
    curveVertex(181,330);
    curveVertex(178,363);
    curveVertex(142,363);
    curveVertex(87,357);
    curveVertex(100,350);
    endShape();
    
    //mouth toungue
    fill(240,110,270);
    noStroke();
    beginShape();
    curveVertex(84,357);
    curveVertex(127,358);
    curveVertex(176,365);
    curveVertex(177,408);
    curveVertex(133,398);
    curveVertex(84,357);
    curveVertex(127,358);
    endShape();
    
    
    
    //mouth teeth
    fill(255);
    beginShape();
    curveVertex(107,341);
    curveVertex(129,328);
    curveVertex(148,327);
    curveVertex(171,320);
    curveVertex(180,327);
    curveVertex(175,340);
    curveVertex(158,343);
    curveVertex(150,340);
    curveVertex(146,342);
    curveVertex(127,341);
    curveVertex(120,345);
    curveVertex(114,340);
    curveVertex(107,341);
    endShape();
    
    //banana
    fill(235,222,176);
    beginShape();
    curveVertex(325,39);
    curveVertex(325,45);
    curveVertex(326,10);
    curveVertex(336,9);
    curveVertex(347,39);
    curveVertex(363,77);
    curveVertex(352,90);
    curveVertex(332,89);
    curveVertex(325,39);
    endShape();
    
    
    //banana peel
    fill(240,201,66);
    beginShape();
    curveVertex(304,166);
    curveVertex(311,149);
    curveVertex(310,102);
    curveVertex(318,80);
    curveVertex(331,86);
    curveVertex(343,92);
    curveVertex(349,86);
    curveVertex(364,80);
    curveVertex(364,64);
    curveVertex(407,89);
    curveVertex(423,115);
    curveVertex(412,117);
    curveVertex(395,108);
    curveVertex(379,104);
    curveVertex(373,96);
    curveVertex(383,132);
    curveVertex(412,189);
    curveVertex(398,194);
    curveVertex(372,181);
    curveVertex(340,134);
    curveVertex(331,104);
    curveVertex(329,113);
    curveVertex(331,134);
    curveVertex(326,161);
    curveVertex(306,167);
    curveVertex(304,166);
    curveVertex(311,149);
    endShape();
    
    //banana dots
    fill(96,57,19);
    ellipse(359,155,6,6);
    ellipse(366,160,4,5);
    ellipse(363,165,3,5.5);
    
    //ice cream cone
    fill(166,124,82);
    triangle(337,437,290,310,384,310);
    
    //ice cream cone shadow
    fill(124,88,53);
    ellipse(337,320,80, 20);
    
    //ice cream
    fill(240,110,170);
    beginShape();
    curveVertex(275,296);
    curveVertex(283,279);
    curveVertex(299.270);
    curveVertex(304,259);
    curveVertex(317,255);
    curveVertex(321,240);
    curveVertex(330,236);
    curveVertex(336,220);
    curveVertex(349,210);
    curveVertex(347,226);
    curveVertex(357,234);
    curveVertex(362,245);
    curveVertex(364,247);
    curveVertex(378,256);
    curveVertex(362,268);
    curveVertex(394,292);
    curveVertex(397,311);
    curveVertex(352,319);
    curveVertex(351,314);
    curveVertex(293,316);
    curveVertex(277,304);
    curveVertex(275,296);
    curveVertex(283,279);
    endShape();
    
    //eye line
    noFill();
    stroke(0);
    strokeWeight(4);
    beginShape();
    curveVertex(59,129);
    curveVertex(97,102);
    curveVertex(150,99);
    curveVertex(184,124);
    curveVertex(182,128);
    curveVertex(152,145);
    curveVertex(100,147);
    curveVertex(60,132);
    curveVertex(59,129);
    curveVertex(97,102);
    curveVertex(150,99);
    endShape();
    
    //eye interior
    noStroke();
    fill(0,174,239);
    ellipse(126,124,50,50);
    fill(0);
    ellipse(133,119,14,14);
    
    //eyelashes
    strokeWeight(4);
    stroke(0);
    line(65,123,52,108);
    line(75,114,64,95);
    line(94,104,87,86);
    line(108,98,105,82);
    line(129,95,130,77);
    line(150,99,155,81);
    line(163,107,178,88);
    line(178,118,192,102);
 
}

function mousePressed(){
    if(mouseX > 305 & mouseX < 423 && mouseY > 7.2 && mouseY < 195){
        banana.play();
    }
    if (mouseX > 275 & mouseX < 398 && mouseY > 211 && mouseY < 436){
        lick.play();
    }
    if (mouseX > 70 & mouseX < 196 && mouseY > 302 && mouseY < 432){
        mouth.play();
    }
    if (mouseX > 52 & mouseX < 192 && mouseY > 76 && mouseY < 150){
        eyes.play();
    }
}

I wanted to play with icons and the sounds that could possibly go with these when clicked on. I could see myself implementing this into my website later on so that sounds can accompany my illustrations.