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

}



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.

Project 10: Sonic Story

My sounds are a frog croaking, a sigh used for the pink frog, a splash, and crying for the green frog. The biggest challenge in getting this project to work was the local server, since I had to use the Chrome web server on Windows. It was a big barrier to even starting the project but I got lucky and figured it out.

frog time update

var greenFrog;
var pinkFrog;
var lily
var fish;
var flower;
var crying;
var sigh;
var splash;
var croak
var pinkFrogX = 200
var fishX = 400
var fishY = 400

///the story is about a lonely frog who experiences rejection but finds consolation in natural beauty

function preload() { ///loads in all images to be stored in variables
    greenFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog-removebg-preview.png')
    pinkFrog = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bright-pink-frog-back-view-small-toad-with-black-vector-22441576-removebg-preview.png')
    lily = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lily_pad-removebg-preview.png')
    flower = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/flower-removebg-preview.png')
    fish = loadImage('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clipart-fish-red-2-removebg-preview.png')
    crying = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/219433__bash360__crying.wav')
    sigh = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/60670__k1m218__sigh3.wav')
    splash = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/416710__inspectorj__splash-small-a.wav')
    croak = loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frog.wav')
}


function setup() {
    useSound();
    createCanvas(480, 480)
	frameRate(1)	
}


function soundSetup() { // setup for audio 
    crying.setVolume(0.5);
     sigh.setVolume(0.5);
     splash.setVolume(0.5);
     croak.setVolume(0.5);
 }


function draw() { ///draws characters
	fill(255, 255, 255)
	background(0, 0, 236)
	image(fish, fishX + 500, fishY + 500, 60, 60)
	image(lily, 200, 200, 50, 50)
	image(lily, 300, 300, 50, 50)
	image(lily, 400, 400, 75, 75)
	image(greenFrog, 300, 300, 50, 50)
	if (frameCount >= 10){ ///summons the PINKFROG
		image(pinkFrog, pinkFrogX, 200, 50, 50)
	} 
		fishX -= 25 ////brings in the FISCH
		fishY -= 25
		switch(frameCount){ ////list of events to happen at certain thymes
			case 5: 
			text('the frog was alone', 50, 50)
			break        
		case 10: croak.play();
                text('he sees another frog and sings them a song', 50, 50);
                break
        case 15:
         	    text("they didn't like the song", 50, 50)
                sigh.play()
                pinkFrogX += 300
                break
        case 20: 
                text("the frog was even more sad and loney", 50, 50)
                crying.play()
                break
        case 25: 
                text("he sees a fish", 50, 50)
                splash.play()
                fishX -= 500
                break
        case 30: 
                text("the fish had shown him a beautiful flower", 50, 50)
                break
        case 35:
                text("suddenly he didn't feel so sad", 50, 50)
                break  
                }
        if (frameCount >= 30){ ///draweth the flowere
        	image(flower, 400, 400, 50, 50)
        } 
        if (frameCount >= 40){
        	text("THE END", 240, 240, 480, 480)
        }
                }

		

			
	

	
	


  






	
	

LO 10

I did some research into the Canadian Electronic Ensemble’s newest release on February 15th, 1. The ensemble is based out of Canada (of course) where they compose and perform using computer and modular synthesis instruments to create unique sounds and produce long concerts and improvisations. They reassemble their instruments during the performance and also make use of the program Ableton to create new effects as well as rebuild their instruments to create new sounds during the performance. Mainly, their performances are based less in traditional computer code and more in the system Max, in the plugin Max for Live, which allows users to create their own effects in the DAW Ableton Live. Their performances are usually long and complex, without a central theme, and feature solo sections for each member of the ensemble as they join and modify their elaborate analog and digital synths. Also, they play without using a keyboard or traditional control of their instruments, and mostly rely and step-based sequencing and MIDI controlling built into their software to assemble songs.

Project 10

For my sonic story I wanted to create a looped animation involving a water droplet falling into a pond, fish getting caught by a hook and flung out of the water, and the “fish” returning back into the water in the form of a droplet. Logistically, I couldn’t get the animation to flow the way I intended to, but I used sound to create a sense of mood in an otherwise modern positive color story.

I created storyboards in Illustrator prior to “animating” in p5.js to plan out the scenes. They illustrate what my animation is supposed to communicate.

sketch wordpress

//FISH STORY
/*PREMISE: Water drops into a pond, where ripples form.
            Pans down to swimming fish. 
            A fishing hook descends and a fish takes the bait. 
            The fish is yanked out of the water.
            The animation loops.
            */
