## Looking Outwards-05- 3D Computer Graphics

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

sketch
``````//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;

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);
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.

## Project 4 – String Art

``````												//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
strokeWeight(1);
for (var r = 100; r <= 250; r += 4){			// repeating circles
circle( 0, 0, r)
}
strokeWeight(10)
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.

``````//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

``````// 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)
}
stroke(214, 174, 56)
for(var y = 260; y<= 290; y += 2){
line(180,y,220,y)
}
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.

## Project 04: String Art

sketch
``````//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.