November 2020 – Page 18 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Looking Outwards 10 – Computational Music

The project I am looking at for this week is Charlie Puth’s Attention (it’s a song). Charlie Puth is not a classically trained musician, so a lot of his self-produced music is made through computational software. For instance, for the verse of Attention, he recorded his voice just humming out the melody on voice memos on his phone. After uploading it to Pro Tools, he could choose the instrument he wanted to play that melody, and then go into a graph editor and change how that melody sounded without ever needing to pick up an instrument. He also was able to change the quality of the sound to achieve a different emotional effect subconsciously. He added tape cracks into the background to give the impression of analog music. I admire this project because it widens the sphere of accessibility to make music. As a person who always picked up instruments without ever truly succeeding at them, this is very appealing to me.

http//www.avid.com/pro-tools#Music-Creation

LO: Computer Music

Iamus: Hello World! (first piece composed by Iamus)

While I was doing some exploring in Computer Music, I stumbled upon Iamus. Iamus is a computer that can write contemporary classical music scores. It needs only 8 minutes to create a full composition in different musical formats. Iamus is taught the basics of human composition, such as the limitations of what can be played. Iamus is constantly evolving as more source material is added to the software, similar to how a musician only grows with more practice. Iamis is inspired by evolution, as it picks and alters the source material to create complex music pieces. So far, it can only compose contemporary classical music, but it has the potential to evolve and compose other genres of music. It is so weird to think about how a computer can compose music to the same level as the composers we admire. However, there is the question of whether artificial intelligence can match the authenticity of humans, especially the drive and passion of composers translated into music.

Iamus: http://melomics.com/iamus

Project 10: Sonic Story

sketch

/*
Bon Bhakdibhumi
bbhakdib
Section D
*/
var nightBarn;
var chicken;
var sun;
var moon;
var crowing;
var morningSound;
var wakingUp;
var switchSound;
var chickenSleeping;
var nightSound;
var snoring;
var angle = 100;
var frameCounter = 0;
var rotationCounter = 0;
function preload () {
    dayBarn = loadImage("https://i.imgur.com/aGadSXz.png");
    nightBarn = loadImage("https://i.imgur.com/6cfic4A.png");
    chicken = [loadImage("https://i.imgur.com/4ZuBHL3.png"), 
                loadImage("https://i.imgur.com/YVhA3Pg.png")];
    sun = loadImage("https://i.imgur.com/64xX4qN.png");
    moon = loadImage("https://i.imgur.com/O8y3IzI.png");
    crowing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/435507__benjaminnelan__rooster-crow-2.wav");
    morningSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/530265__dominictreis__morning-transition-music.wav");
    wakingUp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/401338__ckvoiceover__yawning.wav");
    switchSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/414438__inspectorj__light-pulley-switch-on-c.wav");
    chickenSleeping = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/233093__jarredgibb__chicken-buck-96khz.wav");
    nightSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/200167__ebonny__cicadas.wav");
    snoring = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/409015__marisca16__old-man-snoring.wav");
}

function setup() {
    createCanvas(400, 400);
    frameRate(15);
    useSound();
}

function soundSetup() {
        morningSound.setVolume(0.1);
        crowing.setVolume(0.5);
        wakingUp.setVolume(0.3);
        switchSound.setVolume(0.9);
        chickenSleeping.setVolume(0.5);
        nightSound.setVolume(0.9);
}

function draw() {
    imageMode(CENTER);
// draw daytime
    if (rotationCounter % 2 == 0) {
        background(145, 203, 229);
        push();
        translate(215, 225);
        rotate(radians(angle));
        image(sun, 80, 200, 400, 400);
        pop();
        image(dayBarn, 200, 200, 400, 400);
        image(chicken[0], 80, 240, 200, 200);
    } else {
// draw nighttime
        background(51, 60, 99);
        push();
        translate(215, 225);
        rotate(radians(angle));
        image(moon, 80, 200, 400, 400);
        pop();
        image(nightBarn, 200, 200, 400, 400);
        image(chicken[1], 80, 240, 200, 200);
    }
    if (angle == 275) {
// reset sun or moon rotation
        angle = 110;
        rotationCounter ++;
    }
    angle ++;
//morning sounds
    if (angle == 125 & rotationCounter % 2 == 0) {
        crowing.play();
    }
   if (angle == 145 & rotationCounter % 2 == 0) {
        morningSound.play();
    }
    if (angle == 170 & rotationCounter % 2 == 0) {
        wakingUp.play();
    }
//night sounds
    if (angle == 115 & rotationCounter % 2 == 1) {
        nightSound.play();
    }
    if (angle == 115 & rotationCounter % 2 == 1) {
        switchSound.play();
    }
    if (angle == 120 & rotationCounter % 2 == 1 || angle == 150 && rotationCounter % 2 == 1) {
        chickenSleeping.play();
    }
    if (angle == 122 & rotationCounter % 2 == 1) {
        snoring.play();
    }
}

