Month: November 2020

Project 10 – Sonic Story

For my project, I created a story of Santa Clause delivering presents and running into a penguin. Now that Halloween is over, it is Christmas time.

I used Illustrator to create vector drawings correlating to the canvas size.

sketch
//general story
//Santa Clause was delivering presents when he ran into a penguin
let snowflakes = [];
function setup() {
    createCanvas(400, 200);
    useSound();
}

function soundSetup() { 
    osc = new p5.Oscillator();
    osc.amp(0.25);
    osc.setType('square');
    osc.start();
}

// Frequencies in Hz for each of the white and black keys, left to right
var white_freqs = [261.625, 293.665, 329.63, 349.23, 392, 440, 493.88, 523.25];
var black_freqs = [277, 311, 0, 370, 415, 466];   // index 2 not used

function draw() {
    background(0, 0, 68);
       noStroke();
    fill(230, 249, 255);
    rect(0, 180, 400, 200);
    penguin();
    tree();
    santa();
    elf();
    present();
    let t = frameCount / 60; // update time

  // create a random number of snowflakes each frame
  for (let i = 0; i < random(5); i++) {
    snowflakes.push(new snowflake()); // append snowflake object
  }

  // loop through snowflakes with a for..of loop
  for (let flake of snowflakes) {
    flake.update(t); // update snowflake position
    flake.display(); // draw snowflake
  }
}

// snowflake class
function snowflake() {
  // initialize coordinates
  this.posX = 0;
  this.posY = random(-50, 0);
  this.initialangle = random(0, 2 * PI);
  this.size = random(2, 5);

  // radius of snowflake spiral
  // chosen so the snowflakes are uniformly spread out in area
  this.radius = sqrt(random(pow(width / 2, 2)));

  this.update = function(time) {
    // x position follows a circle
    let w = 0.6; // angular speed
    let angle = w * time + this.initialangle;
    this.posX = width / 2 + this.radius * sin(angle);

    // different size snowflakes fall at slightly different y speeds
    this.posY += pow(this.size, 0.5);

    // delete snowflake if past end of screen
    if (this.posY > height) {
      let index = snowflakes.indexOf(this);
      snowflakes.splice(index, 1);
    }
  };

  this.display = function() {
    ellipse(this.posX, this.posY, this.size);
  };
}
 


function mousePressed() {
if(mouseY >= 0 & mouseY < 200 && mouseX >= 25 && mouseX < 325) {
        var keynum = constrain(floor((mouseX - 25) / 50), 0, 5);
        if(keynum != 2) {
        osc.start();
        osc.freq(black_freqs[keynum]);
    }
}
}

