Project 10 – Sonic Story

//Stefanie Suk
//15-104 Section D

//This stroy is about a journey of birds flying through different scenes of weather.
//Journey of birds flying in a sunny day, snowy day, and rainy day. 

var story = "start"; //scene of story initially set to "start"

var winterSnow = []; // array to hold snowflake objects

var rainFalls = [];

var cloudX = 0;

var birdImage = [];
var birdFrame = 0;
var birdx = 0;
var birdTime = 0;

var snowbirdImage = [];
var snowbirdFrame = 0;
var snowbirdx = 0;
var snowbirdTime = 0;

var car = [];
var carNum = 10; //number of cars

var sun;

function preload() {
  rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-3.wav");
  snowstormSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/snowstorm.wav");
  birdSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bird-3.wav");
  carSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car-2.wav");
  birdchirpSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdchirp.wav");

  //Bird images, for rain scene
  birdImage[0] = loadImage("https://i.imgur.com/tg67EJp.png");
  birdImage[1] = loadImage("https://i.imgur.com/NzqZdC6.png");
  birdImage[2] = loadImage("https://i.imgur.com/PoLXRp1.png");
  birdImage[3] = loadImage("https://i.imgur.com/RR23waU.png");
  birdImage[4] = loadImage("https://i.imgur.com/bomc4zU.png");
  birdImage[5] = loadImage("https://i.imgur.com/yvMEopS.png");
  birdImage[6] = loadImage("https://i.imgur.com/NNqLSfZ.png");
  birdImage[7] = loadImage("https://i.imgur.com/JgASL5k.png");
  birdImage[8] = loadImage("https://i.imgur.com/yDRvXLi.png");
  birdImage[9] = loadImage("https://i.imgur.com/sH0IWH2.png");

  //Bird images with snow on top, for snow scene
  snowbirdImage[0] = loadImage("https://i.imgur.com/9UBa9S7.png");
  snowbirdImage[1] = loadImage("https://i.imgur.com/P13A1Gj.png");
  snowbirdImage[2] = loadImage("https://i.imgur.com/WLn63gv.png");
  snowbirdImage[3] = loadImage("https://i.imgur.com/rYCLLmV.png");
  snowbirdImage[4] = loadImage("https://i.imgur.com/65hbFvj.png");
  snowbirdImage[5] = loadImage("https://i.imgur.com/ifH75Di.png");
  snowbirdImage[6] = loadImage("https://i.imgur.com/8ER6XPt.png");
  snowbirdImage[7] = loadImage("https://i.imgur.com/AXF0fpu.png");
  snowbirdImage[8] = loadImage("https://i.imgur.com/ONvchFq.png");
  snowbirdImage[9] = loadImage("https://i.imgur.com/W0Wu9Ou.png");


}

function setup() {
  createCanvas(400, 600);

  //snow
  fill(240);
  noStroke();

  //rain
  for (var i = 0; i < 400; i++) {
    rainFalls[i] = new drawRain();
  }

  //car
  for (let i = 0; i < carNum; i++) {
    car[i] = new Car(random(height),
      random(width),
      color(random(255), random(255), random(255)), //random car color
      random(1, 8), //random car speed
      random(20, 90) //random car size
    );
    print(car[i]);
  }

  birdSound.loop(); //looping bird sound 

  rectMode(CENTER);
  useSound();

}

function soundSetup(){
  rainSound.setVolume(0.5);
  snowstormSound.setVolume(0.7);
  birdSound.setVolume(0.5)
  birdchirpSound.setVolume(0.8);
}

function draw() {

  if (frameCount == 1) {
    birdchirpSound.play();
  }

  //snow
  let snowT = frameCount/10; //time for snow falling

  //each scene
  if (story == "start") { //starting scene

    //sun
    //background color change, mouse Y
    //sun move up and down
    sun = map(mouseY, 0, 600, 200, 0); //map background color
    background(0, sun/2, sun);
    noStroke();
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    fill(255);
    textSize(10);
    text("Press keys '1' and '2' to change scene", 40, height/2-40);
    text("Press key '0' to reset", 40, height/2-20);

    drawCloud();

    drawBird();

	} else if (story == "frame1") { //snowing scene
    
    //sun
    //background color change, mouse Y
    //sun move up and down
    sun = map(mouseY, 0, 500, 100, 0);
    background(0, sun/2, sun);
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    //snow
    fill(250);
    for (let i = 0; i < random(6); i++) { // drawing random snows
	   winterSnow.push(new drawSnow());
    }
  	for (let snowParticles of winterSnow) {
      snowParticles.display(); //looping, display snow
  	  snowParticles.update(snowT); // updating snow
  	}

    //cars
    for (let i = 0; i < 10; i++) {
      car[i].move();
      car[i].display(); //making cars show
    }

    //cloud
    drawCloud();

    //bird with snow
    drawSnowbird();

  } else if (story == "frame2") { //raining scene
    
    //sun
    //background color change, mouse Y
    //sun move up and down
  	sun = map(mouseY, 0, 600, 50, 0); //map background color
    background(0, sun/2, sun);
    noStroke();
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    //rain
  	for (var i = 0; i < rainFalls.length; i++) {
    rainFalls[i].rainMove();
    rainFalls[i].rainShow();
  	}

    //cars
    for (let i = 0; i < 10; i++) {
      car[i].move();
      car[i].display(); //making cars show
    }

    //bird
    drawBird();
  }

}

