Category: SectionB

Project-10 Sonic Story

Andrew id: heyingw Name: Heying Wang

These are the characters in my sound story: fish, ship, bubbles, small rock, small rock pieces, and big rock.

The sounds in my story include the sound of the ocean waters, ship siren, ship alarm, explosion sound, and bubble popping sound.

This is what the story is about: The ship starts sailing on the sea and the fish is swimming happily in the waters. The ship stops and the siren goes off to warn nearby ships. Nothing dangerous detected. The siren stops and the ship sails again with a faster speed. The ship hits a rock however, and the alarm for collision is triggered. Luckily the rock isn’t too big. Our ship cracks the rock into pieces accompanied by an explosion sound. The ship doesn’t seem to be damaged and it continued its journey. Our fish is making bubbles happily with a poppoing sound. The ships accelerates. It’s now sailing at a very high speed, which can be dangerous for the ship. The ship hits a big tock and the alarm is triggered. The rock is too big to be crashed. The ship sinks to the bottom of the sea. Game over.

sketch 

var bgImage;
var boat;
var pieces=[];
function preload() {
    // call loadImage() and loadSound() for all media files here
    bgImageBig=loadImage('https://i.imgur.com/hpw6fpR.jpeg');
    fishImage=loadImage('https://i.imgur.com/zOEWUQ7.png');
    boatImage=loadImage('https://i.imgur.com/MtadjYH.png');
    water=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/water-2.wav');
    siren=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/siren.wav');
    alarm=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alarm.wav');
    pop=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/pop-1.wav')
    breaking=loadSound('https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/break.wav')
    
}


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

    //boat object
    boat=new Object();
    boat.img=boatImage;
    boat.x=280;
    boat.y=15;
    boat.dx=-0.8;
    boat.imgWidth=120;
    boat.imgHeight=120;
    boat.draw=imageDraw;

    //fish object
    fish=new Object();
    fish.img=fishImage;
    fish.x=200;
    fish.y=250;
    fish.dx=-4;
    fish.imgWidth=60;
    fish.imgHeight=60;
    fish.draw=imageDraw;

}


function soundSetup() { 
    water.loop();
    water.setVolume(0.02);
    siren.setVolume(0.05);
    alarm.setVolume(0.2);
    breaking.setVolume(0.2);
    pop.setVolume(0.3);
 
}


function draw() {
    //clip background
    var bgImage=bgImageBig.get(0,100,400,300);
    background(20,60,100);
    image(bgImage,0,100,400,400);

    boat.draw();
    fish.draw();
//The ship starts sailing on the sea and the fish is swimming happily in the waters
    print(frameCount);
    if (frameCount >= 25 & frameCount < 80) { 
        boat.x+=boat.dx;

     }

    fish.x+=fish.dx;
    fish.y+=random(1,-1);
    if(fish.x<=-20){
        fish.x=400;
        fish.y=random(150,350);
    }

//The ship stops and the siren goes off to warn nearby ships
    if(frameCount >=90 & frameCount < 125){
        siren.play();
    }

//Nothing dangerous detected. The siren stops and the ship sails again with a faster speed   
    if(frameCount >125 & frameCount < 219){
        siren.stop();
        boat.dx=-1.5;
        boat.x+=boat.dx;
        
    }

//The ship hits a rock however, and the alarm for collision is triggered 
    if(frameCount>219 & frameCount<240){
        if(frameCount==220){
            alarm.play();
        }
        var ball=new Object();
        ball.x=boat.x+20;
        ball.y=boat.y+90;
        ball.draw=drawBall;
        ball.draw();

    }
//Luckily the rock isn't too big. 
//Our ship cracks the rock into pieces accompanied by an explosion sound 
    if (frameCount>240 & frameCount<250){
        alarm.stop();
        for (i=0;i<50;i++){
            pieces[i]=random(105,130);

        }
        for(i=0;i<pieces.length;i++){
            circle(pieces[i],random(120,380),2,2);
        }
        if(frameCount==241){
            breaking.play();
       

    }}
//The ship doesn't seem to be damaged and it continued its journey
    if(frameCount>235 & frameCount<=399){
        boat.dx=-1.5;
        boat.x+=boat.dx;

    }
//Our fish is making bubbles happily with a poppoing sound
    if(frameCount>280){
        if(frameCount%30==0){
            fill(255)
            circle(fish.x,fish.y,15,15);
            pop.play()
        }
    }



    if(boat.x<=-30){
        boat.x=370;
        boat.y=15;
    }

//The ships accelerates. 
//It's now sailing at a very high speed, which can be dangerous for the ship
    if(frameCount>399 & frameCount<499){
        boat.dx=-5;
        boat.x+=boat.dx;
        if(frameCount%100==0){
            siren.play();
        }}

//The ship hits a big tock and the alarm is triggered
    if(frameCount>499 & frameCount<519){
        if(frameCount==500){
            alarm.play();
        }
            var bigBall=new Object();
            bigBall.x=boat.x;
            bigBall.y=boat.y+90;
            bigBall.draw=drawbigBall;
            bigBall.draw();


    }
//The rock is too big to be crashed. The ship sinks to the bottom of the sea. Game over.
    if(frameCount>519){
        boat.x+=boat.dx;
        boat.y+=20;
        if(boat.y>=390){
            background(0);
            noLoop();
        }
    }
        
        
    
    

    
    
}