function penguin() {
    push();
    noStroke();
    translate(0, 0);
    fill(50);
    rectMode(CENTER);
    //face
    ellipse(49.5, 90.5, 39, 39);
    fill(20);
    //wings
    ellipse(35, 131.5, 8, 55);
    //wings 
    ellipse(64, 131.5, 8, 55);
    fill(50);
    //body
    rect(49.5, 142, 29, 82);
    //belly
    fill(255);
    ellipse(50, 137.5, 16, 55);
    fill(255, 255, 0);
    //foot
    ellipse(35.5, 182.5, 15, 9);
    //foot
    ellipse(64.5, 182.5, 15, 9);
    fill(255, 255, 0);
    //beak
    ellipse(37, 90.5, 22, 3);
    fill(255);
    //eyes
    ellipse(40.5, 83.5, 3, 3);
    //eyes
    ellipse(55.5, 83.5, 3, 3);
    pop();
} 
    function tree() {
        push();
        noStroke();
        translate(0, 0);
        fill(210, 105, 30);
        rectMode(CENTER);
        rect(100, 162, 7, 43);
        //triangle 1
        fill(34, 139, 34);
        beginShape();
        vertex(100, 69.7388);
        vertex(82.5, 130.5);
        vertex(117.8899, 130.5);
        endShape();
        //triangle 2
        beginShape();
        vertex(100, 100.7388);
        vertex(82.5, 161.5);
        vertex(117.8899, 161.5);
        endShape();
        fill(255, 255, 0);
        //star
        ellipse(100, 71, 9 ,9);
        pop();
    }

    function santa() {
        push();
        noStroke();
        translate(0, 0);
        //body
        fill(255, 0, 0);
        ellipse(200, 150.5, 44, 61);
        fill(255);
        ellipse(200, 70, 9, 9);
        //face
        fill(255, 230, 204);
        ellipse(200.5, 110.5, 31, 31);
        //hat
        fill(255, 0, 0);
        beginShape();
        vertex(200.0522, 70);
        vertex(187.2356, 101.5);
        vertex(213.1543, 101.5);
        endShape();
        //boots
        fill(0);
        ellipse(189.5, 179.5, 15, 9);
        ellipse(211.5, 179.5, 15, 9);
        fill(255);
        //buttons
        ellipse(200, 135, 9, 9);
        ellipse(200, 150, 9, 9);
        ellipse(200, 165, 9, 9);
        //eyes
        fill(0);
        ellipse(193, 110, 4, 4);
        ellipse(209, 110, 4, 4);
        pop();
    }

    function elf() {
        push();
        noStroke();
        translate(0, 0);
        rectMode(CENTER);
        //arm
        fill(0, 102, 0);
        rect(242, 155.5, 7, 30);
        rect(258, 155.5, 7, 30);
        //body
        fill(51, 153, 51);
        rect(250, 159, 17, 43);
         //face
        fill(255, 230, 204);
        ellipse(249.5, 130.5, 29, 29);
        //ears
        ellipse(234.5, 131, 3, 14);
        ellipse(264.5, 131, 3, 14);
        //shoes
        fill(255, 0, 0);
        ellipse(241.5, 181, 15, 6);
        ellipse(258.5, 181, 15, 6);
        //hat
        beginShape();
        vertex(249.0522, 94);
        vertex(236.2356, 125.5);
        vertex(263.1543, 125.5);
        endShape();
        //hat top
        fill(255);
        ellipse(249, 92, 9, 9);
        //eyes
         fill(0);
         ellipse(243, 129, 4, 4);
         ellipse(256, 129, 4, 4);
         pop();
    }

    function present() {
        push();
        noStroke();
        translate(0, 0);
        rectMode(CENTER);
        //present
        fill(204, 0, 0);
        rect(299.5, 166.5, 35, 35);
        //ribbon
        fill(255, 204, 0);
        rect(299.5, 166.5, 5, 35);
        rect(299.5, 166.5, 35, 3);
        noFill();
        strokeWeight(2);
        stroke(255, 204, 0);
        ellipse(295, 148, 10, 8);
        ellipse(304, 148, 10, 8);
        pop();
    }
Illustrator Mockup

LO 10 – Computer Music

Cymatics

Nigel Stanford

Nigel Stanford

For my Looking Outwards post, I will be talking about a sound visualization project done by Nigel Stanford. For his latest music video for Cymatics, Stanford decided to use various methods of visualizing sound through natural materials, demonstrating how sound waves affect different types of matter. He uses instruments and computation to effectively convert the sound to waves that can be demonstrated physically. I admire this project because the main focus was creating the visuals of sound: “I looked for interesting science experiments that showed how sound waves affect things, figured out what looked good, and then wrote the musical parts for each experiment” (Stanford). Not only is he using his creativity for his music, but also pushes himself to visualize sound, which allows for a whole new experience for the viewer.

View his portfolio here

View the video here

Project-10-Sonic-Story

For this project, I wanted to create a weird but delightful story with many fun little elements. I spent a lot of time thinking about how to make the transition between each scene smooth and fun. One of the solutions I came up with was creating an unexpected interaction between the background and the water in the fish tank.

Basically, my story goes like this:

