Project-10

sketch
//Diana McLaughlin, dmclaugh@andrew.cmu.edu, Section A
//story project - a cat wanders around the house in search of dinner and runs into other characters - each more unlikely to live in the house than the last

var meow;
var bark;
var buzz;
var angry;
var aln;
var door;
var nom;

function preload() {
    meow = loadSound("http://127.0.0.1:8887/meow.wav");
    bark = loadSound("http://127.0.0.1:8887/bark.wav");
    buzz = loadSound("http://127.0.0.1:8887/fly.wav");
    angry = loadSound("http://127.0.0.1:8887/angry.wav");
    aln = loadSound("http://127.0.0.1:8887/alien.wav");
    door = loadSound("http://127.0.0.1:8887/door.wav");
    nom = loadSound("http://127.0.0.1:8887/nom.wav");
}


function setup() {
    createCanvas(400, 400);
    frameRate(1);
    createDiv("p5.dom.js library is loaded.");
    textSize(16);
    textAlign(CENTER);
    useSound();
}


function soundSetup() { // setup for audio generation
    meow.setVolume(1);
    bark.setVolume(1);
    buzz.setVolume(1);
    angry.setVolume(1);
    aln.setVolume(1);
    door.setVolume(1);
}


function draw() {
    // you can replace any of this with your own code:
    background(0, 200, 255);
    if (frameCount <= 8) {
        cat(width/2, height/2);
        thoughtBubble(300, 75);
        foodbowl(300, 75);
        stroke(0);
        text('Where is my dinner?', width/2, 325);
        text('I have never eaten in my life', width/2, 350);
        meow.play();
    }

    if (frameCount > 8 & frameCount <= 13) {
        cat(100, 200);
        dog(300, 200);
        text('Dog, have they fed you?', width/2, 325);
        text('Dinner is not for another hour, Cat', width/2, 350);
        if (frameCount <= 7) {
            meow.play();
        } else {
            bark.play();
        }

    }

    if (frameCount > 13 & frameCount <= 18) {
        cat(150, 300);
        fly (300, 300);
        text('Fly, have you eaten', width/2, 25);
        text('I just got here, I was on Mike`s head', width/2, 50);
        if (frameCount <= 12) {
            meow.play();
        } else {
            buzz.play();
        }
    }

    if (frameCount > 18 & frameCount <= 21) {
        text('The cat wandered so far away from the kitchen', width/2, height/2);
        text('that he found an alien', width /2, height/2 + 25);
    }

    if (frameCount > 21 & frameCount <= 26) {
        cat(300, 150);
        alien(100, 150);
        text('Alien I will starve if no one feeds me', width/2, 325);
        text('Go back to the kitchen, Cat.', width/2, 350);
        text('You still have 20 minutes until dinner', width/2, 370);
        if (frameCount <= 20) {
            angry.play();
        } else {
            aln.play();
        }
    }

    if (frameCount > 26 & frameCount <= 29) {
        text('Dejected and starving, cat made the long journey', width/2, height/2);
        text('from the closet back to the kitchen', width/2, height/2 + 25);
        angry.play();
    }

    if (frameCount > 29 & frameCount <= 32) {
        text('Suddenly, Cat heard a noise', width/2, height/2);
    }

    if (frameCount > 32 & frameCount <= 37) {
        surprisedcat(width/2, height/2);
        text('Could it be? Is the human home to save me?', width/2, 325);
        if (frameCount <= 32) {
            door.play();
        } else {
            meow.play();
        }
    }

    if (frameCount > 37) {
        cat(width/2, height/2);
        foodbowl(width/2, height/2 + 18);
        nom.play();
    }
}

function cat(x, y) {
    push();
    translate(x, y);
    noStroke();
    fill(200);
    ellipse(0, 0, 100, 100); //head
    triangle(-10, -49, -28, -70, -35, -35); //ears
    triangle(10, -49, 28, -70, 35, -35);
    fill(255, 0, 50);
    triangle(-13, -47, -26, -60, -30, -40);
    triangle(13, -47, 26, -60, 30, -40);
    fill(0, 255, 0);
    ellipse(-20, -20, 12, 12); //eyes
    ellipse(20, -20, 12, 12);
    fill(0); 
    ellipse(-20, -20, 7, 7);
    ellipse(20, -20, 7, 7);
    fill(255, 0, 50);
    stroke(0); //nose & mouth
    triangle(0, 5, -7, -3, 7, -3);
    line(0, 5, 0, 12);
    line(0, 12, -12, 20);
    line(0, 12, 12, 20);
    line(35, 5, 75, 5); //whiskers
    line(35, 5, 75, -5);
    line(35, 5, 75, 15);
    line(-35, 5, -75, 5);
    line(-35, 5, -75, -5);
    line(-35, 5, -75, 15);
    pop();
}