function imageDraw(){
    image(this.img,this.x,this.y,this.imgWidth,this.imgHeight);
}

function drawBall(){
    noStroke()
    fill('red');
    circle(this.x,this.y,20,20);
}

function drawbigBall(){
    noStroke()
    fill(40);
    circle(this.x,this.y,40,40);
}

LookingOutwards-10

Andrew id: heyingw

The Reverse Sessions,Tarek Atoui (2014)

The artist built 10 unconventional instruments including horns and tea-cups and used them to give a performance. Atoui invited a group of instrument makers and composers to improvise with them. The performance was very energetic and inspiring.

I really like how the artist reversed the order in which instruments are usually made. He collected sounds of a series of ethnic musical instruments and collaborated with the instrument makers and composers to recreate the objects that they believed to be producing these sounds. I think this is an imaginative and unconventional approach to the creation of sound and music: With the audio already established, it was the artist’s job to figure out the source of the sound. It provided the artist with great possibilities and freedom to make something experimental.

The outcomes were completely out of the audience’s expectations. The piece followed genesis of sound making and employed some mechanism create Atoui’s makeshift instruments. The piece demonstrated another attempt of the artist to explore how people perceive and sense sounds.

Project -10

soundstoryDownload
var cloudX = 0;
var cloudY = 50;
var cloudDx = 5;
var carX = 400;
var carY = 350;
var carDx = 15;
var manX = 200;
var manY = 350;
var manDx = 10;
var cloudLaughing;
var rainSound;
var manGrumble;
var carSound;

function preload() {
    cloudLaughing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/laugh.wav");
    rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/rain-1.wav");
    carSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/car.wav");
    manGrumble = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/mad.wav");
}


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

function soundSetup(){
    cloudLaughing.setVolume(0.5);
    carSound.setVolume(0.5);
    manGrumble.setVolume(0.4);
}

function cloud(){
    noStroke();
    fill(255);
    //cloud 1
    push();
    scale(1.5);
    circle(cloudX, cloudY, 60);
    circle(cloudX - 30, cloudY + 10, 40);
    circle(cloudX + 30, cloudY +10, 40);
    //face
    stroke(0);
    line(cloudX-15, cloudY - 15, cloudX-5, cloudY - 5);
    line (cloudX - 15, cloudY - 5, cloudX -5, cloudY - 15);
    line(cloudX+15, cloudY - 15, cloudX+5, cloudY - 5);
    line (cloudX + 15, cloudY - 5, cloudX + 5, cloudY - 15);
    fill(0);
    arc(cloudX, cloudY, 30, 30, 0,  PI); //smile
    pop();

    cloudX += cloudDx
    print(frameCount);
    if (frameCount == 25){
        cloudDx = 0
    }
}

function rain(){
    for (var i = 0; i < 12; i++){
        var x = random(125, 275);
        var y = random(100, height);
        fill(93, 146, 245);
        noStroke();
        circle(x - 15, y+3, 5);
        triangle(x - 17.5, y +3, x - 12.5, y+ 3, x - 15, y - 5)
    }
}

function car(){
    fill(255, 0, 0);
    ellipse(carX, carY, 100, 70);
    ellipse(carX, carY + 15, 150, 40);
    fill(60, 140, 255);
    ellipse(carX - 30, carY - 10, 40, 20)
    fill(0)
    //tires
    circle(carX - 35, carY + 30, 30);
    circle(carX + 35, carY + 30, 30);
    carX -= carDx
    if (frameCount == 14){
        carDx = 0;
    }
}

function person(){
    fill(0);
    stroke(0);
    strokeWeight(1);
    circle(manX, manY, 15);
    strokeWeight(5);
    line(manX, manY, manX, manY + 30);
    line(manX, manY + 30, manX -15, manY + 40);
    line(manX, manY + 30, manX + 15, manY + 40);
    line(manX, manY + 20, manX -15, manY+ 5);
    line(manX, manY + 20, manX + 15, manY+ 5);
    if (frameCount >= 27){
        manX -= manDx
    }
}

