Month: September 2020

Looking Outwards-05- 3D Computer Graphics

Tentacle Towers (2005)- Yoichiro Kawaguchi

Tentacle Tower by Yoichiro Kawaguchi is a mixed-reality work that uses 3D imaging to bring movement and create space. Created in 2005, Kawaguchi used  a Lenticular 30 Picture Light Box to create this. The viewer is encouraged to look at this work and interpret the space only using their eyes, and the result is that they experience movement that has rhythm stimulated by stereoscopic CG visuals. What I admire about this work is how the artist incorporated color as well as scale of the different shapes in the art that created this suggestion of 3D space in a 2D surface. I think this is interesting because mimicking 3D form on a 2D space using these techniques holds a lot of thinking and skill to master. This makes me wonder how 3D form is visualized and what are the requirements that need to be met so that the viewer can understand the work as 3D.

Project 04-String Art

sketch
var dx2;
var dy2;
var dy3;
var numLines = 30;

function setup() {
    createCanvas(400, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    noStroke();
    line(200, 50, 200, 250);    //vertical guide line
    line(100, 50, 300, 250);    //diagonal guide line
    dx2 = (200)/numLines;
    dy2 = (200)/numLines;
    dy3 = (300)/numLines;
}

function draw() {
    background(0);

    // outer ring
    push();
    translate(200, 150); //origin in the middle
    for (let i = 1; i <= 200; i += 1) {
        rotate(2);      //rotating around the origin
        stroke(184, 156, 46, 70)
        line(-50, -130, 200, -150);
    }

    pop();
    //  the middle square
    var x1 = 100;
    var y1 = 250;
    var x2 = 100;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        stroke(111, 162, 179, 150);
        line(x1, y1, x2, y2);
        line(x1+200, y1-200, x2, y2);
        x2 += dx2;
        y2 += dy2;
    }

    var x1 = 100;
    var y1 = 150;
    var x2 = 200;
    var y2 = 50;
    for (let i = 0; i <= numLines; i += 1) {
        //biggest diamond
        stroke(40, 77, 89);
        line(x1-100, y1, x2, y2-100);
        line(x1-100, y1, x2, y2+100);
        line(x1+300, y1, x2, y2-100);
        line(x1+300, y1, x2, y2+100);

        //smallest diamond
        stroke(111, 162, 179);
        line(x1, y1, x2, y2);
        line(x1+200, y1, x2, y2)
        y2 += dy2;
    }
    noLoop();
}

This is my string art inspired by a diamond ring. I wanted the diamonds to look three-dimensional.

LO 04- Sound Art

This interactive sound art exhibition made in 2016 is created by Anders Lind, a Swedish composer. The exhibition is called LINES, which is connected to the floors, walls, and ceiling to create sensors that allow the audience to be able to make music with the movement of their hands along the walls. While no musical experiences are required, this project brings novelty and inspiration to those who are new to music, allowing them to interact with musical notes with their own bodies. I am inspired by the exhibition because LINES creates a unique form of musical instrument using computer interaction and programming.

Project-04-String-Art

sketchDownload
//Isabel Xu
//Project 04
var numLines = 50;
var LineEndX = 200
var LineEndY = 390

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

function draw() {
  
  var LineEndX = constrain(mouseX,50,350);
  var LineEndY = constrain(mouseY,50,250);
  
  //the two lines of the movable cape
  background(136,136,195);
  stroke(255);
  line(110, 80, LineEndX, LineEndY);
  line(200, 50, 50, 240);
  dx1 = (LineEndX-110)/numLines;
  dy1 = (LineEndY-80)/numLines;
  dx2 = (50-200)/numLines;
  dy2 = (240-50)/numLines;
  
  //the two lines of headpiece
  line(290, 80, LineEndX, LineEndY);
  line(200, 50, 350, 240);
  hx3 = (LineEndX-290)/numLines;
  hy3 = (LineEndY-80)/numLines;
  hx4 = (350-200)/numLines;
  hy4 = (240-50)/numLines;

  
    var x1 = 110;
    var y1 = 80;
    var x2 = 200;
    var y2 = 50;
    var x3 = 290
    var y3 = 80
    var x4= 200
    var y4 = 50
    
    //human figure body 
    noStroke();
    fill(159,160,195);
    rect(140,65,120,400,50,50,45,45);
  
    //generate the strings between lines
    for (var i = 0; i <= numLines; i += 1) {
        stroke(random(255),200,random(255));
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
      
        line(x3, y3, x4, y4);
        x3 += hx3;
        y3 += hy3;
        x4 += hx4;
        y4 += hy4;
      
    }
    for (var i = 0; i <= numLines; i++){
	    strokeWeight(0.75); 
        stroke(220,220,random(255));
        line(mouseX, i * 2+30, 220 - i, 80);  
    }
  
  noStroke();
  fill(159,160,215);
  ellipse(200,40,60,60);//head
  noStroke();
  fill(191,154,143);
  ellipse(175,50,18,14);
  ellipse(225,50,18,14);//blush
  
  
    
  

}

