sketch

//Chrisitne Seo
//mseo1@andrew.cmu.edu
//Section C
//Final Project

//items, where they are placed
var smileX = 200, smile, smileY = 0;
var clover, cloverX = 100, cloverY = 0;
var drop, dropX = 250, dropY = 0;
var cat, catX = 495, catY = 0;
var fire, fireX = 380, fireY = 0;
var flower, flowerX = 430, flowerY = 0;
var heart, heartX = 330, heartY = 0;
var mad, madX = 20, madY = 0;
var star, starX = 140, starY = 0;
var thunder, thunderX = 150, thunderY = 0;
var startY = 0;

var beat1, beat2, beat3, beat4, beat5, beat7, beat8, beat9, beatS;

//speed that the items want to go
var directionY = 1, directionX = 0, direction1Y = 0.7, direction2Y = 2,direction3Y = 2.5, direction3Y = 2.5, direction4Y = 2.1, direction5Y = 0.4, direction6Y = 0.2, direction7Y = 1.5, direction8Y = 1.2, direction9Y = 0.2;

//no repetition of sounds when touched once
var lastFrameTouch, lastFrameTouch2, lastFrameTouch3, lastFrameTouch4, lastFrameTouch5, lastFrameTouch6, lastFrameTouch7, lastFrameTouch8, lastFrameTouch9;

//sound trackers
var ctracker, mic;
var volume = 0;
var currScene = 0;

//recording
var recorder;
var soundFile;
var state = 0;

//color of eyebrows
var r = 176;
var g = 196;
var b = 222;

function preload(){ //beats that each item plays
  beat1 = loadSound("beats/1.mp3");
  beat2 = loadSound("beats/2.mp3");
  beat3 = loadSound("beats/3.mp3");
  beat4 = loadSound("beats/4.mp3");
  beat5 = loadSound("beats/5.mp3");
  beat7 = loadSound("beats/7.mp3");
  beat8 = loadSound("beats/8.mp3");
  beat9 = loadSound("beats/9.mp3");
  beatS  = loadSound("beats/swoosh.mp3");
}

function setup() {
  
  // setup camera capture
  var videoInput = createCapture(VIDEO);
  videoInput.size(550, 500);
  videoInput.position(0, 0);

  // setup canvas
  var cnv = createCanvas(550, 500);
  cnv.position(0, 0);

  // setup tracker
  ctracker = new clm.tracker();
  ctracker.init(pModel);
  ctracker.start(videoInput.elt);

  // Create an Audio input
  mic = new p5.AudioIn();
  mic.start();
  
  //recording
  recorder = new p5.SoundRecorder();
  recorder.setInput(mic);
  soundFile = new p5.SoundFile();
  
  //loading the items
  smile = loadImage("images/smile.png");
  clover = loadImage("images/clover.png");
  drop = loadImage("images/drop.png");
  cat = loadImage("images/cat.png");
  fire = loadImage("images/fire.png");
  heart = loadImage("images/heart.png");
  flower = loadImage("images/flower.png");
  mad = loadImage("images/mad.png");
  star = loadImage("images/star.png");
  
  //making sure each item is false when it didn't touch the face
  lastFrameTouch = false;
  lastFrameTouch2 = false;
  lastFrameTouch3 = false;
  lastFrameTouch4 = false;
  lastFrameTouch5 = false;
  lastFrameTouch6 = false;
  lastFrameTouch7 = false;
  lastFrameTouch8 = false;
  lastFrameTouch9 = false;
  
}

function draw() {
  
  //playing through by "scenes"
  if(currScene == 0){
  	startScene();
  } else if (currScene == 1){
    camScene();  
		}
}

function startScene(){ 
  
  //frame
  push();
  noFill();
  stroke("PaleVioletRed");
  strokeWeight(50);
  rect(0,0,width,height);
  pop();
  
  //start button
  stroke("LightSteelBlue");
  strokeWeight(5);
  fill(0);
  rect(200,365,170,100,60);
  push();
  fill("PaleVioletRed");
  strokeWeight(3);
  textSize(50);
  textStyle(BOLD);
  stroke("PapayaWhip");
  text("start",232,430);

  //intstructions
  fill(0);
  textSize(20);
  text("Catch each item",310,70);
  text("with your eyebrows",310,100);
  text("in order to make",310,130);
  text("your own soundtrack!",310,160);
  textSize(13);
  stroke("LightSteelBlue");
  text("*fyi: need to refresh if",350,190);
  text("face detection jitters",350,210);
  stroke("PaleVioletRed");
  text("*play with speakers",350,230);
  pop();
  
}

