Story: it rains (rain sound plays), and the sprout grows (grow sound plays) and bloom the flower (bloom sound plays). Then, the cloud clears up and the bird goes by (bird sound plays). At the end, the sun gets bigger (ending sound plays).
sketch
var rain;
var grow;
var bloom;
var bird;
var sun;
var sprout;
var flower;
var birdimg;
var sunimg;
function preload() {
rain = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain.wav");
grow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/grow.wav");
bloom = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bloom.mp3");
bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bird.wav");
sun = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sun.wav");
sprout = loadImage("https://i.imgur.com/jhYJcR1.png");
flower = loadImage("https://i.imgur.com/o6nzV38.png");
birdimg = loadImage("https://i.imgur.com/amZXis1.png");
sunimg = loadImage("https://i.imgur.com/2W1rzB0.png");
}
function setup() {
createCanvas(600, 400);
useSound();
frameRate(20);
}
function soundSetup() { rain.setVolume(0.6);
}
function draw() {
background(189,209,255);
noStroke();
imageMode(CENTER);
if (frameCount < 5) {
cloud(200,100);
image(sprout,width/2,height-20,67,104);
} else if (frameCount >= 5 & frameCount <10) {
raindrop(250,150,0);
cloud(200,100);
image(sprout,width/2,height-20,67,104);
} else if (frameCount >= 10 & frameCount <15) {
raindrop(250,150,100);
cloud(200,100);
image(sprout,width/2,height-20,67,104);
} else if (frameCount >= 15 & frameCount <50) {
raindrop(250,150+frameCount*3,255);
cloud(200,100);
image(sprout,width/2,height-20,67,104);
} else if (frameCount >= 50 & frameCount < 100) {
cloud(200,100);
image(sprout,width/2,height-50-frameCount/3,67,104);
} else if (frameCount >= 100 & frameCount < 110){
cloud(200,100);
image(flower,width/2,height-80,67,104);
} else if (frameCount >= 110 & frameCount < 270){
image(sunimg,width/2,100,90,90);
cloud(400-frameCount*2,100);
image(flower,width/2,height-80,67,104);
image(birdimg,-200+frameCount*3,200,84,57);
} else if (frameCount >=270 & frameCount <300){
image(sunimg,width/2,100,70+frameCount/5,70+frameCount/5)
image(flower,width/2,height-80,67,104);
} else {
image(sunimg,width/2,100,130,130);
image(flower,width/2,height-80,67,104);
}
fill(165,85,85);
rect(0,height-40,600,40);
if (frameCount == 2) {
rain.play();
} else if (frameCount == 50) {
grow.play();
} else if (frameCount == 102) {
bloom.play();
} else if (frameCount == 110) {
bird.play();
} else if (frameCount == 250) {
bird.stop();
} else if (frameCount == 270) {
sun.play();
}
}
function cloud(x,y) { push();
translate(x,y);
noStroke();
fill(235,242,255);
ellipse(0,0,100);
ellipse(87,0,115);
ellipse(160,0,95);
pop();
}
function raindrop(x,y,t) { push();
rectMode(CENTER);
translate(x,y);
noStroke();
fill(100,178,255,t);
rect(0,10,10,50);
rect(40,0,10,50);
rect(80,15,10,50);
pop();
}