Project 10: Sonic Story

For my sonic story, I decided to depict a short story of a girl who is waiting for the bus but unfortunately, the bus does not stop, and thundering starts. I used images of drawings for the girl and clouds while I coded the other “characters” (the bus stop, light post, and bus). For the sounds, I used the sound of a bus and the sound of thunder beginning. This story is a very familiar experience in my life (although, fortunately, I never got rained on immediately after missing the bus).

sketch
// story: girl is waiting for the bus but the bus skips over her and it begins to thunder.

var person;
var personFrowning;
var busSound;
var thunder;
var rain;
var clouds;

function preload() {
    person = loadImage("https://i.imgur.com/hEZlRjK.png");
    personFrowning = loadImage("https://i.imgur.com/5vGwTK1.png");
    clouds = loadImage("https://i.imgur.com/xBxIA9K.png")
    busSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bus.wav");
    thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder-3.wav");
}

function setup() {
    createCanvas(400, 350);
    useSound();
    frameRate(60);
}

function soundSetup() { 
    busSound.setVolume(.5);
    thunder.setVolume(.5);
}

var busPosition = 400;

function draw() {
    // bus sound
    busSound.playMode("untilDone");
    busSound.play();
    noStroke();
    // sky
    background(31, 35, 105);
    image(clouds, 0, 0, width, 100);
    // road
    fill(150);
    rect(0, 250, width, height);
    // sidewalk
    fill(200);
    rect(0, 240, width, 30);
    drawBusStop();
    drawStreetLamp();

    // person
    if(busPosition > 80) { // happy person, waiting for bus, facing the bus (to the right)
        push();
        translate(400, 0);
        scale(-1, 1);
        image(person, 240, 180, 80, 80);
        pop();
        textSize(10);
        fill(255);
        text("yay! the bus is coming!", 100, 300);
    }
    else { // sad person because bus did not stop, facing the bus (to the left)
        image(personFrowning, 80, 180, 80, 80);
        // add captions based on bus position
        if(busPosition < 70 & busPosition > -235) {
            textSize(10);
            fill(255);
            text("what the heck? did he not see me...", 100, 300);
        }
    }
    drawBus(busPosition);
    busPosition -= 1;

    // bus is gone
    if(busPosition == - 235) {
        busSound.stop();
        // thunder starts
        thunder.play();
        noLoop();
    }
}


// draw bus
function drawBus(x) {
    // bus body
    fill(145, 0, 15);
    rect(x, 150, 230, 110);
    // windows
    fill(201, 228, 250);
    rect(x, 160, 40, 40);
    rect(x + 100, 160, 50, 40);
    rect(x + 160, 160, 50, 40);
    // wheels
    fill(0);
    circle(x + 20, 265, 30, 30);
    circle(x + 60, 265, 30, 30);
    circle(x + 170, 265, 30, 30);
    circle(x + 210, 265, 30, 30);
}

// draw bus stop pole
function drawBusStop() {
    // pole
    fill(0);
    rect(70, 105, 5, 140);
    // sign
    fill(213, 33, 33);
    rect(60, 105, 25, 25);
}

// draw street lamp 
function drawStreetLamp() {
    // light reflection
    fill(255, 233, 158, 50);
    circle(355, 105, 50);
    // pole
    fill(0);
    rect(350, 105, 10, 140);
    // light
    fill(255, 233, 158);
    circle(355, 105, 25);

}

Leave a Reply