SectionB – Page 21 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 04-String Art

I was inspired by Chiharu Shiota’s art installation called In Silence. I played around with having the lines in front or behind the piano and chair as the installation is 3D.

graanak-04

//Graana Khan 
// Section B

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

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

function draw() {
	background(209, 209, 209);

	//background floor 
	noStroke();
	fill(49, 49, 49);
	beginShape();
	vertex(0, 152);
	vertex(370, 136);
	vertex(400, 150);
	vertex(400, 300);
	vertex(0, 300);
	endShape();

	//string art
	dx1 = (0)/numLines;
	dy1 = (150)/numLines;
	dx2 = (400)/numLines;
	dy2 = (0)/numLines;

	var x1 = 0;
	var x2 = 400;
	var y1 = 0;
	var y2 = 400;
	

	for (var i = 0; i <= numLines; i += 1){
		stroke(0);
		strokeWeight(0.25);
		line(x1, y1, x2, y2);
		line(x1, y1+100, x2-50, y2-200);
		line(x1, y1, x2-200, y2-300);


		x1 += dx1;
		x2 += dx2;
		y1 += dy1;
		y2 += dy2;
	}

	for(var i = 0; i <= numLines; i +=1){
		strokeWeight(0.25);
		line(x2, y1, x1, y2-200);
		line(x1, y2, x2, y1);

		x1 -= dx1;
		x2 -= dx2;
		y1 -= dy1;
		y2 -= dy2;

	}

	//chair seat
	noStroke();
	fill(33);
	beginShape();
	vertex(155, 192);
	vertex(174, 181);
	vertex(193, 186);
	vertex(174, 196);
	endShape();

	//chair back
	fill(22);
	push();
	translate(151, 162);
	rotate(radians(-7));
	rect(0, 0, 3, 33);
	rect(17, 3, 3, 33);
	pop();

	push();
	translate(151, 162);
	rotate(radians(7));
	rect(1, 3, 20, 2);
	pop();
    
    //chair base and legs
	fill(22);
	beginShape();
	vertex(156, 192);
	vertex(174, 195);
	vertex(193, 186);
	vertex(193, 191);
	vertex(174, 200);
	vertex(156, 197);
	endShape();
	rect(155, 194, 3, 26);
	rect(172, 198, 3, 28);
	rect(190, 190, 3, 23);

	//piano 
	beginShape();
	vertex(188, 173);
	vertex(183, 155);
	vertex(172, 153);
	vertex(171, 145);
	vertex(179, 142);
	vertex(177, 131);
	vertex(226, 113);
	vertex(236, 113);
	vertex(253, 115);
	vertex(260, 116);
	vertex(260, 121);
	vertex(253, 125);
	vertex(255, 128);
	vertex(267, 133);
	vertex(267, 153);
	vertex(258, 164);
	vertex(255, 189);
	vertex(252, 189);
	vertex(249, 170);
	vertex(191, 157);
	vertex(191, 174);
	endShape();

	fill(231);
	beginShape();
	vertex(178, 148);
	vertex(185, 143);
	vertex(250, 155);
	vertex(245, 161);
	endShape();
   
}

Looking Outwards -04 : Sound Art

Weather Thingy ECAL/Adrien Kaeser from ECAL on Vimeo.

One piece of art that stands at the intersection of sound and computation is “Weather Thingy” by Adrien Kaeser, created in 2018. This invention takes real time weather data input and converts it into computational data that varies the sound control of connected instruments. It consists of two main components, a weather station on a tripod microphone, and the custom built sound controller that’s connected to the weather station. The controller interface allows the device to assign the parameters received to different audio effects. What is inspiring to me about this piece is that it interprets data across different platforms – it used weather stimulation, such as rain collection or wind power, and is able to translate it into computational data, and then further reapply that to generate specific sounds. I think this is intriguing in its interdisciplinarity. The artist’s sensibilities come through in the way in which he assigns the different audio effects to the inputs – there is a distinct, ethereal quality in the noises produced.