function dog(x, y) {
    push();
    translate(x, y);
    noStroke();
    fill(180, 100, 100);
    ellipse(0, 0, 110, 140); //head
    triangle(-11, -68, -29, -91, -36, -53); //ears
    triangle(11, -68, 29, -91, 36, -53);
    fill(0);
    ellipse(-20, -20, 13, 13); //eyes
    ellipse(20, -20, 13, 13);
    ellipse(0, 10, 25, 15); //nose
    stroke(0);
    strokeWeight(2);
    line(-20, 30, 20, 30); //mouth
    noStroke();
    fill(255, 0, 50);
    rect(10, 30, 10, 5);
    ellipse(15, 35, 10, 8);
    noStroke();
    fill(255, 0, 0); //collar
    rect(-45, 65, 90, 20);
    fill(255, 255, 0);
    ellipse(0, 90, 20, 20);
    pop();
}

function fly(x, y) {
    push();
    translate(x, y);
    fill(0);
    ellipse(0, 0, 45, 75); //body
    fill(55);
    push(); //wings
    rotate(radians(45));
    ellipse(-14, 15, 30, 45);
    pop();
    push();
    rotate(radians(315));
    ellipse(14, 15, 30, 45);
    pop();
    pop();
}

function alien(x, y) {
    push();
    translate(x, y);
    noStroke();
    fill(0, 255, 0);
    ellipse(0, 0, 95, 150); //head
    rect(-30, -100, 8, 70); //antenna
    rect(22, -100, 8, 70);
    fill(0);
    ellipse(-20, -20, 15, 25); //eyes
    ellipse(20, -20, 15, 25);
    stroke(0);
    strokeWeight(5);
    line(-30, 30, 30, 30); //mouth
    pop();
}

function foodbowl(x, y) {
    push();
    translate(x, y);
    ellipseMode(CENTER);
    for (var a = -17; a < 17; a += 4) { //food
        fill(180, 50, 80);
        ellipse(a, -11, 4, 4);
    }
    rectMode(CENTER);
    fill(255, 0, 0);
    rect(0, 0, 40, 20); //bowl
    pop();

}

function surprisedcat(x, y) {
    push();
    translate(x, y);
    noStroke();
    fill(200); //head
    ellipse(0, 0, 100, 100);
    triangle(-10, -49, -28, -70, -35, -35); //ears
    triangle(10, -49, 28, -70, 35, -35);
    fill(255, 0, 50);
    triangle(-13, -47, -26, -60, -30, -40);
    triangle(13, -47, 26, -60, 30, -40);
    fill(0, 255, 0); //eyes
    ellipse(-20, -20, 12, 12);
    ellipse(20, -20, 12, 12);
    fill(0); 
    ellipse(-20, -20, 7, 7);
    ellipse(20, -20, 7, 7);
    fill(255, 0, 50); //nose
    stroke(0);
    triangle(0, 5, -7, -3, 7, -3);
    fill(0);
    ellipse(0, 16, 10, 10); //mouth
    line(35, 5, 75, 5); //whiskers
    line(35, 5, 75, -5);
    line(35, 5, 75, 15);
    line(-35, 5, -75, 5);
    line(-35, 5, -75, -5);
    line(-35, 5, -75, 15);
    pop();
}

function thoughtBubble(x, y) {
    push();
    translate(x, y);
    fill(255);
    ellipse(-50, 50, 12, 12);
    ellipse(-36, 36, 12, 12);
    ellipse(-22, 22, 12, 12);
    ellipse(0, 0, 60, 45); //biggest bubble
    pop();
}

I was working on this while my cat was waiting for dinner (over an hour early) and it gave me this idea

Sonic Story

This is the story of a typical student’s school day in 2020. Taken from personal experiences, the student wakes up to the sound of alarm, goes to their desk and begins zoom classes, which lasts all day long and late into the night. This all happens while chaos happens outside in the world. 

sketchDownload
// This is the story of a typical student's school day in 2020. Taken 
// from personal experiences, the student wakes up to the sound of alarm, goes 
// to their desk and begins zoom classes, which lasts all day long and late  
// into the night. This all happens while chaos happens outside in the world. 


