Final Project

/*
 * Michelle Kim
 * michell4
 * Section B
 */

var count = 0;
var clouds = [];
var opacity = 0;

var hearts;
var hornet;
var blm;
var vote;
var covid;
var crowd;

var alarm;
var yawn;
var shower;
var gettingReady;
var ready;
var cameraShutter;
var hornetSound;
var blmSound;

var hornetX = 600;
var blmX = 600;
var voteX = 600;
var covidX = 600;
var crowdX = 600;

function preload() {
    //preloads all images and sounds
    hearts = loadImage("https://i.imgur.com/WArKv90.gif");
    hornet = loadImage("https://i.imgur.com/WSVUTau.png");
    blm = loadImage("https://i.imgur.com/JAVgfbG.png");
    vote = loadImage("https://i.imgur.com/sRU4uIO.png");
    covid = loadImage("https://i.imgur.com/BY6kaKa.jpg");
    crowd = loadImage("https://i.imgur.com/63dcnGS.png");
    tear = loadImage("https://i.imgur.com/ie45BVh.png");

    alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/alarm.wav");
    yawn = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/yawn-1.wav");
    shower = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/shower.wav");
    gettingReady = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/gettingready.wav");
    ready = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/ready.wav");
    huh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/huh.wav");
    cameraShutter = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/camerashutter.wav");
    ding = loadSound("hhttps://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/ding.wav");
    hornetSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/hornetsound.wav");
    blmSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/blmsound.wav");
    ehSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/eh.wav");
    cough = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/cough.wav");
    awSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/12/aw.wav");
}

function setup() {
    createCanvas(600, 600);
    useSound();
    background(220);
    for(var i = 0; i < 3; i++){
        var initialX = random(width);
        var initialY = random(0, 200);
        clouds[i] = makeClouds(initialX, initialY);
    }
    frameRate(3);
}

function soundSetup() {
    alarm.setVolume(0.2);
    yawn.setVolume(0.3);
    shower.setVolume(0.2);
    gettingReady.setVolume(0.2);
    ready.setVolume(0.2);
    huh.setVolume(0.3);
    hornetSound.setVolume(0.3);
    blmSound.setVolume(0.2);
    cameraShutter.setVolume(0.2);
    ding.setVolume(0.3);
    ehSound.setVolume(0.8);
    cough.setVolume(0.2);
    awSound.setVolume(0.2);
}