function camScene(){
  
  //face tracker codes
  clear();
 
  //getting mic
  var v = mic.getLevel();
  
  //getting volume
  volume += (v-volume)/3;

  var detectionScore = ctracker.getScore();
  	
 	if (detectionScore > 0) { 
    //location points of the faces  
  	var positions = ctracker.getCurrentPosition();
  	var leftBrowX = positions [20][0];
  	var leftBrowY = positions [20][1];  
    var rightBrowX = positions [16][0];
    var rightBrowY = positions [16][1];
    var faceLeftX = positions [1][0];
    var faceLeftY = positions [1][1];
    var faceRightX = positions [13][0];
    var faceRightY = positions [13][1];
    var noseX = positions [62][0]
    var noseY = positions [62][1];
    var eyeLeftX = positions [27][0];
    var eyeLeftY = positions [27][1];
    var eyeRightX = positions [32][0];
    var eyeRightY = positions [32][1];
    //corresponding the face feature sizes by volume
    var mouthSize = map(volume, 0,0.3, 70, 100);
    var eyeSize = map(volume,0,0.3,45,75);
    var eyeballSize = map(volume,0,0.3,40,70);
    var noseSize = map(volume,0,0.3,25,55);
    var eyebrowSize = map(volume,0,0.3,20,30);
    
    rect(5,5,230,40);
    fill(0);  
    textSize(15);  
    text('Double click to pause & record', 18, 25);
    
  //smile sounds
  if (smileX > leftBrowX - 50 &  smileX < leftBrowX + 50 && smileY > leftBrowY - 20 && smileY < leftBrowY + 20){
    directionY = 0; //stop when it touches the eyebrow until brow moves again
    r = 255; //change colors of eyebrows in relation to item
    g = 255;
    b = 0;
    if(! lastFrameTouch2){ 
      beat2.loop();  
      lastFrameTouch2 = true; //play sound once
      r = 255; //change colors of eyebrows in relation to item
      g = 255;
      b = 0;  
    } //same as about but for right brow placements
  } else if (smileX > rightBrowX - 50 &  smileX < rightBrowX + 50 && smileY > rightBrowY - 20 && smileY < rightBrowY + 20){
    	directionY = 0;  
      if(! lastFrameTouch2){ 
      	beat2.loop();  
        lastFrameTouch2 = true;
      } //if item stops touching the face, continue falling down
    } else { 
        directionY = 1.5;
      }
    
	//fire sounds
  if (fireX > leftBrowX - 50 &  fireX < leftBrowX + 50 && fireY > leftBrowY - 20 && fireY < leftBrowY + 20){
    direction4Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 255; //change colors of eyebrows in relation to item
    g = 125;
    b = 65;  
    if(! lastFrameTouch){
    	beat1.loop();  
      lastFrameTouch = true; //play sound once
    } //same as about but for right brow placements
  } else if (fireX > rightBrowX - 50 &  fireX < rightBrowX + 50 && fireY > rightBrowY - 20 && fireY < rightBrowY + 20){
    direction4Y = 0;  
    r = 255;
    g = 125;
    b = 65; 
    if(! lastFrameTouch){
    	beat1.loop();  
      lastFrameTouch = true;
    } //if item stops touching the face, continue falling down
  } else {
      direction4Y = 1.6;
    }
    
    //clover sounds
	if (cloverX > leftBrowX - 50 &  cloverX < leftBrowX + 50 && cloverY > leftBrowY - 20 && cloverY < leftBrowY + 20){
  	direction1Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 75; //change colors of eyebrows in relation to item
    g = 185;
    b = 105; 
    if(! lastFrameTouch3){
    	beat3.loop();  
      lastFrameTouch3 = true; //play sound once
    } //same as about but for right brow placements
	} else if (cloverX > rightBrowX - 50 &  cloverX < rightBrowX + 50 && cloverY > rightBrowY - 20 && cloverY < rightBrowY + 20){
    direction1Y = 0; 
    r = 75;
    g = 185;
    b = 105; 
    if(! lastFrameTouch3){
    	beat3.loop();  
      lastFrameTouch3 = true;
    } //if item stops touching the face, continue falling down
  } else {
  	direction1Y = 0.9;
    }
    
    //drop sounds
	if (dropX > leftBrowX - 50 &  dropX < leftBrowX + 50 && dropY > leftBrowY - 20 && dropY < leftBrowY + 20){
  	direction2Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 130; //change colors of eyebrows in relation to item
    g = 200;
    b = 255; 
    if(! lastFrameTouch4){
    	beat4.loop();  
      lastFrameTouch4 = true; //play sound once
    } //same as about but for right brow placements
  } else if (dropX > rightBrowX - 50 &  dropX < rightBrowX + 50 && dropY > rightBrowY - 20 && dropY < rightBrowY + 20){
    direction2Y = 0;  
    r = 130;
    g = 200;
    b = 255; 
		if(! lastFrameTouch4){
  		beat4.loop();  
      lastFrameTouch4 = true;
    } //if item stops touching the face, continue falling down
	} else {
    direction2Y = 0.73;
    }
    
   //cat sounds
	if (catX > leftBrowX - 50 &  catX < leftBrowX + 50 && catY > leftBrowY - 20 && catY < leftBrowY + 20){
		direction3Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 160; //change colors of eyebrows in relation to item
    g = 160;
    b = 160;      
    if(! lastFrameTouch5){
    	beat5.loop();  
      lastFrameTouch5 = true; //play sound once
    } //same as about but for right brow placements
	} else if (catX > rightBrowX - 50 &  catX < rightBrowX + 50 && catY > rightBrowY - 20 && catY < rightBrowY + 20){
    direction3Y = 0;  
    r = 160;
    g = 160;
    b = 160;   
		if(! lastFrameTouch5){
    	beat5.loop();  
      lastFrameTouch5 = true;
    } //if item stops touching the face, continue falling down
	} else {
    direction3Y = 0.65;
    }

//flower sounds
	if (flowerX > leftBrowX - 50 & flowerX < leftBrowX + 50 && flowerY > leftBrowY - 20 && flowerY < leftBrowY + 20){
  	direction5Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 250; //change colors of eyebrows in relation to item
    g = 250;
    b = 250;
    if(! lastFrameTouch6){
    	beat8.loop();  
      lastFrameTouch6 = true; //play sound once
    } //same as about but for right brow placements
	} else if (flowerX > rightBrowX - 50 & flowerX < rightBrowX + 50 && flowerY > rightBrowY - 20 && flowerY < rightBrowY + 20){
    direction5Y = 0;  
    r = 250;
    g = 250;
    b = 250;
		if(! lastFrameTouch6){
      beat8.loop();  
      lastFrameTouch6 = true;
		} //if item stops touching the face, continue falling down
	} else {
    direction5Y = 0.8;
    }
    
   //heart sounds
	if (heartX > leftBrowX - 50 &  heartX < leftBrowX + 50 && heartY > leftBrowY - 20 && heartY < leftBrowY + 20){
		direction6Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 200; //change colors of eyebrows in relation to item
    g = 0;
    b = 50;
    if(! lastFrameTouch7){
    	beat7.loop();  
    	lastFrameTouch7 = true; //play sound once
    } //same as about but for right brow placements
	} else if (heartX > rightBrowX - 50 & heartX < rightBrowX + 50 && heartY > rightBrowY - 20 && heartY < rightBrowY + 20){
    direction6Y = 0; 
    r = 200;
    g = 0;
    b = 50;
		if(! lastFrameTouch7){
      beat7.loop();  
      lastFrameTouch7 = true;
    } //if item stops touching the face, continue falling down
	} else {
    direction6Y = 1.65;
    }
    
    //mad sounds
	if (madX > leftBrowX - 50 & madX < leftBrowX + 50 && madY > leftBrowY - 20 && madY < leftBrowY + 20){
  	direction7Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 250; //change colors of eyebrows in relation to item
    g = 0;
    b = 0;
    if(! lastFrameTouch8){
      beat9.loop();  
      lastFrameTouch8 = true; //play sound once
    } //same as about but for right brow placements
	} else if (madX > rightBrowX - 50 & madX < rightBrowX + 50 && madY > rightBrowY - 20 && madY < rightBrowY + 20){
    direction7Y = 0;  
    r = 250;
    g = 0;
    b = 0;
		if(! lastFrameTouch8){
      beat9.loop();  
      lastFrameTouch8 = true;
    } //if item stops touching the face, continue falling down
  } else {
    direction7Y = 1.3;
    }
    
    //star sounds
	if (starX > leftBrowX - 50 & starX < leftBrowX + 50 && starY > leftBrowY - 20 && starY < leftBrowY + 20){
    direction8Y = 0; //stop when it touches the eyebrow until brow moves again
    r = 240; //change colors of eyebrows in relation to item
    g = 220;
    b = 50;
    if(! lastFrameTouch9){
      beatS.loop();  
      lastFrameTouch9 = true; //play sound once
    } //same as about but for right brow placements
	} else if (starX > rightBrowX - 50 & starX < rightBrowX + 50 && starY > rightBrowY - 20 && starY < rightBrowY + 20){
    direction8Y = 0;  
    r = 240;
    g = 220;
    b = 50;  
		if(! lastFrameTouch9){
      beatS.loop();  
      lastFrameTouch9 = true;
    } //if item stops touching the face, continue falling down
  } else {
      direction8Y = 0.45;
    }
    
  //eyebrow
	stroke(r,g,b);
  fill("PapayaWhip");
  strokeWeight(7);
  rectMode(RADIUS);
  rect(leftBrowX,leftBrowY,eyebrowSize + 20,eyebrowSize-20);
  rect(rightBrowX,rightBrowY,eyebrowSize + 20,eyebrowSize-20);
    
  //eyes
  stroke("PapayaWhip");
  strokeWeight(2);
  fill(0);
  ellipse(eyeLeftX,eyeLeftY,eyeSize,eyeSize);
  ellipse(eyeRightX,eyeRightY,eyeSize,eyeSize);
  ellipse(positions[27][0],positions[27][1],eyeballSize,eyeballSize); 
  ellipse(positions[32][0],positions[32][1],eyeballSize,eyeballSize);

  //nose
  stroke("PaleVioletRed");
  fill("LightSteelBlue");
  ellipse(positions[62][0],positions[62][1],noseSize,noseSize+20);
        	
  //mouth
  stroke("PapayaWhip");
  fill("PaleVioletRed");
  arc(positions[47][0],positions[47][1],mouthSize,mouthSize,0,PI);
  }
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(smile,smileX,smileY,50,50);
  smileX += directionX;
  smileY += directionY;
  	if (smileY > 460){
   		smileY = 0;
  	}
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(clover,cloverX,cloverY,50,50);
  cloverX += directionX;
  cloverY += direction1Y;
    if (cloverY > 460){
    cloverY = 0;
  }
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(drop,dropX,dropY,50,50);
  dropX += directionX;
  dropY += direction2Y;
    if (dropY > 460){
    dropY = 0;
  }
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(cat,catX,catY,40,40);
  catX += directionX;
  catY += direction3Y;
    if (catY > 460){
    catY = 0;
  }
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(fire,fireX,fireY,50,55);
  fireX += directionX;
  fireY += direction4Y;
    if (fireY > 460){
    fireY = 0;
  }
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(flower,flowerX,flowerY,35,35);
  flowerX += directionX;
  flowerY += direction5Y;
    if (flowerY > 460){
    flowerY = 0;
  }
  
  //placing item and moving it downwards and back up when it reaches bottom
  image(heart,heartX,heartY,40,40);
  heartX += directionX;
  heartY += direction6Y;
    if (heartY > 460){
    heartY = 0;
  }

  //placing item and moving it downwards and back up when it reaches bottom
  image(star,starX,starY,40,40);
  starX += directionX;
  starY += direction8Y;
    if (starY > 460){
    starY = 0;
  }

  //placing item and moving it downwards and back up when it reaches bottom
  image(mad,madX,madY,40,40);
  madX += directionX;
  madY += direction7Y;
    if (madY > 460){
    madY = 0;
  }
}