function drawSnow() {
  this.snowX = 0; //position X of snow
  this.snowY = random(-70, 10); //position Y of snow
  this.snowstartAngle = random(0, PI*3); //starting angle of snow
  this.snowSize = random(1, 5.5);

  //radius of snow
  //make snow spread evenly throught canvas
  this.snowRadius = sqrt(random(pow(width, 2)));

  this.update = function(snowTime) {
    // snow fall spiral, like wind blowing
    var snowSpeed = 0.5; // angled speed
    var snowAngle = snowSpeed * snowTime + this.snowstartAngle;
    this.snowX = this.snowRadius * cos(snowAngle) + width/2;

    // various sizes of snow falling at different speeds
    this.snowY += pow(this.snowSize, 0.5);

  }

  this.display = function() {
    ellipse(this.snowX, this.snowY, this.snowSize);
  }



}

function drawRain() {
  this.rainX = random(width); //pos X, rain falling randomly throughout canvas
  this.rainY = random(-400, -100); //pos Y
  this.rainS = random(0, 15); //rain size
  this.rainLength = map(this.rainS, 0, 5, 10, 15); //rain length
  this.rainSpeed = map(this.rainS, 0, 15, 5, 25); //map rain speed

  this.rainMove = function() {
    this.rainY = this.rainSpeed + this.rainY;
    var rainFalling = map(this.rainS, 0, 15, 0, 0.3); //falling speed of rain
    this.rainSpeed = this.rainSpeed + rainFalling;

    //keeping rain fall
    if (this.rainY > height) {
      this.rainY = random(-300, -50);
      this.rainSpeed = map(this.rainS, 0, 15, 5, 10);
    }
  }

  this.rainShow = function() {
    var rainSize = map(this.rainS, 0, 15, 0.5, 2); //map rain size
    strokeWeight(rainSize);
    stroke(205, 235, 244);
    line(this.rainX, this.rainY, this.rainX, this.rainY+this.rainLength);
  }
}

function drawCloud(){

  //translate cloud
  translate(cloudX, 0);
  
  // draw cloud
  fill(255);
  noStroke();
  ellipse(100,100,50);
  ellipse(110,110,50);
  ellipse(120,95,50,60);
  ellipse(130,105,50);

  ellipse(200,200,50);
  ellipse(210,210,50);
  ellipse(220,195,50,60);
  ellipse(230,205,50);

  ellipse(-100,250,50);
  ellipse(-110,260,50);
  ellipse(-120,245,50,60);
  ellipse(-130,255,50);

  //make cloud appear canvas again
  if (cloudX -200> width){
    cloudX = -300;
  }
  cloudX++;

}

function drawBird() {
  image(birdImage[birdFrame], birdx, height/2);
  image(birdImage[birdFrame], birdx-300, height/2+50);

  if (birdTime > 20) { //change position, every 20 frames
    birdx += 5; //moving bird image
    birdFrame += 1; //next index of array
    if (birdFrame >= birdImage.length) {
      birdFrame = 0; //keep frame index within image length array
    }
    birdTime = 0; //frame time reset
  }
  birdTime++;
}

function drawSnowbird() {
  image(snowbirdImage[snowbirdFrame], snowbirdx, height/2);
  image(snowbirdImage[snowbirdFrame], snowbirdx-300, height/2+50);

  if (snowbirdTime > 20) { //change position, every 20 frames
    snowbirdx += 1; //moving bird image
    snowbirdFrame += 1; //next index of array
    if (snowbirdFrame >= snowbirdImage.length) {
      snowbirdFrame = 0; //keep frame index within image length array
    }
    snowbirdTime = 0; //frame time reset
  }
  snowbirdTime++;
}


class Car {
  constructor(x, y, c, s, l) {
    this.carX = x;
    this.carY = y;
    this.carC = c; //color of car
    this.carL = l; //length of car
    this.carSpeed = s; //speed of car
  }
  
  move() {
    this.carX = this.carX + this.carSpeed; //cars move
    if (this.carX > width) {
      this.carX = 0; //initial pos X of cars
    }
  }

  display() {
    noStroke();
    fill(this.carC);
    rect(this.carX, 600, this.carL, 35, 20); //position of cars, different shapes of cars 
  }
}



function keyPressed() {
	if (key == "0") {
		story = "start";
    birdSound.play();
    rainSound.stop();
    snowstormSound.stop();
    carSound.stop();
	} else if (key == "1") {
		story = "frame1";
    snowstormSound.play();
    birdSound.play();
    carSound.play();
    rainSound.stop();
	} else if (key == "2") {
		story = "frame2";
    snowstormSound.stop();
    birdSound.play();
    rainSound.play();
    carSound.play();
	} 
}