## LO 5: 3D Computer Graphics

The piece of 3D Computer Graphics I’m studying this week is widely regarded as one of the best early works of CGI to date. The creation of the dinosaurs in Jurassic Park (1993) is an interesting endeavor and product for multiple reasons. First, as a dramaturgy major, I view movie visuals in terms of how they relate to the plot. In the case of Jurassic Park, the realistic appearance of the dinosaurs was paramount to the success of the movie. Second, the technical skill was unparalleled at the time. To give the dinosaurs the appearance of real weight and depth, the movie used a combination of animatronics and CGI. The computer generated work focused on texture and light to give a realistic 3D effect.

## Project 4: String Art

``````var dx1;
var dy1;
var dx2;
var dy2;
var numLines1 = 20;
var numLines2 = 20;
var numLines3 = 20;

function setup() {
createCanvas(400, 300);
background(220);
line(100, 50, 300, 200); // top left triangle
line(100, 50, 150, 250);
dx1 = (100-100)/numLines1;
dy1 = (50-50)/numLines1;
dx2 = (300-150)/numLines1;
dy2 = (250-200)/numLines1;
line(350, 25, 200, 275); // top right triangle
line(350, 25, 50, 125);
dx3 = (350-350)/numLines2;
dy3 = (25-25)/numLines2;
dx4 = (200-50)/numLines2;
dy4 = (275-125)/numLines2;
line(100, 50, 50, 125); // connection lines
line(350, 25, 300, 200);
dx5 = (100-50)/numLines3;
dy5 = (125-50)/numLines3;
dx6 = (350-300)/numLines3;
dy6 = (200-25)/numLines3;
}

function draw() {
var x1 = 100; // top left triangle
var y1 = 50;
var x2 = 150;
var y2 = 250;
for (var i = 0; i <= numLines1; i += 1) {
line(x1, y1, x2, y2);
x1 += dx1;
y1 -= dy1;
x2 += dx2;
y2 -= dy2;
}
var x3 = 350; // top right triangle
var y3 = 25;
var x4 = 50;
var y4 = 125;
for (var j = 0; j <= numLines2; j += 1) {
line(x3, y3, x4, y4);
x3 += dx3;
y3 += dy3;
x4 += dx4;
y4 += dy4;
}
var x5 = 100;
var y5 = 50;
var x6 = 350;
var y6 = 25;
for (var k = 0; k <= numLines3; k += 1) {
line(x5, y5, x6, y6);
x5 -= dx5;
y5 += dy5;
x6 -= dx6;
y6 += dy6;
}
noLoop();
}
``````

I wanted to see if I could create something that resembled a stage without having a lot of shapes. I ultimately chose to focus on the floor and lights to create both the playing space and the audience that surrounds it.

## LO 4: Sound Art

Luke Du Bois’s piece Pop Icon: Britney is a generative video with sound, meant to be displayed in a physical frame. It explores the definition of “icon” in relation to pop stars and the history of Catholicism. Du Bois strips away the instrumentals from her songs, leaving only her voice, which is then processed with the reverb from the famous San Vitale Basilica in Ravenna, Italy. Without this context, the audio sounds like an ephemeral, yet discordant wash of tones absent of any structure or tonality. Du Bois also emphasizes the extensive and relatively new use of Photoshop and Autotune that ruled Britney’s experience of music and fame.

## Project 3: Dynamic Drawing

``````var x = 1
var y = .75

function setup() {
createCanvas(450, 600);
}

function draw() {
background(200, 100, 0); // orange background
fill(mouseX);
rectMode(CORNER);
rect(0, 0, mouseX*x, mouseY*y); // top left rect
rectMode(CORNERS);
fill(mouseY);
rect(450, 600, mouseX*x, mouseY*y); // bottom right rect
fill(200, 75, 75);
triangle(mouseX, mouseY*y, mouseX*1.25, mouseY+30,
mouseX*.75, mouseY+30); // cursor triangle
}``````

It was interesting trying to find variables to incorporate other than mouseX and mouseY. I ultimately decided to go with something simple just because the layers of drawing looked cleaner.

## LO: Computational Fabrication

John Edmark’s series of 3D printed sculptures based off of the golden ratio (phi) reflects the intersection of science, nature, and art. The work is often described as creating an optical illusion, the sculpture’s pieces are rotating, but it appears as if it is in bloom like a flower. This relationship can be attributed to the sculpture mimicking phyllotaxis because of its inclusion of the Fibonacci sequence. The art is the result of the sculpture itself as well as the form in which it is communicated, including strobe lights and shutter speed. This inclusion is interesting because some of the sculptures are actually available for purchase, which I think negates the complete automation of the art as a whole. I do love the simplicity of the execution though. The clean, repetitive lines and white material allow the viewer to focus on the shape and motion of the object, rather than the construction itself.

## Project 2: Variable Faces

``````var eyeSize = 50
var mouthType = 1
var eyebrowType = 1

function setup() {
createCanvas(480, 640);
}