function mousePressed(){
  //when mouse pressed, it switches scenes 
  
  if (currScene == 0){
    if (mouseX > 100 & mouseX < 500 && mouseY > 100 && mouseY < 300);
    	currScene =1;
    
  	} else if (currScene == 1){
    if (mouseX > 0 & mouseX < width && mouseY > 0 && mouseY < height);
    	currScene = 2;
      
	} else if (currScene == 2){
    if (state === 0) {
      // Tell recorder to record to a p5.SoundFile which we will use for playback
      recorder.record(soundFile);
      
      //buttons
      fill("LightSteelBlue");    	
      rect(5,5,230,40);
      fill(0);
      textSize(15);    
      text('Recording now! Click to stop.', 18, 25);
      state++;
  } else if (state === 1) {
      recorder.stop(); // stop recorder, and send the result to soundFile
      rect(5,5,288,40);
      fill("PapayaWhip");
      noStroke();
      text('Recording stopped. Click to play & save', 18, 25);
      state++;
  } else if (state === 2) {
      soundFile.play(); // play the result!
      saveSound(soundFile, 'mySound.wav'); // save file
      state++;
    }
	}
}

Caption: Video documentation of the final project

I realized that the WordPress does not run my project, so I provided a live online link to run my project: https://editor.p5js.org/mseo1/full/rkD_gLl0Q