//background images
var night;
var dayTime;
var rain;
var explosion;
var fire;

//room drawings
var room;
var laptop;
var laptopOn;
var person;
var personUp;

//sound variables
var alarm;
var rainSound;
var explosionSound;
var fireSound;

//variables for person
var persX = 114;
var persY = 257;
var dx = 15;

var frameCount = 0;

function preload() {
    night = loadImage("https://i.imgur.com/CVsqShg.jpg");
    dayTime = loadImage("https://i.imgur.com/p6oDy63.png");
    rain = loadImage("https://i.imgur.com/8HtRKjL.jpg");
    explosion = loadImage("https://i.imgur.com/pEYPUbF.jpg");
    fire = loadImage("https://i.imgur.com/4Sw63js.png");
    room = loadImage("https://i.imgur.com/vWPprEt.png");
    laptop = loadImage("https://i.imgur.com/qVHI1Ji.png");
    laptopOn = loadImage("https://i.imgur.com/qKDrh3W.png");
    person = loadImage("https://i.imgur.com/Eq6Rz4S.png");
    personUp = loadImage("https://i.imgur.com/s09ZZmK.png");
    //load sound
    alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alarm-clockk.wav")
    rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rainn.wav")
    explosionSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/explosionn.wav")
    fireSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/firee.wav")
}

function setup() {
    createCanvas(500, 400);
    imageMode(CENTER)
    frameRate(5);
    useSound();
}

function soundSetup() { 
    alarm.setVolume(0.8);
    rainSound.setVolume(0.8);
    explosionSound.setVolume(0.5);
    fireSound.setVolume(0.8); 
}

function draw() {
    //drawing all the backdrops with their relative sounds
    if (frameCount < 20) {
        nightDraw();
        alarm.play();
    } else if (frameCount > 20 & frameCount < 80) {
        dayTimeDraw();
    } else if (frameCount > 80 & frameCount < 100) {
        rainDraw();
        rainSound.play();
    } else if (frameCount > 100 & frameCount < 120) {
        explosionDraw();
        explosionSound.play();
    } else if (frameCount > 120 & frameCount < 140) {
        fireDraw();
        fireSound.play();
    } else {
        nightDraw();
    }

    //drawing everything in the room
    roomDraw();
    personDraw();
    personUpDraw();
    laptopDraw();
    laptopOnDraw();

    frameCount += 1;
    
}

//all the backdrops
function nightDraw() {
    image(night, width/2, height/2, 500, 400);
}
function dayTimeDraw() {
    image(dayTime, width/2, height/2, 500, 400);
}
function rainDraw() {
    image(rain, width/2, height/2, 500, 400);
}
function explosionDraw() {
    image(explosion, width/2, height/2, 500, 400);
}
function fireDraw() {
    image(fire, width/2, height/2 - 50, 500, 350);
}

//everything else in the room
function roomDraw() {
    image(room, width/2, height/2, 500, 400);
}
function personDraw() {
    if (frameCount < 30) {
    image(person, persX, persY, 160, 40);    
    }
}
function personUpDraw() {
    if (frameCount > 30) { //person gets up after alarm sounds
        image(personUp, persX, persY, 40, 160);
        if (frameCount < 67) {
            persX += dx;
        }
    }
}

function laptopDraw() {
    image(laptop, 430, 280, 150, 120);
}

function laptopOnDraw() {
    if (frameCount > 70) { //laptop opens when person walks to desk
        image(laptopOn, 430, 280, 150, 120);
    }
}

Project : 10

For this project I decided to create the view of a campsite from sunrise to sunset with people, the bonfire, a tent, clouds stars and of course some singing! For the sounds I did try to make them overlap a little so that it sounds more interesting when played.

sketch
//Aadya Bhartia 
//Section A 
//abhartia@andrew.cmu.edu

/*Through my sonic story I wanted to show a view of a campsite where you hear
the birds in the morning and the the head comes to wake you up and then some 
music and bonfire in the evening followed by a lullaby*/

