Project 10: Sonic Story

//Xinyi Du 
//15104 Section B
//xinyidu@andrew.cmu.edu
//Project-10

//Nick's Prank (Story inspired by Zootopia Teaser Trailer)

//Judy the bunny and the goat are walking on the street. 
//Nick the fox sees them and decides to play a prank on Judy.
//When Judy passes Nick, Nick puts out his foot and trips Judy.
//In panic, judy pushes the goat walking in front of her, so the goat falls down as well.
//After seeing them both fall, Nick hums with joy.

/* 
Images of characters from Zootopia Teaser Trailer:
https://www.youtube.com/watch?v=g9lmhBYB11U

Street image source: 
https://www.etsy.com/au/listing/581765202/the-buildings-of-main-street-walt-disney?
ref=related-2&epik=dj0yJnU9UWhoMkVRQnRMc1hFbk40dXRWQ21FVUdSVG9iYVFZT3QmcD0wJm49RWRs
YUhPc25aWUxvdTY5ZEtod3liQSZ0PUFBQUFBR053QWdv
*/


var filenames = [];
var walkImage = []; //walk cycle images of judy

var filenames2 = [];
var fallImage = []; //fall images of judy

var filenames3 = [];
var walkImage2 = []; //walk cycle images of the goat

var filenames4 = [];
var fallImage2 = []; //fall images of the goat

var character = [];
var street;
var clouds;
var nick;

var walk; //walking footsteps sound variable
var ouch; //ouch sound judy makes when fall
var bodyfall; //body falling sound of the goat
var nickhumming; //happy humming of nick

function preload(){
    //load sounds
    walk = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/footsteps.mp3");
    ouch = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/ouch.mp3");
    bodyfall = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/bodyfall.wav");
    nickhumming = loadSound("https://courses.ideate.cmu.edu/15-104/f2022/wp-content/uploads/2022/11/happy-huming.mp3");
    
    //load images
    //walk cycle images of judy
    filenames[0] = "https://i.imgur.com/wLVmUpf.png";
    filenames[1] = "https://i.imgur.com/TffffQ8.png";
    filenames[2] = "https://i.imgur.com/5Lirbd1.png";
    filenames[3] = "https://i.imgur.com/N2BUn7y.png";
    filenames[4] = "https://i.imgur.com/pc6Lp46.png";
    filenames[5] = "https://i.imgur.com/lhOcePN.png";
    filenames[6] = "https://i.imgur.com/djXrWqQ.png";
    filenames[7] = "https://i.imgur.com/8nXGJZe.png";
    filenames[8] = "https://i.imgur.com/D8o0eOa.png";
    filenames[9] = "https://i.imgur.com/qzJQm37.png";
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }
    //fall images of judy
    filenames2[0] = "https://i.imgur.com/c1vUye5.png";
    filenames2[1] = "https://i.imgur.com/mbibpsr.png";
    filenames2[2] = "https://i.imgur.com/ZSeL7on.png";
    filenames2[3] = "https://i.imgur.com/UNqmLD7.png";
    for (var i = 0; i < filenames2.length; i++) {
        fallImage[i] = loadImage(filenames2[i]);
    }
    //walk cycle images of the goat
    filenames3[0] = "https://i.imgur.com/RRf37Kf.png";
    filenames3[1] = "https://i.imgur.com/ue4D3ig.png";
    filenames3[2] = "https://i.imgur.com/MxIlCqf.png";
    filenames3[3] = "https://i.imgur.com/UDHWsZ8.png";
    filenames3[4] = "https://i.imgur.com/a3nmvz3.png";
    filenames3[5] = "https://i.imgur.com/i75T56A.png";
    filenames3[6] = "https://i.imgur.com/cN4M52I.png";
    filenames3[7] = "https://i.imgur.com/A1iDTIi.png";
    for (var i = 0; i < filenames3.length; i++) {
        walkImage2[i] = loadImage(filenames3[i]);
    }
    //fall images of the goat
    filenames4[0] = "https://i.imgur.com/plfUZHK.png";
    filenames4[1] = "https://i.imgur.com/g7C3kXU.png";
    filenames4[2] = "https://i.imgur.com/14PuZpL.png";
    filenames4[3] = "https://i.imgur.com/Pcl7xcg.png";
    filenames4[4] = "https://i.imgur.com/KC56zzH.png";
    for (var i = 0; i < filenames4.length; i++) {
        fallImage2[i] = loadImage(filenames4[i]);
    }

    street = loadImage("https://i.imgur.com/G0SJIDN.jpg");
    clouds = loadImage("https://i.imgur.com/LbxT2nS.png");
    nick = loadImage("https://i.imgur.com/hEIvnaB.png");
}

