Project 10: Sonic Story

peachsketch
//There are two characters, red and blue, fighting each other video
//game style. The announcer starts the match, and they fight, 
//exchanging rapid punches and hits. Neither one does much damage.
//Suddenly, blue passes gas. The gas is deadly, and red dies.
//Blue wins, match is over.

var count = 0;

function preload() {
    fight = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fight.wav")
    punch = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/punch.wav")
    kick = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/kick.wav")
    fart = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fart.wav")
    victory = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/victory.wav")

}


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


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    //osc = new p5.TriOsc();
    kick.setVolume(0.4);
    punch.setVolume(0.4);
    fight.setVolume(0.5);
    fart.setVolume(0.9);
    victory.setVolume(0.5);
}


function draw() {

    background(0);
    fill(100)
    rect (0,225, 400, 75);
    fill(0,255,0)
    rect(20,20, 100,10)
    rect(280,20, 100,10)
    textSize(50)
    fill(255)
    
    text("FIGHT!", 120, 100);
    //fighters are sizing each other up
    if (count < 2) {
        fight.play()
        fightLeft(100,200)
        fightRight(300,200)

    }
    if (count >=2 & count < 20){
        fightLeft(120,200)
        fightRight(320,200)
    }
// red throws first punch
    if (count >= 20 && count < 35){
        fightLeft(100,200)
        fightRight(300,200)
        fill(240, 220, 170)
        ellipse(260,230,20,15)
        if (count >=20 && count < 25){
        punch.play()
        
    }

    }
    //blue fights back
    if (count >= 35 && count < 50){
        fightLeft(120,200)
        fightRight(320,200)
        fill(240, 220, 170)
        ellipse(160,230,20,15)
        if (count>=35 && count< 38){
            kick.play()
        }
    }
    //red punches again
    if (count >= 50 && count < 65){
        fightLeft(100,200)
        fightRight(300,200)
        fill(240, 220, 170)
        ellipse(260,230,20,15)
        if (count >=50 && count < 55){
        punch.play()
        }
    }
    //blue releases gas
    if (count >= 65 && count < 80){
        fightLeft(120,200)
        fightRight(320,200)

        if(count>70 && count< 78){
                fartblue(60,230)
        }
        if (count > 70 && count<72){
            fart.play()
        }
    }
if (count>=80 && count<90){
        fightLeft(120,200)
        fightRight(320,200)
}
    
//red dies from fart, blue wins
if(count>=90 && count<120){
    fightLeft(120,200)
    deadRight(320,200)
    if (count>95 && count <98){
    victory.play()
    }
    textSize(20)
    fill(255)
    text("WINNER", 50, 150);
    fill(255,0,0)
    rect(280,20, 100,10)
}

//story ends
if (count >= 120){
    fill(0)
    rect(0,0,width,height)
    fill(255)
    text("game over", 90, height/2)

}
    count++
}

//left fight stance
function fightLeft(x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(0,0,255)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
    endShape();
rect(x-15, y-10, 30, 4)
fill(255);
ellipse(x, y, 8,12)
fill(0);
ellipse(x+2,y+2,6, 8)
stroke(0)
strokeWeight(3)
line(x,y-5,x+5,y)
line(x, y+11, x+6, y+11)
noStroke()

}
//red fight stance
function fightRight (x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(255,0,0)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
endShape();
rect(x-15, y-10, 30, 4)
fill(255);
ellipse(x, y, 8,12)
fill(0);
ellipse(x-2,y+2,6, 8)
stroke(0)
strokeWeight(3)
line(x,y-5,x-5,y)
line(x, y+11, x-6, y+11)
noStroke()
}

//draw fart cloud
function fartblue(x,y){
    fill(18, 135, 41)
ellipse(x,y,40,25)
}
//red dies
function deadRight (x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(255,0,0)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
endShape();
rect(x-15, y-10, 30, 4)

stroke(0)
strokeWeight(3)
line(x,y-6,x-6,y+2)
line(x-6, y-6, x, y+2)
noFill()
ellipse(x-3, y+10, 8)
noStroke()

}

For my story, I had trouble manipulating the noise to be used in an interesting way. Because the noises themselves were already distinctive, I wasn’t sure how to improve the way they were used. I had fun writing a silly story inspired by the classic, pixelated video game characters I grew up with.

I used sounds from the timeless Mortal Kombat series, which were available online for free use. I took the classic announcer sayings of “fight!” and “flawless victory.” as well as the punching and attacking noises. I also used a sound from the recommended free sounds website of a simple passing gas noise. I thought that the last noise would be a funny juxtaposition to the otherwise epic sounds.

Leave a Reply