Category: SectionC

LO – 4

With my short-lived experience in physical computing taking an intro Arduino class last semester, I was drawn to the appearance of Ototo by Yuri Suzuki. It resembles a chip but claims to be a musical invention kit. Reading into it, Ototo does exactly as it promises. It allows the user to interact tactically with the product to experiment with possible sounds, manipulate add-ons that increase the range of sounds that can be made, and wire the product to everyday items (i.e. water, a piece of cake, a spoon) so that the musical performance experience expands to include any object you desire.

What I love about the Ototo is the accessibility of the product by the communicative means of sounds and its relationship with touch. From a young age, we are introduced to toys with buttons assigned to certain sound effects. I think this project builds on that simple concept but elevates it to something even more interesting by allowing the user to transform their own personal items into musical instruments. I’m unsure of how the machine detects changes in the connected objects (conductivity?), but I do know that a lot of thought was put into writing code that assigns sounds to different ports on the device that is further changed based on the additional input information from the connected objects. I think Suzuki’s artistry comes into this project in the consideration of human emotion and how we respond to interactivity and sound. His sound projects are highly engaging and portray sound as a viable and fun aspect of art and design.

Any object the Ototo is connected to becomes a musical instrument.

Project 4 – String Art

I began this project by playing around with loops to experiment with different forms. However, I later realized the loops could be used to create interesting environments with “perspective lines.” I decided to run with this and create an empty room with a door at the end. The color changing with the position of the mouse give a sense of dimension and personalization.

string art et
function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {
    spacing = 20;
    red = mouseX;
    blue = mouseY;
   
    for (var a = 0; a <= 600; a += spacing) {
        // sloped plane
        stroke(255);
        strokeWeight(0.5);
        line(0, a, a, 200);

        // vertical grid
        stroke(red, 0, 200);
        line(a, mouseX, a, a);
    }
    for (var a = width/3; a <= width; a += spacing/2) {
        //bg diagonals
      stroke(red, 255, blue);
      line(a, 0, 2*a, 200);
      line(2*a, 200, a, 200); //2 sets of lines converge at horizon
    }
  //door
  stroke(red, 255, blue);
  strokeWeight(1);
  fill(0);
  rect(width/2, height-200, 50, 100);
    //doorknob
    circle(width/2+40, height-150, 5);
}

Project-04-String-Art

deer
//Jiaqi Wang SectionC
var numLines=90;
//ears variables
var dxEL1;
var dxEL2;
var dxER1;
var dxER2;
var dyEL1;
var dyEL2;
var dyER1;
var dyER2;
//face variables
var dxFL1;
var dxFL2;
var dxFM1;
var dxFM2;
var dxFR1;
var dxFR2;
var dxFM2_2;
var dyFL1;
var dyFL2;
var dyFM1;
var dyFM2;
var dyFR1;
var dyFR2;
var dyFM2_2;
//nose
var dxN1;
var dxN2;
var dyN1;
var dyN2;
//body
var dxBL1;
var dxBL2;
var dxBR1;
var dxBR2;
var dyBL1;
var dyBL2;
var dyBR1;
var dyBR2;
var dxBR2_2;
var dyBR2_2;