For my final project, I was successfully able to perform what I wanted to display by adding audio (beats) and creating an instrument. This project is a fun game like instrument that lets you play beats (which I made my own beats using Garageband) with the items that are falling down. The beats are played when the items are touched with your eyebrows, which change colors corresponding with the color of the items. Additionally, the face detector adds an interesting visual addition to the project. The elements on the face (eyes, brows, nose, and mouth) increase/decrease in correlation to the sound of the audio, so you must run it with speakers, not headphones. The face recognition element was found on GitHub’s Javascript Library.  Finally, you can record the audio by clicking the button on the top of the screen, and download the file. Overall, this was a fun project to perform, as well as an interesting element to my portfolio.

Zip File: Seo Final

Initially, I wanted to make a visual representation of sound and music because I personally love to listen to music but there is no way for deaf people to listen to this and have this experience. I wanted to program something to share my emotions and experiences when I listen to certain music to these individuals in some way. Throughout the course, my favorite parts were when we had to incorporate the camera and when we had to allow music in our assignments. So for my Looking Outwards 12, I looked for inspirations that interacted with these two topics; this inspired me to come up with my ideas for my final project which incorporates the two ideas in one. Thus, in my project, I want to have options to listen to songs that act to different emotions. These emotions would be visually portrayed through a face tracker in each that has elements that would also react to the music, volume and sounds (multiple tracks). I found out that I can use JavaScript libraries for face tracking called ClmTrackr and p5.js for creating sound visualization. Through this project, I want to make something visually interesting but also wanted to involve a topic that I care about. I believe that this project can help me achieve my aesthetic ideas, show what I’ve learned through this class, and create something meaningful.

