Project-10: Sonic Story (& Media Sound Files)

frogcroak
thunder
water
fly-1

For my project, I animated a short story about a frog on a lily pad on a lake. The story is simply about a lonely frog who gets excited to eat a fly that comes alone (because it was hungry), and gets sad when a nearby fish swims away. There is thunder and lightning that turns the sky dark, and the frog wishes the fish had stayed with him. This project was pretty difficult because there were many things to account for, like all of the coordinates, movements, sounds, and captions. I had to refresh my canvas multiple times to make sure everything was playing out the way I wanted it to. I was tempted to import images into my code, but wanted to challenge myself, so I decided to create all the images and shapes/objects myself.

My 4 sounds consist of the following: a loud thunder that echoes, a rippling/swishing noise of water, a loud croaking of a frog, and a (very irritating) buzzing of a fly. I used the buzzing sound of the fly to make sure the viewer could understand that the shape I had created was some sort of bug/fly. With the frog, I wanted to make sure its croaking was heard after it ate the fly to show some emotion. With the loud thunder, I used it to make the story more dark and scary, followed by a sudden darkening of the sky. With the water noises, I used that to make the night sounds seem louder and make it more clear that the fish had swam away.

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//anniekim-10-project

/* 
For my program, this is the general story line:
A lonely frog who is on a lilypad in the middle
of the water, is there with a fish. A fly comes near
the frog, and the frog eats it. Luckily, the frog is 
happy because it was getting hungry, however it is not 
so lucky for the fly. Then suddenly, lightning strikes,
and thunder echoes through the sky, and the sky turns dark.
The fish swims away in fear, and the frog is left alone again.
*/

var fly; //audio file names
var frogcroak;
var thunder;
var water;

var bug = {
    x: 450, y: 180,
    width: 45, height: 25
}
var lily = {
    x: 110, y: 320, 
    width: 200, height: 90
}
var lily1 = {
    x: 110, y: 320,
    width: 200, height: 90
}
var tongue_move = {
    x: 240, y: 220
}
var cloud = {
    x: 50, y: 75
}
var crab = {
    x: 400, y: 370,
}
var fish = {
    x: 225, y: 440,
}


function preload() {
    // call loadImage() and loadSound() for all media files here
    fly = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fly-1.wav")
    frogcroak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frogcroak.wav")
    thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder.wav")
    water = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/water.wav")
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(450, 480);
    useSound();
    frameRate(1);
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    fly.setVolume(0.25);
    frogcroak.setVolume(0.75);
    thunder.setVolume(0.75);
    water.setVolume(0.8);
}


function draw() {
    //sky color
    background(217, 243, 245);
    //water
    fill(150, 214, 250);
    noStroke();
    rect(0, 250, 450, 230);
    //calling fish object
    fishy();
    //lilypad1 ~stagnant, doesnt move
    strokeWeight(2);
    stroke(100, 175, 0);
    fill(150, 225, 0);
    ellipse(lily1.x, lily1.y, lily1.width, lily1.height);
    fill(150, 214, 250); //making cut into lily pad
    noStroke();
    triangle(lily1.x, lily1.y, lily1.x - 100, lily1.y + 15, lily1.x - 50, lily1.y + 60);
    //calling cloud object
    clouds();
    //calling froggy object
    froggy();
    //fly & tongue movement + sound
    if (frameCount >= 1 && frameCount <= 7) {
        flying();
        fill(0);
        textSize(17);
        strokeWeight(1);
        textFont('HelveticaBold');
        text("The fly accidentally gets too close to the hungry frog.", 10, 100);
        tongue();
        fly.play();
    }
    if (frameCount == 7) {
        fly.stop(); //stops sound once fly disappears
    }
    if (frameCount >= 9 & frameCount <= 13) {
        frogcroak.play();
    }
    if (frameCount == 13) {
        frogcroak.stop();
    }
    if (frameCount == 25) {
        background(0);
        textSize(40);
        fill(255);
        strokeWeight(1);
        textFont('HelveticaBold');
        text("The End", 150, 240);
        water.stop();
        noLoop();
    }
}

function flying() {
    //creating 1st fly wing
    fill(255);
    stroke(0);
    ellipse(bug.x + 10, bug.y - 12, bug.width - 15, bug.height - 10);
    //creating fly body
    fill(0);
    noStroke();
    ellipse(bug.x, bug.y, bug.width, bug.height);
    //creating 2nd fly wing
    fill(255);
    stroke(0);
    ellipse(bug.x + 12, bug.y - 10, bug.width - 15, bug.height - 10);
    //making fly move
    bug.x = bug.x - 65;
    if (bug.x <=  200) {
        bug.x = 200;
    }
}