The idea of this project is having an adjustable wearable cape that is made with interactive e-textile. Mouse location updates the shape of the cape.

Looking Outwards – 04

The project I chose to learn more about was a project called “Plant Sounds” by TomuTomu . The project looks at the sounds various plants emit by “translating the electrical micro-voltage fluctuations” generated by the plants. This signal is then coded and used to produce a soundscape. What’s so interesting about this design is that the sounds come out so smooth and beautiful and that the plant is able to create that. I think for them to build this they would’ve needed to code the input values of the plant, from their electrical micro-voltage fluctuations, and assign values to them that would then relate to the code what time of sound output matches each value. I think the creator’s sensibilities lie in the sounds that are outputted because though the plant gives a specific value for the sounds, the creator decides which pitch is assigned to which value. I also linked another project regarding a similar project but one that experiments with adding voltage to plants and graphing out their molecular DNA changes to this signal. This is the TED talk by Greg Gage.

Plant Sounds : TomuTomu

Link for “Plant Sounds”: //www.youtube.com/watch?v=VvWPT4VhKTk&ab_channel=TomuTomu

Link for TED talk: //www.youtube.com/watch?v=pvBlSFVmoaw&t=1s&ab_channel=TED

Project 4 – String Art

>sketch 

												//Bennett Goeke
var angle = 0	

function setup() {
    createCanvas(400, 400);
    background(50);
    
}

function draw() {
	strokeWeight(10)								// background lines
	stroke(255, 0, 255)								// pink
	for (x = 0; x <= width; x += 30)
		line(x, 0 , x, height)						//repeating lines in loop

	noFill();
	stroke(0);										// black
	push();
	translate(200, 200)								// origin moved to center
	rotate(radians(angle));							// rotates record
	strokeWeight(1);
	for (var r = 100; r <= 250; r += 4){			// repeating circles 
		circle( 0, 0, r)
	}
	strokeWeight(10)
	fill(27);							// shade of black
	circle(0, 0, 100);					// inner fill circle of record
	
	translate(-200, -200);						// origin back to 0,0
	stroke(255, 255, 0);					//yellow				
	for (var y = 180; y <= 220; y += 5){
		line(180, y, 200, 200)				// yellow V-shape
	}
	push();
	translate( 200, 200);				// origin back to center			
	fill( 255, 0, 0);					// red				
	rect( 10, -20, 15, 40);				// yellow label with red inside
	pop();						

	angle += 3						// rotataing angle increases 3 degrees per frame
	pop();   

}

I decided to make a spinning record with a gold label and then kind of transformed into into a logo of sorts.

Project 04: String Art

For this project I chose to draw a series of four triangles around a circle that somewhat resembles light emanating from a bright white circle into the dark background.

sketch

//Helen Cheng
//helenc1
//Section C

var numLines = 50;
var canvasX = 400;
var canvasY = 300;

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

function draw() {
    fill(232, 231, 227);
    circle(200, 150, 200);
    line(canvasX/2, 0, 0, canvasY);
    line(canvasX/2, 0, canvasX, canvasY);
    //initilizing spacing for lines drawn
    var dist = canvasX/(numLines);
    for (var i = 0; i <= numLines; i += 1) {
      //upright triangle
      stroke(163, 66, 199)
      line(canvasX/2, 0, dist*i, canvasY);
      //upside down triangle
      stroke(232, 221, 60);
      line(canvasX/2, canvasY, dist*i, 0);
      //left triangle
      stroke(47, 255, 0);
      line(300, 150, 0, dist*i);
      //right triangle
      stroke(255, 0, 0);
      line(100, 150, canvasX, dist*i);  
    }
    noLoop();
}

Project-04-String-Art

sketch

// Xander Fann xmf Section B
var bx = 0
var len = 10
var up = 0
function setup() {
    createCanvas(400, 300);
    background(0);
}