function draw() {
    background(171, 245, 255);
    //opening scene
    if (count < 10) {
        fill(0);
        square(0, 0, width);
        textSize(30);
        textFont("Helvetica");
        fill(255);
        text("One fine morning...", 150, (height / 2));
    }
    //alarm ringing
    if (count >= 10 & count < 20) {
        clock();
        if (count == 10) {
            alarm.play();
        }
        if (count == 17) {
            yawn.play();
        }
    }
    //character getting ready
    if (count >= 20 & count < 30) {
        fill(0);
        square(0, 0, width);
        if (count == 20) {
            shower.play();
        }
        if (count == 25) {
            shower.stop();
            gettingReady.play();
        }
        if (count == 28) {
            gettingReady.stop();
        }
        if (count == 25) {
            ready.play();
        }
    }
    //boy introduction
    if (count >= 30 & count < 40) {
        boy();
        if (count >= 35 & count < 38) {
            image(hearts, 430, 310, width * 0.1, height * 0.1);
        }
    }
    //clouds
    if (count >= 40) {
        updateClouds();
        removeClouds();
        addClouds();
    }
    //boy on phone
    if (count >= 40 & count < 70) {
        boyWalking();
    }
    //hornet
    if (count >= 40 & count < 105) {
        image(hornet, hornetX, 300, width * 0.05, height * 0.05);
        hornetX -= 10;
        if (count == 40) {
            hornetSound.play();
        }
        if (count >= 55 & count < 60) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 56) {
                huh.play();
            }
        }
    }
    //snap of hornet
    if (count >= 70 & count < 75) {
        phonePicture();
        image(hornet, 240, 250, width * 0.2, height * 0.2);
        if (count == 73) {
            cameraShutter.play();
        }
    }
    //boy walking after hornet
    if (count >= 75 & count < 165) {
        boyWalking();
        if (count >= 80 & count < 100) {
            image(hearts, random(150, 170), random(400, 420),
                  width * 0.2, height * 0.2);
            bubble();
            textSize(40);
            textFont("Helvetica");
            fill(150);
            text("Woah!", 295, 415);
        }
        if (count == 80) {
            ding.play();
        }
    }
    //blm protest
    if (count >= 110 & count <= 220) {
        image(blm, blmX, 200, width, height);
        if (count == 110) {
            blmSound.play();
        }
        if (count == 220) {
            blmSound.stop();
        }
        if (count >= 140 & count < 145) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 141) {
                huh.play();
            }
        }
        blmX -= 10;
        if (count < 165 || count > 170) {
        boyWalking();
        }
    }
    //snap of blm protest
    if (count >= 165 & count < 170) {
        phonePicture();
        image(blm, 175, 250, width * 0.4, height * 0.35);
        if (count == 168) {
            cameraShutter.play();
        }
    }
    //boy walking after blm protest
    if (count >= 220) {
        boyWalking();
    }
    if (count >= 190 & count < 210) {
        image(hearts, random(150, 170), random(400, 420),
              width * 0.2, height * 0.2);
        bubble();
        textSize(30);
        textFont("Helvetica");
        fill(150);
        text("Inspiring!", 290, 410);
        if (count == 190) {
            ding.play();
        }
    }
    //vote sign
    if (count >= 225 & count < 320) {
        noStroke(0);
        fill(0);
        rect(voteX + 140, 400, 20, 400);
        image(vote, voteX, 250, width * 0.5, height * 0.5);
        voteX -= 10;
        if (count < 265 || count > 270) {
        boyWalking();
        }
        if (count >= 250 & count < 255) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 251) {
                huh.play();
            }
        }
        if (count >= 280 & count < 300) {
            image(hearts, random(150, 170), random(400, 420),
                  width * 0.2, height * 0.2);
            bubble();
            textSize(25);
            textFont("Helvetica");
            fill(150);
            text("Awesome!", 290, 410);
            if (count == 280) {
                ding.play();
            }
        }
    }
    //snap of vote sign
    if (count >= 265 & count < 270) {
        phonePicture();
        image(vote, 210, 230, width * 0.3, height * 0.3);
        if (count == 268) {
            cameraShutter.play();
        }
    }
    //covid sign
    if (count >= 325 & count < 420) {
        noStroke();
        fill(0);
        rect(covidX + 50, 200, 5, 400);
        rect(covidX + 250, 200, 5, 400);
        image(covid, covidX, 100, width * 0.5, height * 0.4);
        covidX -= 10;
        boyWalking();
        if (count == 360) {
            ehSound.play();
        }
        if (count >= 345 & count < 350) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 346) {
                huh.play();
            }
        }
    }
    //crowd
    if (count >= 425 & count < 510) {
        tint(255, 50);
        image(crowd, crowdX, 300, width * 1.1, height * 0.8);
        if (count < 490) {
            crowdX -= 10;
        }
        if (count == 495) {
            cough.play();
        }
        boyWalking();
        if (count >= 505 & count < 510) {
            textSize(40);
            textFont("Georgia");
            fill(0);
            text("!", 170, 350);
            if (count == 506) {
                huh.play();
            }
        }
    }
    //boy sad face
    if (count >= 510 & count < 520) {
        boyFace();
        if (count >= 15 & count < 520) {
            tint(255, 255);
            image(tear, 250, 320, width * 0.03, height * 0.05);
        }
        if (count == 513) {
            awSound.play();
        }
    }
    //end scene
    if (count >= 520) {
        background(0);
        textFont("Helvetica");
        textSize(50);
        fill(255);
        text("Wear a mask.", 150, 300);
        textSize(20);
        text("Spread awareness.", 210, 340);
    }
    count ++;
}

function clock() {
    background(255);
    stroke(0);
    strokeWeight(20);
    line(180, 180, 200, 200);
    line(400, 200, 420, 180);
    line(290, 125, 310, 125);
    line(300, 125, 300, 150);
    strokeWeight(5);
    //black
    fill(255);
    //bells
    arc(190, 190, 155, 155, radians(140), radians(310), CHORD);
    arc(410, 190, 155, 155, radians(230), radians(40), CHORD);
    fill(0);
    //body
    circle((width / 2), (height / 2), 300);
    //bells
    arc(180, 180, 120, 120, radians(130), radians(320), CHORD);
    arc(420, 180, 120, 120, radians(220), radians(50), CHORD);
    //bells
    circle(132, 132, 30);
    circle(468, 132, 30);
    //legs
    circle(210, 430, 50);
    circle(390, 430, 50);
    //white
    noStroke();
    fill(255);
    //body
    circle((width / 2), (height / 2), 250);
    //black
    stroke(0);
    strokeWeight(5);
    fill(0);
    //inside details
    circle((width / 2), (height / 2), 20);
    line((width / 2), 190, (width / 2), (height / 2));
    line((width / 2), (height / 2), 270, 370);
    //highlights
    stroke(255);
    strokeWeight(5);
    fill(255);
    line(292, 122, 308, 122);
    noFill();
    //bells
    arc(132, 132, 20, 20, radians(150), radians(200));
    arc(468, 132, 20, 20, radians(340), radians(30));
    //body
    arc(290, 280, 250, 230, radians(200), radians(250));
    arc(310, 320, 250, 230, radians(20), radians(70));
    //legs
    arc(210, 430, 30, 30, radians(140), radians(210));
    arc(392, 430, 30, 30, radians(330), radians(40));
}