LO-04- Sound Art

Don Ritter’s Intersection. 2019 (reconstruction).

This installation takes place in a completely dark room with a light lock door and plays audio of 8 lanes of moving traffic sounds. The installation interacts with visitors walking through the room by having a car screeching to a stop noise when the visitor walks past it. If a visitor stands still for a few seconds, then they will hear cars smashing into the paused car. The installation uses infra-red sensors, feedback technology, and 8 or 16 channel audio to create the sounds of traffic.

This work is inspiring in how it addresses the power of simulation with technology and the generation of creating hypersensitivity to sound with the subtraction of sight. Arthur Kroker mentions how “we are always being smashed by the freeway traffic of high technology”. By having the high intensity audio interact with the visitor’s walking Ritter creates a fully immersive space that reacts to human motion. Ritter manifests a commentary on the advancing speed of growing technology portrayed through the speeding traffic as well as rendering the visitor’s blind in the dark space. The dichotomy of the installation lies in its dependency on these forms of advancing technologies to portray the sounds and interaction with the visitors, and at the same time is depicting ideas of the intimidating pace of growing technology.

Project 04: String Art

For this assignment, I was interested in the way that changing a couple of the location variables for the string would alter the way in which the strings move within the loop. I couldn’t find a reference image of the memory I was basing the drawing off of, but I was inspired by those default backgrounds of older computers when they are not in use, but still on.

peachstring1

var x = 0;//x location of lines moves
var y = 0//y position of lines moves
var c = 0//change background color from black to white

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

}

function draw() {
  background(c);
    c += 1 //background changes over time
  for (i = 0; i <= 50; i += 2.5) //use loop to draw lines
  {var l = i *10
  stroke(194, 255, 254)//blue lines 
   strokeWeight(2);
      line(-width, height, x, l);
      line(width, height, x, l);
   stroke(124, 232, 124);//neon green lines
        strokeWeight(1);
    	  line(x, height/2, 5+l, l);
          line(-width/50, y, 5+l, l);
      stroke(0) //black lines
       line(0,y,20*l,height-l)
  x += 0.1 //lines move across screen
   if(x>width){
     y += 0.1
     x = width
   }
   stroke(255) //white lines
   strokeWeight(0.5)
          line(4*width/l+x, height, 5+l, 0)

  }
}

Project 04 String Art

For this project I drew an eye using string art. I attempted to include face shadows by “cross-hatching” with the string art.

stringart Download

//skin lines
var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 75
var dx3;
var dy3;
var dx4;
var dy4;
//eyebrow lines
var ba1;
var bb1;
var ba2;
var bb2;
var numLines2 = 20


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