function draw() {
    background(195, 200, 226);
    fill(190);
    stroke(50);
    rect(0, 350, width, height);
    cloud();
    car();
    if (frameCount <= 5){
        text('Evil Cloud', 190, 200);
    }
    if (frameCount >= 15){
        person();
    }
    strokeWeight(1);
    //sounds
    if (frameCount > 25 & frameCount <= 49) {
        rain();
        rainSound.play();
    }
    if (frameCount >= 27 & frameCount < 49){
        manGrumble.play();
    }
    if (frameCount < 14){
        carSound.play();
    }
    if (frameCount == 25) {
        cloudLaughing.play();
    }
    if (frameCount == 50){
        rainSound.stop();
        manGrumble.stop();
    }
    if (frameCount == 14){
        carSound.stop();
    }
    if (frameCount == 28){
        cloudLaughing.stop();
    }

}

My story is of an evil cloud. A car drives by and parks and the man gets out, seeing this the cloud laughs and the rain starts to fall. The annoyed man grumbles and walks away from the rain.

LO -10

My Sound Art blog post mainly focused on music so this week I will be focusing on sound art.
The piece I chose is an audiovisual art installation titled Meandering River. This piece premired in Berlin in 2018. The installation is comprised of visuals generated in real-time as well as music that was composed by an A.I.
The piece illustrates the movement of rivers through visuals and sound representing the rivers impact on earth.
I was attracted to this piece due to the unique interpretation of movement. The visuals are stunning and the concept is very intriguing. The piece emphasizes the beauty of nature and leaves the viewer with a sense of appreciation and harmony.

Project 10

For Project 10, I decided to create a collage based story inspired by the aesthetic of Vaporwave. My process began by creating background collages in Photoshop and displaying them in p5-js. Then, I added in the characters within p5-js so that they could be animated. Due to the surreal nature of the world I ended up creating with the collages, I decided to incorporate Alice from Alice in Wonderland as the main character of the story traveling through this “Vaporwave Land.”

My first sound was a piece of music I found that reminded me of startup sounds from old computers. The next sound I used was the error message sound to coincide with the error message character’s appearance. The third sound I used was an ominous drone sound I found to bring life to the All-Seeing-Eye character. The fourth sound I used was the Windows 95 shutdown sound to coincide with the end of the story and the Windows 95 logo character. The last sound was a piece of “80s” inspired music that I used as credit music.

sketch – CopyDownload

//Story Concept: Alice from Alice in Wonderland wakes up stuck in the glitched out world
//of Vaporwave. First, she wakes up in the MS Paint canvas and sees the marble bust from
//Macintosh Plus's Floral Shoppe album floating above her as startup music plays. Next,
//as she explores this new world trying to find a way out she discovers and incessant error
//message that blocks her path. Then, she visits the All-Seeing-Eye for guidance, but the
//eye just floats around aimlessly making an ominous drone. Finally, she arrives at the 
//original frontier and manages to shut down the Windows 95 logo that runs this world.

var sceneOne;
var sceneTwo;
var sceneThree;
var sceneFour;
var error;
var alice;
var soundOne;
var blink = true; //helps make error message disappear and reappear
var soundError;
var eye;
var eyeDrone;
var windows;
var logoFlip = true;//helps flip and reflip Windows 95 logo
var vaporwave;
var sleepalice;
var sitalice;
var windowSound;
var marbleBust;


function preload() {
    // call loadImage() and loadSound() for all media files here
    sceneOne = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpgmu.edu/15-104/f2020/wp-content/uploads/2020/11/1-scaled.jpg");
    sceneTwo = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/2-scaled.jpg");
    sceneThree = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/3-scaled.jpg");
    sceneFour = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/4-scaled.jpg");
    //source: https://i.pinimg.com/originals/c8/0b/29/c80b290d6ea187abe624cd42c4b44014.png
    windows = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/windows.png")
    //source: https://freshsparks.com/wp/wp-content/uploads/2015/06/generic-error-message-microsoft.jpg
    error = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error.png");
    //source: http://2.bp.blogspot.com/-cM30a7xxeMg/TplisvJ0QYI/AAAAAAAAABk/DUgdfkhhq0c/s320/Alice%2B2.gif
    alice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alice.gif"); 
    //source: https://freesound.org/people/kjartan_abel/sounds/542453/
    soundOne = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/japansky-1.wav"); 
    //source: https://freesound.org/people/AbdrTar/sounds/519422/
    soundError = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/error-1.wav"); 
    //source: https://freemasoninformation.com/wp-content/uploads/2014/05/all-seeing-eye-of-god-796x1024.jpg
    eye = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eye.png");
    //source: https://freesound.org/people/pointparkcinema/sounds/407241/
    eyeDrone = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eyedrone-1.wav");
    //source: https://freesound.org/people/Doctor_Dreamchip/sounds/523808/
    vaporwave = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/vaporwave.wav"); 
    //source: https://www.disneyclips.com/images/images/alice1small.gif
    sleepalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/sleepingalice.gif");
    //source: https://www.disneyclips.com/images/images/alice-small.png
    sitalice = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/alicesit.png");
    //source: https://www.myinstants.com/instant/windows-xp-shutdown/
    windowSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/preview_4.mp3")
    //source: https://ih0.redbubble.net/image.236642016.7494/ap,550x550,12x16,1,transparent,t.png
    marbleBust = loadImage("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/floralshoppe.png");

}


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


