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
//Jae Son
//Section C
//story: it rains, and the sprout grows and bloom the flower.
// Then, the cloud clears up and the bird goes by.
// At the end, the sun gets bigger
var rain;
var grow;
var bloom;
var bird;
var sun;
var sprout;
var flower;
var birdimg;
var sunimg;
function preload() {
//sounds
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");
//images
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() { // setup for audio generation
rain.setVolume(0.6);
}
function draw() {
//blue background
background(189,209,255);
noStroke();
imageMode(CENTER);
//animation
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);
}
//brown ground
fill(165,85,85);
rect(0,height-40,600,40);
//sound play
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) { //cloud shape draw
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) { //rain drops shape draw
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();
}