//varibales for sounds 
var bird;
var wakeUp;
var tent;
var guitar;
var bonfire;
var lullaby;
//to store the images 
var Sceneimage = [];
function preload() {
    // call loadImage() and loadSound() for all media files here
    var filenames = [];
    filenames[0] = "https://i.imgur.com/ITiizfB.png";
    filenames[1] = "https://i.imgur.com/tuuMWhz.png";
    filenames[2] = "https://i.imgur.com/jwZrzv0.png";
    filenames[3] = "https://i.imgur.com/tpb0sAu.png";
    filenames[4] = "https://i.imgur.com/ZFtXPrz.png";
    filenames[5] = "https://i.imgur.com/IsF4NuT.png";
    filenames[6] = "https://i.imgur.com/ttnjMNJ.png";
    filenames[7] = "https://i.imgur.com/V0Lf0an.png";
    filenames[8] = "https://i.imgur.com/vt9fZjI.png";
    filenames[9] = "https://i.imgur.com/pji8Wnc.png";
    //loading images into the array 
    for (var i = 0; i < filenames.length; i++) {
        Sceneimage[i] = loadImage(filenames[i]);
    }
    //load sounds 
    bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birds-1.wav");
    wakeUp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wake-up.wav");
    tent = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/tent.wav");
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-3.wav");
    bonfire = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bonfire.wav");
    lullaby = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lullaby.wav");
}

function setup() {
    createCanvas(614, 345);
    frameRate(1);
    useSound();
}
function soundSetup() { // setup for audio generation, chnaging volumes 
    bird.setVolume(0.1);
    wakeUp.setVolume(1);
    guitar.setVolume(0.1);
    lullaby.setVolume(0.2);
}
function draw() {
    //sun rising 
    if(frameCount>=0 & frameCount< 4){
        image(Sceneimage[0], 0,0, 614, 345);
        bird.play();
    }
    //sun up and clouds come in 
    if(frameCount>=4 & frameCount< 8){
        image(Sceneimage[1], 0,0, 614, 345);
        //creating a cloud animation for the different frames 
        if(frameCount== 4){
            image(Sceneimage[9], 0,0, 614, 345);
        }
        if(frameCount== 5){
            image(Sceneimage[9], width/4,0, 614, 345);
        }
        if(frameCount== 6){
            image(Sceneimage[9], width/2,0, 614, 345);
        }
        if(frameCount== 7){
            image(Sceneimage[9], (3*width/4),0, 614, 345);
        }
        bird.play();
    }
    //head comes to wake up 
    if(frameCount>=9 & frameCount< 11){
        image(Sceneimage[2], 0,0, 614, 345);
        wakeUp.play();
    }
    //tent open and girls head pops out 
    if(frameCount>=11 & frameCount< 12){
        image(Sceneimage[3], 0,0, 614, 345);
        tent.play();
    }
    //couple playing the guitar 
    if(frameCount>=12 & frameCount< 17){
        image(Sceneimage[4], 0,0, 614, 345);
        guitar.play();
    }
    //fire lights up
    if(frameCount>=17 & frameCount< 20){
        image(Sceneimage[5], 0,0, 614, 345);
        bonfire.play();
    }
    //fire becomes bigger 
    if(frameCount>=20 & frameCount< 25){
        image(Sceneimage[6], 0,0, 614, 345);
        guitar.play();
        bonfire.play();
    }
    //head comes to say time to go to bed 
    if(frameCount>=25 & frameCount< 28){
        image(Sceneimage[7], 0,0, 614, 345);
        
    }
    //lullaby and stars 
    if(frameCount>=28 & frameCount< 40){
        image(Sceneimage[8], 0,0, 614, 345);
        lullaby.play();
        //creating jittering stars at night 
        star(random(0,width),random(0, height/2));
        star(random(0,width),random(0, height/2));
        star(random(0,width),random(0, height/2));       
    }
}
//star code from class lecture : 14 
function star(a,b){
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    fill(255, 255, 0);
    translate(a,b);
    scale(random(0.1,0.5));//scaling the stars at random
    beginShape();
    for (var i = 0; i < nPoints; i++) {
    vertex( (x[i]) + random(-3,3), (y[i]) + random(-3,3) ); //random creates jitter effect
    }
    endShape(CLOSE);
}

Project 10 – Sonic Story

sketch
var fish = []
var bigfish 
var smallfish
var fishrod
var bigx = 480
var bigy = 240
var smallx = 0
var smally = 240
var chew
var frameCount
var waves
var lineY = 200
var lineX = 160

function preload() {
    chew = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/412068__inspectorj__chewing-carrot-a.wav');
    waves = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/531453__mitchanary__ocean-designed-loop.wav');

}


function setup() {
    createCanvas(480, 480);
    for (var i = 0; i < 104; i++) {
        fish[i] = new Object();
        fish[i].x = random(25, width-25);
        fish[i].y = random(25, height-25);
        fish[i].dx = random(-2, 2);
        fish[i].c = color(random(255), random(255),0);
    }
    frameRate(5)
}