function froggy() {
    //light green color
    fill(117, 176, 111);
    //legs
    stroke(0);
    strokeWeight(3);
    ellipse(lily.x - 15, lily.y - 43, 35, 55);
    ellipse(lily.x + 65, lily.y - 43, 35, 55);
    //body
    ellipse(lily.x + 25, lily.y - 50, 80, 90);
    //feet
    fill(117, 176, 111);
    //arc(lily1.x - 3, lily1.y - 5, 40, 25, PI, 0);
    arc(lily.x + 4, lily.y - 5, 40, 30, PI, 0, CHORD);
    arc(lily.x + 46, lily.y - 5, 40, 30, PI, 0, CHORD);
    //head
    stroke(0);
    ellipse(lily.x + 25, lily.y - 105, 100, 80);
    //smile
    fill(100, 0, 0);
    arc(lily.x + 25, lily.y - 100, 70, 40, 0, PI, CHORD);
    //ears
    fill(117, 176, 111);
    circle(lily.x, lily.y - 140, 38);
    circle(lily.x + 47, lily.y - 140, 38);
    noStroke();
    circle(lily.x + 4, lily.y - 132, 36);
    circle(lily.x + 43, lily.y - 132, 36);
    //white part of eyes
    stroke(0);
    strokeWeight(2);
    fill(255);
    circle(lily.x + 47, lily.y - 140, 23);
    circle(lily.x, lily.y - 140, 23);
    //black of eyes
    fill(0);
    circle(lily.x + 47, lily.y - 140, 10);
    circle(lily.x, lily.y - 140, 10);
    //this will make the frog jump
    if (frameCount >= 9 & frameCount <= 10) {
        lily.y -= 150;
        textSize(20);
        strokeWeight(1);
        textFont('HelveticaBold');
        fill(0);
        text("The frog jumps with joy because it was hungry.", 15, 380);
    }
    if (frameCount >= 10 & frameCount <= 11) {
        lily.y += 150;
    }
}

function tongue() {
    strokeWeight(17);
    stroke(100, 0, 0);
    line(tongue_move.x, tongue_move.y - 10, 135, 230);
    //moving tongue to catch fly
    tongue_move.y -= 5;
    tongue_move.x -= 5;
    if (tongue_move.y <= 200) {
        tongue_move.y = 200;
    }
    if (tongue_move.x <= 220) {
        tongue_move.x = 220;
    }
}

function clouds() {
    if (frameCount >= 14 & frameCount <= 18) {
        darksky();
        lightning();
        textSize(28);
        fill(0);
        textFont('HelveticaBold');
        text("The sky shakes with thunder.", 100, 390);
        thunder.play();
    }
    if (frameCount >= 19 & frameCount <= 25) {
        darksky();
        thunder.stop();
        water.play();
    }
    fill(255);
    //left cloud
    circle(cloud.x, cloud.y, 100);
    circle(cloud.x - 45, cloud.y, 70);
    circle(cloud.x + 55, cloud.y, 55);
    //right cloud
    circle(cloud.x + 300, cloud.y - 30, 100);
    circle(cloud.x + 255, cloud.y - 30, 70);
    circle(cloud.x + 355, cloud.y - 30, 55);
    //clouds moving
    cloud.x += 5;
}

function lightning() {
    fill(255, 255, 0);
    quad(cloud.x, cloud.y, cloud.x - 20, cloud.y + 70, cloud.x + 10, cloud.y + 90, cloud.x + 30, cloud.y + 20);
    quad(cloud.x + 2, cloud.y + 75, cloud.x - 10, cloud.y + 145, cloud.x + 12, cloud.y + 165, cloud.x + 32, cloud.y + 95);
}

function darksky() {
    fill(160);
    rect(0, 0, 450, 250);
}

function fishy() {
    //body and tail
    fill(237, 104, 74);
    strokeWeight(1);
    stroke(255, 0, 0);
    ellipse(fish.x - 38, fish.y - 5, 17, 30);
    ellipse(fish.x - 38, fish.y + 5, 17, 30);
    ellipse(fish.x - 8, fish.y - 26, 30, 25);
    ellipse(fish.x, fish.y, 70, 60);
    //face of fish
    fill(255, 122, 92);
    ellipse(fish.x + 10, fish.y, 53, 54);
    //eyes of fish
    fill(255);
    stroke(0);
    circle(fish.x + 9, fish.y - 5, 18, 18);
    circle(fish.x + 27, fish.y - 5, 18, 18);
    fill(0);
    circle(fish.x + 9, fish.y - 5, 6, 6);
    circle(fish.x + 27, fish.y - 5, 6, 6);
    //bottom fin
    fill(237, 104, 74);
    stroke(155, 0, 0);
    triangle(fish.x, fish.y + 22, fish.x - 20, fish.y + 23, fish.x - 4, fish.y + 38);
    //smile
    noFill();
    arc(fish.x + 18, fish.y + 10, 20, 10, 0, PI);
    //fish is moving off of the canvas
    if (frameCount >= 19 & frameCount <= 25) {
        fish.x += 55;
        fish.y -= 36;
        fill(0);
        textFont('HelveticaBold');
        textSize(20);
        text("The frog wishes the fish would stay.", 50, 450);
        text("The frog doesn't want to be alone in the storm.", 50, 400);
    }
}
This is the image of a frog that I used as reference when drawing the shape on p5js.

Leave a Reply