Project 10 – Sonic Story + Media Files – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

For my sonic story, I made an animation of a series of animals chasing each other. I first started with a gif of a dog running, then split it into several frames to animate. I then decided to make it get chased by a bee (also a gif), then have the dog chase a cat who chases a mouse. The full frame is too long to display here, but this is a screenshot of what it looks like when all four characters are in frame:
barking Download
// STORYLINE: A bee chasing a dog chasing a cat chasing a mouse.



var dogWalk = [];   // an array to store the images of a dog walking
var beeFly = []; // array to store images of bee flying
var catRun = []; // images of cat running
var mouse;
var mx = 920; // x position of mouse
var fence;
var barking;
var buzz;
var meow;
var squeak;




function preload(){

    // images of dog walking
    var dogs = [];
    dogs[0] = "https://i.imgur.com/Obg7kQd.gif";
    dogs[1] = "https://i.imgur.com/vUkgpet.gif";
    dogs[2] = "https://i.imgur.com/jvjCknz.gif";
    dogs[3] = "https://i.imgur.com/yFxMHG1.gif";
    dogs[4] = "https://i.imgur.com/oPxOfcq.gif";
    dogs[5] = "https://i.imgur.com/i0WRXiO.gif";
    dogs[6] = "https://i.imgur.com/338YDhl.gif";
    dogs[7] = "https://i.imgur.com/W62WgdJ.gif";
    dogs[8] = "https://i.imgur.com/2GhHX5W.gif";
    dogs[9] = "https://i.imgur.com/VgfCha4.gif";
    dogs[10] = "https://i.imgur.com/MbUowkT.gif";
    dogs[11] = "https://i.imgur.com/CnQCi0T.gif";
    dogs[12] = "https://i.imgur.com/rWgGUWm.gif";
    dogs[13] = "https://i.imgur.com/WPaT5V0.gif";
    dogs[14] = "https://i.imgur.com/y8qx8WE.gif";
    dogs[15] = "https://i.imgur.com/Vp1xVPc.gif";

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

    //images of bee flying
    var bees = [];
    bees[0] = "https://i.imgur.com/4850hmR.gif";
    bees[1] = "https://i.imgur.com/0FMGyos.gif";
    bees[2] = "https://i.imgur.com/7CozqZ5.gif";
    bees[3] = "https://i.imgur.com/J6e0HBK.gif";
    bees[4] = "https://i.imgur.com/uexlFJE.gif";
    bees[5] = "https://i.imgur.com/intd8Rx.gif";
    bees[6] = "https://i.imgur.com/l3ZVHzT.gif";
    bees[7] = "https://i.imgur.com/NNG3lnb.gif";
    bees[8] = "https://i.imgur.com/wYl8pHt.gif";
    bees[9] = "https://i.imgur.com/CM53Kch.gif";
    bees[10] = "https://i.imgur.com/Tt90vYh.gif";
    bees[11] = "https://i.imgur.com/MTQRrrG.gif";
    bees[12] = "https://i.imgur.com/8S7d588.gif";
    bees[13] = "https://i.imgur.com/tO9HTc5.gif";
    bees[14] = "https://i.imgur.com/KtbttF1.gif";
    

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

    //images of the cat
    var cats = [];
    cats[0] = "https://i.imgur.com/ZWzbhxI.gif";
    cats[1] = "https://i.imgur.com/GaD7QU7.gif";
    cats[2] = "https://i.imgur.com/i6pEZq8.gif";
    cats[3] = "https://i.imgur.com/ljdWpB9.gif";
    cats[4] = "https://i.imgur.com/3dpfves.gif";
    cats[5] = "https://i.imgur.com/r0rgZRT.gif";
    cats[6] = "https://i.imgur.com/810gnOd.gif";
    cats[7] = "https://i.imgur.com/36qZ7mv.gif";
    cats[8] = "https://i.imgur.com/DPO7GIs.gif";
    cats[9] = "https://i.imgur.com/r9pxkAW.gif";
    cats[10] = "https://i.imgur.com/BNjV3y7.gif";
    cats[11] = "https://i.imgur.com/GOJmcoi.gif";

        for (var i = 0; i < cats.length; i++) {
        catRun[i] = loadImage(cats[i]);
    }
    
    mouse = loadImage("https://i.imgur.com/293UbtW.png");

    fence = loadImage ("https://i.imgur.com/N9jB1Hh.png");

    barking = loadSound ("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/barking.wav");

    buzz = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/buzz.wav");

    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/meow-2.wav");

    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/squeak.wav");
}
    