function soundSetup(){
    chew.setVolume(10)
    waves.setVolume(1)
}



function draw() {
    background(74, 142, 237);
    text(frameCount,10,10)

    
    for (var i = 0; i < 104; i++) {
        draw_fish(fish[i]);
        fish[i].x += fish[i].dx;
        if (fish[i].x > width-25 || fish[i].x < 25) {
            fish[i].dx = -fish[i].dx;
        }
    }

    stroke(70)
    strokeWeight(3)
    line(lineX,0,lineX,lineY)
    noFill()
    arc(lineX,lineY-25,50,50,0,PI + QUARTER_PI)


    drawsmallfish()
    drawbigfish()

    if(frameCount == 1){
        waves.play()
    }

    if(frameCount == 5){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 10){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 15){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 20){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 25){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 30){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 35){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 40){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 45){
        bigx -= 22
        smallx += 22
        lineY -=10
    }
    if(frameCount == 55){
        bigx -= 22
        smallx += 40
        lineY -=10
        chew.play()
    }
    if(frameCount >= 55){
        bigx -= 30
        smallx -= 30
        lineY -=10
    }
   
}

function drawbigfish() {
    stroke(0)
    strokeWeight(3)
    fill(237, 164, 74)
    ellipse(bigx, bigy, 60, 40);
    triangle(bigx+30,bigy, bigx+45, bigy-15, bigx+45, bigy+15);
}

function drawsmallfish() {
    stroke(0)
    strokeWeight(3)
    fill(111, 227, 113)
    ellipse(smallx, smally, 30, 20);
    triangle(smallx-15,smally, smallx-20, smally+10, smallx-20, smally-10);

}

function draw_fish(f) {
    strokeWeight(1)
    fill(f.c);
    ellipse(f.x, f.y, 20, 10);
    if (f.dx < 0) {
        triangle(f.x+10, f.y, f.x+15, f.y-5, f.x+15, f.y+5);
    } else {
        triangle(f.x-10, f.y, f.x-15, f.y-5, f.x-15, f.y+5);
    }
}

I tried to tackle this with a graphically relatively simple approach because I wanted to be able to grasp how the code works first. I found using frameCount to keep track of each frame and coordinate individual characters very helpful. Framecount was a great tool for implementing sound at the right time and animation in general.

Project 10: Sonic Story

peachsketch
//There are two characters, red and blue, fighting each other video
//game style. The announcer starts the match, and they fight, 
//exchanging rapid punches and hits. Neither one does much damage.
//Suddenly, blue passes gas. The gas is deadly, and red dies.
//Blue wins, match is over.

var count = 0;

function preload() {
    fight = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fight.wav")
    punch = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/punch.wav")
    kick = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/kick.wav")
    fart = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fart.wav")
    victory = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/victory.wav")

}


function setup() {
    createCanvas(400, 300);
    frameRate(10)
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    //osc = new p5.TriOsc();
    kick.setVolume(0.4);
    punch.setVolume(0.4);
    fight.setVolume(0.5);
    fart.setVolume(0.9);
    victory.setVolume(0.5);
}


function draw() {

    background(0);
    fill(100)
    rect (0,225, 400, 75);
    fill(0,255,0)
    rect(20,20, 100,10)
    rect(280,20, 100,10)
    textSize(50)
    fill(255)
    
    text("FIGHT!", 120, 100);
    //fighters are sizing each other up
    if (count < 2) {
        fight.play()
        fightLeft(100,200)
        fightRight(300,200)

    }
    if (count >=2 & count < 20){
        fightLeft(120,200)
        fightRight(320,200)
    }
// red throws first punch
    if (count >= 20 && count < 35){
        fightLeft(100,200)
        fightRight(300,200)
        fill(240, 220, 170)
        ellipse(260,230,20,15)
        if (count >=20 && count < 25){
        punch.play()
        
    }

    }
    //blue fights back
    if (count >= 35 && count < 50){
        fightLeft(120,200)
        fightRight(320,200)
        fill(240, 220, 170)
        ellipse(160,230,20,15)
        if (count>=35 && count< 38){
            kick.play()
        }
    }
    //red punches again
    if (count >= 50 && count < 65){
        fightLeft(100,200)
        fightRight(300,200)
        fill(240, 220, 170)
        ellipse(260,230,20,15)
        if (count >=50 && count < 55){
        punch.play()
        }
    }
    //blue releases gas
    if (count >= 65 && count < 80){
        fightLeft(120,200)
        fightRight(320,200)

        if(count>70 && count< 78){
                fartblue(60,230)
        }
        if (count > 70 && count<72){
            fart.play()
        }
    }
if (count>=80 && count<90){
        fightLeft(120,200)
        fightRight(320,200)
}
    
//red dies from fart, blue wins
if(count>=90 && count<120){
    fightLeft(120,200)
    deadRight(320,200)
    if (count>95 && count <98){
    victory.play()
    }
    textSize(20)
    fill(255)
    text("WINNER", 50, 150);
    fill(255,0,0)
    rect(280,20, 100,10)
}

//story ends
if (count >= 120){
    fill(0)
    rect(0,0,width,height)
    fill(255)
    text("game over", 90, height/2)

}
    count++
}

