Project 10: Sonic Story

My sounds are a frog croaking, a sigh used for the pink frog, a splash, and crying for the green frog. The biggest challenge in getting this project to work was the local server, since I had to use the Chrome web server on Windows. It was a big barrier to even starting the project but I got lucky and figured it out.

frog time update

var greenFrog;
var pinkFrog;
var lily
var fish;
var flower;
var crying;
var sigh;
var splash;
var croak
var pinkFrogX = 200
var fishX = 400
var fishY = 400

///the story is about a lonely frog who experiences rejection but finds consolation in natural beauty

function preload() { ///loads in all images to be stored in variables
    greenFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog-removebg-preview.png')
    pinkFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bright-pink-frog-back-view-small-toad-with-black-vector-22441576-removebg-preview.png')
    lily = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lily_pad-removebg-preview.png')
    flower = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flower-removebg-preview.png')
    fish = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clipart-fish-red-2-removebg-preview.png')
    crying = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/219433__bash360__crying.wav')
    sigh = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/60670__k1m218__sigh3.wav')
    splash = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/416710__inspectorj__splash-small-a.wav')
    croak = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog.wav')
}


function setup() {
    useSound();
    createCanvas(480, 480)
	frameRate(1)	
}


function soundSetup() { // setup for audio 
    crying.setVolume(0.5);
     sigh.setVolume(0.5);
     splash.setVolume(0.5);
     croak.setVolume(0.5);
 }


function draw() { ///draws characters
	fill(255, 255, 255)
	background(0, 0, 236)
	image(fish, fishX + 500, fishY + 500, 60, 60)
	image(lily, 200, 200, 50, 50)
	image(lily, 300, 300, 50, 50)
	image(lily, 400, 400, 75, 75)
	image(greenFrog, 300, 300, 50, 50)
	if (frameCount >= 10){ ///summons the PINKFROG
		image(pinkFrog, pinkFrogX, 200, 50, 50)
	} 
		fishX -= 25 ////brings in the FISCH
		fishY -= 25
		switch(frameCount){ ////list of events to happen at certain thymes
			case 5: 
			text('the frog was alone', 50, 50)
			break        
		case 10: croak.play();
                text('he sees another frog and sings them a song', 50, 50);
                break
        case 15:
         	    text("they didn't like the song", 50, 50)
                sigh.play()
                pinkFrogX += 300
                break
        case 20: 
                text("the frog was even more sad and loney", 50, 50)
                crying.play()
                break
        case 25: 
                text("he sees a fish", 50, 50)
                splash.play()
                fishX -= 500
                break
        case 30: 
                text("the fish had shown him a beautiful flower", 50, 50)
                break
        case 35:
                text("suddenly he didn't feel so sad", 50, 50)
                break  
                }
        if (frameCount >= 30){ ///draweth the flowere
        	image(flower, 400, 400, 50, 50)
        } 
        if (frameCount >= 40){
        	text("THE END", 240, 240, 480, 480)
        }
                }