For this project I decide to make a story that illustrates the day at a barn.

Project 10: BOOOOOO

sketch

//A ghost is floating around, waiting to catch a unknowing passerby by surprise! Wait a bit and BOO!!!! The ghost has caught you ;)
var ghost1;
var ghost2;
var ghost3;
var ghost4;
var ghost5;
var ghost6;
var ghost7;
var ghost8;
var ghost9;
var ghost10;
var ghost11;
var ghost12;
var laughnoise;
var windsound;

function preload() {
    ghost1 = loadImage('https://i.imgur.com/X4dZ0hI.jpg' );
    ghost2 = loadImage('https://i.imgur.com/oEPEO2h.jpg' );
    ghost3 = loadImage('https://i.imgur.com/YdezjuH.jpg' );
    ghost4 = loadImage('https://i.imgur.com/ql1EG2S.jpg' );
    ghost5 = loadImage('https://i.imgur.com/XwlxdCa.jpg' );
    ghost6 = loadImage('https://i.imgur.com/fBUZvTM.jpg' );
    ghost7 = loadImage('https://i.imgur.com/kdNl0ob.jpg');
    ghost8 = loadImage('https://i.imgur.com/ZIooGoA.jpg' );
    ghost9 = loadImage('https://i.imgur.com/c0UNjMv.jpg' );
    ghost10 = loadImage('https://i.imgur.com/IucRj0z.jpg' );
    ghost11 = loadImage('https://i.imgur.com/zmzgLi5.jpg' );
    ghost12 = loadImage('https://i.imgur.com/ZeqmZnM.jpg' );
    laughnoise = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/laughnoise-1.wav');
    windsound = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/spookywind-1.wav');

}

function setup(){
    createCanvas(600, 600);
    frameRate(2);
    useSound();
}

function soundSetup(){
    laughnoise.setVolume(1);
    windsound.setVolume(1);
}

function draw(){
    background(0);
     if(frameCount == 1){
      image(ghost1,0,0);
      windsound.play();
    }
    if(frameCount == 2){
      image(ghost2,0,0);
    }
    if(frameCount == 3){
      image(ghost3,0,0);
    }
    if(frameCount == 4){
      image(ghost4,0,0);
    }
    if(frameCount == 5){
      image(ghost5,0,0);
    }
    if(frameCount == 6){
      image(ghost6,0,0);
    }
    if(frameCount == 7){
      image(ghost7,0,0);
    }
    if(frameCount == 8){
      image(ghost8,0,0);
    }
    if(frameCount == 9){
      image(ghost9,0,0);
      windsound.stop();
      laughnoise.play();
    }
    if(frameCount == 10){
      image(ghost10,0,0);
    }
    if(frameCount == 11){
      image(ghos11,0,0);
    }
    if(frameCount >= 12){
      image(ghost12,0,0);
    }
}

Project 10: Sonic Story

sketch

//Jessie Chen
//D
//Project 10
//Sonic Story

//Description: A girl in her room, 
//whistling and playing guitar as the wind howls. 
//Rain follows after the wind, darkening the room and the sky. 


var windows = [];
var girl = [];
var animation = 0;
var wind;
var guitar;
var whistle;
var rain;

function preload() {
    //load window animation
    var windowFrames = [];
    windowFrames[0] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[1] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[2] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[3] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[4] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[5] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[6] = "https://i.imgur.com/WL8WfFv.png";
    windowFrames[7] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[8] = "https://i.imgur.com/6CCPRvu.png";
    windowFrames[9] = "https://i.imgur.com/znUBSxa.png";
    windowFrames[10] = "https://i.imgur.com/znUBSxa.png";

    for (var i = 0; i < windowFrames.length; i++) {
        windows[i] = loadImage(windowFrames[i]);
    }

    //load girl animation
    var girlFrames = [];
    girlFrames[0] = "https://i.imgur.com/cJf8oUc.png";
    girlFrames[1] = "https://i.imgur.com/StszbDY.png";
    girlFrames[2] = "https://i.imgur.com/1AHGiCS.png";
    girlFrames[3] = "https://i.imgur.com/BB829DI.png";
    girlFrames[4] = "https://i.imgur.com/6T6wsTS.png";
    girlFrames[5] = "https://i.imgur.com/KQz7nSy.png";
    girlFrames[6] = "https://i.imgur.com/BF26KsD.png";
    girlFrames[7] = "https://i.imgur.com/YGI1D50.png";
    girlFrames[8] = "https://i.imgur.com/GzWvcdv.png";
    girlFrames[9] = "https://i.imgur.com/LADpf8C.png";

    for (var i = 0; i < girlFrames.length; i++) {
        girl[i] = loadImage(girlFrames[i]);
    }

    //load sounds
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wind.wav");
    rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-2.wav");
    whistle = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/whistle.wav");
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-1.wav");
}


