Project 10 – Sonic Story

In this project, I’ve created a story of a journey of birds flying across the sky in different weathers. I’ve used sounds of snow, rain, birds, and cars to show different weathers and scenes of the story. Each scene shifts to different weathers when keys ‘0’ ‘1’ and ‘2’ are pressed. The sun rises and falls with mouse Y.

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

Leave a Reply