I was very inspired by the ideas of Real Slow, a project that visualizes music, as well as AV Clash, a project that involves audiovisual compositions through audio and sound effects. Throughout the course, my favorite parts were when we had to incorporate the camera and when we had to allow music in our assignments. Thus, I decided to look for inspirations that interacts with these two topics. First, these both have very interesting visuals that react to sounds and music. For Real Slow, there is face detection that allows the components of the face to react to the music and volume, which I found was very fascinating. This interactive project was originally inspired by the music experience for an Australian indie-electronic band, “Miami Horror”. The artist wanted to create a program to fit the mood & tone of their electro music “Real Slow”. As I researched, I found out that the first prototype was developed on OpenFrameworks and then implemented the idea on the web using JavaScript libraries for face tracking called ClmTrackr and p5.js for creating sound visualization. For AV Clash, I though that it was interesting how there is interaction between the objects that responded to the sounds. The project allows the creation of audiovisual compositions, consisting of combinations of sound and audio-reactive animation loops. Objects can be dragged and thrown, creating interactions (clashes) between them. Both of these projects not only have some sort of interaction with music and the program, but also an interaction with the audience as well, whether it is through face detection, or mouse detection.

Caption: Video documentation of Real Slow (2015), a Face Sound Visualization with music by Nithi Prasanpanich

http://prasanpanich.com/2016/01/01/real-slow/

Caption: Video representation of AV Clash (2010), a project by Video Jack, that creates audiovisual compositions, consisting of combinations of sound and audio-reactive animation loops

https://www.creativeapplications.net/flash/av-clash-flash-webapp-sound/

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-11

var turtle1;
var turtle2;
var turtle3;
var turtle4;
var turtle5;
var turtle6;

function setup() {
  createCanvas(480, 460);
  background(0);
  turtle1 = makeTurtle(160, 200);
  turtle2 = makeTurtle(210, 100);
  turtle3 = makeTurtle(370, 210);
  turtle4 = makeTurtle(480, 20);
  turtle5 = makeTurtle(150, 470);
  turtle6 = makeTurtle(8, -15);
  frameRate(10); //gradually draw
}