function setup() {
    createCanvas(400, 400);
    imageMode(CENTER);
    frameRate(5);
    useSound();
}


function soundSetup() {
    wind.setVolume(0.25);
    rain.setVolume(1.5);
}


function draw() {
    //sets background to light peach
    background(212, 187, 168);
    //background becomes darker as rain starts
    if (animation >= 50) {
        background(148, 139, 132);
    }

    //dots in the background
    circles();

    //color of the sky
    sky();

    //wind and rain animation and sound
    windNrain();

    //girl whistling and guitar
    playingguitar();

    animation ++;

    //stop animation when sounds end
    if(frameCount === 145) {
        noLoop();
    }
 }

function windNrain() {
    image(windows[animation%windows.length], 275, 175, 320, 350);
    //plays wind at the beginning
    if (animation == 0) {
        wind.play();
    //after wind, comes the rain
    } else if (animation == 50) {
        rain.play();
    }
}

 function playingguitar() {
    frameRate(4);
    image(girl[animation%girl.length], 150, 250, 300, 290);
    //girl is whistling
    if (animation == 1) {
        whistle.play();
    //after whistling, she starts singing and playing guitar
    } else if (animation == 6) {
        guitar.play();
    }
 }

 function sky() {
    noStroke();
    fill(153, 165, 166);
    //sky darkens with rain
    if (animation >= 50) {
        fill(85, 90, 95);
    }
    //constrain inside the window
    rect(230, 55, 100, 170);
 }

 function circles() {
    for (var x = 0; x <= width; x += 20) {
        for (var y = 0; y<= height; y += 20) {
            noStroke();
            fill(242, 220, 203, 120);
            ellipse(x, y, 10, 10);
        }
    }
}

I wanted to make a girl strumming a guitar so I drew frames for the animation using Procreate. I also made a separate animation for the window, to add extra sounds to the project (the wind and the rain). All the sounds I used were found on freesound.org (including the guitar.) Also, as the rain starts, the sky and the room darken.

LO: Sonic Computational Art

Game of Skill 2.0 is a piece created by deaf sound artist Christine Sun Kim that explores the relationship between labor and listening. With the use of magnets, velcro strips, and custom electronic pieces driven by a sound/position tracking code, Kim is able to represent the subjectivity in an activity that seems so instinctual and simple for those without hearing disabilities.

As the computational electronic system produces a radio sound that responds to the players’ direction and speed, Kim’s piece lends another perspective to the world in which we exist. This begs the question, “how much harder do those hard-of-hearing or deaf need to work in order to reap an experience that the hearing community takes for granted?” Through the use of an interactive installation experience, Kim is able to create a space in which everyone has to work just as hard to produce radio noise, all while drawing parallels between a game of skill and a ‘natural’ daily activity.

While exploring Kim’s work and specifically her piece Game of Skill 2.0, I began to question the ability for us to use computational art and diving into a wide range of mediums and elements in order to transform our artwork into tools to create a more equitable society. Although the coding that goes on behind the scenes may be far more complicated than the actual activity of dragging a stemmed-radio-machine along a velcro strap gives itself to be, it creates opportunity to help offer a range perspectives and open minds in an approachable environment.

LO 10

“EMMY“
Composer: David Cope

“EMMY” is a program developed by David Cope, a classical composer with a deep interest in the role which computers and AI can play in music. His experiments in music intelligence allowed him to create EMMY, a program which can be fed examples of work from specific musicians and composers and in turn produce new pieces based on the characteristics of the music it studies. I find it fascinating that EMMY is able to break down and learn aspects of what makes a specific composer’s work unique and recreate it in a way that is not necessarily copying, but familiar and new. Moreover, Cope theorized that “what made a composer properly understandable, properly “affecting”, was in part the fact of mortality.” Interestingly, this led him to unplug EMMY in 2004, after it had produced over 11,000 pieces.