function soundSetup() { // setup for audio generation
    soundOne.setVolume(.2);
    soundError.setVolume(1);
    eyeDrone.setVolume(.7);
    vaporwave.setVolume(.5);
    windowSound.setVolume(.5);
}

var soundplay = true;
var marbleAngle = 0;

function draw() {
	var eyeX = random(0,3500);
	var eyeY = random(220,500);
    var marbleRadius = 600;
    // you can replace any of this with your own code:
    background(200);
    text("p5.js 15104 fall 2019 v1", 10, 15);
    print(soundplay);
    if (frameCount < 27){
    	soundplay = true;
    	image(sceneOne,0,0,400,400);
    	push();
    	scale(.25,.25);
    	image(sitalice,90,775);
    	pop();
        push();
        imageMode(CENTER);
        scale(.5,.5);
        image(marbleBust,marbleRadius*cos(radians(marbleAngle)),250);
        marbleAngle += 20;
        pop();
    	stroke("black");
    	fill("black");
    	text("Chapter One: Alice Wakes Up in the Internet",5,390);
    	soundOne.play();
    } else if (frameCount >= 27 & frameCount < 50){
    	soundOne.stop();
    	image(sceneTwo,0,0,400,400);
	    push();
	    scale(.1,.1);
	    drawAlice(3000,3000);
	    pop();
	    if (blink == true){ //makes error message appear and disappear
	    	push();
	    	scale(.8,.8);
	   		drawError(0,height/4);
	    	pop();
	    	soundError.play();
	    } else if (blink == false){
	    	soundError.stop();
	    	background(0,0);
	    }
	    blink = !blink;
	    stroke("black");
    	fill("black");
    	text("Chapter Two: Alice Encounters an Error",5,390);
    } else if (frameCount >= 50 & frameCount < 70) {
    	image(sceneThree,0,0,400,400);
		push();
		scale(.4,.4);
		drawAlice(650,300);
		pop();
		push();
		scale(.1,.1);
		drawEye(eyeX,eyeY); //All-Seeing-Eye moves randomly on canvas
		eyeDrone.play();
		pop();
		stroke(255);
    	fill(255);
    	text("Chapter Three: Alice Asks the All-Seeing-Eye for Help",5,390);
    } else if (frameCount >= 70 & frameCount < 90){
    	eyeDrone.stop();
    	image(sceneFour,0,0,400,400);
    	push();
    	scale(.1,.1);
    	drawAlice(3300,3300);
    	pop();
    	push();
    	scale(.5,.5);
    	if (logoFlip == true){
    		drawLogo(width/2,height/2);
    		windowSound.play();
    	} else if (logoFlip == false){
    		windowSound.stop();
    		scale(-1,1);
    		drawLogo(-1.5*width,height/2);
    	}
    	pop();
    	logoFlip = !logoFlip; 
    	stroke(120);
    	fill(120);
    	text("Chapter Four: Alice Faces the Original Frontier",10,390);

    } else {
    	//text(frameCount,0,0);
    	if (soundplay == true){
    		vaporwave.play(); //Cheesy end credit music plays
    		soundplay = !soundplay; //prevents song from restarting each time draw loops
    	}
    	background(0);
    	push();
    	scale(3,3);
    	fill(255,255,0);
    	stroke(255,255,0);
    	text("Alice in Vaporwave Land",1,height/9 + 10);
    	if (frameCount> 95){
    		text("Click to Start Again",1,(height/9)+20);
    	}
    	pop();
    	push();
    	scale(.5,.5);
    	image(sleepalice, 400,400);
    	pop();
    }


}

function mousePressed(){
	if (frameCount > 95){ //restarts story
		vaporwave.stop();
		frameCount = 0;
	}
}


function drawAlice(x,y){
	image(alice,x,y);
}

