Project 10-2020 Election Highlights Sonic Story

function preload() {
    // load sounds for sound story
    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flybuzz.wav");
    talk = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/imspeaking.wav");
    president = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/presidential.wav");
    banjo = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/banjo.wav");
    loser = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/loser.wav");
}
//set values for brownian motion of fly
var Y = 0;
var X = 5;
var noiseParam= 0;
var noiseStep= 0.1;

function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
    imageMode(CENTER);
    frameRate(14);
}
function soundSetup() { // setup for audio generation
    //set volumes for sounds
    buzz.setVolume(0.1);
    talk.setVolume(0.5);
    president.setVolume(0.5);
    banjo.setVolume(1.0);
    loser.setVolume(0.4);

}
function Joe() {
    background(0,86,217);
    //draw joe biden 
    noStroke();
    //shirt
    fill(245);
    rect(145,414,200,100);
    //neck
    fill(225,176,161);
    beginShape();
    curveVertex(162,314);
    curveVertex(161,368);
    curveVertex(224,438);
    curveVertex(272,437);
    curveVertex(331,375);
    curveVertex(331,321);
    endShape(CLOSE);
    //face
    fill(250,218,205)
    beginShape();
    curveVertex(180,53);
    curveVertex(153,84);
    curveVertex(155,119);
    curveVertex(152,160);
    curveVertex(142,213);
    curveVertex(172,247);
    curveVertex(218,255);
    curveVertex(258,261);
    curveVertex(291,270);
    curveVertex(361,270);
    curveVertex(369,254);
    curveVertex(371,212);
    curveVertex(363,139);
    curveVertex(360,90);
    curveVertex(344,65);
    curveVertex(252,48);
    endShape(CLOSE);
    //left ear
    fill(225,176,161);
    beginShape();
    curveVertex(122,181);
    curveVertex(112,191);
    curveVertex(105,214);
    curveVertex(123,257);
    curveVertex(153,225);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(372,206);
    curveVertex(393,230);
    curveVertex(402,239);
    curveVertex(395,267);
    curveVertex(358,302);
    curveVertex(369,250);
    endShape(CLOSE);
    //frame
    noFill();
    stroke(200)
    strokeWeight(3)
    line(204,173,303,179);
    arc(252,210,44,44,radians(200), 0)
    //left lens
    strokeWeight(4)
    fill(29,31,34,230)
    beginShape();
    curveVertex(174,172);
    curveVertex(159,190);
    curveVertex(157,221);
    curveVertex(181,242);
    curveVertex(218,233);
    curveVertex(245,198);
    curveVertex(231,175);
    curveVertex(202,171);
    endShape(CLOSE);
    //right lens
    beginShape();
    curveVertex(274,181);
    curveVertex(262,197);
    curveVertex(277,226);
    curveVertex(309,250);
    curveVertex(334,245);
    curveVertex(348,220);
    curveVertex(345,192);
    curveVertex(326,181);
    curveVertex(303,177);
    endShape(CLOSE);
    //hair
    noStroke();
    fill(255);
    beginShape();
    curveVertex(205,24);
    curveVertex(167,43);
    curveVertex(141,73);
    curveVertex(125,112);
    curveVertex(119,139);
    curveVertex(115,165);
    curveVertex(117,185);
    curveVertex(137,198);
    curveVertex(143,204);
    curveVertex(164,92);
    curveVertex(183,62);
    curveVertex(213,52);
    curveVertex(251,49);
    curveVertex(331,67);
    curveVertex(357,100);
    curveVertex(368,223);
    curveVertex(383,215);
    curveVertex(391,165);
    curveVertex(379,113);
    curveVertex(371,73);
    curveVertex(337,44);
    curveVertex(305,27);
    curveVertex(251,26);
    endShape(CLOSE);
    //mask
    fill(0);
    beginShape();
    curveVertex(129,185);
    curveVertex(148,211);
    curveVertex(167,233);
    curveVertex(190,243);
    curveVertex(223,245);
    curveVertex(240,244);
    curveVertex(277,255);
    curveVertex(324,263);
    curveVertex(362,257);
    curveVertex(385,222);
    curveVertex(391,228);
    curveVertex(373,255);
    curveVertex(365,287);
    curveVertex(361,327);
    curveVertex(334,353);
    curveVertex(312,375);
    curveVertex(284,400);
    curveVertex(241,413);
    curveVertex(200,389);
    curveVertex(167,342);
    curveVertex(145,310);
    curveVertex(122,285);
    curveVertex(119,257);
    curveVertex(135,226);
    curveVertex(125,193);
    endShape(CLOSE);
    //left shoulder
    fill(43,43,55);
    beginShape();
    curveVertex(164,347);
    curveVertex(152,412);
    curveVertex(161,478);
    curveVertex(0,478);
    curveVertex(0,423);
    curveVertex(108,395);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(335,362);
    curveVertex(343,418);
    curveVertex(335,480);
    curveVertex(399,480);
    curveVertex(438,480);
    curveVertex(480,480);
    curveVertex(480,447);
    curveVertex(394,419);
    endShape(CLOSE);  
    //left collar
    fill(255);
    beginShape();
    curveVertex(159,345);
    curveVertex(234,437);
    curveVertex(187,479);
    curveVertex(157,479);
    curveVertex(145,407);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(335,358);
    curveVertex(355,406);
    curveVertex(347,480);
    curveVertex(308,480);
    curveVertex(267,434);
    endShape(CLOSE);
    //tie knot
    fill(50,50,74);
    beginShape();
    curveVertex(233,430);
    curveVertex(219,445);
    curveVertex(223,480);
    curveVertex(263,480);
    curveVertex(289,454);
    curveVertex(266,424);
    endShape(CLOSE);
}