Cat girl walked into the frame (walking sound). She blowed up her chewing gum (blowing balloon sound) and gradually shrined(venting balloon sound) it down to a size of a fish tank. As the water in the background flowed into the fish tank hat (filling water sound), a goldfish appeared, bubbling(bubble sound).

sketch new
//jiaqiwa2; Jiaqi Wang; Section C
//Story: a cat girl walked into the frame while chewing a gum. 
//She blowed up the gum and shrinked it down to the size of a fish tank.
//water started filling up the tank and a goldfish appeared.
//She enjoyed the goldfish bubbling infront of her eyes.
var CatGirlImage = [];   // an array to store the images
var fish;
var count=0;
var xC=700;
var yoff=0.0;
var yC=5;
var stepC=40;
var fC=0;


var blowing=false;
var diam=5;
var shrink=0;

var arcS=90;
var arcE=90;

var rise=0;
var filling=false;

var fishSX=175;
var fishSY=455;
var fishXoff=0.0;

var secondHalf=false;

//sound file variable
var walkingSound;
var GrowingSound;
var shrinkingSound;
var fillingSound;
var bubbleSound;

 
function preload(){

    var filenames = [];
    filenames[0] = "https://i.imgur.com/Em6d4RR.png";
    filenames[1] = "https://i.imgur.com/lWdTJLj.png";
    filenames[2] = "https://i.imgur.com/sdhFyfz.png";
    filenames[3] = "https://i.imgur.com/HEiFHNA.png";
    filenames[4] = "https://i.imgur.com/bJF8rmQ.png";
    filenames[5] = "https://i.imgur.com/D8MFSK6.png";
 
    for (var i = 0; i<filenames.length; i++) {
        CatGirlImage[i] = loadImage(filenames[i]);
    }
    fish=loadImage("https://i.imgur.com/UzyMgov.png");

   walkingSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bubbleSound.wav");
   GrowingSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bubbleSound.wav");
   shrinkingSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bubbleSound.wav");
   fillingSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bubbleSound.wav");
   bubbleSound=loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bubbleSound.wav");
}

function setup() {
    createCanvas(400,600);
    frameRate(10);
    background(144,181,232);
    useSound();

}

function draw() {
	//scale up to the top left area for the second half of the story
	if(secondHalf){
    	scale(1.75,1.75);
	    translate(-20,-40);
	}
    //start dropping water in the background
	if(filling){
		fill(229,147,147);
		rect(0,0,400,min(115,rise*2));
	}
	else{
        fill(144,181,232);
        rect(0,0,400,600);
    }
	
//---------------------------------catGirl walking into the frame and stopped---------------------

	if(count<20){
		catGirlWalking();
	}
    else if(count<303){
    	 catGirlStopped();
    }
   
	
//---------------------------------the gum grows and shrinks to a fish tank----------------------
	gumGrowing(count);
//---------------------------------water filling+ goldfish appears-------------------------------
	waterFilling(count);      
	        
//-----------------------------------bubble popping----------------------------------------------
	bubble(count);

	if(count>=250){
	   noLoop();
	}



   count++;
   print(count);


}  



function mousePressed(){
	print(count);
	
	noLoop();
}

//update the x&y position of the catGirl walking into the frame
function catGirlWalking(){
		//sound
		if(fC==0||fC%3==0){
			walkingSound.play();
		}
		
		//keep the frame of catGirl animation looping
		if(fC%5==0&fC!=0){
		   fC=0;
	    }
	    //keep moving to the left if catGirl does not reach the stopping point
	    if(xC>=50){
		   xC-=stepC;
	    }

	//keep moving up and down to feel more lively
		yoff=yoff+0.01;
		if(fC%3==0){
        	yC+= noise(yoff);
		}
		else if(yC>0){
			yC-= noise(yoff);
		}
		//draw the catGirl
   		image(CatGirlImage[fC],xC,yC,400,600);
   		fC++;
}
function catGirlStopped(){
	//keep the frame of catGirl animation looping
		if(fC%5==0&fC!=0){
		   fC=0;
	    }
	    //keep moving up and down to feel more lively
		yoff=yoff+0.01;
		if(fC%3==0){
        	yC+= noise(yoff);
		}
		else if(yC>0){
			yC-= noise(yoff);
		}
		image(CatGirlImage[fC],0,yC,400,600);
   		fC++;

}