function draw() {
	background(255);
	//background "skin" (x,y) coordinates
	stroke(172, 134, 120); // left-bottom
	dx1 = (0-0)/numLines1;
	dy1 = (300 - 0)/numLines1;
	dx2 = (400 - 0) / numLines1;
	dy2 = (300 - 300) / numLines1;
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 300;
	for(var i = 0; i <= numLines1; i+= 1){
		line(x1,y1,x2,y2);
		x1 += dx1;
		y1 += dy1;
		x2 += dx2;
		x2 += dy2;
	}
	//right to bottom
	dx3 = (400 - 400) / numLines1;
	dy3 = (300 - 0) / numLines1;
	var x3 = 400
	var y3 = 0
	for(var i = 0; i <= numLines1; i += 1){
		line(x3, y3, x2, y2);
		x2 -=dx2
		y2 -= dy2
		x3 += dx3
		y3 += dy3
	}
	//top to left
	dx4 = (400 - 0) / numLines1;
	dy4 = (0 - 0) / numLines1;
	var x4 = 400
	var y4 = 0
	for(var i = 0; i <= numLines1; i += 1){
		line(x1, y1, x4, y4);
		x1 += dx1
		y1 += dy1
		x4 -= dx4
		y4 -= dy4
	}
	//top to right
	push();
	translate((width/3)*2, 0)
	scale(0.33);
	for(var i = 0; i <= numLines1; i += 1){
		line(x3, y3, x4, y4);
		x3 += dx3
		y3 += dy3
		x4 += dx4
		y4 += dy4
	}
	pop();

	//start eyebrow lines (a,b) coordinates
	stroke (52, 41,41);
	//line(20, 175, 50, 225); reference lines
	//line(350, 10, 370, 20);
	ba1 = (50 - 20)/ numLines2;
	bb1 = (225 - 175) / numLines2;
	ba2 = (370-350) / numLines2;
	bb2 = (20 -10) / numLines2;
	var a1 =20
	var b1 = 175
	var a2 = 350
	var b2 = 10
	for(var i = 0; i <= numLines2; i += 1){
		line(a2, b2, a1, b1);
		a1 += ba1
		b1 += bb1
		a2 -= ba2
		b2 -= bb2
	}
	push();
	//start pupil, bigger square (c,d) coordinates
	stroke(102, 108, 95);
	noFill();
	var sc1; 
	var sd1;
	var sc2;
	var sd2;
	var sc3;
	var sd3;
	var sc4;
	var sd4;
	var numlinesS = 25
	sc1 = (150-150) / numlinesS;
	sd1 = (190-265) / numlinesS;
	sc2 = (225 -150) / numlinesS;
	sd2 = (190- 190) / numlinesS;
	var c1 = 150
	var d1 = 265
	var c2 = 150
	var d2 = 190
	for (var i = 0; i <= numlinesS; i += 1){ //top left
		line(c1, d1, c2, d2);
		c1 += sc1
		d1 += sd1
		c2 += sc2
		d2 += sd2
	}
	sc3 = (225-225) / numlinesS;
	sd3 = (190- 265)/ numlinesS;
	var c2 = 225
	var d2 = 190
	var c3 = 225
	var d3 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c2, d2, c3, d3);
		c2 -= sc2
		d2 -= sd2
		c3 += sc3
		d3 += sd3
	}
	sc4 = (150 -225)/ numlinesS;
	sd4 = (265- 265) / numlinesS;
	var c4 = 225
	var d4 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c3, d3, c4, d4);
		c3 -= sc3
		d3 -= sd3
		c4 += sc4
		d4 += sd4
	}
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c4, d4, c1, d1);
		c4 -= sc4
		d4 -= sd4
		c1 -= sc1
		d1 -= sd1
	}
	//smaller square
	scale(.5);
	translate(185, 225);
    stroke(0);
	noFill();
	for (var i = 0; i <= numlinesS; i += 1){ //top left
		line(c1, d1, c2, d2);
		c1 += sc1
		d1 += sd1
		c2 += sc2
		d2 += sd2
	}
	sc3 = (225-225) / numlinesS;
	sd3 = (190- 265)/ numlinesS;
	var c2 = 225
	var d2 = 190
	var c3 = 225
	var d3 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c2, d2, c3, d3);
		c2 -= sc2
		d2 -= sd2
		c3 += sc3
		d3 += sd3
	}
	sc4 = (150 -225)/ numlinesS;
	sd4 = (265- 265) / numlinesS;
	var c4 = 225
	var d4 = 265
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c3, d3, c4, d4);
		c3 -= sc3
		d3 -= sd3
		c4 += sc4
		d4 += sd4
	}
	for(var i = 0; i <= numlinesS; i += 1){ //top left
		line(c4, d4, c1, d1);
		c4 -= sc4
		d4 -= sd4
		c1 -= sc1
		d1 -= sd1
	}
	pop();
	// details
	translate(25, 20);
	stroke(172, 134, 120); //skin color
	var shade1;
	var shadf1;
	var shade2;
	var shadf2;
    shade1 = (50 - 20)/ numLines2;
	shadf1 = (225 - 200) / numLines2;
	shade2 = (370-300) / numLines2;
	shadf2 = (20 -10) / numLines2;
	var e1 =20
	var f1 = 200
	var e2 = 300
	var f2 = 10
	for(var i = 0; i <= numLines2; i += 1){
		line(e1, f1, e2, f2);
		e1 += shade1
		f1 += shadf1
		e2 += shade2
		f2 += shadf2
	}
	

    noLoop()
}

