Project 10: Sonic Story

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

// Storyline: a mouse comes out of its hole, sees some cheese,
// then goes over to nibble on it. It sees the shadow of a cat,
// then scurries back to its hole.

var xPos; //x position of the mouse
var yPos; //y position of the mouse 
var timer=0; //for animation timing purposes
var yPosCat; //y position for cat shadow

function preload() {
    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/squeak.wav");
    aha = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/aha.wav");
    nibble = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/nibble.mp3");
    scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/scream.wav");
}

function soundSetup() {
    squeak.setVolume(0.5);
    aha.setVolume(0.5);
    nibble.setVolume(0.5);
    scream.setVolume(0.5);
}

function setup() {
    createCanvas(600,400);
    frameRate(4); //speed of story
    xPos=(width/2)+180;
    yPos=(height/2)+78;
    yPosCat=600;
    rectMode(CENTER);
    noStroke();
    useSound();
}

function setting() {
    //wall
    background(240); //light gray
    fill(156,56,72); //red
    rect(width/2,25,width,100);

    //mouse hole
    fill(131,122,117); //lighter grayish brown for the hole wall
    rect((width/2)+90,(height/2)+50, 110,200, 80,80);
    fill(96,91,86); //grayish brown for the hole
    rect((width/2)+100,(height/2)+50, 100,200, 80,80);

    //floor
    fill(107,58,15); //brown
    rect(width/2,400,width,200);
}

function cheese() {
    fill(242,205,96); //yellow
    quad(100,350, 200,310, 200,235, 100,250);
    fill(242,232,99); //lighter yellow
    quad(100,350, 60,320, 60,240, 100,250);
    fill(228,186,62); //darker yellow
    triangle(60,240, 100,250, 200,235);

    //holes
    fill(242,205,96); //yellow
    ellipse(70,300,10,30);
    ellipse(90,280,15,40);
    ellipse(80,320,10,20);
    ellipse(75,260,10,20);
}

function mousey(x,y) {
    stroke(170); //gray
    noFill();
    strokeWeight(5);
    curve(x+35,y,x+35,y,x+70,y,x+100,y-50);
    noStroke();
    fill(170); //gray
    rect(x,y, 70,40, 0,80,80,0);
    arc(x-35,y+20, 70,80, PI,0);
    fill(150); //darker gray
    ellipse(x-40,y+20,20,12);
    ellipse(x+15,y+20,20,12);
    ellipse(x-30,y-20,40);
    fill(216,130,157); //pink
    ellipse(x-30,y-20,30);
    ellipse(x-70,y+15,10,10);
    fill(0); //black
    ellipse(x-50,y,10,10);
}

function catShadow(x,y) {
    fill(50,50,50, 80);
    ellipse(x,y,400,200);
    ellipse(x,y+200,200,400);
    triangle(x+50,y-100, x+200,y-25, x+150,y-150);
    triangle(x-50,y-100, x-200,y-25, x-150,y-150);
}

function draw() {
    setting();
    cheese();
    mousey(xPos,yPos);

    //to conceal mouse entering hole
    fill(240); //light gray
    rect((width/2)+200,(height/2)+50, 100,100);
    fill(107,58,15); //brown
    rect(width/2+225,400, 150,200);

    //mouse movement
    if (xPos>260) {
        xPos-=10;
    }

    //cat shadow
    catShadow(width/2,yPosCat);
    if (yPosCat>(height/2) & timer>23) {
        yPosCat-=20;
    }

    if (timer>32) {
        setting();
        cheese();
        push();
        translate(width,0);
        scale(-1,1);
        mousey(xPos+90,yPos);
        pop();
        fill(240); //light gray
        rect((width/2)+225,(height/2)+50, 150,100);
        fill(107,58,15); //brown
        rect(width/2+225,400, 150,200);
        catShadow(width/2, yPosCat);
        if (xPos>30) {
            xPos-=20;
        }
    }

    //sound
    if (timer==0) {
        aha.play();
    }
    if (timer==16 || timer==10) {
        aha.stop();
        squeak.play();
    }
    if (timer==19) {
        nibble.play();
    }
    if (timer==33) {
        scream.play();
    }

    timer+=1;
}

When thinking of a story I could use for this assignment, I thought back to children’s stories and cartoons. Some notable cartoons came to mind, like Tom and Jerry and Looney Tune’s Tweety Bird, and based off of these I decided to do a cat and mouse theme. The basic story I decided on using was: “a mouse comes out of its hole, sees some cheese, then goes over to nibble on it. It sees the shadow of a cat, then scurries back to its hole.” To facilitate this story, I used an aha sound (for when the mouse sees the cheese), a squeak noise (to make the mouse more mousey), a nibble noise (for when the mouse is eating the cheese), and a scream (for when the mouse sees the cat). I think the story is cute and very readable.