//global variables
var x; // translate multipliers
var y; 
var sx = 1; //scale multipliers
var sy =1;

function preload() {
    //sounds downloaded from freesound.org
    drop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/waterdrop.wav");
    ambience = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/ambience.wav");
    looming = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/looming.wav");
}

function setup() {
    createCanvas(480, 480);
    useSound();
    frameRate(40);
}

function soundSetup() { 
    drop.setVolume();
    ambience.setVolume(1.5);
    looming.setVolume(1.2);
}

function draw() {
    background(247, 242, 223); //cream

    //play sound
    print(frameCount.toString());

    if (frameCount == 50) {
      drop.play();
    } else if (frameCount == 100) {
      ambience.play();
    } else if (frameCount == 180) {
      looming.play();
    } else if (frameCount == 400) {
      looming.stop();
    }

    //animate visual assets
     if (frameCount >=0 & frameCount<50) {// water drops
        waterbody(0,0);
        waterdrop(0,frameCount*2);
    } else if (frameCount >= 50 & frameCount <80) {//ripples form
        waterbody(0,0);
        ripple(0,0);
    } else if (frameCount >= 80 & frameCount <100){
        translate(0, -3* frameCount)
        push();
        waterbody(0,0);
        pop();
        ripple(0,0);
    } else if (frameCount >= 100 & frameCount <250) {//teal fish keeps swimming
        waterbody(0, -260);
        //pink fish
        fill(255, 75, 130);
        fish(-frameCount,0);
        //teal fish
        push();
        fill(28, 158, 175);
        translate(300, 250);
        scale(.6);
        fish(-frameCount, 0);
        pop();
        if (frameCount >= 180 & frameCount <250) {//hook descends
        //waterbody(0, -260);
        //main fish
        fill(255, 75, 130);
        fish(-frameCount,0);
        hook(0, frameCount-200);
        }
    /*} else if (frameCount >= 100 & frameCount <180) {//fishes swim by
    /*} else if (frameCount >= 180 & frameCount <250) {//hook descends
        //waterbody(0, -260);
        //main fish
        fill(255, 75, 130);
        fish(-frameCount,0);

        hook(0, frameCount-200);
        */
    } else if (frameCount >= 250 & frameCount <350) {//hook ascends with fish
        waterbody(0,-260);

        hook(0, 100+(-2* frameCount));

        fill(255, 75, 130);
        fish(0,0);

        //teal fish
        push();
        fill(28, 158, 175);
        translate(300, 250);
        scale(.6);
        fish(-frameCount -100, 0);
        pop();

    }
    //loop animation
    if (frameCount> 400){
        frameCount =0;
    }

}
//draw visual assets

//ABOVE WATER
function waterbody(x,y){
    noStroke();
    //waterbody
        push();
        translate(x,y);
        stroke(255); //white outline
        fill(148, 213, 213); //light teal
        rect(0, 260, width, height);
        pop();
    }
function fullwaterbody(x,y){
    noStroke();
    //waterbody
        push();
        translate(x,y);
        stroke(255); //white outline
        fill(148, 213, 213); //light teal
        rect(0, 0, width, height);
        pop();
    }
function ripple(x, y){
    translate(x,y);
    scale(sx,sy);
    noStroke();
    //ripple1
        push();
        fill(28, 158, 175); //dark teal
        ellipse(width/2, 383, 620, 242);
        pop();
    //ripple2
        push();
        stroke(255);
        fill(255, 75, 130); //pink
        ellipse(width/2, 350, 382, 121);
        pop();
    //ripple3
        push();
        fill(96, 201, 224); //light blue
        ellipse(width/2, 350, 189, 60);
        pop();
    //ripple4 (center)
        push();
        stroke(255);
        fill(247, 242, 223); //cream
        ellipse(width/2, 350, 99, 31);
        pop();
    }
function waterdrop(x,y){
    noStroke();
    //waterdrop
        push();
        translate(x,y);
        fill(255, 75, 130); //pink
        ellipse(width/2, 176, 38);
        triangle(width/2, 135, width/2+16, 166, width/2-16, 166);
}

//UNDER WATER
function hook(x,y){
    //hook
    push();
    translate(x,y);
    noFill();
    stroke(28, 158, 175); //dark teal
    strokeWeight(5);
    strokeCap(SQUARE);
    line(width/2 +20, 92-20, width/2 +20, -300);
    arc(width/2, 92-20, 40, 50, 0, PI, OPEN);
    pop();
}