function gumGrowing(count){
	//gum growing bigger
	if(count>=20&count<45){
	   	fill(229,147,147,170);
	   	noStroke();
	   	diam+=count;
	    ellipse(200,380,diam,diam);
	    if(count%3==0){
	    	GrowingSound.play();
	    }


	}
	
	if(count>=45){
		shrink++;
	    fill(229,147,147,170);
	    if(count==49){
			
			shrinkingSound.play();
		}
		 //if size of gum gets down to 500, stop changing
	    if(diam-shrink*15<510&shrink>10){
	        ellipse(250,240,460,460);
				
	    }
	    else{
	        ellipse(250,240,diam-shrink*15);
	    }
	}

}

function waterFilling(count){
	if(count>=75){
		if(count==75){
	    	fillingSound.play();
	    }

		filling=true;
		rise+=1.08;
		fill(144,181,232,130);
	    arcS-=rise*0.1;
	    arcE+=rise*0.1;
	    
	    //fish appears
	    if(count>100){

	        	image(fish,fishSX-100*(noise(fishXoff)),max(110,fishSY-rise*3),min(100,40+(rise*0.8)),min(150, 60+(rise*1.2)));
	    }
	    if(count<130){
	        	arc(250,240,460,460,radians(arcS),radians(arcE), OPEN);
	    }
	    else{
	        	arc(250,240,460,460,-1.0471975511965976 +random(-0.003,0.0003),4.1887902047863905+random(-0.003,0.0003), OPEN);
	    }
	    fishXoff+=0.04;
	}

}

function bubble(count){
	   if(count>=160){
	   	    secondHalf=true;
	   		
	   	if(count%24==0){
	   		bubbleSound.play();
	   	}
	   	fill(144,219,232,220);
	   	//generating bubbles
	   	for(var i=0;i<5;i++){
	   		ellipse(fishSX-100*(noise(fishXoff))+random(30+i),max(110,fishSY-rise*3)-random(40+i),random(10-i));
	   		ellipse(fishSX-100*(noise(fishXoff))+random(5+i),max(110,fishSY-rise*3)+random(40+i),random(20-i));
	   	}


	   }
}
Sketching characters
Storyboard sketch

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.

LookingOutwards-10

The Stanford Mobile Phone Orchestra (MoPhO) is an innovative ensemble that explores social music-making using mobile devices, instantiated in 2007, directed by Ge Wang.

images of MoPho

This project takes advantage of existing technologies and turns them into personal musical instruments. People on the internet could also add sound to existing music.

I admire how this project affords new possibilities for us to be expressive in the field of music creation. In the past, only those who received special training could play certain instruments, but with MoPhO, anyone interested in music could easily express themselves musically with available devices. For example, one of the instrument it could mimic is the ancient flute. By simply blowing into the microphone, the sensor embedded in the phone could detect the strength of your sound and synthesizing the sound according to where the fingers are pressing on the screen interface. This changes the way humans think about making music and the approach they use.

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.

Project 10 Sonic Story

This project is about the life of a Balloon.

It inflates, slightly deflates while floating up, quickly deflates and shoots around the canvas, inflates again, then finally popping.

sketch
// tjchen 
// hand in 10 project 
// life of a balloon 


var vol = 0.75 // set global volume 

function preload() {
    // call loadImage() and loadSound() for all media files here
    deflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/shortdeflate.wav");
    inflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/inflate.wav");
    bpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/pop.wav");
    slowDeflate = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/longdeflate_2.wav");
}

