Category: SectionD

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 – 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

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

LO 10

Anders Lind‘s work in sound art is both one of the physical and the computational. One of his notable projects, Lines, explores the relationship between the artist, the medium, and the viewer.

In Lines, Lind built instruments of sensors, where a viewer engaging with the marked lines in different ways would create sounds of different pitches and tempos. The three iterations (wall, floor, and ceiling) all follow the same basic principle-audience interaction with the lines create audio feedback.

I think that this exhibit could very easily be explored in the context of performance art and dance. Like in my last LO, this exhibit could be used to study motifs within the choreography, making the music and performance one and the same.

Project 10 – Sonic Story

In this project, I’ve created a story of a journey of birds flying across the sky in different weathers. I’ve used sounds of snow, rain, birds, and cars to show different weathers and scenes of the story. Each scene shifts to different weathers when keys ‘0’ ‘1’ and ‘2’ are pressed. The sun rises and falls with mouse Y.

sketch
//Stefanie Suk
//15-104 Section D

//This stroy is about a journey of birds flying through different scenes of weather.
//Journey of birds flying in a sunny day, snowy day, and rainy day. 

var story = "start"; //scene of story initially set to "start"

var winterSnow = []; // array to hold snowflake objects

var rainFalls = [];

var cloudX = 0;

var birdImage = [];
var birdFrame = 0;
var birdx = 0;
var birdTime = 0;

var snowbirdImage = [];
var snowbirdFrame = 0;
var snowbirdx = 0;
var snowbirdTime = 0;

var car = [];
var carNum = 10; //number of cars

var sun;

function preload() {
  rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-3.wav");
  snowstormSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/snowstorm.wav");
  birdSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bird-3.wav");
  carSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car-2.wav");
  birdchirpSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birdchirp.wav");

  //Bird images, for rain scene
  birdImage[0] = loadImage("https://i.imgur.com/tg67EJp.png");
  birdImage[1] = loadImage("https://i.imgur.com/NzqZdC6.png");
  birdImage[2] = loadImage("https://i.imgur.com/PoLXRp1.png");
  birdImage[3] = loadImage("https://i.imgur.com/RR23waU.png");
  birdImage[4] = loadImage("https://i.imgur.com/bomc4zU.png");
  birdImage[5] = loadImage("https://i.imgur.com/yvMEopS.png");
  birdImage[6] = loadImage("https://i.imgur.com/NNqLSfZ.png");
  birdImage[7] = loadImage("https://i.imgur.com/JgASL5k.png");
  birdImage[8] = loadImage("https://i.imgur.com/yDRvXLi.png");
  birdImage[9] = loadImage("https://i.imgur.com/sH0IWH2.png");

  //Bird images with snow on top, for snow scene
  snowbirdImage[0] = loadImage("https://i.imgur.com/9UBa9S7.png");
  snowbirdImage[1] = loadImage("https://i.imgur.com/P13A1Gj.png");
  snowbirdImage[2] = loadImage("https://i.imgur.com/WLn63gv.png");
  snowbirdImage[3] = loadImage("https://i.imgur.com/rYCLLmV.png");
  snowbirdImage[4] = loadImage("https://i.imgur.com/65hbFvj.png");
  snowbirdImage[5] = loadImage("https://i.imgur.com/ifH75Di.png");
  snowbirdImage[6] = loadImage("https://i.imgur.com/8ER6XPt.png");
  snowbirdImage[7] = loadImage("https://i.imgur.com/AXF0fpu.png");
  snowbirdImage[8] = loadImage("https://i.imgur.com/ONvchFq.png");
  snowbirdImage[9] = loadImage("https://i.imgur.com/W0Wu9Ou.png");


}

function setup() {
  createCanvas(400, 600);

  //snow
  fill(240);
  noStroke();

  //rain
  for (var i = 0; i < 400; i++) {
    rainFalls[i] = new drawRain();
  }

  //car
  for (let i = 0; i < carNum; i++) {
    car[i] = new Car(random(height),
      random(width),
      color(random(255), random(255), random(255)), //random car color
      random(1, 8), //random car speed
      random(20, 90) //random car size
    );
    print(car[i]);
  }

  birdSound.loop(); //looping bird sound 

  rectMode(CENTER);
  useSound();

}

function soundSetup(){
  rainSound.setVolume(0.5);
  snowstormSound.setVolume(0.7);
  birdSound.setVolume(0.5)
  birdchirpSound.setVolume(0.8);
}

