Project 10 – Sonic Story: Early Bird

While I was brainstorming for this assignment, I kept thinking about one of my favorite poems from my childhood – ‘Early Bird’ by Shel Silverstein. He puts life in perspective in only a few lines. I decided I wanted to capture the lighthearted yet powerful impact of this poem in this assignment, hopefully bringing more life to the words.

I love Silverstein’s illustrations so I wanted to tell this story in the same visual language. I used the illustrations that are typically paired with this poem as a starting off point.

Early Bird

After drawing the worm in Procreate and recording some snores from local talent (within the confines of my house, that is.. #2020), I used a DAW to boost some up some of the low end of the snore recording as well reduce the ear-piercing frequencies of the original bird tweeting. I began assembling the final composition.

Sleepy worm

A pretty blatant Easter egg I included was the giving tree (from the book rattling the hearts of children since 1964, The Giving Tree). I figured it was a fun inclusion that helped make my scene feel more Shel Silverstein-y.

The Giving Tree (1973) - IMDb
sketch_onlineDownload
//PROJECT-10 SONIC STORY (EARLY BIRD)
//Jubbies Steinweh-Adler
// SECTION D

//I am telling the story of Shel Silverstein's Poem, 'Early Bird', which I 
//wanted to capture in a light-hearted way. I referenced the illustrations 
//from the poem book and referenced The Giving Tree  (another Shel Silverstein 
//classic) in the background to fill out the scene.
//The four elemetnts are the background(tree and sun), bird, text card, and worm


var counter = 0;

//-------------------IMAGES----------------------
    //Images - animated
        var lBirdImage = [];   // an array to store the images
        var wormImage = [];   // an array to store the images
    //Images - still
        var backdrop;
//-------------------SOUNDS----------------------
    var birdflap;
    var birdtweet;
    var snore;
//------------------TEXT-------------------------
    var poem = [];
        poem[0] = "Oh, if you're a bird, be an early bird"
        poem[1] = "And catch the worm for your breakfast plate."
        poem[2] = "If you're a bird, be an early early bird –– "

function preload(){
//-------------------IMAGES----------------------

    //Load arrays with respective links
    var lBirdlinks = [];
        lBirdlinks[0] = "https://i.imgur.com/6yc9BKx.png";
        lBirdlinks[1] = "https://i.imgur.com/QwnI1EY.png";
        lBirdlinks[2] = "https://i.imgur.com/jBLav2J.png";

    var wormLinks = [];
        wormLinks[0] = "https://i.imgur.com/F2zO93O.png";
        wormLinks[1] = "https://i.imgur.com/hBelnJC.png";
        wormLinks[2] = "https://i.imgur.com/uW5OplX.png";
        wormLinks[3] = "https://i.imgur.com/eRu5aBc.png";
    
    //Load All Images  
        //BIRD
    for (var i = 0; i < lBirdlinks.length; i++) {
        lBirdImage[i] = loadImage(lBirdlinks[i]);
    }
        //WORM
    for (var i = 0; i < wormLinks.length; i++) {
        wormImage[i] = loadImage(wormLinks[i]);
    }
    backdrop = loadImage("https://i.imgur.com/6h0YPCF.png");

    //-------------------SOUND----------------------
    birdflap = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdflap-1.wav");
    birdtweet = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdtweet-1.wav");
    snore = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/snore.wav");
}

// ==========BIRD===========
function stepBird() {
    this.imageNumber ++; //add each new frame
        if (this.imageNumber > 2) { //loop 3 images
            this.imageNumber = 0;
        }   
    this.x -= this.dx; //update x velocity
    this.y -= this.dy; //update y velocity
}
function drawBird() {
    image(lBirdImage[this.imageNumber], this.x, this.y, 568 * 0.3, 417 * 0.3 );
}

// BIRD CONSTRUCTOR
function makeBird(cx, cy, cdx, cdy) {
    b = {x: cx, y: cy,
         dx: cdx, dy: cdy,
         imageNumber: 0,
         stepFunction: stepBird,
         drawFunction: drawBird
        }
    return b;
}

//==========WORM=============

function stepWorm() {
    this.imageNumber ++; //add each new frame
        if (this.imageNumber > 3) { //loop 4 images
            this.imageNumber = 0;
        }   
}

function drawWorm() {
    image(wormImage[this.imageNumber], this.x, this.y, 352 * 0.35, 243 * 0.35);
}

// WORM CONSTRUCTOR
function makeWorm(cx, cy) {
    w = {x: cx, y: cy,
         imageNumber: 0,
         stepFunction: stepWorm,
         drawFunction: drawWorm
        }
    return w;
}
// ==========TEXT CARD===========

function stepCard() {
    this.y += this.dy; //update y movement
}

function drawCard() {
    fill(0);
    rect(this.x, this.y, 400, 200);
    fill(255);
    textSize(14);
    
    for (var p = 0; p < 3; p++) {
        text(poem[p], this.x + (p*50) + 30, this.y + (p*20) + 20, 300);
    }
}
    // CARD CONSTRUCTOR
function makeCard(cx, cy, cdy) {
    c = {x: cx, y: cy, dy: cdy,
         stepFunction: stepCard,
         drawFunction: drawCard
    }

    return c;
}


// -----------SETUP--------------
function setup(){
    createCanvas(400, 400);
    frameRate(3);
    useSound();
    imageMode(CENTER);

    makeBird(420, 100, 14, 0);
    makeWorm(120, 330);
    makeCard(0, 200, 13);
    
    
}
function soundSetup () {
    birdflap.setVolume(0.5);
    birdtweet.setVolume(0.5);
    snore.setVolume(0.5);
}

function draw() {
    background(250);
    counter++;
    
    //BACKGROUND
        image(backdrop, 200, 200, 300 * (1 + (1/3)), 300*(1 + (1/3)));
        
        //POEM LAST LINE
        fill(0);
        textSize(14);
        text("But if you're a worm, sleep late. ", 230, 310, 140);
        textSize(10);
        text("― Shel Silverstein", 270, 350, 140);     

    //FOREGROUND ELEMENTS    
        
        //WORM
        w.stepFunction();
        w.drawFunction();
            if(counter == 25) {
                snore.play();
            }
            
        //TEXT CARD 
        c.drawFunction();
            if(counter >= 30) { //move down after 30 frames
                c.stepFunction();
            }
            
        //BIRD
        b.stepFunction(); 
        b.drawFunction(); 
            if (counter == 1){
                birdtweet.play(); 
                birdflap.play();  
            }           
} 






Leave a Reply