function fish(x,y){
noStroke();
push();
translate(x,y);
ellipse(width/2, height/2, 38);
triangle(width/2+40, height/2, width/2 +10, height/2 -16, width/2 +10, height/2 +16);
triangle(width/2+40, height/2, width/2 +60, height/2 -10, width/2 +60, height/2 +10); //tail
pop();
}

Project 10-Sonic Story

project-10-sonicStory
/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A

This program creates a sonic story that shows a short food chain.

*/

var chew;

function preload() {
    beetleimg = loadImage("https://i.imgur.com/shXn6SX.png");
    quailimg = loadImage("https://i.imgur.com/Zd4T90e.png");
    coyoteimg = loadImage("https://i.imgur.com/W7IHE01.png");
    chew = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/chew.wav");
}

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

function soundSetup() { 
    chew.setVolume(0.5);
}

function draw() {
    background(217, 233, 250);
    drawBerries();
    drawBeetle();
    if (frameCount==69 || frameCount==125 || frameCount==190) {
        chew.play();
    }
}


function drawBerries() {
    var size=10;
    var xpos=20;
    for (var i=0; i<3; i++) {
        var ypos=70;
        fill(15, 30, 110);
        noStroke();
        push();
        if (i==1) {
            ypos=ypos-5;
        }
        circle(xpos, ypos, size);
        xpos+=5;
    }
}

var beetleX=300;
var beetleY=40;
function drawBeetle() {
    var beetleW = 51.1;
    var beetleH = 41.7;
    image(beetleimg, beetleX, beetleY, (beetleW), (beetleH));
    if (beetleX!=10) {
        beetleX-=5;
    }
    else if (beetleX==10) {
        chew.play();
        drawQuail();
    }
}

var quailX=300;
var quailY=40;
function drawQuail() {
    chew.stop();
    var quailH = 60;
    var quailW = 61.9;
    image(quailimg, quailX, quailY, (quailW), (quailH));
    if (quailX!=10) {
        quailX-=5;
    }
    else if (quailX==10) {
        drawCoyote();
    }
}

var coyoteX=300;
var coyoteY=30;
function drawCoyote() {
    var coyoteW = 153.2;
    var coyoteH = 90.2;
    image(coyoteimg, coyoteX, coyoteY, (coyoteW), (coyoteH));
    if (coyoteX!=5) {
        coyoteX-=5;
    }
    else if (coyoteX==5) {
        drawText();
    }
}

function drawText() {
    textSize(12);
    fill(15, 30, 110)
    text('the circle of life', 200, 20);
}






I was watching a show where a guy had a mouse in his apartment and to get rid of it, he brought in a snake. Then he realized he had a snake running loose, so he brought in a hawk. This inspired me to make this short animation showing a simple food chain. First there are some innocent berries which get eaten by a blister beetle which gets eaten by a quail which gets eaten by a coyote.

Looking Outward-10

https://reas.com/knbc/

For this LO, I chose to look at artist Casey Reas. Casey is the co-founder of Processing which is the grandfather to p5.js. I was really interested in seeing how the person who created Processing created art using a tool that they had imagined and built. The Sound Art piece I looked at is called KNBC. It was created in December 2015 using footage from news broadcasts from the year. This footage was manipulated in Processing to create a collage of pixels. What I love about this piece is how a video broadcast which was meant to tell a specific story was broken down by Casey into these collages and then combined with music to tell a whole new story. I also love that even though there is no clear clear picture or words, I still feel like I can understand the story that each scene is telling. Throughout the video of the piece playing, the transitions of music and color show you different parts of the story and you can tell when a scene has ended and another has begun.

shot of the piece during an installation
another shot of the piece during an installation

Project 10: Sonic Story

AnimationHCDownload
//hayoonc
//Hayoon Choi
//Section C

var crash;
var aaah;
var birdSound;
var car;
var oops;
var bg;
var car1;
var cary = -120; var carPlus = 0.2;
var car2;
var car2x = 70; var car2dx = 30;
var person1;
var person1x = 350; var person1y = 305;
var p1x = 0; var p1dx = 30; var p1y = 0; var p1dy = 30; var pr = 0;
var person2;
var p2x = 200; var p2dx = 30; var p2y = 50;
var p2dy = 10; var p2s = 1; var p2ds = 0.02;
var bird;
var birdx = 600; var birddx = -15;
var clouddx = 5; var cloudx = 600;
var count = 0;