function draw() {

  if (frameCount == 1) {
    birdchirpSound.play();
  }

  //snow
  let snowT = frameCount/10; //time for snow falling

  //each scene
  if (story == "start") { //starting scene

    //sun
    //background color change, mouse Y
    //sun move up and down
    sun = map(mouseY, 0, 600, 200, 0); //map background color
    background(0, sun/2, sun);
    noStroke();
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    fill(255);
    textSize(10);
    text("Press keys '1' and '2' to change scene", 40, height/2-40);
    text("Press key '0' to reset", 40, height/2-20);

    drawCloud();

    drawBird();

	} else if (story == "frame1") { //snowing scene
    
    //sun
    //background color change, mouse Y
    //sun move up and down
    sun = map(mouseY, 0, 500, 100, 0);
    background(0, sun/2, sun);
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    //snow
    fill(250);
    for (let i = 0; i < random(6); i++) { // drawing random snows
	   winterSnow.push(new drawSnow());
    }
  	for (let snowParticles of winterSnow) {
      snowParticles.display(); //looping, display snow
  	  snowParticles.update(snowT); // updating snow
  	}

    //cars
    for (let i = 0; i < 10; i++) {
      car[i].move();
      car[i].display(); //making cars show
    }

    //cloud
    drawCloud();

    //bird with snow
    drawSnowbird();

  } else if (story == "frame2") { //raining scene
    
    //sun
    //background color change, mouse Y
    //sun move up and down
  	sun = map(mouseY, 0, 600, 50, 0); //map background color
    background(0, sun/2, sun);
    noStroke();
    fill(255, 255, 0);
    ellipse(300,mouseY,60,60);

    //rain
  	for (var i = 0; i < rainFalls.length; i++) {
    rainFalls[i].rainMove();
    rainFalls[i].rainShow();
  	}

    //cars
    for (let i = 0; i < 10; i++) {
      car[i].move();
      car[i].display(); //making cars show
    }

    //bird
    drawBird();
  }

}

function drawSnow() {
  this.snowX = 0; //position X of snow
  this.snowY = random(-70, 10); //position Y of snow
  this.snowstartAngle = random(0, PI*3); //starting angle of snow
  this.snowSize = random(1, 5.5);

  //radius of snow
  //make snow spread evenly throught canvas
  this.snowRadius = sqrt(random(pow(width, 2)));

  this.update = function(snowTime) {
    // snow fall spiral, like wind blowing
    var snowSpeed = 0.5; // angled speed
    var snowAngle = snowSpeed * snowTime + this.snowstartAngle;
    this.snowX = this.snowRadius * cos(snowAngle) + width/2;

    // various sizes of snow falling at different speeds
    this.snowY += pow(this.snowSize, 0.5);

  }

  this.display = function() {
    ellipse(this.snowX, this.snowY, this.snowSize);
  }



}

function drawRain() {
  this.rainX = random(width); //pos X, rain falling randomly throughout canvas
  this.rainY = random(-400, -100); //pos Y
  this.rainS = random(0, 15); //rain size
  this.rainLength = map(this.rainS, 0, 5, 10, 15); //rain length
  this.rainSpeed = map(this.rainS, 0, 15, 5, 25); //map rain speed

  this.rainMove = function() {
    this.rainY = this.rainSpeed + this.rainY;
    var rainFalling = map(this.rainS, 0, 15, 0, 0.3); //falling speed of rain
    this.rainSpeed = this.rainSpeed + rainFalling;

    //keeping rain fall
    if (this.rainY > height) {
      this.rainY = random(-300, -50);
      this.rainSpeed = map(this.rainS, 0, 15, 5, 10);
    }
  }

  this.rainShow = function() {
    var rainSize = map(this.rainS, 0, 15, 0.5, 2); //map rain size
    strokeWeight(rainSize);
    stroke(205, 235, 244);
    line(this.rainX, this.rainY, this.rainX, this.rainY+this.rainLength);
  }
}

function drawCloud(){

  //translate cloud
  translate(cloudX, 0);
  
  // draw cloud
  fill(255);
  noStroke();
  ellipse(100,100,50);
  ellipse(110,110,50);
  ellipse(120,95,50,60);
  ellipse(130,105,50);

  ellipse(200,200,50);
  ellipse(210,210,50);
  ellipse(220,195,50,60);
  ellipse(230,205,50);

  ellipse(-100,250,50);
  ellipse(-110,260,50);
  ellipse(-120,245,50,60);
  ellipse(-130,255,50);

  //make cloud appear canvas again
  if (cloudX -200> width){
    cloudX = -300;
  }
  cloudX++;

}

function drawBird() {
  image(birdImage[birdFrame], birdx, height/2);
  image(birdImage[birdFrame], birdx-300, height/2+50);

  if (birdTime > 20) { //change position, every 20 frames
    birdx += 5; //moving bird image
    birdFrame += 1; //next index of array
    if (birdFrame >= birdImage.length) {
      birdFrame = 0; //keep frame index within image length array
    }
    birdTime = 0; //frame time reset
  }
  birdTime++;
}