//draw mike pence
function Mike(){
    background(248,95,90);
    noStroke();
    //shirt
    beginShape();
    fill(241, 237, 234);
    curveVertex(218,346);
    curveVertex(187,374);
    curveVertex(171,395);
    curveVertex(179,479);
    curveVertex(278,479);
    curveVertex(295,391);
    curveVertex(261,351);
    endShape(CLOSE);
    //left shoulder
    fill(0);
    beginShape();
    vertex(172,268);
    vertex(127,282);
    vertex(87,298);
    vertex(44,323);
    vertex(0,331);
    vertex(0,479);
    vertex(193,479);
    vertex(172,380);
    vertex(160,300);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    vertex(325,286);
    vertex(334,294);
    vertex(351,312);
    vertex(396,330);
    vertex(448,354);
    vertex(479,368);
    vertex(479,479);
    vertex(258,479);
    vertex(289,402);
    vertex(316,304);
    endShape(CLOSE);
    //left ear
    fill(236, 166, 133);
    beginShape();
    curveVertex(185,145);
    curveVertex(175,127);
    curveVertex(167,133);
    curveVertex(165,149);
    curveVertex(165,177);
    curveVertex(165,201);
    curveVertex(168,214);
    curveVertex(175,217);
    endShape(CLOSE);
    //right ear
    beginShape();
    curveVertex(363,203);
    curveVertex(378,194);
    curveVertex(388,198);
    curveVertex(387,214);
    curveVertex(371,231);
    curveVertex(359,252);
    curveVertex(349,267);
    curveVertex(339,272);
    curveVertex(331,263);
    endShape(CLOSE);
    //neck
    beginShape();
    curveVertex(181,251);
    curveVertex(172,288);
    curveVertex(183,309);
    curveVertex(195,323);
    curveVertex(223,353);
    curveVertex(242,358);
    curveVertex(279,342);
    curveVertex(309,317);
    curveVertex(317,290);
    endShape(CLOSE);
    //right collar
    fill(255)
    beginShape();
    curveVertex(329,279);
    curveVertex(282,335);
    curveVertex(260,347);
    curveVertex(243,355);
    curveVertex(261,376);
    curveVertex(273,407);
    curveVertex(281,427);
    curveVertex(313,362);
    curveVertex(323,315);
    endShape(CLOSE);
    //face
    fill(244, 180, 150)
    beginShape();
    curveVertex(232,81);
    curveVertex(213,114);
    curveVertex(198,145);
    curveVertex(185,166);
    curveVertex(177,199);
    curveVertex(175,237);
    curveVertex(181,279);
    curveVertex(193,307);
    curveVertex(211,328);
    curveVertex(238,340);
    curveVertex(273,335);
    curveVertex(299,321);
    curveVertex(322,291);
    curveVertex(341,257);
    curveVertex(360,214);
    curveVertex(361,187);
    curveVertex(362,143);
    curveVertex(357,101);
    curveVertex(335,116);
    curveVertex(289,103);
    curveVertex(255,87);
    endShape(CLOSE);
    //right hair
    fill(241, 237, 234);
    beginShape();
    curveVertex(363,74);
    curveVertex(380,95);
    curveVertex(387,130);
    curveVertex(375,171);
    curveVertex(357,217);
    curveVertex(356,122);
    curveVertex(356,104);
    endShape(CLOSE);
    //left hair
    fill(255);
    beginShape();
    curveVertex(254,36);
    curveVertex(219,54);
    curveVertex(199,84);
    curveVertex(190,112);
    curveVertex(184,136);
    curveVertex(180,183);
    curveVertex(209,132);
    curveVertex(233,87);
    curveVertex(277,100);
    curveVertex(323,114);
    curveVertex(341,116);
    curveVertex(358,100);
    curveVertex(363,79);
    curveVertex(352,60);
    curveVertex(327,40);
    curveVertex(295,30);
    endShape(CLOSE);
    //collar
    beginShape();
    curveVertex(177,255);
    curveVertex(165,273);
    curveVertex(162,307);
    curveVertex(170,357);
    curveVertex(178,406);
    curveVertex(181,418);
    curveVertex(209,376);
    curveVertex(231,354);
    curveVertex(195,320);
    curveVertex(177,289);
    endShape(CLOSE);    
    //tie bottom
    fill(184, 14, 18);
    beginShape();
    curveVertex(223,394);
    curveVertex(209,430);
    curveVertex(196,478);
    curveVertex(261,479);
    curveVertex(257,433);
    curveVertex(239,392);
    endShape(CLOSE);
    //tie knot
    fill(229, 25, 30);
    beginShape();
    curveVertex(225,354);
    curveVertex(201,379);
    curveVertex(221,398);
    curveVertex(246,402);
    curveVertex(264,380);
    curveVertex(256,360);
    endShape(CLOSE);
}