function setup() {

    createCanvas(300, 400);
    background(255);
    strokeWeight(0.2);
    stroke(188,88,36);
    //left ear top
    line(30,20,115,140);
    //left ear bottom
    line(50,115,150,120);
    dxEL1=(50-30)/numLines;
    dyEL1=(115-20)/numLines;
    dxEL2=(150-115)/numLines;
    dyEL2=(120-140)/numLines;

    //right ear top
    line(265,20,185,140);
    //right ear bottom
    line(250,115,150,120);
    dxER1=(250-265)/numLines;
    dyER1=(115-20)/numLines;
    dxER2=(185-150)/numLines;
    dyER2=(140-120)/numLines;

    //face left
    line(115,140,140,205);
    //face middle
    line(150,120,150,205);
    
    dxFL1=(150-115)/numLines;
    dyFL1=(120-140)/numLines;
    dxFM2=(150-140)/numLines;
    dyFM2=(205-205)/numLines;
    //face right
    line(185,140,160,205);
    dxFR1=(150-185)/numLines;
    dyFR1=(120-140)/numLines;
    dxFM2_2=(150-160)/numLines;
    dyFM2_2=(205-205)/numLines;

    //nose 1
    line(135,215,160,235);
    //nouse 2
    line(165,215,145,235);
    dxN1=(165-135)/numLines;
    dyN1=(0)/numLines;
    dxN2=(145-160)/numLines;
    dyN2=(0)/numLines;

    //body left
    line(110,185,70,235);
    line(155,255,155,385);
    dxBL1=(155-110)/numLines;
    dyBL1=(250-180)/numLines;
    dxBL2=(155-70)/numLines;
    dyBL2=(380-235)/numLines;

    //body right
    line(200,185,240,235);
    line(155,255,155,385);
    dxBR1=(155-200)/numLines;
    dyBR1=(250-180)/numLines;
    dxBR2_2=(155-240)/numLines;
    dyBR2_2=(380-235)/numLines;


}

function draw() {

//left ear
	var xEL1=30;
    var yEL1=20;
    var xEL2=115;
    var yEL2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xEL1,yEL1,xEL2,yEL2);
		xEL1+=dxEL1;
		yEL1+=dyEL1;
		xEL2+=dxEL2;
		yEL2+=dyEL2;
//print(xEL1,yEL1,xEL2,yEL2);
	}
 //right ear   
    var xER1=265;
    var yER1=20;
    var xER2=185;
    var yER2=140;
	for(var i=0;i<=numLines;i+=1){
		line(xER1,yER1,xER2,yER2);
		xER1+=dxER1;
		yER1+=dyER1;
		xER2-=dxER2;
		yER2-=dyER2;
		print(xER1,yER1,xER2,yER2);
		print(i.toString());
		print(numLines.toString());


    }
//face left
	var xFL1=115;
    var yFL1=140;
    var xFM2=140;
    var yFM2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFL1,yFL1,xFM2,yFM2);
		xFL1+=dxFL1;
		yFL1+=dyFL1;
		xFM2+=dxFM2;
		yFM2+=dyFM2;

	}
	//face right
    var xFR1=185;
    var yFR1=140;
    var xFM2_2=160;
    var yFM2_2=205;
	for(var i=0;i<=numLines;i+=1){
		line(xFR1,yFR1,xFM2_2,yFM2_2);
		xFR1+=dxFR1;
		yFR1+=dyFR1;
		xFM2_2+=dxFM2_2;
		yFM2_2+=dyFM2_2;

    }

    //nose
    var xN1=135;
    var yN1=215;
    var xN2=160;
    var yN2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xN1,yN1,xN2,yN2);
		xN1+=dxN1;
		yN1+=dyN1;
		xN2+=dxN2;
		yN2+=dyN2;

    }
translate(0,5);
    //body left
    var xBL1=110;
    var yBL1=180;
    var xBL2=70;
    var yBL2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBL1,yBL1,xBL2,yBL2);
		xBL1+=dxBL1;
		yBL1+=dyBL1;
		xBL2+=dxBL2;
		yBL2+=dyBL2;

	}

    //body right
    var xBR1=200;
    var yBR1=180;
    var xBR2_2=240;
    var yBR2_2=235;
	for(var i=0;i<=numLines;i+=1){
		line(xBR1,yBR1,xBR2_2,yBR2_2);
		xBR1+=dxBR1;
		yBR1+=dyBR1;
		xBR2_2+=dxBR2_2;
		yBR2_2+=dyBR2_2;

	}

noLoop()
}

Below is the initial sketch I made in illustrator.

LookingOutwards-04

