Project 10 – Sonic Story

sketchDownload
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 

var count = 0; 
var grayvalue = 255; 

function preload() {
    // loading image files 
    sheep = loadImage("https://i.imgur.com/ASPgqzI.png"); 
    sheep2 = loadImage("https://i.imgur.com/E1rZIt0.png")
    rabbit = loadImage("https://i.imgur.com/R9besKF.png"); 
    turtle = loadImage("https://i.imgur.com/KzuH03l.png"); 
    turtlefam = loadImage("https://i.imgur.com/6Wo9cT4.png?1")
    musician = loadImage("https://i.imgur.com/NAApLxI.png"); 
    musicnotes = loadImage("https://i.imgur.com/Q1cKMk2.png");

    // loading sound files 
    gasp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/gasp.wav"); 
    cheer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheer.wav"); 
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar1.wav"); 
    countdown = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/countdown.wav"); 
}

function soundSetup() { 
    // Setup for audio generation
    gasp.setVolume(.4); 
    cheer.setVolume(.6); 
    guitar.setVolume(.3); 
    countdown.setVolume(.5); 
}


function setup() {
    createCanvas(500, 600);
    frameRate(15); 
    useSound();

    // Set up text parameter
    textAlign(CENTER, CENTER); 

    // Creating character objects 
    rab = new Object(); 
    rab.image = rabbit; 
    rab.x = 60; 
    rab.y = 460; 
    rab.dy = 2; 
    rab.width = 200;
    rab.height = 150; 
    rab.draw = rabbitDraw; 

    turt = new Object(); 
    turt.image = turtle; 
    turt.x = 250; 
    turt.y = 450; 
    turt.dy = 1; 
    turt.width = 200;
    turt.height = 150; 
    turt.draw = turtleDraw; 

    turtfam = new Object(); 
    turtfam.image = turtlefam; 
    turtfam.x = 200; 
    turtfam.y = 700; 
    turtfam.dy = 2; 
    turtfam.width = 250;
    turtfam.height = 150; 
    turtfam.draw = turtlefamDraw; 

    muse = new Object(); 
    muse.image = musician; 
    muse.x = -100; 
    muse.y = 200; 
    muse.width = 330; 
    muse.height = 260; 
    muse.draw = musicianDraw; 

    // Normal sheep 
    she = new Object(); 
    she.image = sheep; 
    she.x = 360; 
    she.y = 150; 
    she.dx = 1; 
    she.width = 200; 
    she.height = 150; 
    she.draw = sheepDraw; 

    // Shocked sheep 
    she2 = new Object(); 
    she2.image = sheep2; 
    she2.x = 360; 
    she2.y = 150; 
    she2.width = 200; 
    she2.height = 150; 
    she2.draw = sheep2Draw; 

    notes = new Object(); 
    notes.image = musicnotes; 
    notes.x = 80; 
    notes.y = 170; 
    notes.width = 40; 
    notes.height = 30; 
    notes.draw = musicnotesDraw; 

}

function draw() {

    background(125,45,45);

    // Random speckles on race track 
    push(); 
    for (var i = 0; i < 100; i ++){
    fill(0); 
    ellipse(random(0,600),random(0,600),1.5,1.5); 
    }
    pop(); 

    // Starting Line and Dividers
    fill(255); 
    noStroke(); 
    rect(248,0,4,600); 
    rect(80,0,4,600); 
    rect(420,0,4,600); 
    rect(0,470,500,4); 

    // Checkered Finish Line 
    for(var y = 20; y <= 40; y += 20){ 
        for (var x = 0; x <= 500; x += 20){
            fill(grayvalue); 
            rect(x, y, 20, 20);
            grayvalue = 255 - grayvalue; 
        } 
        grayvalue = 255 - grayvalue; 
    }

    // Write "FINISH" near finish line
    textSize(50); 
    fill(0); 
    text("F  I  N  I  S  H", 250, 100); 
    fill(255); 
    text("1",100,500); 
    text("2",280,500);

    print(frameCount); 

    rab.draw(); 
    turt.draw(); 
    muse.draw(); 

    // Storyline 
    // Calling sounds at specific counts here: 
    if (count == 0){ 
        countdown.play(); 
    }

    if (count == 75){ 
        guitar.play(); 
    }

    if (count == 120){
        gasp.play(); 
    }

    if (count == 450){
        cheer.play(); 
    }

    if (count >= 0){
        she.draw(); 
        muse.draw(); 
    }

    // Make music notes move 
    if (count > 70 & count <= 660){
        notes.draw(); 
        notes.x += random(-2,2); 
        notes.y += random(-2,2); 
        if (notes.x <= 78 || notes.x >= 82){
            notes.x = 80; 
        }
        if (notes.y <= 168 || notes.y >= 172){
            notes.y = 170; 
        }        
    }

    // Moving images at specific counts 
    // Turtle and rabbit begin racing 
    if (count > 50 & count <= 60){
        turt.y -= turt.dy; 
        rab.y -= rab.dy; 
        she.draw(); 
        muse.draw(); 
    }

    // Musician starts playing, rabbit gets distracted and stops 
    // Turtle keeps going 
    if (count > 60 & count <= 80){
        rab.y -= rab.dy; 
        turt.y -= turt.dy; 
        she.draw(); 
    }

    // turtle keeps going 
    // rabbit still distracted
    if (count > 80 & count <= 110){
        turt.y -= turt.dy; 
        rab.y -= rab.dy; 
        if (rab.y = 300){
            textSize(13); 
            text("i love music",200,280); 
            rab.y = 300; 
        }
        she.draw(); 
    }

    // Sheep shows up, gasps at surprise 
    // Turtle wins 
    if (count > 110 & count<= 120){
        turt.y -= turt.dy;  
        she.draw(); 
    }

    if (count > 120){
        textSize(13); 
        text("*shocked*",465,170); 
        turt.y -= turt.dy        
        if (turt.y <= 10){
            turt.y = 10; 
            turtfam.draw();
            turtfam.y -= turtfam.dy; 
            if (turtfam.y <= 100){
                turtfam.y = 100; 
            }
        }
        she2.draw(); 
    }

    // Confetti celebration for when turtle wins 
    if (count >= 450){
        confetti(); 
    }

    count ++; 
}


function turtleDraw(){
    image(turtle, this.x,this.y, this.width, this.height); 
}

function rabbitDraw(){
    image(rabbit,this.x,this.y, this.width, this.height); 
} 

function sheepDraw(){
    image(sheep, this.x, this.y, this.width, this.height); 
}

function sheep2Draw(){
    image(sheep2, this.x, this.y, this.width, this.height); 
}

function musicianDraw(){
    image(musician, this.x, this.y, this.width, this.height); 
}

function musicnotesDraw(){
    image(musicnotes, this.x,this.y,this.width, this.height); 
}

function turtlefamDraw(){
    image(turtlefam, this.x,this.y,this.width, this.height); 
}

function confetti(){
    var cy = 0; 
    var cDy = 3; 
    for( i = 0; i <= 300; i++){
        fill(random(255),random(255),random(255)); 
        ellipse(random(width),cy, 4,4); 
    cy += cDy; 
    }
}
































For my sonic story, I wanted to illustrate the class Tortoise and the Hare race. In this story, the rabbit is distracted by the music and stops racing, while the turtle takes it slow and continues to race. In the end, his win is celebrated by confetti and his family joining to congratulate him.

I also drew the characters separately in the “Sketchbook” app in order to get the transparent background for this project.

Leave a Reply