function drawError(x,y){
	image(error,x,y);
}


function drawEye(x,y){
	image(eye,x,y);
}

function drawLogo(x,y){
	image(windows,x,y);
}

Looking Outwards 10

A project in the area of computational music that I find interesting is “The Holophone (2015)” by Daniel Iglesia. “The Holophone” is a digital instrument that generates music and projects three-dimensional animations in response to inputs on its interface. The projected animations are abstracts and are in sync with the music generated. The animations can be viewed in 3D if one wears 3d glasses. The instrument generates sounds based off of tactile inputs on the screen or vocal inputs. I assume that “the Holophone” has algorithms that generate sounds based off of different paramaters define by the tactile inputs. There is most likely a slider for the bpm, time signature, key, etc. Additionally, “the Holophone” must have an algorithm that listens and records the vocal inputs and converts it into MIDI to imitate it. The artist intended to create an instrument that creates sound and three-dimensional shapes, and while “the Holophone” merely produces projections that appear three-dimensional when viewed with 3D glasses, I think the result is accurate to the artist’s vision.

LookingOutwards-10: Sound Art

The project I will be discussing is The Egg by Fedde ten Berge. This work is egg-shaped with textured ridges on the side which are used to to play vibrations and sound. It is a very hands-on type of installation/project, and despite its egg-shape, appears quite alien-like. It is made out of a block of wood. The artist likes to combine ceramic with another object of another material (left in their true natural form), which in this case is wood. I found this project interesting because when I think of sound art, I typically imagine technology and computers that an audience would not be so openly allowed to touch or fidget with. I was interested in how these slight ridges would produce sound, and was fascinated to find out that with wet hands, or a smooth surface like a mallet, The Egg will give off vibrations that translate to acoustic vibrations, which also makes it accessible/welcoming to those who are hard of hearing. Overall, I was most impressed with the shape of The Egg, because it is very obvious that it was likely a tedious process to hollow out a large block of wood, but keep it strong enough to hold its shell-like structure. The creator’s artistic sensibilities are manifested in the final form in many ways. When you look at the creator’s past works, they all have a few things in common. His projects are very touch-reliant, and prompt the user/audience to interact with it physically. Additionally, the artist utilizes how water and wet surfaces can produce an interesting vibration. On top of this, the artist seems to really enjoy working with natural materials, such as wood, and often tries to leave it in its most natural form without changing the medium too much.

http://www.feddetenberge.nl/het-ei

This is what The Egg looks like, with its natural wood material and usage of ceramic ridges.
Here are some of the artist’s previous works that show his focus on natural materials like wood, and how he incorporates hands-on interaction with his sound art.

Project-10: Sonic Story (& Media Sound Files)

frogcroak
thunder
water
fly-1

For my project, I animated a short story about a frog on a lily pad on a lake. The story is simply about a lonely frog who gets excited to eat a fly that comes alone (because it was hungry), and gets sad when a nearby fish swims away. There is thunder and lightning that turns the sky dark, and the frog wishes the fish had stayed with him. This project was pretty difficult because there were many things to account for, like all of the coordinates, movements, sounds, and captions. I had to refresh my canvas multiple times to make sure everything was playing out the way I wanted it to. I was tempted to import images into my code, but wanted to challenge myself, so I decided to create all the images and shapes/objects myself.

My 4 sounds consist of the following: a loud thunder that echoes, a rippling/swishing noise of water, a loud croaking of a frog, and a (very irritating) buzzing of a fly. I used the buzzing sound of the fly to make sure the viewer could understand that the shape I had created was some sort of bug/fly. With the frog, I wanted to make sure its croaking was heard after it ate the fly to show some emotion. With the loud thunder, I used it to make the story more dark and scary, followed by a sudden darkening of the sky. With the water noises, I used that to make the night sounds seem louder and make it more clear that the fish had swam away.

sketch
//Annie Kim
//anniekim@andrew.cmu.edu
//SectionB
//anniekim-10-project

/* 
For my program, this is the general story line:
A lonely frog who is on a lilypad in the middle
of the water, is there with a fish. A fly comes near
the frog, and the frog eats it. Luckily, the frog is 
happy because it was getting hungry, however it is not 
so lucky for the fly. Then suddenly, lightning strikes,
and thunder echoes through the sky, and the sky turns dark.
The fish swims away in fear, and the frog is left alone again.
*/

var fly; //audio file names
var frogcroak;
var thunder;
var water;