LO 04 -Weather Thingy

Weather Thingy is a real time climate sound controller created by Adrien Kaesar at ECAL.
The creation consists of two main parts, the weather station and the custom built sounds controller.
The device is designed to control and modify the settings of musical instruments using real time climate-related events.
I was drawn to this project because the thought of connecting music and weather had never occured to tme before. I think this project is incredibly interesting as it allows the audience to experience weather as a sound.
I highly recommend watching the video for the project as the creator goes on to describe how each of the three weather measuring components contribute to the sound of the instrument.

Project-04: String Art

stringartjessa

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

function setup() {
    createCanvas(400, 400);
    background(0);
    dx1 = (400-200)/count;
    dy1 = (0-200)/count;
    dx2 = (400-400)/count;
    dy2 = (400-400)/count;
    rectMode(CENTER);
}

function draw() {
	
	//divide the canvas into quadrants
	fill(255, 255, 255, 25);	//set fill to transparent white
	rect(300,0,width/2, height);	//draw square in top right
	rect(0,300,width, height/2);	//draw square in bottom left

	push();
	push();
	push();
	
	translate(-200,0)	//move the origin to the left
	//shape 1
	stroke('cyan')
	var x1 = 200;
    var y1 = 200;
    var x2 = 400;
    var y2 = 200;

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

    pop()	//return origin position
    //shape 2
    stroke('white')
    da1 = (200-0)/count;
    db1 = (200-0)/count;
    da2 = (400-0)/count;
    db2 = (200-400)/count;

    var a1 = 0;
    var b1 = 0;
    var a2 = 400;
    var b2 = 400;

    for (var i = 0; i <= count; i += 1) {
       line(a1, b1, a2, b2);
        a1 += da1;
        b1 += db1;
        a2 += da2;
        b2 += db2;
    noLoop();
    }
    
    push();	//save current canvas properties
    rotate(radians(45));	//rotate canvas 45 degrees
    
    //shape 3
    stroke('magenta')
    dc1 = (0-400)/count;
    dd1 = (0-0)/count;
    dc2 = (0-200)/count;
    dd2 = (400-200)/count;

    var c1 = 400;
    var d1 = 0;
    var c2 = 200;
    var d2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(c1, d1, c2, d2);
        c1 += dc1;
        d1 += dd1;
        c2 += dc2;
        d2 += dd2;
    noLoop();
}

	pop();	//restore canvas properties before drawing shape 3
	rotate(radians(-20))	//rotate canvas 20 degrees counterclockwise
	translate(-78,58)	//move canvas to the left and down so top point of shape 4 meets center of canvas

	//shape 4
	stroke('cyan')

	de1 = (200-400)/count;
    df1 = (200-400)/count;
    de2 = (0-200)/count;
    df2 = (400-200)/count;

    var e1 = 400;
    var f1 = 400;
    var e2 = 200;
    var f2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(e1, f1, e2, f2);
        e1 += de1;
        f1 += df1;
        e2 += de2;
        f2 += df2;
    noLoop();
}
	pop();	//reset canvas properties to before shape 3 was drawn
	
	//shape 5
	stroke('magenta');
	dg1 = (200-400)/count;
    dh1 = (0-0)/count;
    dg2 = (200-400)/count;
    dh2 = (400-100)/count;

    var g1 = 400;
    var h1 = 0;
    var g2 = 400;
    var h2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(g1, h1, g2, h2);
        g1 += dg1;
        h1 += dh1;
        g2 += dg2;
        h2 += dh2;
    noLoop();
}
	translate(-15,135)	//move canvas to the left and down
	rotate(radians(-44))	//rotate canvas 44 degrees counterclockwise

	//shape 6
	stroke('white')
	dj1 = (400-200)/count;
    dk1 = (200-0)/count;
    dj2 = (200-400)/count;
    dk2 = (400-200)/count;

    var j1 = 200;
    var k1 = 0;
    var j2 = 400;
    var k2 = 200;

    for (var i = 0; i <= count; i += 1) {
       line(j1, k1, j2, k2);
        j1 += dj1;
        k1 += dk1;
        j2 += dj2;
        k2 += dk2;
	}
	noLoop();
}

