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