My sound story includes some highlights from the 2020 Presidential Election. I included audio clips from debates, the presidential anthem, and TikTok songs with special guest the Fly that landed on Mike Pence’s head.
election
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);
}
}