var bug = {
    x: 450, y: 180,
    width: 45, height: 25
}
var lily = {
    x: 110, y: 320, 
    width: 200, height: 90
}
var lily1 = {
    x: 110, y: 320,
    width: 200, height: 90
}
var tongue_move = {
    x: 240, y: 220
}
var cloud = {
    x: 50, y: 75
}
var crab = {
    x: 400, y: 370,
}
var fish = {
    x: 225, y: 440,
}


function preload() {
    // call loadImage() and loadSound() for all media files here
    fly = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fly-1.wav")
    frogcroak = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/frogcroak.wav")
    thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/thunder.wav")
    water = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/water.wav")
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(450, 480);
    useSound();
    frameRate(1);
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    fly.setVolume(0.25);
    frogcroak.setVolume(0.75);
    thunder.setVolume(0.75);
    water.setVolume(0.8);
}


function draw() {
    //sky color
    background(217, 243, 245);
    //water
    fill(150, 214, 250);
    noStroke();
    rect(0, 250, 450, 230);
    //calling fish object
    fishy();
    //lilypad1 ~stagnant, doesnt move
    strokeWeight(2);
    stroke(100, 175, 0);
    fill(150, 225, 0);
    ellipse(lily1.x, lily1.y, lily1.width, lily1.height);
    fill(150, 214, 250); //making cut into lily pad
    noStroke();
    triangle(lily1.x, lily1.y, lily1.x - 100, lily1.y + 15, lily1.x - 50, lily1.y + 60);
    //calling cloud object
    clouds();
    //calling froggy object
    froggy();
    //fly & tongue movement + sound
    if (frameCount >= 1 && frameCount <= 7) {
        flying();
        fill(0);
        textSize(17);
        strokeWeight(1);
        textFont('HelveticaBold');
        text("The fly accidentally gets too close to the hungry frog.", 10, 100);
        tongue();
        fly.play();
    }
    if (frameCount == 7) {
        fly.stop(); //stops sound once fly disappears
    }
    if (frameCount >= 9 & frameCount <= 13) {
        frogcroak.play();
    }
    if (frameCount == 13) {
        frogcroak.stop();
    }
    if (frameCount == 25) {
        background(0);
        textSize(40);
        fill(255);
        strokeWeight(1);
        textFont('HelveticaBold');
        text("The End", 150, 240);
        water.stop();
        noLoop();
    }
}

function flying() {
    //creating 1st fly wing
    fill(255);
    stroke(0);
    ellipse(bug.x + 10, bug.y - 12, bug.width - 15, bug.height - 10);
    //creating fly body
    fill(0);
    noStroke();
    ellipse(bug.x, bug.y, bug.width, bug.height);
    //creating 2nd fly wing
    fill(255);
    stroke(0);
    ellipse(bug.x + 12, bug.y - 10, bug.width - 15, bug.height - 10);
    //making fly move
    bug.x = bug.x - 65;
    if (bug.x <=  200) {
        bug.x = 200;
    }
}

function froggy() {
    //light green color
    fill(117, 176, 111);
    //legs
    stroke(0);
    strokeWeight(3);
    ellipse(lily.x - 15, lily.y - 43, 35, 55);
    ellipse(lily.x + 65, lily.y - 43, 35, 55);
    //body
    ellipse(lily.x + 25, lily.y - 50, 80, 90);
    //feet
    fill(117, 176, 111);
    //arc(lily1.x - 3, lily1.y - 5, 40, 25, PI, 0);
    arc(lily.x + 4, lily.y - 5, 40, 30, PI, 0, CHORD);
    arc(lily.x + 46, lily.y - 5, 40, 30, PI, 0, CHORD);
    //head
    stroke(0);
    ellipse(lily.x + 25, lily.y - 105, 100, 80);
    //smile
    fill(100, 0, 0);
    arc(lily.x + 25, lily.y - 100, 70, 40, 0, PI, CHORD);
    //ears
    fill(117, 176, 111);
    circle(lily.x, lily.y - 140, 38);
    circle(lily.x + 47, lily.y - 140, 38);
    noStroke();
    circle(lily.x + 4, lily.y - 132, 36);
    circle(lily.x + 43, lily.y - 132, 36);
    //white part of eyes
    stroke(0);
    strokeWeight(2);
    fill(255);
    circle(lily.x + 47, lily.y - 140, 23);
    circle(lily.x, lily.y - 140, 23);
    //black of eyes
    fill(0);
    circle(lily.x + 47, lily.y - 140, 10);
    circle(lily.x, lily.y - 140, 10);
    //this will make the frog jump
    if (frameCount >= 9 & frameCount <= 10) {
        lily.y -= 150;
        textSize(20);
        strokeWeight(1);
        textFont('HelveticaBold');
        fill(0);
        text("The frog jumps with joy because it was hungry.", 15, 380);
    }
    if (frameCount >= 10 & frameCount <= 11) {
        lily.y += 150;
    }
}