function soundSetup() { // setup for audio generation
        deflate.setVolume(vol);
        inflate.setVolume(vol);
        bpop.setVolume(vol);
        slowDeflate.setVolume(vol);
}

// set up balloon movement 
function balloonStep(){
    this.dx = random(-20,20);
    this.dy = random(-20,20);

    //first inflate

    if (this.age > 0 & this.age <= 200){
        this.size += 1; 
    
    //slow deflate 

    } else if (this.age > 200 & this.age <= 400){
        this.y -= 1; 
        this.size -= 0.3

    // quick deflate and fly around 

    } else if (this.age > 400 & this.age <= 600){
        this.x += this.dx;
        this.y += this.dy;
        if (this.x > width) { // bounce off right wall
            this.x = width - (this.x - width);
            this.dx = -this.dx;
        } else if (this.x < 0) { // bounce off left wall
            this.x = -this.x;
            this.dx = -this.dx;
        }
        if (this.y > height) { // bounce off bottom
            this.y = height - (this.y - height);
            this.dy = -this.dy;
        } else if (this.y < 0) { // bounce off top
            this.y = -this.y;
            this.dy = -this.dy;
        }
        this.size -= 0.4;

    //inflate again 

    }else if (this.age > 600 & this.age <800){
        this.size += 2;
        if(this.size > width){

    // balloon pops

            rect(0,0,width,height);
        } 

    // resets 

    } else if (this.age>800) {
        this.age = 0;
        this.size = 20;
        this.x = width/2;
        this.y = height/2;
    }
    this.age ++; 
}

function balloonDraw(){
    noStroke();
    fill(255,0,0);
    circle(this.x,this.y,this.size);
}

function makeballoon(px,py,pdx,pdy){
    balloon = {x: px, y: py, dx: pdx, dy: pdy, size: 20, stepfunction: balloonStep, drawfunction: balloonDraw, age: 0}
    return balloon; 
}

function setup() {
    createCanvas(400, 400);
    useSound();
    var b = makeballoon(width/2, height/2, random(-10,10), random(-10,10));
}

function draw() {
    background(0);
    balloon.stepfunction();
    balloon.drawfunction();
    // pop! text graphic 
    if (balloon.size > width){
            push();
            textSize(150);
            textAlign(CENTER);
            fill(0);
            text('POP!',width/2,height/2+40);
            pop();
    }
    var bo = false;

    //check balloon age and toggle sound based on it's state 

    if (balloon.age >= 0 & balloon.age <= 1){
       bo = true 
       if (bo == true){
            inflate.play();
       }
    }
    if (balloon.age >= 200 & balloon.age <= 201){
       bo = true 
       if (bo == true){
            slowDeflate.play();
       }
    }
    if (balloon.age >= 400 & balloon.age <= 401){
       bo = true 
       if (bo == true){
            deflate.play();
       }
    }
    if (balloon.age >= 600 & balloon.age <= 601){
       bo = true 
       if (bo == true){
            inflate.play();
       }
    }
    if (balloon.age >= 750 & balloon.age <= 751){
       bo = true 
       if (bo == true){
            bpop.play();
       }
    }
}

Looking outwards 10 computer music

Pixelh8 is a well known musician and digital music researcher that really pioneered the digital music field early in the 2000’s developing a software calle dMusic tech for the nintendo gameboy and the Game Boy Advance as well as the Nintendo DS, which turned the gaming consoles in to real time synthesizers similar to the ones electronic musicians use now on live stages. What’s interesting about Chipwave is that it has evolved into a subgenre of electronic music with a group of passionate followers that delve deep into modding and making music out of early digital devices such as a Gameboy or NES. This type of music is characterized by their synthetic sounds we often associate with electronics. What’s important about their work is that it really gives us an opportunity to look into a piece of living computational history. A look into what it was like when computational music was just begining to become a thing.

Youtube user JustinThursday demo-ing Music Tech on the original GameBoy