function soundSetup(){
    //barking.setVolume(0.75);
    buzz.setVolume(15);
    meow.setVolume(0.4);
    //squeak.setVolume(1);
}

//updates walking dog for next frame
function stepDog(){
    this.imageNumber++;

    //cycles through the 16 images
    if (this.imageNumber>15){
        this.imageNumber=0;
    }
}

//updates flying bee for next frame
function stepBee(){
    this.imageNumber++;

    // cycles through 15 images
    if (this.imageNumber>14){
        this.imageNumber = 0;
    }  
}

//updates cat for next frame
function stepCat(){
    this.imageNumber++;

    // cycles through 12 images
    if (this.imageNumber>11){
        this.imageNumber = 0;
    }  
}


//draws walking dog
function drawDog(){ image(dogWalk[this.imageNumber], this.x, this.y, 200, 110); }

// draws flying bee
function drawBee() { 
    push();
    scale(-1, 1);
    image(beeFly[this.imageNumber], this.x, this.y, 50, 50)
    pop();
}

// draws cat
function drawCat() { 
    push();
    scale(-1, 1);
    image(catRun[this.imageNumber], this.x, this.y, 80, 80)
    pop();
}


//constructor that creates and returns an object representing a dog
function makeDog(cx, cy){
    c = {x: cx, y: cy,
        dx: 8, 
        imageNumber:0,
        stepFunction: stepDog,
        drawFunction: drawDog}
    return c;
}

//constructor that creates and returns an object for a bee
function makeBee(bx, by){
    b = {x: bx, y: by,
        dx: 7,
        imageNumber: 0,
        stepFunction: stepBee,
        drawFunction: drawBee}
    return b;
}

//constructor that creates and returns an object for a cat
function makeCat(ax, ay){
    a = {x: ax, y: ay,
        dx: 9,
        imageNumber: 0,
        stepFunction: stepCat,
        drawFunction: drawCat}
    return a;
}


//empty array for dog
var dog=[];

//empty array for bee
var bee = [];

//empty array for cat
var cat = [];


function setup(){
    createCanvas(800, 100);
    imageMode(CENTER);

    for (var i = 0; i < 1; i++) {
        // make a dog
        var c = makeDog(1100, i+60);
        // push the dog onto dog array
        dog.push(c);

        var b = makeBee(-1200, i+50);
        bee.push(b);

        var a = makeCat(-1000, i+70);
        cat.push(a);
    }
    useSound();
    frameRate(8);
}

function draw(){
    background(201, 74, 88);

    //barking sound
    if (frameCount == 65 || frameCount == 75) {
        barking.play(); 
    } 

    // buzzing sound
    if (frameCount == 80 || frameCount == 90){
        buzz.play();
    }

    // meow
    if (frameCount == 40 || frameCount == 50){
        meow.play();
    }

    //squeak
    if (frameCount == 20 || frameCount == 30){
        squeak.play();
    }
    

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the dog
            var c = dog[i];
            c.stepFunction();
            c.drawFunction();
            //moves dog to the left
            dog[i].x-=dog[i].dx;
        }
    }
    

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the bee
            var b = bee[i];
            b.stepFunction();
            b.drawFunction();
            //moves bee to the left
            bee[i].x+=bee[i].dx;
        }
    }

    if (0 < frameCount < 100){
        for (var i = 0; i < 1; i++) { // for the cat
            var a = cat[i];
            a.stepFunction();
            a.drawFunction();
            //moves cat to the left
            cat[i].x += cat[i].dx;
        }
    }

    image(mouse, mx, 75, 45, 30);
    image(fence, 700, 100, 200, 70);

    mx -= 10

}

function mousePressed (){
    frameCount = 0;
}
Leave a Reply Cancel reply