function draw() {
background(215, 167, 119);
strokeWeight(0);
fill(107, 70, 27); // eyes
ellipse(width/3, height/3, eyeSize);
ellipse(width*2/3, height/3, eyeSize);
if (eyebrowType >=1) { // angry eyebrows
fill(107, 70, 27);
triangle(width/5, height/5, width/4, height/4, width/2, height/4);
triangle(4*width/5, height/5, 3*width/4, height/4, width/2, height/4);
} else if (eyebrowType < 1 & eyebrowType > .5) { // unibrow
strokeWeight(20);
line(width/4, height/5, 3*width/4, height/5);
} else { // arc eyebrows
noFill();
strokeWeight(7);
arc(width/3, height/4, 200, 100, -5/6 * PI, -PI/6);
arc(2*width/3, height/4, 200, 100, -5/6 * PI, -PI/6);
}
noFill(); // nose
strokeWeight(7);
stroke(107, 70, 27);
arc(width/2, height/2, 80, 80, PI/4, 3/4 * PI);
stroke(107, 70, 27); // line mouth
if (mouthType >= 1) {
strokeWeight(7);
line(width/3, 3*height/4, 2*width/3, 3*height/4);
} else if (mouthType < 1 & mouthType > .5) { // open mouth
strokeWeight(0);
fill(107, 70, 27);
ellipse(width/2, 3*height/4, width/2, height/10);
} else { // smile mouth
strokeWeight(7);
arc(width/2, 3*height/4, 200, 100, PI/6, 5/6 * PI);
}

}

function mousePressed() {
eyeSize = random(25, 75);
mouthType = random(1.5);
eyebrowType = random(1.5);

}``````

I wanted to see what combination of facial features the computer would create, rather than creating combinations myself. While this prevented me from focusing on individual emotions, it’s been fun to see what the computer comes up with.

## LO: Generative Art

Memo Akten’s Simple Harmonic Motion #12 for 16 Percussionists at RNCM (2015) is a really interesting musical composition and performance piece. The rhythmic patterns are dictated by a computer, and communicated to the musicians through earpieces. While human tendency is to stay in time with each other, the cues cause each drummer to pay attention only to their own beats. This allows them to go in and out of sync as the program runs. I admire that Akten was able to create a performance that is straddles the line between what is music and what is simply noise. The intuitive emotional aspect of playing an instrument is seemingly stripped away as these drummers are simply an extension of the computer’s directions. I would be curious to see what would happen if a more complex and sonically pleasing piece were translated into this system. Sheet music and its digital counterparts can be seen as similar instructions, but this piece is unique in the way that the instructions are delivered. Rather than having written music and a conductor, the musicians do not see the bigger picture and can only rely on what they’re being told in the moment.

## Project 1: My Self Portrait

``````function setup() {
createCanvas(350, 500);
background(215, 167, 119)
}

function draw() {
strokeWeight(0);
fill(107, 70, 27) // eyes
ellipse(100, 140, 50);
ellipse(250, 140, 50);
fill(252, 226, 215, 150); // pupils
ellipse(105, 145, 30);
ellipse(255, 145, 30);
fill(107, 70, 27); // eyelids
triangle(75, 139, 70, 115, 107, 116);
triangle(275, 139, 280, 115, 243, 116);
noFill(); // nose
strokeWeight(5);
stroke(107, 70, 27);
arc(175, 240, 80, 80, PI/4, 3/4 * PI);
stroke(107, 70, 27); // mouth
strokeWeight(0);
fill(157, 117, 74);
// ellipse(175, 405, 110, 60);
fill(215, 167, 119);
rect(110, 370, 120, 40);
fill(144, 93, 37);
ellipse(175, 410, 110, 40);
fill(215, 167, 119);
rect(110, 410, 120, 30);
strokeWeight(0); // white plaid
fill(252, 226, 215, 100);
rect(25, 0, 35, 500);
rect(290, 0, 35, 500);
rect(157, 0, 35, 500);
rect(0, 60, 350, 35);
rect(0, 190, 350, 35);
rect(0, 320, 350, 35);
rect(0, 450, 350, 35);
fill(107, 70, 27, 35); // brown plaid
rect(90, 0, 35, 500);
rect(225, 0, 35, 500);
rect(0, 0, 350, 30)
rect(0, 125, 350, 35);
rect(0, 255, 350, 35);
rect(0, 385, 350, 35);

noLoop();
}``````

I’m not a very visual thinker, and it was more difficult than I expected to translate my idea into simple shapes.

## LO: My Inspiration

One interactive exhibit that has inspired me is the Miniature Railroad exhibit at the Carnegie Science Center. One aspect of the model that I enjoy is the combination of the tactile and technological. While this display is relatively simple in comparison to others in the museum, the combination of physical objects and technology to invoke movement and life in the Pennsylvania replica is exciting to me. Two years ago, the exhibit had its centennial, encouraging visitors to remember the advances in model building and interactivity that the museum has achieved. The exhibit operates with a series of buttons and screens, which are updated by technicians and craftsmen alongside the physical model every fall. The museum commits to preserving the past while upholding modern standards of technological advancement.