function draw() {
  // Draw turtle 1
  turtle1.penDown();
  turtle1.setWeight(0.25);
  turtle1.setColor("Khaki"); 
  for (var i = 0; i < 10; i++) {
    turtle1.forward(1); //go straight
    turtle1.right(55); //go right 
    turtle1.forward(38);
    turtle1.left(15); //go left 
    if (i % 9 === 0) { //angles
      turtle1.forward(13);
    }
  }

  // Draw turtle 2
  turtle2.penDown();
  turtle2.setWeight(0.25);
  turtle2.setColor("LightPink");
  for (var i = 0; i < 10; i++) {
    turtle2.forward(15);
    turtle2.left(70);
    turtle2.forward(38);
    if (i % 9 === 0) {
      turtle2.forward(13);
    }
  }

  // Draw turtle 3
  turtle3.penDown();
  turtle3.setWeight(0.25);
  turtle3.setColor("DarkSeaGreen");
  for (var i = 0; i < 10; i++) {
    turtle3.forward(15);
    turtle3.right(40);
    turtle3.forward(120);
    turtle3.right(70);
    if (i % 9 === 0) {
      turtle3.forward(13);
    }
  }

  // Draw turtle 4
  turtle4.penDown();
  turtle4.setWeight(0.25);
  turtle4.setColor("Khaki"); 
  for (var i = 0; i < 10; i++) {
    turtle4.forward(1);
    turtle4.right(55);
    turtle4.forward(38);
    turtle4.left(15);
    if (i % 9 === 0) {
      turtle4.forward(13);
    }
  }

  // Draw turtle 5
  turtle5.penDown();
  turtle5.setWeight(0.25);
  turtle5.setColor("LightPink");
  for (var i = 0; i < 10; i++) {
    turtle5.forward(15);
    turtle5.left(70);
    turtle5.forward(38);
    if (i % 9 === 0) {
      turtle5.forward(13);
    }
  }



  // Draw turtle 6
  turtle6.penDown();
  turtle6.setWeight(0.25);
  turtle6.setColor("DarkSeaGreen");
  for (var i = 0; i < 10; i++) {
    turtle6.forward(15);
    turtle6.right(40);
    turtle6.forward(120);
    turtle6.right(70);
    if (i % 9 === 0) {
      turtle6.forward(13);
    }
  }
}


function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
function turtleForward(p){var rad=radians(this.angle);var newx=this.x+cos(rad)*p;
var newy=this.y+sin(rad)*p;this.goto(newx,newy);}function turtleBack(p){
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}

I really liked how in this weeks project, it was more open ended. I was able to research and find interesting visual forms that the turtles can make. Some of the designs reminded me of flowers in some way and I wanted to portray that through my composition as well as implement the slow crawling turtles to make the designs more opaque.

Caption: A video documentation, filmed in Montreal, Québec, of Mesa Musical Shadows (2016), an interactive musical pavement.

Mesa Musical Shadows is an interactive art related to computational music by Daily Tous Les Jours studio, an interaction design studio with a focus on work in public spaces. This project was inspired by a mix of performance, musical instruments, and digital arts, using contemporary tools such as sensors and real-time data. The artists wanted passing crowds to be invited to play a critical role in the transformation of their environment and their relationships. The creator’s artistic sensibilities manifest in the final form by using bright geometrically tiled surfaces that make the piece more inviting for the audience. The piece allows shadows to cast with the sensor, where sounds and melodies are projected by speakers. The sensors are controlled by a MaxMSP patch linking Arduino Mega boards via OSC and are constantly recalibrate themselves in order to define new threshold values to determine what is a shadow and what is not.

The shadows cast on different tiles, which trigger different voices, all singing in harmony. Additionally, the music dependent on the weather and the time of the day (due to variations of the lengths of the shadows). I thought that this project was very intriguing because the artists let the audience compose the music and are welcomed by a moment of surprise and an invitation to engage with the piece, as well as interact with other visitors and passersby. I believe that music is a language that is universal, and it is really exciting to see art and music collaborate in order for the community to come together as well.

https://www.creativeapplications.net/maxmsp/playin-the-pavement-daily-tous-les-jours-mesa-musical-shadows/

sketch

// Christine Seo
// Section C
// mseo1@andrew.cmu.edu
// Project-10

var clouds = [];
var terrainSpeed = 0.001;
var terrainDetail = 0.01;

function setup() {
    createCanvas(300,400); 
    for (var i = 0; i < 8; i++){ //clouds forloop for array
        var rx = random(width);
        clouds[i] = drawCloud(rx);

    }
    frameRate(50);
}