BIY.HEAR is a numerological processing project that acts like a prophet or a fortune teller. It interprets what the person said and calculates a destiny and a lucky number for this person. I admire how the creator enriches the meaning of technology and computation, which used to be purely pragmatic and mechanical. BIY.HEAR gives the user the illusion that it has some mysterious connection with supernatural power, which is a power conventionally unique to psychics.

BIY.HEAR was trained on Indian numerology and Astrology. The microphone on the board takes in words from a conversation and match the words with its symbolic meaning based on traditional Indian knowledge systems.

The visual design of the chip addresses the culture from which the calculation is based on. The creator made an interesting choice to preserve the general form of a normal chip instead of using a form of a human figure. This design choice renders the user to reflect on what is the difference between humans and machines and the level of sophistication that computational artifacts can reach.

PROJECT 04- STRING ART

JUNE STRING ART
//junelee
//section c
//15-104
//junelee@andrew.cmu.edu

var incx1;
var incy1;
var incx2;
var incy2;
var linebw;
var offsetx;
var offsety;

function setup() {
    createCanvas(300,400);
    background(0);
}

function draw() {


//WHITE
//first- lines from 0,0
	// line(0,0,300,150);
	// line(75,0,300,300);

	strokeWeight(0.5);
	stroke(255);
	//increments for line
	linebw=30;

	incx1=(75-0)/linebw;
	incy1=0;
	incx2=0;
	incy2=(300-150)/linebw;

	//bound for starting line (box)
	var x1=0;
	var x2=300;
	var y1=0;
	var y2=150;

	//lines bw
	for (var n=0; n<=linebw; n+=1) {
		line(x1,y1,x2,y2);
		x1+=incx1;
		y1+=incy1;
		x2+=incx2;
		y2+=incy2;

	}
	noLoop();

//second- circles
	noFill();
	strokeWeight(0.7);
	stroke(255);
	//points
	var x1=125;
	var y1=200;
	linebw=30;

	//circle draw
	for (var diam=3; diam<=200; diam*=1.07) {
		circle(x1,y1,diam);
	}
	noLoop();

//third- background
	// line(100,400,300,150);
	// line(55,500,75,0);

	strokeWeight(0.5);
	stroke(255);

	//increments for line
	linebw=20;

	incx1=(300-75)/linebw;
	incy1=(150-0)/linebw;
	incx2=(100-55)/linebw;
	incy2=0;

	//bound for starting line (box)
	var x1=75
	var x2=55;
	var y1=-170;
	var y2=500;

	//lines bw
	for (var n=0; n<=linebw; n+=1) {
		line(x1,y1,x2,y2);
		x1+=incx1;
		y1+=incy1;
		x2+=incx2;
		y2+=incy2;
	}
	noLoop();


//BLUE
	translate(14,0)
		strokeWeight(0.5);
		stroke(0,0,255);
		//increments for line
		linebw=30;

		incx1=(75-0)/linebw;
		incy1=0;
		incx2=0;
		incy2=(300-150)/linebw;

		//bound for starting line (box)
		var x1=0;
		var x2=300;
		var y1=0;
		var y2=150;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;

		}
		noLoop();

	//second- circles
		noFill();
		strokeWeight(0.7);
		stroke(0,0,255);
		//points
		var x1=125;
		var y1=200;
		linebw=30;

		//circle draw
		for (var diam=3; diam<=200; diam*=1.07) {
			circle(x1,y1,diam);
		}
		noLoop();

	//third- background
		// line(100,400,300,150);
		// line(55,500,75,0);

		strokeWeight(0.5);
		stroke(0,0,255);

		//increments for line
		linebw=20;

		incx1=(300-75)/linebw;
		incy1=(150-0)/linebw;
		incx2=(100-55)/linebw;
		incy2=0;

		//bound for starting line (box)
		var x1=75
		var x2=55;
		var y1=-170;
		var y2=500;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;
		}
		noLoop();