//left fight stance
function fightLeft(x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(0,0,255)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
    endShape();
rect(x-15, y-10, 30, 4)
fill(255);
ellipse(x, y, 8,12)
fill(0);
ellipse(x+2,y+2,6, 8)
stroke(0)
strokeWeight(3)
line(x,y-5,x+5,y)
line(x, y+11, x+6, y+11)
noStroke()

}
//red fight stance
function fightRight (x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(255,0,0)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
endShape();
rect(x-15, y-10, 30, 4)
fill(255);
ellipse(x, y, 8,12)
fill(0);
ellipse(x-2,y+2,6, 8)
stroke(0)
strokeWeight(3)
line(x,y-5,x-5,y)
line(x, y+11, x-6, y+11)
noStroke()
}

//draw fart cloud
function fartblue(x,y){
    fill(18, 135, 41)
ellipse(x,y,40,25)
}
//red dies
function deadRight (x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(255,0,0)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
endShape();
rect(x-15, y-10, 30, 4)

stroke(0)
strokeWeight(3)
line(x,y-6,x-6,y+2)
line(x-6, y-6, x, y+2)
noFill()
ellipse(x-3, y+10, 8)
noStroke()

}

For my story, I had trouble manipulating the noise to be used in an interesting way. Because the noises themselves were already distinctive, I wasn’t sure how to improve the way they were used. I had fun writing a silly story inspired by the classic, pixelated video game characters I grew up with.

I used sounds from the timeless Mortal Kombat series, which were available online for free use. I took the classic announcer sayings of “fight!” and “flawless victory.” as well as the punching and attacking noises. I also used a sound from the recommended free sounds website of a simple passing gas noise. I thought that the last noise would be a funny juxtaposition to the otherwise epic sounds.

Project_10_sonic-story

y_sketch_2Download
//Huijun Shen
//huijuns@andrew.cmu.edu
//Section D

//Story: It is a corner of a house. In the background, there is light music. Then the phone is ringing and the dog 
//hears the ring and bark. Then we can hear the sound of human step. The sound of the dog step. The man stops at
//the phone and pick it up and says "hello".

var frameCount = 0;
var chr,dogPic,bgSound,ringSound,dogSound,helloSound,walkSound,dogBark;



function preload() {
    // call loadImage() and loadSound() for all media files here
    bg = loadImage("https://i.imgur.com/MAsTt65.png");
    chr = loadImage("https://i.imgur.com/1Z57hnP.png");
    dogPic = loadImage("https://i.imgur.com/7h6Oxjz.png");

    // load sound
    bgSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bg_music.wav");
    ringSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/telephone_ring.wav");
    dogSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/dog-on-wooden.wav");
    helloSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/hello.mp3");
    walkSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walk-1.wav");
    dogBark = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/puppy_bark.wav");

}


function setup() {
    createCanvas(480,480);
    useSound();
    frameRate(10);

    //create character
    man = new Object();
    man.image = chr;
    man.x=-250;
    man.y=0;
    man.dx=6;
    man.draw = manDraw;

    dog = new Object();
    dog.image = dog;
    dog.x = 0;
    dog.y = 500;
    dog.dx = 10;
    dog.draw = dogDraw;

}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    bgSound.setVolume(0.1);
    ringSound.setVolume(0.3);
    walkSound.setVolume(0.5);
    dogSound.setVolume(0.6);
    helloSound.setVolume(0.7);

}