function draw() {

    sky(0, 0, width, height);
    updateAndDisplayClouds();
    removeCloudsThatHaveSlippedOutOfView();
    addNewCloudsWithSomeRandomProbability();
    planeWindow();
}

function sky(x, y, w, h) { //drawing sky
    var colorDark;
    var colorLight;    
    
    colorDark = color(13, 91, 245);
    colorLight = color(194, 225, 255);
    for (var i = y; i <= y + h; i++) {
        var inter = map(i, y, y + h, 0, 1.5);
        var c = lerpColor(colorDark, colorLight, inter);
        stroke(c);
        line(x, i, x + w, i);
    
    }

    beginShape(); //drawing mountains
    noFill(); 
    stroke(56, 89, 9);
    strokeWeight(100);
    for (var x = 0; x < width; x++) {
        var t = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t), 0,1, 150, 250);
        vertex(x, y + 200); 
    }
    endShape();


  }

  this.display = function() {
    strokeWeight(this.border);
    stroke(255);
    fill(255);
    ellipse(this.x, this.y,  this.di,  this.di);

  }

function planeWindow(){


	beginShape(); //outter black frame
	stroke(0);
	strokeWeight(70);
	noFill();
	rect(0,-10,310,420,100);
	endShape();

	beginShape(); // wings top triangle
	noStroke();
	fill(90);
	triangle(120,220,120,180,140,230);
	endShape();

	beginShape(); // wings bottom
	noStroke();
	fill(20);
	triangle(140,250,220,231,250,260);
	triangle(180,280,260,251,250,280);
	endShape();

	beginShape(); // wings
	noStroke();
	fill(50);
	triangle(300,240,120,220,280,300);
	endShape();

    beginShape(); //window shield 
    stroke(120);
    strokeWeight(14);
    noFill();
    rect(20,20,width - 40,height - 40,100);
    endShape();

    beginShape();
    stroke(0);
    strokeWeight(7);
    noFill();
    rect(29,24,width - 59,height - 50,100);
    endShape();
 
    beginShape();
    stroke(240);
    strokeWeight(5);
    noFill();
    rect(13,9,width - 25,height - 20,120);
    endShape();
}

function updateAndDisplayClouds(){
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].display();
    }
}


function removeCloudsThatHaveSlippedOutOfView(){
    
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep; // keeping the clouds 
}


function addNewCloudsWithSomeRandomProbability() {
    
    var newBuildingLikelihood = 0.01; 
    if (random(0,0.5) < newBuildingLikelihood) {
        clouds.push(drawCloud(width));
    }
}



function cloudMove() {
    this.x += this.speed;
}
    


function cloudDisplay() {
    var floorHeight = 20;
    var cloudHeight = this.nFloors * floorHeight; 
    
    fill(255,100); 
    noStroke(); 
    push();
    translate(this.x, height - 35);
    ellipse(95, -cloudHeight, this.breadth, cloudHeight / 2);
    pop();

    push();
    fill(255,70)
    translate(this.x, height - 55);
    ellipse(95, - cloudHeight -200, this.breadth, cloudHeight);
    pop();
}


function drawCloud(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: random(90, height),
                speed: -random(1,2.5),
                nFloors: round(random(4,9)),
                move: cloudMove,
                display: cloudDisplay}
    return bldg;
}

I wanted to portray a scene inside of an airplane because when I think of looking at a moving landscape, it is usually in a car or a plane. I randomized the clouds and their sizes as well. I wanted to add some sort of ground to make it not look like I’m too high up in the air to add more dynamic elements (I am also scared of heights). I think it was kind of hard to understand the concept of making the landscape “generative,” in the beginning. But, I was able to understand it after looking through the notes again. The foreground is clear due to the frame of the airplane and there are additional elements to visual display that background and the mid-ground.  I also tried to make a color scheme and I am quite pleased with the overall product!

Caroline Sinders is a machine learning designer, user researcher, artist, and digital anthropologist who produced the project, Feminist Data Set. She has been focusing on the intersections of natural language processing, artificial intelligence, abuse, and online harassment. She currently works at BuzzFeed/Eyebeam Open Labs and lives in Brooklyn, NY. She was born in New Orleans and has a masters from NYU’s Interactive Telecommunications Program focusing on HCI, storytelling, and social media theory. Feminist Data Set is a project that started in October 2017 which calls to action to collect feminist data.  This data set compiles art works, essays, interviews, and books that are from, about or explore feminism and a feminist perspective. The series explores how data and interfaces can be agents of change within machine learning systems that are utilized by the public and private sectors of our daily lives.