A Bach-Style Chorale written by EMMY

Project 10 – Sonic Story

My story is a little western horse racing film. In the first scene, the gun goes off. Then the horses start galloping as the crowd cheers.

//Maggie Ma
//Section D
//Sonic Story

//STORYLINE: a little western horseracing film. 
//In the first scene, the start gun goes off.
//Then, the horses start galloping.
//Finally, the crowd cheers.

var horseImage = [];   // an array to store the images
var horse = []; //array to hold horse

//frame counter 
var frameCount = 0;

//crowd image
var crowd;

//gun image
var gun;

//race gun x position
var gunX = -200;

//horse background of first scene
var horsebg; 

//crowd scene zoom in and out
var zoomx = 0; 
var zoomy = 0;

//sounds
var neigh;
var shot;
var gallop;
var crowdcheer;

function preload(){

    neigh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/neigh.wav");
    shot = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gunshot-1.wav");
    gallop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gallop-1.wav");
    crowdcheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowd.wav");
    
    //horse running image files
    var filenames = [];
    filenames[11] = "https://i.imgur.com/Kpc8OBb.gif";
    filenames[10] = "https://i.imgur.com/G6TaUvT.gifg";
    filenames[9] = "https://i.imgur.com/lbhzzYr.gif";
    filenames[8] = "https://i.imgur.com/wuAUUaw.gif";
    filenames[7] = "https://i.imgur.com/083HFuW.gif";
    filenames[6] = "https://i.imgur.com/VpQvDCP.gif";
    filenames[5] = "https://i.imgur.com/4G68Ubf.gif";
    filenames[4] = "https://i.imgur.com/hE8DQXc.gif";
    filenames[3] = "https://i.imgur.com/6WcJ0gS.gif";
    filenames[2] = "https://i.imgur.com/T1Xwkkj.gif";
    filenames[1] = "https://i.imgur.com/2PDeXWh.gif";
    filenames[0] = "https://i.imgur.com/shnBbse.gif";

    crowd = loadImage('https://i.imgur.com/9tu2YoL.jpg');
    gun = loadImage('https://i.imgur.com/lmEa4Kh.png');
    horsebg = loadImage('https://i.imgur.com/Q9r6TGv.png');

 
    for (var i = 0; i < filenames.length; i++) {
        horseImage[i] = loadImage(filenames[i]);
    }
}

function stepCharacter() { //update function
    this.imageNumber+=1;

    //reset image cycle when reach the end of array
    if (this.imageNumber>11) {
        this.imageNumber =0; 
    }
}

function drawCharacter() {
    //making the dude walk
    image(horseImage[this.imageNumber], this.x, this.y);
}

function makeCharacter(wx, wy, wdx, wdy) { //character constructer
    w = {
        x: wx,
        y: wy, 
        dx: wdx,
        dy: wdy, 
        imageNumber: 0,
        stepFunction: stepCharacter,
        drawFunction: drawCharacter
        }
    return w;
}

function setup() {
    createCanvas(480, 350);
    useSound();
    imageMode(CENTER);
    for (var i=0; i<1; i++) { 
        var w = makeCharacter(240,170,0,0);
        horse.push(w); 
    }
    frameRate(10);
}

function soundSetup () {
    neigh.setVolume(0.8);
    shot.setVolume(0.5);
}
function draw() {
    background(255);

    frameCount++;
    if (frameCount >= 0& frameCount < 160) { //race gun goes off scene
        image(horsebg, 240, 196, width, height); //background
        image(gun, 200 + gunX, height-250, width, height); //gun image
        if (frameCount >= 0 & frameCount < 70){ 
            gunX += 7; //gun slides in
        } else if (frameCount >= 90 & frameCount <160) {
            gunX -=12; //gun slides out
        } 
    }
   
    else if (frameCount >=100 & frameCount <300) { //horse galloping scene
        for (var i=0; i<1; i++) { //three people walking
            var w = horse[i];
            push();
            w.stepFunction();
            w.drawFunction();
            pop();
        }

    } else if (frameCount >=300 & frameCount < 400) { //crowd cheering scene
        image(crowd, 240, 196, width + zoomx, height + zoomy);
        zoomx +=3; //zoom in x
        zoomy += 3; //zoom in y 

    } else if (frameCount >= 400 & frameCount <450) { //end scene
        background(0);
        fill(255);
        textFont('Courier New Italic')
        textSize(16);
        text('the great race.', width-200, height-75);
    
    }else if (frameCount >= 450) {
        background(0);
        noLoop();
    }

    //sound play
    if (frameCount == 88) {
        shot.play();
    } else if (frameCount == 130){
        gallop.play();
    } else if (frameCount == 200){
        neigh.play();
    } else if (frameCount == 270) {
        crowdcheer.play();
    } else if (frameCount > 400) {
        crowdcheer.stop();
    }
}