function draw() {
  push()
    translate(0,up)
    background(255)
    stroke(200,200,255)
      for (var y = -5000; y <= 5000; y += 5){
        line(bx,y,bx+width,y);
      }
    //balloon
      noFill()
      stroke(255,0,0) // red
      for(var arcH = 0; arcH <= 130; arcH += 3){
        arc(200,180,arcH,130,-PI/2,PI/2)
      }


      noFill()
      stroke(0,255,0) // green
      for(var arcH = 0; arcH <= 130; arcH += 3){
        arc(200,180,arcH,130,PI/2,-PI/2)
      }

      noFill()
      stroke(0,0,255,70) // blue
      for(var arcH =- 70; arcH <= 0; arcH += 1){
        arc(200,180,arcH,130,PI/2,-PI/2);arc(200,180,arcH,130,-PI/2,PI/2)
      }
    //basket
    //basket horizontal
      stroke(214, 174, 56)
      for(var y = 260; y<= 290; y += 2){
        line(180,y,220,y)
      }
    //basket vertical
      stroke(214, 174, 56)
      for(var x = 180; x <= 220; x += 2){
        line(x,260,x,290)
      }
    //connection strings
      stroke(0)
      for(var x = 160; x <= 240; x += 20){
        line(x,230,200,260)
    }
    //movement
      up -= 3
      if (mouseIsPressed) {up += 10}
    pop()

    //moutains
    noFill()
    stroke(100,255,0)
    for(r = 200; r<= 300; r += 3)
    ellipse(200,400,800,r)
}

I started by thinking about how the density of strings can affect each other and how overlapping strings is similar to the idea of hatching make an object look 3 dimensional like a sphere. I thought of a hot air balloon where multiple colors can also be used to show the roundness of the balloon. When the screen is pressed the balloon also moves downwards.

Looking Outwards: 04

I really like the album Monolake Silence, by Robert Henke. The premise of the album is to create sound, but also a statement about how we currently listen to sound. Instead of working with different levels of compression and mixing, the entire cast of instruments has been set to the maximum at all times. This is because the way we listen to music in the modern world has changed. Instead of creating music with dynamics or elaborate compositions, current laptop, phone, and radio speakers are tuned to sound best when the music is mixed as loud as possible. This means that when songs of more dynamic genres are played, such as classical music, it sounds nowhere near as well as it might if it had been recorded live or if you were listening through headphones. In the final form you can very clearly tell that every track it at it’s maximum, but the arrangements have been left bare in that there are not too many instruments at a single time, such that we can hear all of the noises despite their volume.

https://www.roberthenke.com/releases/ml-025.html

Project 04: String Art

sketchDownload
//Carson Michaelis
//Section C
var yy = -25
var xx = -25

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

function draw() {
    var y = 300
    var y3 = 0
//make sure there's no trails
    background(220);
//black ellipse in middle
    push();
    noStroke();
    fill(0);
    ellipse(200,150,280,225);
    pop();

    noFill();
    strokeWeight(.5);
//moving points in middle
    if (yy == -25 & xx < 25) {
      xx += 1
    } else if (xx == 25 && yy < 25) {
      yy += 1
    } else if (yy == 25 && xx > -25) {
      xx -= 1
    } else if (xx == -25 && yy > -25) {
      yy -= 1
    }
//generating lines from side to side
      for (let x = 0; x <= 400; x += 400/24) {
          line(x,0,0,y);
          line(x,0,400,300-y);
          line(x,300,0,300-y);
          line(x,300,400,y)
          y -= 300/24;
      }

      push();
      stroke(255);
//lines connecting middle portion to outer lines
      line(200,25,365,150);
      line(200,25,35,150);
      line(200,275,35,150);
      line(200,275,365,150)

      print(xx.toString());
      print(yy.toString());
//generating moving lines inside ellipse
      for (let x = 0; x <= 20; x += 1) {
          line((x*(33/4))+200,y3+25,200+xx,150+yy);
          line((x*(-33/4))+200,y3+25,200-xx,150+yy);
          line((x*(33/4))+200,300-(y3+25),200+xx,150-yy);
          line((x*(-33/4))+200,300-(y3+25),200-xx,150-yy);
          y3 += (25/4);
        }
      pop();
}

For this project I wanted a portion of the lines to move, as well as to create black and white lines that contrast with each other. Here they explore the idea of an open versus occupied middle, as well as the way overlapping lines interact.