Sonic-Story

sketchDownload

//Yanina Shavialenka
//Section B

var walkImage = [];   // an array to store the images
var flying = []; //bird flying array images
var characters = [];
var birds = [];
var bg; //background image
var lightning; //lighting picture
var thunder; //thunder sound
var amb; //ambient sound
var chirp; //bird sound

function preload(){
    // These URLs are for the individual walk cycle images
    var filenames = [];
    filenames[0] = "https://i.imgur.com/14ifmej.png";
    filenames[1] = "https://i.imgur.com/r9GhjWn.png";
    filenames[2] = "https://i.imgur.com/A0L2KVp.png";
    filenames[3] = "https://i.imgur.com/JFE5CBm.png";
    filenames[4] = "https://i.imgur.com/14ifmej.png";
    filenames[5] = "https://i.imgur.com/r9GhjWn.png";
    filenames[6] = "https://i.imgur.com/A0L2KVp.png";
    filenames[7] = "https://i.imgur.com/JFE5CBm.png";
    filenames[8] = "https://i.imgur.com/14ifmej.png";
    filenames[9] = "https://i.imgur.com/r9GhjWn.png";
    filenames[10] = "https://i.imgur.com/A0L2KVp.png";
    filenames[11] = "https://i.imgur.com/JFE5CBm.png";

    // These URLs are for the individual bird cycle images
    var file = [];
    file[0] = "https://i.imgur.com/82McfxQ.png";
    file[1] = "https://i.imgur.com/OMNJ7z2.png";
    file[2] = "https://i.imgur.com/ZP2mduv.png";
    file[3] = "https://i.imgur.com/2ly1P4T.png";
    file[4] = "https://i.imgur.com/5VNmIMy.png";
    file[5] = "https://i.imgur.com/KjJmaEd.png";
    file[6] = "https://i.imgur.com/036LD8g.png";
    file[7] = "https://i.imgur.com/OPD7VfW.png";
    file[8] = "https://i.imgur.com/Rt8p00H.png";

    // These for loops change the images to create a walking and flying effect
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }

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

    //loads the images and sounds
    bg = loadImage("https://i.imgur.com/nqIhKWP.png");
    lightning = loadImage("https://i.imgur.com/6kvwrHw.gif");
    lightning.resize(150,0);
    thunder = loadSound("http://localhost:8000/thunder.wav");
    amb = loadSound("http://localhost:8000/amb.wav");
    chirp = loadSound("http://localhost:8000/bird.wav");
}

// Constructor for each walking character
function makeCharacter(cx, cy, cdx, cdy) {
    var c = { x: cx, y: cy, dx: cdx, dy: cdy,
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
        }
    return c;
}

// Constructor for each blying bird
function makeBird(cx, cy, cdx, cdy) {
    var c = { x: cx, y: cy, dx: cdx, dy: cdy,
             imageNum: 0,
             stepFun: stepBird,
             drawFun: drawBird
        }
    return c;
}

function stepCharacter() {
    this.imageNum++;
    if(this.imageNum >= walkImage.length) {
       this.imageNum = 0;
    }
     
    this.x += this.dx; 
}

function stepBird() {
    this.imageNum++;
    if(this.imageNum >= flying.length) {
       this.imageNum = 0;
    }
     
    this.x += this.dx; 
}

//This function draws the corresponding image
function drawCharacter() {
    image(walkImage[this.imageNum],this.x,this.y);
}

function drawBird() {
    image(flying[this.imageNum],this.x,this.y);
}

//This function creates the canvas and makes the character
function setup() {
    createCanvas(612,408);
    frameRate(15);
    for (var i = 0; i < walkImage.length; i++) {
        walkImage[i].resize(150,0);
    }
    for (var i = 0; i < flying.length; i++) {
        flying[i].resize(50,0);
    }
    characters.push(makeCharacter(0,125,1,0));
    birds.push(makeBird(0,50,3,0));
    useSound(0);
}

function soundSetup() {
    thunder.setVolume(0.5);
    amb.setVolume(0.2);
    chirp.setVolume(0.1);
}

function draw() {
    background(bg);
    if(frameCount >= 100) {
        image(lightning,425,-10);
        image(lightning,-20,-10);
        thunder.play();
        tint(100);
        characters[0].stepFunction();
        characters[0].drawFunction();
        birds[0].stepFun();
        birds[0].drawFun();
        characters[0].dx = 4;
        birds[0].dx = 6;
    }
    else {
        characters[0].stepFunction();
        characters[0].drawFunction();
        birds[0].stepFun();
        birds[0].drawFun();
        amb.play();
        chirp.play();
    }
}

For me, this assignment was really challenging considering the fact that we did not spend a lot of time on the sound topic so I was really struggling and tried to come up with something interesting and easy at the same time. In my code I made a girl walk and a bird fly: I used a sound effect to represent the chirping of a bird and sounds of an outside world. Then, the lightning strikes and the thunder sound comes off with dark background.

I could not upload the file properly here because the thunder sound is more than WordPress accepts and thus the file was not able to get loaded onto here.