Project 10 – Sonic Story + Media Files

For my sonic story, I made an animation of a series of animals chasing each other. I first started with a gif of a dog running, then split it into several frames to animate. I then decided to make it get chased by a bee (also a gif), then have the dog chase a cat who chases a mouse. The full frame is too long to display here, but this is a screenshot of what it looks like when all four characters are in frame:

// STORYLINE: A bee chasing a dog chasing a cat chasing a mouse.



var dogWalk = [];   // an array to store the images of a dog walking
var beeFly = []; // array to store images of bee flying
var catRun = []; // images of cat running
var mouse;
var mx = 920; // x position of mouse
var fence;
var barking;
var buzz;
var meow;
var squeak;




function preload(){

    // images of dog walking
    var dogs = [];
    dogs[0] = "https://i.imgur.com/Obg7kQd.gif";
    dogs[1] = "https://i.imgur.com/vUkgpet.gif";
    dogs[2] = "https://i.imgur.com/jvjCknz.gif";
    dogs[3] = "https://i.imgur.com/yFxMHG1.gif";
    dogs[4] = "https://i.imgur.com/oPxOfcq.gif";
    dogs[5] = "https://i.imgur.com/i0WRXiO.gif";
    dogs[6] = "https://i.imgur.com/338YDhl.gif";
    dogs[7] = "https://i.imgur.com/W62WgdJ.gif";
    dogs[8] = "https://i.imgur.com/2GhHX5W.gif";
    dogs[9] = "https://i.imgur.com/VgfCha4.gif";
    dogs[10] = "https://i.imgur.com/MbUowkT.gif";
    dogs[11] = "https://i.imgur.com/CnQCi0T.gif";
    dogs[12] = "https://i.imgur.com/rWgGUWm.gif";
    dogs[13] = "https://i.imgur.com/WPaT5V0.gif";
    dogs[14] = "https://i.imgur.com/y8qx8WE.gif";
    dogs[15] = "https://i.imgur.com/Vp1xVPc.gif";

    for (var i = 0; i < dogs.length; i++) {
        dogWalk[i] = loadImage(dogs[i]);
    }

    //images of bee flying
    var bees = [];
    bees[0] = "https://i.imgur.com/4850hmR.gif";
    bees[1] = "https://i.imgur.com/0FMGyos.gif";
    bees[2] = "https://i.imgur.com/7CozqZ5.gif";
    bees[3] = "https://i.imgur.com/J6e0HBK.gif";
    bees[4] = "https://i.imgur.com/uexlFJE.gif";
    bees[5] = "https://i.imgur.com/intd8Rx.gif";
    bees[6] = "https://i.imgur.com/l3ZVHzT.gif";
    bees[7] = "https://i.imgur.com/NNG3lnb.gif";
    bees[8] = "https://i.imgur.com/wYl8pHt.gif";
    bees[9] = "https://i.imgur.com/CM53Kch.gif";
    bees[10] = "https://i.imgur.com/Tt90vYh.gif";
    bees[11] = "https://i.imgur.com/MTQRrrG.gif";
    bees[12] = "https://i.imgur.com/8S7d588.gif";
    bees[13] = "https://i.imgur.com/tO9HTc5.gif";
    bees[14] = "https://i.imgur.com/KtbttF1.gif";
    

    for (var i = 0; i < bees.length; i++) {
        beeFly[i] = loadImage(bees[i]);
    }

    //images of the cat
    var cats = [];
    cats[0] = "https://i.imgur.com/ZWzbhxI.gif";
    cats[1] = "https://i.imgur.com/GaD7QU7.gif";
    cats[2] = "https://i.imgur.com/i6pEZq8.gif";
    cats[3] = "https://i.imgur.com/ljdWpB9.gif";
    cats[4] = "https://i.imgur.com/3dpfves.gif";
    cats[5] = "https://i.imgur.com/r0rgZRT.gif";
    cats[6] = "https://i.imgur.com/810gnOd.gif";
    cats[7] = "https://i.imgur.com/36qZ7mv.gif";
    cats[8] = "https://i.imgur.com/DPO7GIs.gif";
    cats[9] = "https://i.imgur.com/r9pxkAW.gif";
    cats[10] = "https://i.imgur.com/BNjV3y7.gif";
    cats[11] = "https://i.imgur.com/GOJmcoi.gif";

        for (var i = 0; i < cats.length; i++) {
        catRun[i] = loadImage(cats[i]);
    }
    
    mouse = loadImage("https://i.imgur.com/293UbtW.png");

    fence = loadImage ("https://i.imgur.com/N9jB1Hh.png");

    barking = loadSound ("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/barking.wav");

    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/buzz.wav");

    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/meow-2.wav");

    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/squeak.wav");
}
    