function drawSnowbird() {
  image(snowbirdImage[snowbirdFrame], snowbirdx, height/2);
  image(snowbirdImage[snowbirdFrame], snowbirdx-300, height/2+50);

  if (snowbirdTime > 20) { //change position, every 20 frames
    snowbirdx += 1; //moving bird image
    snowbirdFrame += 1; //next index of array
    if (snowbirdFrame >= snowbirdImage.length) {
      snowbirdFrame = 0; //keep frame index within image length array
    }
    snowbirdTime = 0; //frame time reset
  }
  snowbirdTime++;
}


class Car {
  constructor(x, y, c, s, l) {
    this.carX = x;
    this.carY = y;
    this.carC = c; //color of car
    this.carL = l; //length of car
    this.carSpeed = s; //speed of car
  }
  
  move() {
    this.carX = this.carX + this.carSpeed; //cars move
    if (this.carX > width) {
      this.carX = 0; //initial pos X of cars
    }
  }

  display() {
    noStroke();
    fill(this.carC);
    rect(this.carX, 600, this.carL, 35, 20); //position of cars, different shapes of cars 
  }
}



function keyPressed() {
	if (key == "0") {
		story = "start";
    birdSound.play();
    rainSound.stop();
    snowstormSound.stop();
    carSound.stop();
	} else if (key == "1") {
		story = "frame1";
    snowstormSound.play();
    birdSound.play();
    carSound.play();
    rainSound.stop();
	} else if (key == "2") {
		story = "frame2";
    snowstormSound.stop();
    birdSound.play();
    rainSound.play();
    carSound.play();
	} 
}

Looking Outwards 10 – Computer Music

Image of Haptic Organ

Haptic Organ is a kinetic soundscape installation created by COLLECTIVE and honh1m. ‘Haptic’ comes from the greek word ‘haptikos,’ which means “pertaining to the sense of touch.” This installation is based on kinesthetic communication, in other words the installation is generated using motion of hands to create variations of visual displays and sounds. The intention of this project was to make music visible, tangible, and shareable at the same time. This encourages people to interact with each other, which was the main goal of the creators and purpose of the installation Haptic Organ is designed with 20 transparent tubes with metallic spheres in them that move up and down through initiated air movement by hand motion. Audiences can freely perform their own music with the aid of sensors that give different notes across an octave. The volume of musical sounds from the installation can be controllable with growing and falling movements of hands over the haptic interfaces. What I really love about this artwork is that there is a unity between artificial (tube and sphere balls) and natural (sound energy) presented in a single piece of art that encourages interaction between people and the installation itself. I can really sense the artist’s sensibilities for interactivity and minimalism by looking at the complexity of interaction created through visuals and sound as well as simplicity of the installation design. 

Website: http://h0nh1m.com/

Video of Haptic Organ

LO_10_Computer Music

In this week’s topic, I would like to talk about artist Gottfried Michael Koenig’s work.

Gottfried is a contemporary composer and learnt both music theories and music representations. His work is drastically different from traditional composer’s work. In his presentation in the link above, the music is very suitable for a sci-fi movie background. I admire him for using this avant-garde method to make music in the 1950s, which is a very early stage for even computer and network development. I believe his style and working method had a big impact on the later electronic music. Even though electronic music is not my personal favorite music style, I can still see the art expression in it. This music trend, again as I mentioned before, is very modern and very distinct from all the previous music trends.

I can not guess the algothism and method used in this piece of music, but by guessing, I think he made the basic music elements into variables and borrowed randomness into it. 

Basically, I think every Epoch-making work is precious.

Project-10-Sonic-Story

sketch
// Jasmin Kim
//Section D
      
var mouseSound;       
var mouseeX=250;
var mouseeY=100;
var x;
var y;


function preload() { //preloading sounds
//loading sounds
mouseSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rat.wav");
}

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


function soundSetup() { //setup for audio generation
    mouseSound.setVolume(0.3);
}