function preload(){
    //Sounds
    wind = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wind-1.wav");
	crash = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/crash.wav");
    aaah = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/aaah.wav");
    birdSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bird-1.wav");
    car = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car-1.wav");
    oops = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/oops.wav");
    //Images
    bg = loadImage("https://i.imgur.com/l8Qc6Md.png?1");
    car1 = loadImage("https://i.imgur.com/5mLAaw5.png?1");
    car2 = loadImage("https://i.imgur.com/bxJJmCI.png?1");
    person1 = loadImage("https://i.imgur.com/LjpJvmr.png?1");
    person2 = loadImage("https://i.imgur.com/FyITsh6.png?1");
    bird = loadImage("https://i.imgur.com/pQXMNIy.png?1");
}

function setup() {
    createCanvas(600, 400);
    useSound();
    imageMode(CENTER);
    frameRate(10);
}

function soundSetup(){
	crash.setVolume(0.5);
    wind.setVolume(0.6);
    car.setVolume(1.4);
    aaah.setVolume(0.6);
}

function draw() {
    background(136, 203, 237); //sky color
    count ++;
    //Animation
    if (count > 0 & count < 80){
        //drawing the image as the background for the first scene
        image(bg, 300, 200, width, height);
    }
    if (count > 0 & count < 45){
        //making cloud move
        cloud(cloudx, 100);
        cloudx = cloudx - clouddx;
        if (cloudx == 400){
            clouddx = 0;
        }
    }
    if (count >= 45 & count < 80){
        //car entering
        cloud(400, 100);
        carScale(300, 200);
    }
    if (count >= 80 & count < 90){
        //car moving in the second scene
        carMove(600, 430);
        image(person1, person1x, person1y, width * 0.8, height * 0.8);
    }
    if (count >= 90 & count < 115){
        //person gets hit
        image(car2, 350, 430, width, height);
        personHit(person1x, person1y);
    }
    if (count >= 115 & count < 170){
        //person gets thrown into the air
        personFly(300, 200);
    }
    if (count >= 170){
        //showing the car again
        image(bg, 300, 200, width, height);
        cloud(400, 100);
        push();
        scale(1.5);
        image(car1, 200, 200, width, height);
        pop();
    }
    if (count > 190 & count <= 240){
        //bird flying
        image(bird, birdx, 0, width * 0.6, height * 0.6);
        birdx += birddx;
    }
    //Sound
    if (count == 1){
        wind.play();
    }
    if (count == 45){
        car.play();
    }
    if (count == 90){
        car.stop();
        crash.play();
    }
    if (count == 110){
        aaah.play();
    }
    if (count == 180){
        oops.play();
    }
    if (count == 190){
        birdSound.play();
    }
}

function cloud(x, y){
    //drawing cloud
    push();
    translate(x, y);
    noStroke();
    fill(255);
    ellipse(0, 0, 60, 40);
    ellipse(40, 0, 70, 50);
    pop();
}

function carScale(x, y){
    //car moving in the first scene
    push();
    translate(x, y);
    scale(carPlus);
    image(car1, 0, cary, width, height);
    pop();
    carPlus += 0.1;
    cary += 9;
}

function carMove(x, y){
    //car moving in the second scene
    push();
    translate(x, y);
    image(car2, car2x, 0, width, height);
    pop();
    car2x -= car2dx;
    if (car2x <= -250){
        car2dx = 0;
    }
}

function personHit(x, y){
    //making the person get hit
    push();
    translate(x, y);
    rotate(radians(pr));
    image(person1, p1x, p1y, width * 0.8, height * 0.8);
    pop();
    p1x -= p1dx;
    p1y -= p1dy;
    pr -= 1;
}

function personFly(x, y){
    //making the person fly
    push();
    translate(x, y);
    rotate(radians(pr));
    scale(p2s);
    image(person2, p2x, p2y, width * 0.8, height * 0.8);
    pop();
    p2x -= p2dx;
    p2y -= p2dy;
    pr -= 15;
    p2s -= p2ds;
    if (p2s <= 0){
        p2ds = 0;
    }
}

For this project, I wanted to include a car. Because I couldn’t find any pictures I that go well with the story, I drew them instead.

Looking Outwards 10: Computer Music

House Party was created by Neil Mendoza for a personal project. It is a musical installation with all of its materials, from furniture to computers, scavenged from trash. Even Arduino Zero, which controls the actuators in the installation, was found in the trash as well. How this works is that each screen is connected to a computer running software written in openFrameworks and the MIDI composition data was sent to Arduino and an OF control program. Then the control program sent the data to other computers over ethernet as OSC. As a result, the control program read the data and triggered the screens and Arduino. When I first saw this project, I was surprised that it didn’t use any greenscreen effect and all the materials were physically present and working. It was even more shocking that all the materials were previously trash. I admire that Neil used his unique artistic sense to create a musical installation that performs in its “natural” habitat.

