AnimationHCDownload
//hayoonc
//Hayoon Choi
//Section C
var crash;
var aaah;
var birdSound;
var car;
var oops;
var bg;
var car1;
var cary = -120; var carPlus = 0.2;
var car2;
var car2x = 70; var car2dx = 30;
var person1;
var person1x = 350; var person1y = 305;
var p1x = 0; var p1dx = 30; var p1y = 0; var p1dy = 30; var pr = 0;
var person2;
var p2x = 200; var p2dx = 30; var p2y = 50;
var p2dy = 10; var p2s = 1; var p2ds = 0.02;
var bird;
var birdx = 600; var birddx = -15;
var clouddx = 5; var cloudx = 600;
var count = 0;
function preload(){
//Sounds
wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wind-1.wav");
crash = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crash.wav");
aaah = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/aaah.wav");
birdSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bird-1.wav");
car = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car-1.wav");
oops = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/oops.wav");
//Images
bg = loadImage("https://i.imgur.com/l8Qc6Md.png?1");
car1 = loadImage("https://i.imgur.com/5mLAaw5.png?1");
car2 = loadImage("https://i.imgur.com/bxJJmCI.png?1");
person1 = loadImage("https://i.imgur.com/LjpJvmr.png?1");
person2 = loadImage("https://i.imgur.com/FyITsh6.png?1");
bird = loadImage("https://i.imgur.com/pQXMNIy.png?1");
}
function setup() {
createCanvas(600, 400);
useSound();
imageMode(CENTER);
frameRate(10);
}
function soundSetup(){
crash.setVolume(0.5);
wind.setVolume(0.6);
car.setVolume(1.4);
aaah.setVolume(0.6);
}
function draw() {
background(136, 203, 237); //sky color
count ++;
//Animation
if (count > 0 & count < 80){
//drawing the image as the background for the first scene
image(bg, 300, 200, width, height);
}
if (count > 0 & count < 45){
//making cloud move
cloud(cloudx, 100);
cloudx = cloudx - clouddx;
if (cloudx == 400){
clouddx = 0;
}
}
if (count >= 45 & count < 80){
//car entering
cloud(400, 100);
carScale(300, 200);
}
if (count >= 80 & count < 90){
//car moving in the second scene
carMove(600, 430);
image(person1, person1x, person1y, width * 0.8, height * 0.8);
}
if (count >= 90 & count < 115){
//person gets hit
image(car2, 350, 430, width, height);
personHit(person1x, person1y);
}
if (count >= 115 & count < 170){
//person gets thrown into the air
personFly(300, 200);
}
if (count >= 170){
//showing the car again
image(bg, 300, 200, width, height);
cloud(400, 100);
push();
scale(1.5);
image(car1, 200, 200, width, height);
pop();
}
if (count > 190 & count <= 240){
//bird flying
image(bird, birdx, 0, width * 0.6, height * 0.6);
birdx += birddx;
}
//Sound
if (count == 1){
wind.play();
}
if (count == 45){
car.play();
}
if (count == 90){
car.stop();
crash.play();
}
if (count == 110){
aaah.play();
}
if (count == 180){
oops.play();
}
if (count == 190){
birdSound.play();
}
}
function cloud(x, y){
//drawing cloud
push();
translate(x, y);
noStroke();
fill(255);
ellipse(0, 0, 60, 40);
ellipse(40, 0, 70, 50);
pop();
}
function carScale(x, y){
//car moving in the first scene
push();
translate(x, y);
scale(carPlus);
image(car1, 0, cary, width, height);
pop();
carPlus += 0.1;
cary += 9;
}
function carMove(x, y){
//car moving in the second scene
push();
translate(x, y);
image(car2, car2x, 0, width, height);
pop();
car2x -= car2dx;
if (car2x <= -250){
car2dx = 0;
}
}
function personHit(x, y){
//making the person get hit
push();
translate(x, y);
rotate(radians(pr));
image(person1, p1x, p1y, width * 0.8, height * 0.8);
pop();
p1x -= p1dx;
p1y -= p1dy;
pr -= 1;
}
function personFly(x, y){
//making the person fly
push();
translate(x, y);
rotate(radians(pr));
scale(p2s);
image(person2, p2x, p2y, width * 0.8, height * 0.8);
pop();
p2x -= p2dx;
p2y -= p2dy;
pr -= 15;
p2s -= p2ds;
if (p2s <= 0){
p2ds = 0;
}
}
For this project, I wanted to include a car. Because I couldn’t find any pictures I that go well with the story, I drew them instead.