Project 10: Sonic Story

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.

Leave a Reply