function soundSetup(){
    //barking.setVolume(0.75);
    buzz.setVolume(15);
    meow.setVolume(0.4);
    //squeak.setVolume(1);
}

//updates walking dog for next frame
function stepDog(){
    this.imageNumber++;

    //cycles through the 16 images
    if (this.imageNumber>15){
        this.imageNumber=0;
    }
}

//updates flying bee for next frame
function stepBee(){
    this.imageNumber++;

    // cycles through 15 images
    if (this.imageNumber>14){
        this.imageNumber = 0;
    }  
}

//updates cat for next frame
function stepCat(){
    this.imageNumber++;

    // cycles through 12 images
    if (this.imageNumber>11){
        this.imageNumber = 0;
    }  
}


//draws walking dog
function drawDog(){ image(dogWalk[this.imageNumber], this.x, this.y, 200, 110); }

// draws flying bee
function drawBee() { 
    push();
    scale(-1, 1);
    image(beeFly[this.imageNumber], this.x, this.y, 50, 50)
    pop();
}

// draws cat
function drawCat() { 
    push();
    scale(-1, 1);
    image(catRun[this.imageNumber], this.x, this.y, 80, 80)
    pop();
}


//constructor that creates and returns an object representing a dog
function makeDog(cx, cy){
    c = {x: cx, y: cy,
        dx: 8, 
        imageNumber:0,
        stepFunction: stepDog,
        drawFunction: drawDog}
    return c;
}

//constructor that creates and returns an object for a bee
function makeBee(bx, by){
    b = {x: bx, y: by,
        dx: 7,
        imageNumber: 0,
        stepFunction: stepBee,
        drawFunction: drawBee}
    return b;
}

//constructor that creates and returns an object for a cat
function makeCat(ax, ay){
    a = {x: ax, y: ay,
        dx: 9,
        imageNumber: 0,
        stepFunction: stepCat,
        drawFunction: drawCat}
    return a;
}


//empty array for dog
var dog=[];

//empty array for bee
var bee = [];

//empty array for cat
var cat = [];


function setup(){
    createCanvas(800, 100);
    imageMode(CENTER);

    for (var i = 0; i < 1; i++) {
        // make a dog
        var c = makeDog(1100, i+60);
        // push the dog onto dog array
        dog.push(c);

        var b = makeBee(-1200, i+50);
        bee.push(b);

        var a = makeCat(-1000, i+70);
        cat.push(a);
    }
    useSound();
    frameRate(8);
}

function draw(){
    background(201, 74, 88);

    //barking sound
    if (frameCount == 65 || frameCount == 75) {
        barking.play(); 
    } 

    // buzzing sound
    if (frameCount == 80 || frameCount == 90){
        buzz.play();
    }

    // meow
    if (frameCount == 40 || frameCount == 50){
        meow.play();
    }

    //squeak
    if (frameCount == 20 || frameCount == 30){
        squeak.play();
    }
    

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the dog
            var c = dog[i];
            c.stepFunction();
            c.drawFunction();
            //moves dog to the left
            dog[i].x-=dog[i].dx;
        }
    }
    

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the bee
            var b = bee[i];
            b.stepFunction();
            b.drawFunction();
            //moves bee to the left
            bee[i].x+=bee[i].dx;
        }
    }

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the cat
            var a = cat[i];
            a.stepFunction();
            a.drawFunction();
            //moves cat to the left
            cat[i].x += cat[i].dx;
        }
    }

    image(mouse, mx, 75, 45, 30);
    image(fence, 700, 100, 200, 70);

    mx -= 10

}

function mousePressed (){
    frameCount = 0;
}

Project 10-2020 Election Highlights Sonic Story

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);
    }
}