function Kamala() {
    background(0,180,255);
    //draw kamala
    //hair behind face
    fill(43,32,22);
    beginShape();
    curveVertex(378,86);
    curveVertex(418,127);
    curveVertex(447,218);
    curveVertex(452,272);
    curveVertex(429,304);
    curveVertex(429,326);
    curveVertex(419,343);
    curveVertex(395,345);
    curveVertex(398,365);
    curveVertex(433,364);
    curveVertex(429,388);
    curveVertex(399,398);
    curveVertex(424,434);
    curveVertex(386,454);
    curveVertex(396,430);
    curveVertex(371,407);
    curveVertex(345,384);
    curveVertex(341,350);
    endShape(CLOSE);
    beginShape();
    fill(164,122,97);
    curveVertex(199,280);
    curveVertex(164,333);
    curveVertex(224,479);
    curveVertex(343,479);
    curveVertex(363,330);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    fill(49,46,50);
    curveVertex(357,411);
    curveVertex(354,444);
    curveVertex(328,480);
    curveVertex(480,480);
    curveVertex(480,346);
    curveVertex(361,327);
    curveVertex(363,376)
    endShape(CLOSE);
    //left shoulder
    fill(59,58,64);
    beginShape();
    curveVertex(193,308);
    curveVertex(199,393);
    curveVertex(231,480);
    curveVertex(0,480);
    curveVertex(0,367);
    curveVertex(91,339);
    endShape(CLOSE);
    //necklace
    push();
    translate(10,25)
    fill(255);
    circle(345,343,15)
    circle(218,415,15);
    circle(221,429,15);
    circle(226,438,15);
    circle(233,449,15);
    circle(349,368,15);
    circle(349,381,15);
    circle(347,396,15);
    circle(344,407,15);
    circle(340,415,15);
    circle(337,428,15);
    circle(329,440,15);
    circle(321,450,15);
    circle(316,460,15);
    circle(350,355,15);
    pop();
    //face
    noStroke();
    fill(194,150,121)
    beginShape();
    curveVertex(353,71);
    curveVertex(393,113);
    curveVertex(415,177);
    curveVertex(405,204);
    curveVertex(414,244);
    curveVertex(401,281);
    curveVertex(376,331);
    curveVertex(369,359);
    curveVertex(341,366);
    curveVertex(305,350);
    curveVertex(235,298);
    curveVertex(219,179);
    curveVertex(238,59);
    endShape(CLOSE);
    //hair
    fill(59,44,23);
    beginShape();
    curveVertex(313,49);
    curveVertex(285,40);
    curveVertex(215,56);
    curveVertex(155,113);
    curveVertex(118,203);
    curveVertex(106,277);
    curveVertex(107,297);
    curveVertex(124,319);
    curveVertex(95,334);
    curveVertex(147,337);
    curveVertex(163,359);
    curveVertex(191,382);
    curveVertex(169,389);
    curveVertex(145,367);
    curveVertex(157,387);
    curveVertex(196,399);
    curveVertex(194,427);
    curveVertex(153,433);
    curveVertex(126,419);
    curveVertex(156,449);
    curveVertex(193,449);
    curveVertex(233,427);
    curveVertex(248,392);
    curveVertex(267,370);
    curveVertex(254,337);
    curveVertex(233,328);
    curveVertex(247,312);
    curveVertex(251,247);
    curveVertex(254,217);
    curveVertex(297,203);
    curveVertex(336,153);
    curveVertex(365,121);
    curveVertex(387,91);
    curveVertex(366,72);
    curveVertex(339,56);
    endShape(CLOSE);
}
//draw the fly 
function Fly(x,y) {
        push();
        translate(200,100);
        stroke(154, 137, 120);
        strokeWeight(2);
        fill(0);
        circle(x, y, 12);   //draw fly body
        pop();    
    }