function tongue() {
    strokeWeight(17);
    stroke(100, 0, 0);
    line(tongue_move.x, tongue_move.y - 10, 135, 230);
    //moving tongue to catch fly
    tongue_move.y -= 5;
    tongue_move.x -= 5;
    if (tongue_move.y <= 200) {
        tongue_move.y = 200;
    }
    if (tongue_move.x <= 220) {
        tongue_move.x = 220;
    }
}

function clouds() {
    if (frameCount >= 14 & frameCount <= 18) {
        darksky();
        lightning();
        textSize(28);
        fill(0);
        textFont('HelveticaBold');
        text("The sky shakes with thunder.", 100, 390);
        thunder.play();
    }
    if (frameCount >= 19 & frameCount <= 25) {
        darksky();
        thunder.stop();
        water.play();
    }
    fill(255);
    //left cloud
    circle(cloud.x, cloud.y, 100);
    circle(cloud.x - 45, cloud.y, 70);
    circle(cloud.x + 55, cloud.y, 55);
    //right cloud
    circle(cloud.x + 300, cloud.y - 30, 100);
    circle(cloud.x + 255, cloud.y - 30, 70);
    circle(cloud.x + 355, cloud.y - 30, 55);
    //clouds moving
    cloud.x += 5;
}

function lightning() {
    fill(255, 255, 0);
    quad(cloud.x, cloud.y, cloud.x - 20, cloud.y + 70, cloud.x + 10, cloud.y + 90, cloud.x + 30, cloud.y + 20);
    quad(cloud.x + 2, cloud.y + 75, cloud.x - 10, cloud.y + 145, cloud.x + 12, cloud.y + 165, cloud.x + 32, cloud.y + 95);
}

function darksky() {
    fill(160);
    rect(0, 0, 450, 250);
}

function fishy() {
    //body and tail
    fill(237, 104, 74);
    strokeWeight(1);
    stroke(255, 0, 0);
    ellipse(fish.x - 38, fish.y - 5, 17, 30);
    ellipse(fish.x - 38, fish.y + 5, 17, 30);
    ellipse(fish.x - 8, fish.y - 26, 30, 25);
    ellipse(fish.x, fish.y, 70, 60);
    //face of fish
    fill(255, 122, 92);
    ellipse(fish.x + 10, fish.y, 53, 54);
    //eyes of fish
    fill(255);
    stroke(0);
    circle(fish.x + 9, fish.y - 5, 18, 18);
    circle(fish.x + 27, fish.y - 5, 18, 18);
    fill(0);
    circle(fish.x + 9, fish.y - 5, 6, 6);
    circle(fish.x + 27, fish.y - 5, 6, 6);
    //bottom fin
    fill(237, 104, 74);
    stroke(155, 0, 0);
    triangle(fish.x, fish.y + 22, fish.x - 20, fish.y + 23, fish.x - 4, fish.y + 38);
    //smile
    noFill();
    arc(fish.x + 18, fish.y + 10, 20, 10, 0, PI);
    //fish is moving off of the canvas
    if (frameCount >= 19 & frameCount <= 25) {
        fish.x += 55;
        fish.y -= 36;
        fill(0);
        textFont('HelveticaBold');
        textSize(20);
        text("The frog wishes the fish would stay.", 50, 450);
        text("The frog doesn't want to be alone in the storm.", 50, 400);
    }
}
This is the image of a frog that I used as reference when drawing the shape on p5js.

Project 10: Sonic Story

nighttimeDownload
var my=270;
var mdy=1;
var windowOpen=true;
var star;
var monster;
var windowSound;
var clock;
var fr=0;

function preload(){
    clock=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/clockticksound.wav");
    star=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/star.wav");
    windowSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/window.wav");
    monster=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/growl-1.wav");
}

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

function soundSetup() {
    clock.setVolume(0.5);
    star.setVolume(0.2);
    windowSound.setVolume(0.5);
    monster.setVolume(1);
}