Sinders was heavily influenced by the idea to remove bias within machine learning, which has to be manifested into a learning experience to teach or sway the algorithms. She also aims to initiate a standard for equity and equality, by centering collaboration in the creation of this data set. I thought that this project was very intriguing because she is a female artist that focuses on feminism. A lot of people are very hesitant to approach this topic, but I appreciate her effort to conceptually organize her thoughts into a data set and use it through design and machine learning. This concept and idea is very unique and different from all of the other ideas I’ve approached in looking outwards research, so it was great to find something that I strongly resonate with outside of visual forms of art!

sketch

//Christine Seo
//Section C
//mseo1@andrew.cmu.edu
//Project 9

var sisterImg;

function preload() {
	//loading the picture
    sisterImg = loadImage("Sister.png");
}

function setup() {
	//set up canvas
    createCanvas(480, 480);
    background(0);
    sisterImg.loadPixels();
    //load 200 times in a minute
    frameRate(200);
}

function draw() {
    var px = random(width);
    var py = random(height);
    var cx = constrain(floor(px), 0, width-1); //constraining the placement of pixels
    var cy = constrain(floor(py), 0, height-1);
    var colorAtLocationXY = sisterImg.get(cx, cy);

    //draw traingles
    noStroke();
    fill(colorAtLocationXY);
		triangle(px-random(20), py-random(20), px-random(20), py-random(20), px+random(20), py+random(20));

}

I created an abstract portrait of my sister holding flowers.  I wanted to use randomly sized triangles to represent the pixels. I was quite happy with the result as it made the portrait quite abstract but you could still tell what the picture is to a certain degree.

This installation was by Janie Cardiff, which displayed forty separately recorded voices are played back through forty speakers strategically placed throughout the space. It was exhibited in a lot of different locations and was recorded by the congregational choir of the Gothic Salisbury Cathedral. This project was mentioned by Joanne Lee, in her Looking Outwards 04; she is in my Section C recitation. She pointed out that “There is something unique about the way all of the voices travel to the audience and mesh together to hit you at once, and that can only be experienced live. This installation seems to emulate that experience despite using speakers by giving each voice a different speaker channel.” I agree with what she said because the installation has 40 speakers playing a track in the recording, where each singer has their own individual mic attached to them.

Additionally, I am very intrigued by the experience the audience can interconnect with the installation. I think it is interesting to be able to place yourself into this installation. The interaction that happens where you, as the audience, can control (by where you are standing in the room) is a different level of technology and experience that people can have with sound. I actually was able to experience this installation myself at the Nelson Atkins Museum of Art, so I know how intricate each voice and connectivity is.

Caption: experiential video representation of The Forty Part Motet at The Art Gallery of Ontario

https://www.cardiffmiller.com/artworks/inst/motet.html

Caption: Artist talk on Instint from Eyeo Festival

Kate Hollenbach is an artist, programmer, and educator from Los Angeles, California. She develops and examines interactive systems and new technologies relating body, gesture, and physical space. She designs and builds interactive experiences for collaborative spaces and acts as the Director of Design & Computation at Oblong Industries. Kate has a MFA from UCLA and a Bachelor of Science from MIT, as she studied Design Media Arts and Computer Science and Engineering.

In this project, Instint, she designed a platform that lives in the real environment around us and displays people’s interaction with each other and the space. The installation uses interfaces animate to illustrate activity, connection through spacial and gestural interactions in the product to build a software that makes interactions in a higher scale. She is able to effectively describe her work by communicating to the audience her intentions and going step by step to explain the process.She also shows various perspectives of the work, where the functions are revealed as she goes through the talk. Most importantly, she is very engaged in her work, which can be shown in her speech. I can learn from this that being engaged and having passion for what I make can make a difference to the audience when it comes to presenting works of my own.

I thought that this project was very interesting how she was able to create something that can relate to the nature around us. I think it is fascinating to see something that is a digital media, to come out of the screen and actually communicate in the world around humans. At first, it reminded me of having different monitor screens on the computer and being able to drag windows into different screens. However, this project is something that speaks more than having connected screens interact. It makes the digital world seem more accessible in our time and space.

http://www.katehollenbach.com/

https://vimeo.com/channels/instint2014