function draw() {
    // you can replace any of this with your own code:
    background(200);
    image(bg,0,0,600,600);

    //sound play

    if(frameCount == 0){
    bgSound.play();
    }

    if(frameCount == 90 || frameCount ==120 || frameCount ==150){
        ringSound.play();
    }


    if(frameCount == 180 ){
        walkSound.play();
        dogBark.play();
    }

    if(frameCount == 320){
        helloSound.play();
    }


    // man enters and stops
    if(frameCount >180 ){

        man.draw();
        man.x+=man.dx;
        
        if(frameCount >= 300){
            man.dx =0;
        }
    }
    
    // dog goes across the canvas
    if(frameCount > 190 ){
        
        dog.draw();
        dog.x+=dog.dx;

    }



    frameCount ++;

    if(frameCount == 400){
        noLoop();
    }
    

    print(frameCount);
}


function manDraw(){
    image(chr,this.x,this.y);
}


function dogDraw(){    
    image(dogPic,this.x,this.y,60,90);    
}

Story: It is a corner of a house. In the background, there is light music. Then the phone is ringing and the dog hears the ring and bark. Then we can hear the sound of human step. The sound of the dog step. The man stops at the phone and pick it up and says “hello”.

The codes worked for a while on my computer and worked for the first time on the page then it stops working. I spend a lot of time to figure out why but failed.

I basically code the numbers of the sound and the details is not possible for me to refine without hearing them.

I have tried my best.

The size is not right and also the bg sound is not playing even though other sound are playing sometimes.

Project 10

This project prompt reminded me of the lofi compilations and streams on Youtube, especially chilledcow’s iconic homework girl and her cat, who is perpetually doing her homework. I decided to make myself as the homework girl, depicting a similar image of me working at my desk on my projects and homework.

sketch
//hollyl
//sonic story
//section D

var imgWrite;
var imgLight;
var imgType;
var imgSaw;

var sndWrite;
var sndLight;
var sndType;
var sndSaw;

var timer = 0;

function preload(){
	//images
	imgWrite = loadImage("https://i.imgur.com/lnbABjC.jpg");
	imgLight = loadImage("https://i.imgur.com/TD2n1MK.jpg");
	imgType = loadImage("https://i.imgur.com/uE8friX.jpg");
	imgSaw = loadImage("https://i.imgur.com/M3GU9Yx.jpg");

	//sounds
	sndWrite = loadSound("http://localhost:8000/writing.wav");
	sndLight = loadSound("http://localhost:8000/light.wav");
	sndType = loadSound("http://localhost:8000/typing.wav");
	sndSaw = loadSound("http://localhost:8000/saw.wav");
}

function soundSetup(){
	sndWrite.setVolume(1);
	sndLight.setVolume(1);
	sndType.setVolume(1);
	sndSaw.setVolume(1);
}

//sounds go brr
function saw(){
	sndWrite.stop();
	image(imgSaw, 0, 0);
	sndSaw.play();
}

function write(){
	image(imgWrite, 0, 0);
	sndWrite.play();
}

function type(){
	sndSaw.stop();
	image(imgType, 0, 0);
	sndType.play();
}

function light(){
	sndType.stop();
	image(imgLight, 0, 0);
	sndLight.play();
}

function setup() {
    createCanvas(600, 410);
    frameRate(1);
}

function draw(){
	if (timer < 4){
		write();
	} else if (timer <= 8){
		saw();
	} else if (timer <= 12){
		type();
	} else if (timer <= 13){
		light();
	} else if (timer > 13){
		sndLight.stop();
		fill(0);
		rect(0, 0, 600, 410);
	}
	timer++;

	text("click for audio", 10, 20);
}

My clip shows my workflow: sawing some pieces for a product’s project, sketching out my notes and thoughts before starting my 104 project, and then clicking my light off when I finish. Hours of work and mess condensed into a seconds long clip that makes my work look a lot tidier than it actually is.

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();  
            }           
} 






Project 10 – Sonic Story

For this project, I created a short story with underwater animals. I used clip art found online in my code. The fish swim across the canvas, creating a swimming sound. The crab is walking around the bottom of the ocean, which makes the walking sound. As the blue fish swims, bubbles appear and create a bubbling sound. Once the red fish is close to the end of the canvas, it starts to eat the seaweed and a eating sound plays. After eating, the red fish disappears and the animation stops.

Project 10

For this week’s project, I decided to depict a chill night in that someone might have with their cats in a living room. I was feeling a bit stressed because of my classes, so I tried to go for more of a chill vibe that took various aspects of my existing room and blended them with auditory elements.

I did the initial drawings in illustrator, and imported each part as a different image.

sketchDownload
// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project 10

// call global variables
var bgPhoto;