function draw(){
    console.log(frameRate);
    background(230);
    drawCheese();
    mouseSound.play();
    //plateSlide.play();
    if(frameCount >=2 & frameCount <=4){
        translate(0,-80);
        drawMouse(x,y);
    }
    if(frameCount > 4 & frameCount <=6){
        translate(0,0);
        drawMouse(x,y);
        translate(100,-50);
        drawMouse(x,y);
    }
    if(frameCount > 6 & frameCount <=8){
        translate(0,60);
        drawMouse(x,y);
        translate(100,-30);
        drawMouse(x,y);
        translate(-200,-60);
        drawMouse(x,y);
    }
    if(frameCount > 8 & frameCount <=10){
        translate(0,120);
        drawMouse(x,y);
        translate(100,0);
        drawMouse(x,y);
        translate(-200,-50);
        drawMouse(x,y);
    }
    if(frameCount > 10 & frameCount <=12){
        push();
        circle(302,342,62);
        pop();
        translate(0,130);
        drawMouse(x,y);
        rotate(PI/10);
        translate(100,60);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,-30);
        drawMouse(x,y);
    }
    if(frameCount >12 & frameCount <=14){
        push();
        circle(276,357,110);
        pop();
        translate(0,180);
        drawMouse(x,y);
        rotate(PI/10);
        translate(100,120);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,0);
        drawMouse(x,y);
    }
    if(frameCount >14 & frameCount <=16){
        push();
        circle(276,357,110);
        circle(193,367,79);
        pop();
        translate(0,190);
        rotate(PI/10);
        drawMouse(x,y);
        translate(100,130);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,60);
        drawMouse(x,y);
    }
    if(frameCount >16 & frameCount <=18){
        push();
        circle(276,357,110);
        circle(193,367,79);
        pop();
        translate(0,250);
        rotate(PI/10);
        drawMouse(x,y);
        translate(0,180);
        drawMouse(x,y);
        rotate(-PI/10);
        translate(-200,80);
        drawMouse(x,y);
    }
    if (frameCount>18 & frameCount <20){
        fill(255);
        circle(249,379,181);
    } else if(frameCount >= 20){
        fill(255);
        circle(249,379,181);
        mouseSound.disconnect();
        textSize(30);
        fill(0);
        text("Your cheese is gone.", width/2-100,200);
        noLoop();
    }

}

function drawCheese(x,y){
    fill(255);
    noStroke();
    circle(249,387,234);    //white plate
    push();
    noFill();
    strokeWeight(1);
    stroke(49,51,73);
    circle(249,387,220);        //navy plate
    pop();
    fill(253,222,85);
    noStroke();
    triangle(323,334,241,471,167,363);      //cheese
    fill(255);
    circle(200,357,20);
    circle(270,346,11);
    circle(236,391,11);
    circle(189,395,12);
    circle(222,436,20);
    circle(247,459,11);
    circle(277,413,20);
    circle(315,349,11);
}


function drawMouse(){
    fill(127,84,41);        //brown
    stroke(0);
    strokeWeight(1);
    ellipse(mouseeX,mouseeY,98,103);            //body
    arc(mouseeX, mouseeY+45, 52, 52, 0, PI);       //face
    push();
    //eyes
    fill(0);                                    
    ellipse(mouseeX-10,mouseeY+52,7,8); //left
    ellipse(mouseeX+10,mouseeY+52,7,8); //right
    ellipse(mouseeX,mouseeY+66,5,5);
    fill(255);
    ellipse(mouseeX-10,mouseeY+51,3.7,4.7);
    ellipse(mouseeX+10,mouseeY+51,3.7,4.7);
    noFill();
    stroke(0);
    line(mouseeX-30,mouseeY+61,mouseeX-7,mouseeY+65);  //left
    line(mouseeX-30,mouseeY+69,mouseeX-7,mouseeY+67);
    line(mouseeX-23,mouseeY+78,mouseeX-5,mouseeY+69);
    line(mouseeX+30,mouseeY+61,mouseeX+8,mouseeY+65);  //right
    line(mouseeX+7,mouseeY+67,mouseeX+30,mouseeY+69);
    line(mouseeX+6,mouseeY+69,mouseeX+24,mouseeY+78);
    pop();
    stroke(127,84,41);
    strokeWeight(4);
    line(mouseeX,mouseeY-50,mouseeX-23,mouseeY-69);     //tail
    noStroke();

    push();
    fill(0);
    arc(mouseeX+24, mouseeY+30, 37, 39, -PI,TWO_PI);  //right ear black
    arc(mouseeX-24, mouseeY+30, 37, 39,PI, TWO_PI);  //left ear black
    pop();
    ellipse(mouseeX+25, mouseeY+31, 37, 39);  //right ear brown
    ellipse(mouseeX-25, mouseeY+31, 37, 39);  //left ear brown
   
    push();
    fill(247,168,170);      //pink
    ellipse(mouseeX+25,mouseeY+30,31,31);
    ellipse(mouseeX-25,mouseeY+30,31,31);
    pop();
    ellipse(mouseeX+22,mouseeY+34,31,28);       //left ear cover
    ellipse(mouseeX-22,mouseeY+34,32,28);       //right ear cover
}

For this project, I tried to show a short animation of mice eating all of my cheese. As frameCount increases, mouse appears and the mouse sound increases. I also tried to show how the cheese gradually disappears throughout the frame.