function boy() {
    background(255);
    stroke(0);
    strokeWeight(3);
    //arms
    fill(255, 245, 215);
    line(180, 380, 220, 390);
    circle(170, 375, 20);
    line(380, 390, 420, 380);
    circle(430, 375, 20);
    //shirt
    fill(174, 255, 242);
    rect(220, 370, 50, 40);
    rect(330, 370, 50, 40);
    quad(270, 330, 330, 330, 360, 470, 240, 470);
    fill(126, 225, 208);
    square(310, 390, 20);
    //face
    fill(255, 245, 215);
    circle(230, (height / 2), 20);
    circle(370, (height / 2), 20);
    circle((width / 2), (height / 2), 140);
    line(300, 215, 300, 230);
    line(290, 220, 300, 230);
    line(310, 220, 300, 230);
    fill(0);
    circle(290, 290, 5);
    circle(310, 290, 5);
    noFill();
    arc(300, 310, 70, 60, 0, radians(180));
    //phone
    fill(0);
    rect(430, 330, 20, 40);
    noFill();
    stroke(255);
    strokeWeight(1);
    rect(432, 332, 16, 30);
    circle(440, 367, 5);
}

function updateClouds() {
    //update clouds
    for (var i = 0; i < clouds.length; i++) {
        clouds[i].move();
        clouds[i].display();
    }
}

function removeClouds() {
    //get rid of clouds
    var keepClouds = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x + 50 > 0) {
            keepClouds.push(clouds[i]);
        }
    }
    clouds = keepClouds;
}

function addClouds() {
    //add new clouds
    var newClouds = 0.05;
    if (random(0,1) < newClouds) {
        var y = random(0, 200);
        clouds.push(makeClouds(width, y));
    }
}

function moveClouds() {
    //clouds move to left
    this.x += this.speed;
}

function displayClouds() {
    //cloud drawing
    fill(255);
    noStroke();
    circle(this.x, this.y + 50, 50);
    circle(this.x + 40, this.y + 50, 70);
    circle(this.x + 80, this.y + 70, 40);
    circle(this.x + 90, this.y + 40, 50);
}

function makeClouds(cloudsX, cloudsY) {
    var cloud = {x: cloudsX,
                 y: cloudsY,
                 speed: -4,
                 move: moveClouds,
                 display: displayClouds}
    return cloud;
}

function boyWalking() {
    stroke(0);
    strokeWeight(3);
    //shirt
    fill(174, 255, 242);
    quad(70, 450, 120, 450, 150, height + 2, 60, height + 2);
    quad(90, 520, 110, 520, 115, 550, 85, 550);
    //face
    fill(255, 245, 215);
    circle(100, 420, 140);
    circle(90, 440, 10);
    fill(0);
    circle(150, 430, 5);
    noFill();
    arc(152, 450, 35, 30, radians(90), radians(180));
    line(100, 335, 100, 350);
    line(90, 340, 100, 350);
    line(110, 340, 100, 350);
    //phone
    noStroke();
    fill(209, 250, 255);
    quad(200, 465, 200, 500, 175, 530, 150, 530);
    stroke(0);
    strokeWeight(5);
    line(200, 500, 175, 530);
    //arms
    strokeWeight(3);
    line(100, 550, 100, 570);
    line(100, 570, 170, 540);
    fill(255, 245, 215);
    circle(170, 540, 20);
}

function phonePicture() {
    //phone camera
    stroke(0);
    strokeWeight(20);
    fill(171, 245, 255);
    rect(200, 100, 200, 400);
    strokeWeight(10);
    line(200, 400, 0, height);
    line(400, 400, width, height);
    stroke(255);
    strokeWeight(5);
    line(250, 220, 250, 240);
    line(250, 220, 270, 220);
    line(350, 220, 350, 240);
    line(330, 220, 350, 220);
    line(250, 380, 250, 360);
    line(250, 380, 270, 380);
    line(350, 380, 350, 360);
    line(350, 380, 330, 380);
}

function bubble() {
    //phone comments
    fill(255);
    noStroke();
    ellipse(350, 400, 150, 100);
    triangle(290, 400, 320, 440, 280, 450);
}

function boyFace() {
    //boy sad face
    background(255);
    strokeWeight(3);
    fill(255, 245, 215);
    circle(100, (height / 2), 50);
    circle(500, (height / 2), 50);
    circle((width / 2), (height / 2), 400);
    line(300, 70, 300, 100);
    line(280, 80, 300, 100);
    line(320, 80, 300, 100);
    fill(0);
    circle(270, 290, 10);
    circle(330, 290, 10);
    noFill();
    arc(300, 420, 140, 120, radians(200), radians(340));
}