//RED
	translate(20,0)
		strokeWeight(0.5);
		stroke(255,0,0);
		//increments for line
		linebw=30;

		incx1=(75-0)/linebw;
		incy1=0;
		incx2=0;
		incy2=(300-150)/linebw;

		//bound for starting line (box)
		var x1=0;
		var x2=300;
		var y1=0;
		var y2=150;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;

		}
		noLoop();

	//second- circles
		noFill();
		strokeWeight(0.7);
		stroke(255,0,0);
		//points
		var x1=125;
		var y1=200;
		linebw=30;

		//circle draw
		for (var diam=3; diam<=200; diam*=1.07) {
			circle(x1,y1,diam);
		}
		noLoop();

	//third- background
		// line(100,400,300,150);
		// line(55,500,75,0);

		strokeWeight(0.5);
		stroke(255,0,0);

		//increments for line
		linebw=20;

		incx1=(300-75)/linebw;
		incy1=(150-0)/linebw;
		incx2=(100-55)/linebw;
		incy2=0;

		//bound for starting line (box)
		var x1=75
		var x2=55;
		var y1=-170;
		var y2=500;

		//lines bw
		for (var n=0; n<=linebw; n+=1) {
			line(x1,y1,x2,y2);
			x1+=incx1;
			y1+=incy1;
			x2+=incx2;
			y2+=incy2;
		}
		noLoop();

}

I chose to portray string art that interacts with each other and creates new shapes through intersections. I chose the colors for a “trippy” color palette.

LO-04 GENERATIVE MUSIC

Music in today’s environment can be digitally manipulated to create certain sounds. Computational systems and digital generation of music has allowed sound to transform into anything the artist intends for it to be and can create new ways of human expression. An artist I admire in this field of music is Billie Eilish and Finneas. These artists are able to interact and communicate with other artists who may be able to mix or distort sounds according to notes.
In Bad Guy by Billie and Finneas O’Connell, the mix session contains 68 tracks, 49 of which are audio tracks. The mix template and stems are loaded into Pro Tools where the mix is produced. The remaining tracks are drums, percussion, bass, and synth tracks. The aux tracks in the background are also run For the vocals in the song, they are grouped together and are then put through Waves PuigChild 670 plug-in which compresses all vocals. The vocals are smoothed out and are dynamicized and then put through another plug-in called Waves De-Esser to add more variety and color to the track. Through these digital means of transforming sound data to a certain style, Billie and Finneas are able to provide new ways of human expression and are testing limits of what music is and can be.

Billie & Finneas O’Connell

FINNEAS Explains How He Builds Songs For Billie Eilish | Critical Breakthroughs
Pitchfork
https://www.youtube.com/watch?v=FsSkRjgjFvU&t=290s

Billie Eilish and Finneas Break Down Her Hit Song ‘Bad Guy’
Rolling Stone
https://www.youtube.com/watch?v=kpx2-EMfdbg

Project-04-String Art

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

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

    // x1, x2, endx1, endx2
    line(50, 50, 150, 300);
  
    // y1, y2, endy1, endy2
    line(300, 300, 350, 100);
  
    //endx1 - x1/numlines
    dx1 = (150-50)/numLines;
  
    //endx2 - x2/numlines
    dy1 = (300-50)/numLines;
  
    //endy1 - y1/numlines
    dx2 = (350-300)/numLines;
  
    //endy2 - y2/numlines
    dy2 = (100-300)/numLines;
    
}

function draw() {
    background(255, mouseX, mouseY);
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //noLoop();
  
  stroke(255,0,0);
  var x11 = 50;
    var y11 = 50;
    var x22 = 300;
    var y22 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    //noLoop();
  
  stroke(0,255,0);
    var x113 = 50;
    var y113 = 50;
    var x223 = 300;
    var y223 = 300;
    for (var i = 0; i <= 50; i += 1) {
        line(x223, y223, x113, y11);
        x113 += dx1;
        y113 += dy1;
        x223 += dx2;
        y223 += dy2;
    }
    //noLoop();

    for(var y = 0; y<=300; y+=15){
    	stroke(mouseX, mouseY,40);
    	line(y,0,400,y);
    	stroke(mouseY,mouseX,200);
    	line(0,y,y-5,300);

    }
  

}

