Project 10 Sonic Story

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();
}