function Trump() {
    background(241,59,58);
    //trump
    //left side hair
    fill(245,234,176);
    beginShape();
    curveVertex(108,100);
    curveVertex(85,148);
    curveVertex(89,204);
    curveVertex(97,237);
    curveVertex(92,295);
    curveVertex(107,325);
    curveVertex(133,339);
    curveVertex(138,228);
    curveVertex(140,160);
    curveVertex(159,124);
    curveVertex(151,84);
    endShape(CLOSE);
    //right ear
    fill(245,152,93)
    beginShape();
    curveVertex(381,163);
    curveVertex(398,217);
    curveVertex(395,271);
    curveVertex(383,302);
    curveVertex(368,308);
    curveVertex(365,247);
    endShape(CLOSE);
    //left shoulder
    fill(14,16,47);
    beginShape();
    curveVertex(155,406);
    curveVertex(188,480);
    curveVertex(0,480);
    curveVertex(0,422);
    curveVertex(48,381);
    curveVertex(136,341);
    endShape(CLOSE);
    //right shoulder
    beginShape();
    curveVertex(346,375);
    curveVertex(382,376);
    curveVertex(417,387);
    curveVertex(463,390);
    curveVertex(480,397);
    curveVertex(480,480);
    curveVertex(324,480);
    curveVertex(336,408);
    endShape(CLOSE);
    //left collar
    fill(255);
    beginShape();
    curveVertex(140,366);
    curveVertex(213,427);
    curveVertex(235,437);
    curveVertex(231,479);
    curveVertex(187,479);
    curveVertex(153,405);
    endShape(CLOSE);
    //right collar
    beginShape();
    curveVertex(339,395);
    curveVertex(340,480);
    curveVertex(317,480);
    curveVertex(270,480);
    curveVertex(275,438);
    endShape(CLOSE);
    //tie knot
    fill(68,73,215)
    beginShape();
    curveVertex(285,420);
    curveVertex(241,420);
    curveVertex(227,450);
    curveVertex(233,480);
    curveVertex(277,480);
    curveVertex(309,480);
    curveVertex(303,442);
    endShape(CLOSE);
    //face
    noStroke();
    fill(246,162,102)
    beginShape();
    curveVertex(147,176);
    curveVertex(135,233);
    curveVertex(135,296);
    curveVertex(129,328);
    curveVertex(128,346);
    curveVertex(157,403);
    curveVertex(213,440);
    curveVertex(277,452);
    curveVertex(331,424);
    curveVertex(365,357);
    curveVertex(372,323);
    curveVertex(371,233);
    curveVertex(368,183);
    curveVertex(365,112);
    curveVertex(299,111);
    curveVertex(157,119);
    endShape(CLOSE);
    //right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(355,95);
    curveVertex(336,121);
    curveVertex(346,146);
    curveVertex(350,179);
    curveVertex(371,249);
    curveVertex(391,152);
    curveVertex(395,105);
    curveVertex(374,83);
    endShape(CLOSE);
    //left ear
    fill(245,152,93)
    beginShape();
    curveVertex(140,231);
    curveVertex(103,226);
    curveVertex(91,233);
    curveVertex(94,260);
    curveVertex(105,284);
    curveVertex(119,323);
    curveVertex(137,332);
    curveVertex(147,318);
    curveVertex(141,271);
    endShape(CLOSE);
    //top hair
    fill(248,232,145)
    beginShape();
    curveVertex(293,31);
    curveVertex(213,42);
    curveVertex(147,58);
    curveVertex(93,95);
    curveVertex(113,109);
    curveVertex(145,107);
    curveVertex(165,132);
    curveVertex(207,145);
    curveVertex(265,136);
    curveVertex(319,131);
    curveVertex(359,119);
    curveVertex(385,115);
    curveVertex(396,89);
    curveVertex(351,51);
    endShape(CLOSE);
    //top of right side hair
    fill(245,234,176)
    beginShape();
    curveVertex(153,105);
    curveVertex(173,129);
    curveVertex(151,181);
    curveVertex(135,224);
    curveVertex(115,147);
    curveVertex(131,119);
    endShape(CLOSE);
}
//draw first title slide: '2020 ELECTION HIGHLIGHTS'
function Title() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(241,59,58)
    text('2020', width/2, height/2-70);
    fill(0,86,217);
    text('ELECTION', width/2, height/2);
    fill(241,59,58);
    text('HIGHLIGHTS', width/2, height/2+70);
}
//draw last slide: 'BYE DON'
function End() {
    background(255);
    textAlign(CENTER);
    textSize(50);
    textStyle(BOLD);
    fill(0,86,217);
    text('BYE', width/2, height/2-35);
    fill(241,59,58);
    text('DON', width/2, height/2+35);
}