var cupcake;
var cupcakeX = 280;
var cupcakeY = 360;

var pointedHand;
var pointedHandX = 230;
var pointedHandY = 450;

var grabbingHand;
var grabbingHandX = 280;
var grabbingHandY = 450;

var tvScreen;
var musicNotes;
var mouth;

var count = 0;

var meow;
var tvTurnOn;
var eat;
var musicPlay;

function preload() {
    // load images
    bgPhoto = loadImage('https://i.imgur.com/SJVApbw.jpg');
    cupcake = loadImage('https://i.imgur.com/muqUIC2.png');
    pointedHand = loadImage('https://i.imgur.com/3HCNg3e.png');
    grabbingHand = loadImage('https://i.imgur.com/375PW9c.png');
    musicNotes = loadImage('https://i.imgur.com/FVRrvrB.png');
    tvScreen = loadImage('https://i.imgur.com/7mrIDoW.png');

    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/catmeow.wav");
    tvTurnOn = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/tvsound.wav");
    eat = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eating.wav");
    musicPlay = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/music1.wav");

}

function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    frameRate(4);
    imageMode(CENTER);
    useSound();
}

function soundSetup() { // setup for audio generation
    meow.setVolume(1);
    tvTurnOn.setVolume(1);
    eat.setVolume(1);
    musicPlay.setVolume(1);
}

function draw() {
    count++; // add 1 frame for each time draw function runs

    image(bgPhoto, width/2, height/2, width, height); // set up background photo

    // have a hand come and take the cupcake on the table
    if (count >= 0 & count < 100) {
        image(cupcake, cupcakeX, cupcakeY, 40, 40); // place cupcake in scene
        image(grabbingHand, grabbingHandX, grabbingHandY, 100, 100); // place hand outside of scene, ready to grab
    }
    if (count > 30 & count < 45) { // bring hand into frame
        grabbingHandY -= 5;
    }
    if (count > 45 & count < 100) { // have hand take cupcake
        cupcakeY += 5;
        grabbingHandY += 5;
    }

    // eating sound from the person eating the cupcake
    if (count == 100) {
        eat.play();
    }

    // have both cats meow with mouths open
    catMouth();
    if (count >= 0 & count < 125) { // have mouths regular
        mouth = true;
    }
    if (count > 125 &  count < 155) { // have mouths open with meow sound
        mouth = false;
    }
    if (count == 126) {
        meow.play();
    }
    if (count > 155) { // mouths return back to normal after meow
        mouth = true;
    }

    // have hand come and touch remote to turn tv off
    tvOn();
    if (count >= 0 & count < 155) { // keep screen on
        screen = true;
    }
    if (count > 165 & count < 172) { // screen turns off as hand moves away
        screen = false;
        pointedHandY += 7;
    }
    if (count == 166) {
        tvTurnOn.play();
    }

    image(pointedHand, pointedHandX, pointedHandY, 100, 100);
    if (count > 140 & count < 155) { // hand comes to click remote
        pointedHandY -= 5;
    }

    // have hand come and touch remote again to play music on record player
    if (count > 165 & count < 173) { // hand comes to push button
        pointedHandX = 236;
        pointedHandY -= 5;
    }
    if (count > 185 & count < 213) { // hand moves away
        pointedHandY += 5;
    }
    if (count > 174) { // show music notes and play music
        image(musicNotes, 80, 70, 50, 50);
    }
    if (count == 175) {
        musicPlay.play();
    }
}

function tvOn() {
    if (screen == true) { // tv shows pink screen with flower when on
        image(tvScreen, 205, 145, 135, 90);
    }
    if (screen == false) { // tv is black when off
        fill(0);
        rectMode(CENTER);
        rect(205, 145, 134, 80, 8);
    }
}

function catMouth() {
    strokeWeight(.5);
    stroke(0);
    noFill();

    if (mouth == true) { // mouth closed when sitting
        line(220, 307, 225, 307); // white cat
        line(81, 276, 84, 276); // orange cat

    } else if (mouth == false) { // mouth open when meowing
        ellipse(223, 307, 5, 5); // white cat
        ellipse(83, 276, 3, 3); // orange cat

        // sound marks for white cat
        strokeWeight(1);
        stroke(255, 255, 0);
        line(260, 280, 270, 265);
        line(250, 280, 250, 265);
        line(240, 283, 230, 268);

        // sound marks for orange cat
        line(60, 238, 60, 251);
        line(50, 251, 45, 238);
        line(43, 253, 30, 240);
    }
}