Project 10 – Sonic Story

sketch.slDownload
// Sarah Luongo
// Section A
// Project

/* This code aims to tell a short story of traveling home during the holidays, and the joy upon finally arriving home.*/

var train;
var car;
var house;
var xmastree;
var family;
var trainN;
var drive;
var walk;
var bell;
var cheers;

// Load images and sounds
function preload() {
    // Images
    train = loadImage('https://i.imgur.com/8nQo4PL.png');
    car = loadImage('https://i.imgur.com/J9C4YkK.png');
    house = loadImage('https://i.imgur.com/ck3pJGM.png');
    family = loadImage('https://i.imgur.com/GKtqVl2.png');
    xmastree = loadImage('https://i.imgur.com/BTleSuv.png');

    // Sounds
    trainN = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/train.wav");
    drive = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/drive.wav");
    walk = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/walk.wav");
    bell = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bell.wav");
    cheers = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/cheers.wav");
}


function setup() {
    createCanvas(400, 300);
    frameRate(1);
    train.resize(100, 100);
    car.resize(100, 100);
    house.resize(200, 200);
    xmastree.resize(150, 200);
    family.resize(width, 100);
    useSound();
}


// Setup for audio generation
function soundSetup() {
    trainN.setVolume(0.2);
    drive.setVolume(1);
    walk.setVolume(1);
    bell.setVolume(0.5);
    cheers.setVolume(0.5);
}


function draw() {
    background(200);
    noStroke();
    // On the train:
    if (frameCount <= 10) {
        // Sky
        fill(20, 40, 80);
        rect(0, 0, width, height/1.3);
	//Mountains
        fill(200);
        triangle(-50, height/1.3, 200, height/1.3, 75, height/3);
        triangle(200, height/1.3, width, height/1.3, 300, height/2);
        //Snow on top of mountain
        fill(240)
        triangle(60, height/2.6, 90, height/2.6, 75, height/3);  
        triangle(280, height/1.8, 320, height/1.8, 300, height/2);
        // Snow
        rect(0, height/1.3, width, height/4); 
        // Train
        image(train, 0, height/2);
	//trainN.play();

    //Driving home:
    } else if (frameCount > 10 & frameCount <= 20) {
        // Sky
        fill(20, 40, 80);
        rect(0, 0, width, height/1.3);
        // Snow 
        fill(240);
        rect(0, height/1.5, width, height/3);
        // Car
        image(car, width/2, height/2.3);
	//drive.play();

    // Home:
    } else if (frameCount > 20 & frameCount <= 25) {
        // Sky
        fill(20, 40, 80);
        rect(0, 0, width, height/1.3);
        // Snow
        fill(240);
        rect(0, height/1.5, width, height/3);
        // House
        image(house, 200, 8);
        // Tree
        fill(56, 28, 0);
        rect(0, 60, 13, 150);
        push();
        rotate(radians(150));
        rect(-20, -100, 65, 2);
        pop();
        // Car
        image(car, 50, height/2.3);
	// Sounds:
	/*if (frameCount > 10 & frameCount <= 11) {
	    door.play();
	} else if (frameCount > 11 & frameCount <= 14) {
	    walk.play();
	} else if (frameCount > 14 & frameCount <= 15) {
	    bell.play();
	}*/

    // Inside home:
    } else if (frameCount > 25 & frameCount <= 30) {
        // Wall
        fill(220, 51, 80);
        rect(0, 0, width, height/1.5);
        // Floor
        fill(200);
        rect(0, height/1.5, width, height/3); 
        // Christmas tree
        image(xmastree, 250, 10);
        // Family
        image(family, 0, height/2.3);
	//cheers.play();

    // The end:
    } else {
        background(0);
        fill(255);
        textSize(20);
        text("The End", width/2.5, height/2);
    }
    //Sounds
    switch (frameCount) {
        case 1: trainN.play(); break;
        case 9: drive.play(); break;
        case 21: walk.play(); break;
	case 25: bell.play(); break;
	case 26: cheers.play(); break;
    }
}

For this project, I was inspired by Christmas and the “traveling home for the holidays” time of the year which is soon upon us. I decided to make the travel happen via a train and car, because that was how I got home my first time during freshman year. Then there’s the mini (or large) celebration when you finally return home! The five sounds I chose were, a train noise for the first scene, a car driving for the second, walking and a door bell ring for the third, and cheers for the last scene. The first two scenes last for about 10 seconds and the last two scenes last for about 5 seconds, making the entire story about 30 seconds long. I hope you enjoy!