Project: Sonic Story

luca sonic story

//Luca Cao
//lucacao@andrew.cmu.edu
//Section D

//Story: 
//pan put on stove. Sound 1
//Gas starts. Sound 2
//Steak cooks on pan and sizzle. Sound 3
//eats steak. Sound 4

var pan = {x:200,y:400,d:100,r:73,g:80,b:87,
            hx:200,hy:480,hw:15,hh:70,dy:20};//object pan
var stv = {x:200,y:200,d:150,r:33, g:37, b:41};//object stove
var stk = {x:200,y:200,w:40,h:60,r:220,g:24,b:54,dy:30};//object steak
var metal;
var gas;
var steak;
var eat;

function preload(){
    metal = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/metal.wav");
    gas = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/gas1.wav");
    steak = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/steak.wav");
    eat = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/eat.wav");

}

function soundSetup(){
    metal.setVolume(5);
    gas.setVolume(0.5);
    steak.setVolume(1);
    eat.setVolume(2);
}

function setup() {
    createCanvas(400, 400);
    noStroke();
    frameRate(2);
    useSound();
}

function draw() {
    background(255, 243, 176);

    //platform
    push();
    fill(173, 181, 189);
    rect(0,0,400,400);
    fill(108, 117, 125);
    rect(0,320,400,90);
    pop();

    //controls
    push();
    if (pan.y <= 350){
        fill(0,255,0);
        ellipse(300,350,10,10);
        ellipse(350,350,10,10);
    }
    pop();

    //stove
    push();
    fill(stv.r,stv.g,stv.b);
    ellipse(stv.x,stv.y,stv.d,stv.d);

    if (pan.y <= 300){
        stv.r = 200;
        stv.g = 0;
        stv.b = 0;
        gas.play();
    }
    pop();

    //pan
    push();
    rectMode(CENTER);
    fill(pan.r,pan.g,pan.b);
    ellipse(pan.x,pan.y,pan.d,pan.d);
    rect(pan.hx,pan.hy,pan.hw,pan.hh);
    pan.y = pan.y - pan.dy
    pan.hy = pan.hy - pan.dy

    if (pan.y <= 200){
        gas.stop();
        pan.dy = 0; 
    }
        //pan.hy = 280
    
    pop();


    //steak
    if (frameCount >= 15){
        fill(stk.r,stk.g,stk.b);
        ellipse(stk.x,stk.y,stk.w,stk.h);
        steak.play();
        

        if (frameCount >= 20){
            stk.r = 157;
            stk.g = 2;
            stk.b = 8;

            if (frameCount >= 25){
                stk.r = 106;
                stk.g = 4;
                stk.b = 15;

                if (frameCount >= 35){
                    stk.r = 80;
                    stk.g = 6;
                    stk.b = 23;
                    stk.y = stk.y - stk.dy;
                    steak.stop();

                    if (frameCount >= 45){
                        eat.play();
                    }

                    if (frameCount >= 50){
                        eat.stop();
                        background(0);
                        noLoop();
                    }
                }
            }
        }
    }
}

I created the story of cooking a steak. I started by animating all my visual assets and making sure that they appear at the right time. After that, I added sound into my code based on the position of the assets, as well as the frame count. I stored all the values on my characters in object form, which helped me to better manipulate them. During the process, I had difficulties preloading sounds into my code and I later realized that I used the wrong template for my code. I enjoyed making this project because, besides visual interaction, I also get to experiment with sonic interaction and make the outcome more engaging.