LO: Algorithmic Music Video

For this weeks LO, I looked into how computational softwares + algorithms could be incorporated into art that combines both visual and sonic elements.

I came across the music video for Howler Monkey by German duo Meier and Erdmann. The video itself was created by Victor Doval, a visual artist, that developed an algorithm that tracks the frequencies in the song to generate an ever-changing landscape.

Image from Victor Doval’s website visualizing his working process for the video.

I felt that this work was especially intriguing because it comments on the human perception of music. Although music and sound can have lasting effects and influences on our lives, the experience of listening is inherently an extremely temporal process.

Doval’s visual interpretation of how we are forever impacted by any sound/song we encounter and engage with while each passing second is temporary through a generative landscape begins to question the purpose of art in our lives. By using algorithm and software to help situate the listener in a virtual (and visual) space, Doval allows us to question why we seek art (in all forms and mediums) when inherently, each fleeting moment with the pieces are so temporal; do we seek immediate pleasure, or hope to grow with each time?

Project-04- String Art

sketchDownload

//Project 4 - String Art Mail Envelope Drawing
//sp17
//Section C

var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

var dx3;
var dy3;
var dx4;
var dy4;

var dx5;
var dy5;
var dx6;
var dy6;


function setup() {
    createCanvas(400, 300);
    background(200);

//envelope flap
    line(40, 40, 150, 200);
    line(360, 40, 250, 200);
    dx1 = (150-40)/numLines;
    dy1 = (200-40)/numLines;
    dx2 = (250-360)/numLines;
    dy2 = (200-40)/numLines;

//horizontal body
    fill(255,0,0);
    line(40,40,40,250);
    line(360,40, 360,250);
    dx3 = (40-40)/numLines;
    dy3 = (250-40)/numLines;
    dx4 = (360-360)/numLines;
    dy4 = (250-40)/numLines;


//black bottom triangle set
    line(40,250, 200, 200);
    line(360,250, 200, 200);
    dx5 = (200-40)/numLines;
    dy5 = (200-250)/numLines;
    dx6 = (200-360)/numLines;
    dy6 = (200-250)/numLines;


}

function draw() {

//flap
    var x1 = 40;
    var y1 = 40;
    var x2 = 360;
    var y2 = 40;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    noLoop();


//body
    var x3 = 40;
    var y3 = 40;
    var x4 = 360;
    var y4 = 40;
    for (var i = 0; i<= numLines; i+= 1) {
        line(x3,y3, x4,y4);
        x3 += dx3;
        y3 += dy3;
        x4 += dy4;
        y4 += dy4;
    }
    noLoop();


//black bottom triangle set
    var x5 = 40;
    var y5 = 250;
    var x6 = 360;
    var y6 = 250;
    for (var i = 0; i <= numLines; i += 1) {
        line(x5, y5, x6, y6);
        x5 += dx5;
        y5 += dy5;
        x6 += dx6;
        y6 += dy6;
    }
    noLoop();


}

LookingOutwards- 04

Shore Scene Soundtrack by Cevdet Erek

One work of computational sound art that I found interesting while researching was the Shore Scene Soundtrack, (https://www.artsy.net/artwork/cevdet-erek-sss-shore-scene-soundtrack), by artist Cevdet Erek. It is an interactive project that simulates the sounds and waves of the ocean when hands move across a carpeted material. I found this work of art inspiring because it taps into people’s memories and brings back their experiences of hearing the sea, while directly interacting with a physical material. In terms of the algorithms that generated the work, I think that the artist would have used loops and repetitions to simulate the ripples of the sounds of the sea. A cascading effect also would have been created through the use of gradual or incremental decreasing and increasing the aspect of the volume variable. The way that the artist envisioned the ocean and was inspired from it reflects in the final work because of the realness of the feeling of the sound, which to many people is nostalgic. This work was installed in Sydney Biennal, and also won the Nam June Paik award in 2012.