//constructor for walking judy
function makeJudy(jx, jy, jdx) {
    var j = {x: jx, y: jy, dx: jdx,
             imageNum: 0,
             stepFunction: stepJudy,
             drawFunction: drawJudy
         }
    return j;
}
function stepJudy() {
    this.x += this.dx; //increase x by dx
    this.imageNum ++; //increase imageNum
    //if reaches the length (end) of the array (go over 10 images), start from 0 again
    if (this.imageNum == walkImage.length) { 
        this.imageNum = 0;
    }
}
function drawJudy() {
    image(walkImage[this.imageNum], this.x, this.y, 63, 80); //draw the image
}


//constructor for falling judy
function makeFallDown(fx, fy) {
    var f = {x: fx, y: fy, imageNum: 0,
            stepFunction: stepFallDown,
            drawFunction: drawFallDown
         }
    return f;
}
function stepFallDown() {
    //increases imageNum only when it has not exceed the length of the array fallImage
    if(this.imageNum < fallImage.length-1) {
        this.imageNum ++;
    }  
}
function drawFallDown() {
    image(fallImage[this.imageNum], this.x, this.y, 170, 100);
}


//constructor for walking goat
function makeNewChar(cx, cy, cdx) {
    var c = {x: cx, y: cy, dx: cdx,
             imageNum: 0,
             stepFunction: stepChar,
             drawFunction: drawChar
         }
    return c;
}
function stepChar() {
    this.x += this.dx; 
    this.imageNum ++; 
    if (this.imageNum == walkImage2.length) { 
        this.imageNum = 0;
    }
}
function drawChar() {
    image(walkImage2[this.imageNum], this.x, this.y, 120, 180); 
}


//constructor for falling goat
function makeFallDown2(fx, fy) {
    var f = {x: fx, y: fy, imageNum: 0,
            stepFunction: stepFallDown2,
            drawFunction: drawFallDown2
         }
    return f;
}
function stepFallDown2() {
    if(this.imageNum < fallImage2.length-1) {
        this.imageNum ++; 
    }  
}
function drawFallDown2() {
    image(fallImage2[this.imageNum], this.x, this.y, 300, 200);
}

//set up sounds
function soundSetup() {
    walk.setVolume(0.4);
    ouch.setVolume(0.8);
    bodyfall.setVolume(1.2);
    nickhumming.setVolume(0.1);
}
//define a function to add the sounds
function addSounds() {
    if(frameCount % 15 == 1) {
        walk.play(); //walking footstep sounds very 15 frameCounts
    }
    if(frameCount == 99) {
        ouch.play(); //judy makes "ouch" sound when being tripped
    }
    if(frameCount > 100){
        walk.stop(); //stop walking footstep sounds when falling down
    }
    if(frameCount == 100) {
        bodyfall.play(); //body falling sound of the goat after judy falls
    }
    if(frameCount == 108) {
        nickhumming.play(); //nick humming after they both falls
        noLoop(); //end the loop
    }
}



function setup() {
    createCanvas(700, 500);
    frameRate(5);
    useSound();
    //store the characters info to the characters array
    var judyX = width/4;
    character.push(makeJudy(judyX, height-94, 0));
    character.push(makeFallDown(judyX, height-112, 0));
    var newCharX = width/3;
    character.push(makeNewChar(newCharX, height-184, 0)); //walking goat before judy falls
    var newChar2X = width/3;
    character.push(makeNewChar(newChar2X, height-184, 10)); //goat after judy falls, continue walking
    character.push(makeFallDown2(290, height-199, 10));
}

function draw() {
    background(25);
    //call the addSounds function to add sounds
    addSounds();
    //constrain the Xs of the images of street and clouds so that they stop rolling when Judy falls
    //street and clouds rolling with different speed according to frameCount
    var streetX = constrain(0-frameCount*10, -1000, 0); 
    var cloudsX = constrain(0-frameCount*5, -500, 0);
    image(street, streetX, -70, 2000, 600);
    image(clouds, cloudsX, -100, 2000, 600);

    //update the steps and draw the characters
    //constrain the X of nick so that it does not move when the street scene stops
    var nickX = constrain(1175-frameCount*10, 175, 1000);
    var judyX = width/4;
    var newCharX = width/11;
    //if judy (width/4) has not meet nick(nickX)
    if (nickX > width/4) {
        //draw the image of nick
        image(nick, nickX, height-111, 80, 100);
        character[2].stepFunction(); 
        character[2].drawFunction(); //walking goat
        character[0].stepFunction();
        character[0].drawFunction(); //walking judy
    } 
    //if judy (width/4) passes by nick(nickX)
    if (judyX == nickX) {
        character[1].stepFunction();
        character[1].drawFunction(); //judy falls down
        //the goat continue walking
        if (character[3].x < 250) { 
            character[3].stepFunction();
            character[3].drawFunction(); //walking goat
        }
    } 
    //if judy pushes the goat
    if (character[3].x >= 250) {
        character[4].stepFunction();
        character[4].drawFunction(); //goat falls down
    }
}