function draw() {
    background(38, 39, 59);
    drawStatic();
    //monster
    fill(0);
    if (fr>7 & fr<=17){
        monster.play();
        ellipse(260, my, 80, 60);
        rect(220, my, 80, 300-my);
        fill(255, 0, 0);
        triangle(235, my-13, 255, my-10, 245, my-5);
        triangle(285, my-13, 265, my-10, 275, my-5);
        //claws
        for (var i=0; i<3; i++){
            fill(0);
            quad(175+(i*10), 300, 180+(i*10), 295, 185+(i*10), 300, 180+(i*10), 330);
          }
        if (fr>8 & fr<=12){
            my-=5;
        }
        if (fr>12 & fr<=16){
            my+=5;
        }
    }

    //clock
    clock.play();
    push();
    translate(355, 40);
    scale(0.22);
    drawClock();
    pop();

    //star
    push();
    if (fr<5){
        star.play();
    }
    switch(fr){
        case 0: translate(290, 100); scale(0.05); break;
        case 1: translate(280, 105); scale(0.2); break;
        case 2: translate(260, 110); scale (0.3); break;
        case 3: translate(240, 115); scale(0.2); break
        case 4: translate(220, 120); scale(0.05); break;
        case 5: translate(200, 125); scale(0); break;
        default: scale(0); break;
    }

    noStroke();
    fill(255);
    drawStar();
    pop();

    //windowPane
    drawWindow();
    if (fr>6 & fr<=16){
        windowOpen=false;
    }
    if (fr==7){
        windowSound.play();
    }
    if (fr>16){
        windowOpen=true;
    }
    if (fr==17){
        windowSound.play
    }

    fr++;
    if (fr>=22){
        fr=0;
    }
}

function drawClock(){
  //from https://p5js.org/examples/input-clock.html
  var cx;
  var cy;
  var secR;
  var minR;
  var hrR;
  var cD;

  var radius=width/2;
  secR=radius*0.71;
  minR=radius*0.6;
  hrR=radius*0.5;
  cD=radius*1.7

  cx=width/2;
  cy=height/2;

  noStroke();
  fill(15);
  ellipse(cx, cy, cD+25, cD+25);
  fill(200);
  ellipse(cx, cy, cD, cD);

  var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;
  var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;
  var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;

  stroke(0);
  strokeWeight(1);
  line(cx, cy, cx+cos(s)*secR, cy+sin(s)*secR);
  strokeWeight(2);
  line(cx, cy, cx+cos(m)*minR, cy+sin(m)*minR);
  strokeWeight(4);
  line(cx, cy, cx+cos(h)*hrR, cy+sin(h)*hrR);

  strokeWeight(2);
  beginShape(POINTS);
  for(var i=0; i<360; i+=6){
      var angle=radians(i);
      var x=cx+cos(angle)*secR;
      var y=cy+sin(angle)*secR;
      vertex(x, y);
  }
  endShape();
}

function drawStatic(){
  //window
  noStroke();
  fill(64, 65, 90);
  square(25, 25, 300);
  fill(12, 13, 42);
  square(50, 50, 250);
  //bed frame and mattress
  fill(55, 34, 26);
  strokeWeight(3);
  stroke(32, 17, 11);
  rect(240, 375, 240, 105);
  rect(240, 350, 25, 130);
  noStroke();
  fill(192, 157, 167);
  quad(270, 400, 480, 400, 480, 480, 300, 480);
  fill(120, 82, 93);
  triangle(270, 480, 270, 400, 300, 480);
  //moon
  fill(248, 216, 8);
  ellipse(100, 100, 60, 60);
}

function drawStar(){
    //same code as star example from arrays lecture
    var starX=[50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var starY=[18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints=starX.length;
    beginShape();
    for (var i=0; i<nPoints; i++){
        vertex(starX[i], starY[i]);
    }
    endShape(CLOSE);

}

function drawWindow(){
    stroke(64, 65, 90);
    strokeWeight(10);
    noFill();
    if (windowOpen==true){
        line(175, 30, 175, 320);
        line(30, 175, 320, 175);
    }
    if (windowOpen==false){
        line(175, 30, 175, 320);
        line(30, 175, 170, 175);
        line(210, 80, 320, 40);
        line(210, 80, 210, 360);
        line(210, 360, 320, 320);
        line(210, 220, 320, 180);

    }

}

For this project I wanted to have a scene where someone goes to bed and wakes up in the middle of the night to see a monster for the spooky vibes. I struggled a bit trying to figure out all of the objects I was going to animate so I added a shooting star in the beginning.

I got the clock from the p5.js reference site and I used the same code for the star that we had in our Arrays lecture previously in the semester.

Looking Outwards 10: Computer Music

I choose to look into Michel Waisvisz and his work “Hyper Instruments.” Waisvisz was a Dutch composer and performer and invented many experimental musical instruments. He worked at STEIM in Amsterdam from 1981 until 2008. I admire Waisvisz because of his innovation and the way he blends technology and music theory together to make new instruments. I wouldn’t be able to think of half of the things he does. He uses a lot of oscillators to get his sounds and has also taken sensor data and converted it into MIDI way back in 1984, the first to do so. Waisvisz was always trying to challenge people’s definition of music by looking to new electronic instruments, and you have definitely see that in this piece.