Project 10: Sonic Story

For this project, I reintroduce three characters from a cartoon TV show called We Bare Bears. With images I used online, I created a story of the three bears enjoying the company of each other. In the first scene, the Panda is alone and on his phone. Once Grizzly comes into the second scene, the music begins to play with birds chirping in the background. Then for the rest of the story, Ice (polar bear) also joins and has fun with the two other bears by taking selfies.

sketch – Copy
//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 10


//NOTE
//when submitting to autolab use ideate links
//to test sounds on your own computer put in local server

//images
var grizzlyBearWave;
    var grizzlyX1 = 600;
    var grizzlyY1 = 200;

var polarBear;
    var iceX1 = 600;
    var iceY1 = 200;

var pandaBear;
var phonePanda;
var selfiePanda;

var tree;
var cloud;
    var cloudX = 3.0;
    var cloudX1 = 230;
    var cloudY1 = 50;
    var cloudX2 = 420;
    var cloudY2 = 90;
    var cloudX3 = 20;
    var cloudY3 = 3;

var bird;
    var birdX = 3.0;
    var birdX1 = 200;
    var birdY1 = 80;

//sounds
var morningTune;

//extra
var frameCount = 0;
var grizzlyWalking = true;
var iceGliding = true;



function preload() {
    //images of characters
    pandaBear = loadImage("https://i.imgur.com/QZ4Xc1z.png"); 
    phonePanda = loadImage("https://i.imgur.com/6uzoWNj.png");
    selfiePanda = loadImage("https://i.imgur.com/Nf2uQ1H.png");
    
    grizzlyBearWave = loadImage("https://i.imgur.com/c7NYxSP.png"); 
    posingGrizzly = loadImage("https://i.imgur.com/PEW3RSR.png");

    iceBear = loadImage("https://i.imgur.com/tg3n57a.png"); 
    glidingIce = loadImage("https://i.imgur.com/05dhxMV.png");
    posingIce = loadImage("https://i.imgur.com/MCEiihm.png");


    //images of extras
    tree = loadImage("https://i.imgur.com/cRiGrz5.png");
    cloud = loadImage("https://i.imgur.com/UjxNnu7.png");
    bird = loadImage("https://i.imgur.com/me1Zdik.png");

    //sounds in story for submission
    morningTune = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/morningsong-1.wav");
    
    //sounds in story for self testing --- localserver
    //morningTune = loadSound("sounds/morningsong.wav");
}


function setup() {
    createCanvas(600, 420);
    useSound();
    frameRate(10);
}


function soundSetup() { 
    morningTune.setVolume(0.5);

}


function draw() {
    
    frameCount++;

    switch (frameCount) {
        case 61: morningTune.play(); break; //to start playing song when panda is no longer alone
    }

    //story frames
    //partA
    if (frameCount >= 0 & frameCount < 60) {
        pandaOnPhone();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

    }

    //partB
    if (frameCount >= 60 & frameCount < 130) {
        grizzlySaysHi();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //grizzly says hi
        if (grizzlyWalking) {
            grizzlyX1 -= 5;
        } else if (grizzlyX1 <= width/2 + 50) {
            grizzlyWalking = false; 
        }

    }


    //partC
    if (frameCount >= 130 & frameCount < 180) {
        selfieTimeA();
        
        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }
    }


    //partD
    if (frameCount >= 180 & frameCount < 240) {
        iceBearStares();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }

    }

    //partE
    if (frameCount >= 240 & frameCount < 410) {
        iceBearJoins();

        //movement of clouds 
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }

        //ice bear joins by gliding
        if (iceGliding) {
            iceX1 -= 5;
        } else if (iceX1 <= 200) {
            iceGliding = false;
        }

    }

    //partF
    if (frameCount >= 410 & frameCount < 460) {
        selfieTimeB();

        //movement of clouds
        if (cloudX1 > width) {
            cloudX1 = 0; 
        } else if (cloudX2 > width) {
            cloudX2 = 0; 
        } else if (cloudX3 > width) {
            cloudX3 = 0;
        }

        //movement of bird
        if (birdX > width) {
            birdX = 0;
        }
              
    }

    if (frameCount >= 460) {
        background("black");
        fill(255);
        textSize(50);
        textFont('Georgia');
        text('The End', 300, 300);
    } 

}


//separate functions for each scene
//PART A
function pandaOnPhone() {
    background(175, 206, 255); 
    sun();  
    grass(); 
    
    clouds();

    image(tree, 5, 5, 350, 350);

    image(phonePanda, 150, 240, 150, 150); 
}

//PART B
function grizzlySaysHi() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();

    image(tree, 5, 5, 350, 350);

    image(pandaBear, 150, 200, 150, 230);
    image(grizzlyBearWave, grizzlyX1, grizzlyY1, 150, 200); 
}

//PART C
function selfieTimeA() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);
}

//PART D
function iceBearStares() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);
    image(iceBear, 550, 200, 85, 130);

}

//PART E
function iceBearJoins() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(glidingIce, iceX1, iceY1, 170, 150);
    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);     
}

//PART F
function selfieTimeB() {
    background(175, 206, 255); 
    sun();  
    grass();

    clouds();
    birdie();

    image(tree, 5, 5, 350, 350);

    image(posingIce, 50, 200, 150, 200); 
    image(posingGrizzly, 120, 180, 200, 250);
    image(selfiePanda, 250, 150, 200, 320);    
}



//EXTRA --- "background"
function sun() { //yellow circle in partA
    strokeWeight(1);
    stroke(0);
    fill(255, 242, 147);
    circle(500, 70, 80);
}

function grass() { //green rectangle in partA
    strokeWeight(1);
    stroke(0);
    fill(133, 182, 57);
    rect(0, 250, 600, 170);
}

function clouds() { //clouds in partA
    image(cloud, cloudX1, cloudY1, 150, 80);
    image(cloud, cloudX2, cloudY2, 150, 80);
    image(cloud, cloudX3, cloudY3, 150, 80);
    cloudX1 += cloudX; //speed of clouds
    cloudX2 += cloudX;
    cloudX3 += cloudX;
}

function birdie() { //bird in partA
    image(bird, birdX1, birdY1, 150, 150);
    birdX1 += birdX; //speed of bird
}

Leave a Reply