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