Project 10 – Sonic Story

//Maggie Ma
//Section D
//Sonic Story

//STORYLINE: a little western horseracing film. 
//In the first scene, the start gun goes off.
//Then, the horses start galloping.
//Finally, the crowd cheers.

var horseImage = [];   // an array to store the images
var horse = []; //array to hold horse

//frame counter 
var frameCount = 0;

//crowd image
var crowd;

//gun image
var gun;

//race gun x position
var gunX = -200;

//horse background of first scene
var horsebg; 

//crowd scene zoom in and out
var zoomx = 0; 
var zoomy = 0;

//sounds
var neigh;
var shot;
var gallop;
var crowdcheer;

function preload(){

    neigh = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/neigh.wav");
    shot = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gunshot-1.wav");
    gallop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gallop-1.wav");
    crowdcheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crowd.wav");
    
    //horse running image files
    var filenames = [];
    filenames[11] = "https://i.imgur.com/Kpc8OBb.gif";
    filenames[10] = "https://i.imgur.com/G6TaUvT.gifg";
    filenames[9] = "https://i.imgur.com/lbhzzYr.gif";
    filenames[8] = "https://i.imgur.com/wuAUUaw.gif";
    filenames[7] = "https://i.imgur.com/083HFuW.gif";
    filenames[6] = "https://i.imgur.com/VpQvDCP.gif";
    filenames[5] = "https://i.imgur.com/4G68Ubf.gif";
    filenames[4] = "https://i.imgur.com/hE8DQXc.gif";
    filenames[3] = "https://i.imgur.com/6WcJ0gS.gif";
    filenames[2] = "https://i.imgur.com/T1Xwkkj.gif";
    filenames[1] = "https://i.imgur.com/2PDeXWh.gif";
    filenames[0] = "https://i.imgur.com/shnBbse.gif";

    crowd = loadImage('https://i.imgur.com/9tu2YoL.jpg');
    gun = loadImage('https://i.imgur.com/lmEa4Kh.png');
    horsebg = loadImage('https://i.imgur.com/Q9r6TGv.png');

 
    for (var i = 0; i < filenames.length; i++) {
        horseImage[i] = loadImage(filenames[i]);
    }
}

function stepCharacter() { //update function
    this.imageNumber+=1;

    //reset image cycle when reach the end of array
    if (this.imageNumber>11) {
        this.imageNumber =0; 
    }
}

function drawCharacter() {
    //making the dude walk
    image(horseImage[this.imageNumber], this.x, this.y);
}

function makeCharacter(wx, wy, wdx, wdy) { //character constructer
    w = {
        x: wx,
        y: wy, 
        dx: wdx,
        dy: wdy, 
        imageNumber: 0,
        stepFunction: stepCharacter,
        drawFunction: drawCharacter
        }
    return w;
}

function setup() {
    createCanvas(480, 350);
    useSound();
    imageMode(CENTER);
    for (var i=0; i<1; i++) { 
        var w = makeCharacter(240,170,0,0);
        horse.push(w); 
    }
    frameRate(10);
}

function soundSetup () {
    neigh.setVolume(0.8);
    shot.setVolume(0.5);
}
function draw() {
    background(255);

    frameCount++;
    if (frameCount >= 0& frameCount < 160) { //race gun goes off scene
        image(horsebg, 240, 196, width, height); //background
        image(gun, 200 + gunX, height-250, width, height); //gun image
        if (frameCount >= 0 & frameCount < 70){ 
            gunX += 7; //gun slides in
        } else if (frameCount >= 90 & frameCount <160) {
            gunX -=12; //gun slides out
        } 
    }
   
    else if (frameCount >=100 & frameCount <300) { //horse galloping scene
        for (var i=0; i<1; i++) { //three people walking
            var w = horse[i];
            push();
            w.stepFunction();
            w.drawFunction();
            pop();
        }

    } else if (frameCount >=300 & frameCount < 400) { //crowd cheering scene
        image(crowd, 240, 196, width + zoomx, height + zoomy);
        zoomx +=3; //zoom in x
        zoomy += 3; //zoom in y 

    } else if (frameCount >= 400 & frameCount <450) { //end scene
        background(0);
        fill(255);
        textFont('Courier New Italic')
        textSize(16);
        text('the great race.', width-200, height-75);
    
    }else if (frameCount >= 450) {
        background(0);
        noLoop();
    }

    //sound play
    if (frameCount == 88) {
        shot.play();
    } else if (frameCount == 130){
        gallop.play();
    } else if (frameCount == 200){
        neigh.play();
    } else if (frameCount == 270) {
        crowdcheer.play();
    } else if (frameCount > 400) {
        crowdcheer.stop();
    }
}