function draw() {
    background(255);
    //first scene is the title slide, and playing banjo tiktok music
    if (frameCount >= 0 & frameCount < 80) { 
        Title();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //second scene is the fly buzzing around mike pence's head
    if (frameCount >= 80 & frameCount < 130) { 
        banjo.stop();
        Mike();
        Fly(X,Y);
        if (!buzz.isPlaying()) {
            buzz.play();
        }
        buzz.play();
        X+=random(-5,5); 
        Y+=random(-5,5);
        noiseParam+= noiseStep;
    }
    //third scene is kamala harris telling mike pence that she is speaking during the VP debate
    if (frameCount >= 130 & frameCount < 170) { 
        buzz.stop();
        if (!talk.isPlaying()) {
            talk.play();
        }
        Kamala(); 
    }
    //fourth scene is trump while a clip of supalonely plays 
    if (frameCount >= 170 & frameCount < 240) { 
        talk.stop();
        Trump();
        if (!loser.isPlaying()) {
            loser.play();
        } 
    }
    //fifth scene is joe biden with hail to the chief playing
    if (frameCount >= 240 & frameCount < 400) { 
        loser.stop();
        Joe();
        if (!president.isPlaying()) {
            president.play();
        } 
    }
    //last scene is the end slide with the banjo tiktok music playing
    if (frameCount >= 400 & frameCount < 460) { 
        End();
        if (!banjo.isPlaying()) {
            banjo.play();
        } 
    }
    //after the last slide, loop back to the first and continue to cycle through the frames
    if (frameCount == 460) {
        frameCount = 0;
        background(255);
    }
}