It took me a while to figure out how to manipulate the loops to make the shapes I wanted, so I made some general sketches to guide the composition and the guide lines. Ultimately, I had to transform the canvas and make slight modifications throughout the code to get the visual effect I wanted, but this would have been impossible to do without loops.

A sketch laying out the composition for the string art piece I made

Looking Outwards 04: Sound Art

I am captivated by Christian Marclay’s collaboration with Snapchat, a series of works entitled: Snap: Sound Stories. Marclay uses publicly available Snapchat videos as a source of found videos for different interactive sound art pieces. In one, he composes a musical piece by sampling from hundreds of millions of Snapchat videos analyzed by an algorithm which detects if the frequency of the video would be a sound recognizable to the human ear.

A video detailing Christian’s Marclay’s collaboration with Snapchat, Sound Stories

In another, Marclay creates a mobile from iPhones which respond via a pitch recognition algorithm which monitors and learns the viewer’s speaking voice. Another piece incorporates collections of videos which each represent a note on a piano; the viewer can sit at the piano and play music through Snapchat videos.

Christian Marclay, The Organ (detail), 2018

Link

Project-04 String Art

string art

var angle = 0;

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

function draw() {
   background(89, 190, 209);

  var waveLx1 = 0;
  var waveLx2 = 0;
  var waveLy = height/40;

  var dy1 = height/40;
  var dx1 = width/30;
  var dx2 = height/150;
  var i = 0;

  stroke(43, 58, 140);
  line(0, 300, 101, 55);    //for second wave
  stroke(27, 85, 145);
  line(125, 300, 200, 105);    //for third wave

  //first wave
  for (i = 0; i < 400; i += 1) {
    stroke(37, 36, 94);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  push();

  //second wave
  translate(100, 50);

  waveLx1 = 0;
  waveLx2 = 0;
  waveLy = height/40;
  dy1 = height/40;
  dx1 = width/10;
  dx2 = height/100;
  i = 0;

  for (i = 0; i < 400; i += 1) {
    stroke(43, 58, 140);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  pop();

  push();

  //third wave
  translate(200, 100);

  waveLx1 = 0;
  waveLx2 = 0;
  waveLy = height/40;
  dy1 = height/40;
  dx1 = width/5;
  dx2 = height/100;
  i = 0;

  for (i = 0; i < 400; i += 1) {
    stroke(27, 85, 145);
    line(waveLx1, 300, waveLx2, waveLy);
    // x moves in opposite directions
    waveLx1 += dx1;
    waveLx2 -= dx2;
    waveLy += dy1;    // increase y value
  }

  pop();

  push();

  //rotating sun 
  translate(335, 70);
  noStroke();
  fill(240, 180, 87);
  ellipse(0, 0, 40, 40);

   for (var i = 0 ; i <360; i+=10) {
    rotate(radians(angle));
    stroke(240, 180, 87);
    strokeWeight(2);
    line(0, 0, 50, 0);
    line(0, 0, 50*cos(radians(i)), 50*sin(radians(i)));
    angle = angle + 1;
  }

  pop();

  //clouds
  noStroke();
  ellipse(265, 100, 35, 35);
  ellipse(245, 105, 25, 25);
  ellipse(285, 105, 25, 25);

  ellipse(345, 135, 35, 35);
  ellipse(360, 140, 35, 35);
  ellipse(375, 140, 25, 25);
  ellipse(330, 140, 25, 25);

  
}

I was inspired by the string art image of a beach below. I drew out the basic shapes on illustrator which helped determine the points of the initial lines. The most challenging part was figuring out how to keep the sun rotating.

Initial basic sketch of shapes illustrator

Project – String Art

My String Art project is heavily inspired by the installation art of the Japanese artist Chiharu Shiota. The String Art assignment reminded me of her intricate installations of spaces and objects clad in an intricate weaving of thread. My process began with me drawing the setting, a dingy gallery space with an ominous void. Afterwards, I decided to make the drawing interactive and have the string art appear after the user clicks into the void.

sketch Download

// String Art
var dx1;
var dy1;
var dx2;
var dy2;
var dx3;
var dy3;
var dx4;
var dy4;
var dx5;
var dy5;
var numLines = 200;
var glowSize = 0;
function setup() {
    createCanvas(400, 300);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
    
  
}

function draw() {
	var voidX = width/2 - 40;
	var voidY = height/2 - 40;
	background(0);
	fill(220);
	stroke(220);
	rect(0,0,width,height); // room wall
	stroke(255,0,0);
	fill(0);
	circle(voidX, voidY, 125); //sinister void
	noStroke();
	fill(255,0,0,20);
	circle(voidX, voidY, 140 + glowSize); //glow around void
	fill(100);
	rect(0, height/2 + 70, width, height); //room floor
	//wall lights
	fill(255,255,0,70);
	circle(50,0,30);
	circle(120,0,30);
	circle(190,0,30);
	circle(260,0,30);
	circle(330,0,30);
	fill(255,255,0,100);
	circle(50,0,40);
	circle(120,0,40);
	circle(190,0,40);
	circle(260,0,40);
	circle(330,0,40);
	//reflection on floor
	fill(255,255,0,20);
	ellipse(190,height/2 + 90,300,10);
	fill(255,255,0,45);
	ellipse(190,height/2 + 90,200,5);
	//if user clicks in void eye and string art appears
	if (mouseIsPressed & abs(mouseX - voidX) <= 62.5 && abs(mouseY -voidY)<=62.5){
		//eye
		fill(255);
		noStroke();
		circle(voidX,voidY,60);
		fill(255,0,0);
		circle(voidX,voidY,20);
		fill(0);
		circle(voidX,voidY,10);
		//string art
		noFill();
		strokeWeight(.1);
		stroke(255,0,0);
		line(width, 0, 0, 10);
		line(10,0,width,30);
		line(40,height,100,0);
		line(300,0,350,height);
		line(230,0,200,height);
		dx1 = -width/numLines;
		dy1 = 10/numLines
		dx2 = (width-10)/numLines;
		dy2 = -height/numLines;
		dx3 = 60/numLines;
		dy3 = -height/numLines;
		dx4 = 50/numLines;
		dy4 = height/numLines;
		dx5 = -30/numLines;
		dy5 = height/numLines;
		var x1 = width;
		var y1 = 0;
		var x2 = 10;
		var y2 = 0;
		var x3 = 40;
		var y3 = height;
		var x4 = 300;
		var y4 = 0;
		var x5 = 230;
		var y5 = 0;
		for(var drawLine = 0; drawLine <= numLines; drawLine += 1){
			line(x1,y1,x2,y2);
			line(x1,y1,x3,y3);
			line(x1,y1,x4,y4);
			line(x1,y1,x5,y5);
			line(x2,y2,x3,y3);
			line(x2,y2,x4,y4);
			line(x2,y2,x5,y5);
			line(x3,y3,x4,y4);
			line(x3,y3,x5,y5);
			line(x4,y4,x5,y5);
			x1 += dx1;
			x2 += dx2;
			x3 += dx3;
			y1 += dy1;
			y2 += dy2;
			y3 += dy3;
			x4 += dx4;
			y4 += dy4;
			x5 += dx5;
			y5 += dy5;
		}

	}
	if(glowSize == 60){
		glowSize = 0;
	} else {
		glowSize += 1;
	}
}