Category: Section C

Kevin Riordan Looking Outwards-05-Section C

Troglodita Demonstration Video

For this week’s Looking Outwards, I chose to look at a 3D modeling work done by Sergi Caballer. This project was done in 2012 for The Spa Studios, and was made entirely in Python and Maya. I admire how much control over the character the user has, as shown in the demonstration, and how much change there can be in the facial structure. The character’s body and face can be changed to any expression by playing around with the program, which I also admire. The facial rig was created with a joint-based system over a coordinate plane, which is how so many different details can be moved around. Below are some individual elements and closeups of the rig, showing how much movement is possible in the body.

Arm and Leg of Troglodita
Arm movement of Troglodita

Kevin Riordan Project-05-Wallpaper-Section C

kzr wallpaper

/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_05*/
function setup() {
    createCanvas(600,400);
    background(139,210,247);
    var yStart=50;
    var xStart=50;
    var height=Math.sqrt(3)/2; //making hexagon shaped grid
    for (var rows=-1; rows<7; rows++) {
        if(rows%2==0) { //for even numbered rows
            for (var columns=0; columns<10; columns++) {
                var yPos=yStart+rows*80*height;
                var xPos=xStart+columns*80;
                //bunny
                //left ear
                noStroke();
                fill(255);
                arc(xPos-15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos-15,yPos,6,65,PI,2*PI);
                //right ear
                fill(255);
                arc(xPos+15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos+15,yPos,6,65,PI,2*PI);
                //head
                fill(255);
                ellipse(xPos,yPos,50,40);
                //nose
                fill(0);
                arc(xPos,yPos,8,8,0,PI);
                fill(233,138,159);
                triangle(xPos-3,yPos,xPos+3,yPos,xPos,yPos+4);
                //mouth
                stroke(0);
                line(xPos,yPos+4,xPos,yPos+8);
                line(xPos-3,yPos+11,xPos,yPos+8);
                line(xPos,yPos+8,xPos+3,yPos+11);
                //left eye
                noStroke();
                fill(0);
                ellipse(xPos-15,yPos-5,4,4);
                //right eye
                ellipse(xPos+15,yPos-5,4,4);
                //carrot
                //green parts
                fill(54,116,54);
                triangle(xPos-40,yPos+5,xPos-49,yPos-35,xPos-38,yPos-29);
                triangle(xPos-40,yPos+5,xPos-35,yPos-31,xPos-39,yPos-26);
                fill(89,169,61);
                triangle(xPos-40,yPos+5,xPos-48,yPos-20,xPos-38,yPos-15);
                triangle(xPos-40,yPos+5,xPos-34,yPos-21,xPos-39,yPos-14);
                //orange part
                fill(229,120,56);
                arc(xPos-40,yPos+5,20,4,PI,2*PI);
                triangle(xPos-30,yPos+5,xPos-50,yPos+5,xPos-40,yPos+40);
            }
        }
        else { //for odd numbered rows
            for (var columns=-1; columns<11; columns++) {
                var yPos=yStart+rows*80*height;
                var xPos=xStart+40+columns*80;
                //bunny
                //left ear
                noStroke();
                fill(255);
                arc(xPos-15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos-15,yPos,6,65,PI,2*PI);
                //right ear
                fill(255);
                arc(xPos+15,yPos,10,80,PI,2*PI);
                fill(233,138,159);
                arc(xPos+15,yPos,6,65,PI,2*PI);
                //head
                fill(255);
                ellipse(xPos,yPos,50,40);
                //nose
                fill(0);
                arc(xPos,yPos,8,8,0,PI);
                fill(233,138,159);
                triangle(xPos-3,yPos,xPos+3,yPos,xPos,yPos+4);
                //mouth
                stroke(0);
                line(xPos,yPos+4,xPos,yPos+8);
                line(xPos-3,yPos+11,xPos,yPos+8);
                line(xPos,yPos+8,xPos+3,yPos+11);
                //left eye
                noStroke();
                fill(0);
                ellipse(xPos-15,yPos-5,4,4);
                //right eye
                ellipse(xPos+15,yPos-5,4,4);
                //carrot
                //green parts
                fill(54,116,54);
                triangle(xPos-40,yPos+5,xPos-49,yPos-35,xPos-38,yPos-29);
                triangle(xPos-40,yPos+5,xPos-35,yPos-31,xPos-39,yPos-26);
                fill(89,169,61);
                triangle(xPos-40,yPos+5,xPos-48,yPos-20,xPos-38,yPos-15);
                triangle(xPos-40,yPos+5,xPos-34,yPos-21,xPos-39,yPos-14);
                //orange part
                fill(229,120,56);
                arc(xPos-40,yPos+5,20,4,PI,2*PI);
                triangle(xPos-30,yPos+5,xPos-50,yPos+5,xPos-40,yPos+40);
            }
        }
    }
    noLoop();
}
function draw() {
}

I started by sketching out my idea of doing alternating bunnies and carrots.

To make this project I started with the hexagonal grid template, and then made one bunny and one carrot, and then played around with the variables to put them into the right spot so that they would be translated the right way. This project made me more comfortable with nested for loops, and how to make copies of pictures on varying grids.

Rjpark – Project 05 – Wallpaper

rjpark_wallpaper

var z = 150; // "zooming" the lines
var sw = z/20; // stroke weight of lines
var swl = z/100; // stroke weight of leaves
var l = z/10; // leaves placement on lines
var ls = z/5; // leaves size

function setup() {
    createCanvas(600, 600);
   	background(190, 175, 155);
    noLoop();
}

function draw() {
	// set 1 of vertical lines (in even numbered columns)
   	// vx1 = variable for x coordinate movement
   	// vy1 = variable for y coordinate movement
   	for (var vx1 = 0; vx1 < width/10; vx1 ++) {
   		for (var vy1 = 0; vy1 < width/10; vy1 ++) {
   			stroke(90, 70, 60);
   			strokeWeight(sw);
   			line((z/2)+z*vx1, z*vy1, (z/2)+z*vx1, (z/2)+z*vy1);
   		}
   	}
	// set 2 of vertical lines (in odd numbered columns)
   	// vx2 = variable for x coordinate movement
   	// vy2 = variable for y coordinate movement
   	for (var vx2 = 0; vx2 < width/10; vx2 ++) {
   		for (var vy2 = 0; vy2 < width/10; vy2 ++) {
   			stroke(120, 50, 20);
   			strokeWeight(sw);
   			line(z*vx2, (z/2)+z*vy2, z*vx2, z+z*vy2);
   		}
   	}
	// set 1 of horizontal lines (in even numbered columns)
   	// hx1 = variable for x coordinate movement
   	// hy1 = variable for y coordinate movement
   	for (var hx1 = 0; hx1 < height/10; hx1 ++) {
   		for (var hy1 = 0; hy1 < height/10; hy1 ++) {
   			stroke(120, 50, 20);
   			strokeWeight(sw);
   			line((z/2)+z*hx1, (z/2)+z*hy1, z+z*hx1, (z/2)+z*hy1);
   		}
   	}
	// set 2 of horizontal lines (in odd numbered columns)
   	// hx2 = variable for x coordinate movement
   	// hy2 = variable for y coordinate movement
   	for (var hx2 = 0; hx2 < height/10; hx2 ++) {
   		for (var hy2 = 0; hy2 < height/10; hy2 ++) {
   			stroke(90, 70, 60);
   			strokeWeight(sw);
   			line(z*hx2, z*hy2, (z/2)+z*hx2, z*hy2);
   		}
   	}
   	// set 1 of leaves on first xy coordinate of vertical lines (set 1)
   	for (var vx1 = 0; vx1 < width/10; vx1 ++) {
   		for (var vy1 = 0; vy1 < width/10; vy1 ++) {
   			fill(80, 110, 75);
   			noStroke();
   			ellipse((z/2)+z*vx1+l, z*vy1, ls, ls); // leaf body
   			triangle((z/2)+z*vx1+l, z*vy1-(ls/2), (z/2)+z*vx1+l+(ls/2), z*vy1, (z/2)+z*vx1+l+(ls/2), z*vy1-(ls/2)); // leaf tip

   			stroke(0);
   			strokeWeight(swl);
   			line((z/2)+z*vx1+(ls/5), z*vy1+(ls/3), (z/2)+z*vx1+l, z*vy1); // leaf veins

   	   		fill(130, 140, 90);
   	   		noStroke();
   	   		ellipse((z/2)+z*vx1, z*vy1-l, ls, ls); // leaf body
   			triangle((z/2)+z*vx1, z*vy1-l-(ls/2), (z/2)+z*vx1+(ls/2), z*vy1-l, (z/2)+z*vx1+(ls/2), z*vy1-l-(ls/2)); // leaf tip

   			stroke(0);
   			strokeWeight(swl);
   			line((z/2)+z*vx1-(ls/3), z*vy1-(ls/5), (z/2)+z*vx1, z*vy1-l); // leaf veins
   		}
   	}
   	// set 2 of leaves on first xy coordinate of horizontal lines (set 1)
   	for (var hx1 = 0; hx1 < width/10; hx1 ++) {
   		for (var hy1 = 0; hy1 < width/10; hy1 ++) {
   			fill(205, 185, 90);
   			noStroke();
   			ellipse((z/2)+z*hx1-l, (z/2)+z*hy1, ls, ls); // leaf body
   			triangle((z/2)+z*hx1-l-(ls/2), (z/2)+z*hy1, (z/2)+z*hx1-l, (z/2)+z*hy1+(ls/2), (z/2)+z*hx1-l-(ls/2), (z/2)+z*hy1+(ls/2)); // leaf tip

   			stroke(0);
   			strokeWeight(swl);
   			line((z/2)+z*hx1-(ls/5), (z/2)+z*hy1-(ls/3), (z/2)+z*hx1-l, (z/2)+z*hy1); // leaf veins

   			fill(250, 240, 190);
   	   		noStroke();
   	   		ellipse((z/2)+z*hx1, (z/2)+z*hy1+l, ls, ls); // leaf body
   	   		triangle((z/2)+z*hx1-(ls/2), (z/2)+z*hy1+l, (z/2)+z*hx1, (z/2)+z*hy1+l+(ls/2), (z/2)+z*hx1-(ls/2), (z/2)+z*hy1+l+(ls/2)); // leaf tip

   	   		stroke(0);
   			strokeWeight(swl);
   			line((z/2)+z*hx1+(ls/3), (z/2)+z*hy1+(ls/5), (z/2)+z*hx1, (z/2)+z*hy1+l); // leaf veins
   		}
   	}
   	// set 3 of leaves on first xy coordinate of vertical lines (set 2)
   	for (var vx2 = 0; vx2 < width/10; vx2 ++) {
   		for (var vy2 = 0; vy2 < width/10; vy2 ++) {
   			fill(80, 110, 75);
   			noStroke();
   			ellipse(z*vx2+l, (z/2)+z*vy2, ls, ls); // leaf body
   			triangle(z*vx2+l, (z/2)+z*vy2-(ls/2), z*vx2+l+(ls/2), (z/2)+z*vy2, z*vx2+l+(ls/2), (z/2)+z*vy2-(ls/2)); // leaf tip

   			stroke(0);
   			strokeWeight(swl);
   			line(z*vx2+(ls/5), (z/2)+z*vy2+(ls/3), z*vx2+l, (z/2)+z*vy2); // leaf veins

   	   		fill(130, 140, 90);
   	   		noStroke();
   			ellipse(z*vx2, (z/2)+z*vy2-l, ls, ls); // leaf body
   			triangle(z*vx2, (z/2)+z*vy2-l-(ls/2), z*vx2+(ls/2), (z/2)+z*vy2-l, z*vx2+(ls/2), (z/2)+z*vy2-l-(ls/2)); // leaf tip

   			stroke(0);
   			strokeWeight(swl);
   			line(z*vx2-(ls/3), (z/2)+z*vy2-(ls/5), z*vx2, (z/2)+z*vy2-l); // leaf veins
   		}
   	}
   	// set 4 of leaves on first xy coordinate of horizonal lines (set 2)
   	// replaces leaves on second xy coordinate of vertical lines (set 2) because first coordinate of first row of horizontal lines need leaves
   	for (var hx2 = 0; hx2 < height/10; hx2 ++) {
   		for (var hy2 = 0; hy2 < height/10; hy2 ++) {
   			fill(205, 185, 90);
   			noStroke();
   			ellipse(z*hx2-l, z*hy2, ls, ls); // leaf body
   			triangle(z*hx2-l-(ls/2), z*hy2, z*hx2-l, z*hy2+(ls/2), z*hx2-l-(ls/2), z*hy2+(ls/2)); // leaf tip

   			stroke(0);
   			strokeWeight(swl);
   			line(z*hx2-(ls/5), z*hy2-(ls/3), z*hx2-l, z*hy2); // leaf veins

   	   		fill(250, 240, 190);
   	   		noStroke();
   	   		ellipse(z*hx2, z*hy2+l, ls, ls); // leaf body
   	   		triangle(z*hx2-(ls/2), z*hy2+l, z*hx2, z*hy2+l+(ls/2), z*hx2-(ls/2), z*hy2+l+(ls/2)); // leaf tip

   	   		stroke(0);
   			strokeWeight(swl);
   			line(z*hx2+(ls/3), z*hy2+(ls/5), z*hx2, z*hy2+l); // leaf veins
   		}
   	}

}

I knew from the start that I wanted to implement nature and earth tones into my wallpaper. So, I created a simple, stair-shaped pattern for vines and pairs of leaves at each intersection of the stair-shaped lines.

 

Although this looks like an easy pattern to code, there were a lot of different parts to consider. I had to iterate the vertical and horizontal lines both across and down; I had to make 4 double for-loops to make this happen. So, there are 2 sets of vertical and horizontal lines each. You can see the 2 sets by color (red-ish brown and dark brown). I also had to iterate the pairs of leaves at one end of each vertical and horizontal line (2 sets for each), so, I also had to make 4 double for-loops to make this happen.

Lastly, I created global variables that make it easier for the user to change the dimensions of the shapes in the wallpaper. Of those global variables, only one has to be changed because the others are dependent on that one global variable, z. If the user changes z, the entire wallpaper will either “zoom” in or out.

Sophia Kim – Looking Outwards 05 – Sec C

Within the “Portals” series, this piece was my favorite by Owe Martirez. Owe Martirez is a 3-D artist and motion designer from Sweden. It is most likely Martirez used Adobe Illustrator and JavaScript to create the “Portals” series. I really admire this 3D computer graphic among all of his pieces, because there is a message to this specific one. Also, I really admire how he mainly uses primary colors throughout the canvas and gold as an accent color. Alongside it being aesthetically pleasing, he uses text (“Hall of Greed”) to give a hint of what this graphic is about. In my opinion, within the ‘hall,’ the hand is reaching to grab different objects, symbolizing how people in society want the newest products. I believe Martirez’s goal was to make a series on human anatomy intertwining with different types of spaces using complimentary colors.

Portals

 

Connor McGaffin – Looking Outwards – 05

“Flume – v” (2016)

Jonathan Zawada is a motion graphics artist who has done work at very corporate and independent levels. Much of his work, similar to other artists featured as “Looking Outwards” suggestions, is based around organic form in the natural world. What sets Zawada’s work apart from others for me though is that the blurring of organic and artificial is very visually apparent. In other works when I’ve referred to this relationship, it has been as organic objects being portrayed through digital coding.

Although I am unfamiliar with the field of 3-D motion graphics, it is evident that there are multiple layers to what is being displayed. In the embedded music video, there were quick cuts between simulations of metallic stem growth and chain link interactions, oftentimes with the two of them physically overlapping in a layer-like nature. From this, I would assume that there were different sequences of code for each of the elements in the video, which are triggered in response to drastic changes in pitch, tempo, or bass.

source

ChristineSeo-LookingOutwards-05

First stage of the process of when Julien Crochet created the work
3D rendering of Yoii’s character
The original “The Observer” 3D illustration

Julien Crochet is a 3D generalist that worked on “The Observer.” For this 3D artwork, he focused on modeling, texturing, shading, rendering, and compositing of the character that was inspired by the unique mood of an early morning. The character was inspired by Yoii’s character and rooftops. Since Crochet is a 3D Graphist, he has high proficiency in VRay, 2DS Max, Photoshop, and Maya. I was really intrigued by this artwork because his attention to detail for reflections and shadows really help to render a 3 dimensional space within the character’s surroundings. His use of shallow depth of field also was interesting because I am personally an art student and always work with rendering 3 dimensional spaces in 2D drawings.

I have not worked with a lot of rendering digitally, and it definitely captured my attention that he used a narrative illustration to show not only 3D rendering of the character, but also the space in the background. I wish Crochet worked in a series, where the character is portrayed in different locations, instead of one specific rooftop in Japan. However, the overall aesthetics of the piece as well as the color palette really captured my attention and gave a sense of reality in a digital world through 3D rendering.

http://juliencrochet.wixsite.com/portfolio/3d-observer

Sophia Kim Project-04 String Art- Sec C

sketch

// Sophia S Kim
// Section C 1:30
// sophiaki@andrew.cmu.edu 
// Project-04-StringArt

var x1
var y1 
var x2
var y2 

function setup() {
	createCanvas(400, 300); 
	var x1 = 400;
	var y1 = 100;
	var x2 = 50; 
	var y2 = 300;
}

function draw() {
	background(0);
	//white line
	x1 = 600;
	y1 = 0;
	x2 = 500;
	y2 = 200;

	for (var i = 0; i < 150; i += 1) {
		stroke(255)
		line(x1, y1, x2, y2)
		x1 -= 10
		y2 += 10
	}
	//white 2 line
	x1 = 0;
	y1 = 0;
	x2 = 600;
	y2 = 5;

	for (var i = 0; i < 150; i += 1) {
		stroke(90)
		line(x1, y1, x2, y2)
		x2 -= 10
		y1 += 50
	}
		// light yellow curve line
	x1 = 200;
	y1 = 600;
	x2 = 400;
	y2 = 0;

	for (var i = 0; i < 100; i += 1) {
		stroke(251, 255, 132)
		line(x1, y1, x2, y2)
		x1 -= 30
		y2 += 7
	}
	// light blue curve line
	x1 = 0;
	y1 = 0;
	x2 = 400;
	y2 = 0;
	for (var i = 0; i < 50; i += 1) {
		stroke(148, 191, 255)
		line(x1, y1, x2, y2)
		x1 += 13
		y2 += 10
	}
	// light green curve line
	x1 = 350;
	y1 = 0;
	x2 = 0;
	y2 = 0;

	for (var i = 0; i < 70; i += 1) {
		stroke(155, 255, 124)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 += 10
	}
	//light red curve line
	x1 = 500;
	y1 = 300;
	x2 = 0;
	y2 = 400;

	for (var i = 0; i < 100; i += 1) {
		stroke(255, 124, 124)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 -= 7
	}
	//blue curve line
	x1 = 0;
	y1 = 0;
	x2 = 500;
	y2 = 0;
	for (var i = 0; i < 50; i += 1) {
		stroke(11, 34, 255)
		line(x1, y1, x2, y2)
		x1 += 13
		y2 += 10
	}
	//green curve line
	x1 = 250;
	y1 = 0;
	x2 = 0;
	y2 = 0;

	for (var i = 0; i < 70; i += 1) {
		stroke(60, 239, 5)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 += 10
	}
	//red curve line
	x1 = 400;
	y1 = 300;
	x2 = 0;
	y2 = 400;

	for (var i = 0; i < 100; i += 1) {
		stroke(255, 63, 11)
		line(x1, y1, x2, y2)
		x1 -= 8
		y2 -= 7
	}
	//yellow curve line
	x1 = 400;
	y1 = 600;
	x2 = 400;
	y2 = 0;

	for (var i = 0; i < 100; i += 1) {
		stroke(255, 252, 11)
		line(x1, y1, x2, y2)
		x1 -= 30
		y2 += 7
	}
}

For this project, I focused on using tones of green, blue, yellow, and red. At first, I had trouble with organizing how to make the curves and how to align it to the edges of the canvas, but after many trials, I was able to understand how each line point worked. I had a lot of fun making string art with code, and I hope to make more complex and creative works like this.

Robert Oh- Looking Outward-04

Sonic Playground, created by Yuri Suzuki Design

For this week’s Looking Outward, I chose to read up on the Sonic Playground, created by Yuri Suzuki Design. In a nutshell, the playground is a collection of 6 different interactive sound sculptures that carry sound waves to nearby sculptures.

I really admire this project, because one of its main goals is to introduce art to regular people walking outside. I love the fact that this playground is geared towards children, so that they are able to experience how sound waves travel and to enjoy playing outside. Personally, I have experienced a similar contraption at a science museum once that allowed people on opposite sides of a wide room to hear each other using similar sculptures. And so, I really do love the fact that a person has carried on that idea to make it accessible to the public.

The software used to develop and optimize the pieces in the sculptures was designed by Luca Dellatorre using Grasshopper which is a parametric design plug-in in Rhinoceros. The article states that Luca  simulated sound wave behavior using ray tracing techniques.

Clearly, we are able to see the fun-loving, colorful side of the creator’s artistic sensibilities that show in the Sonic Playground. I am very excited for future playgrounds and public attractions like these that bring people together through science and fun!

link to the article:

Sonic Playground – Playful acoustics by Yuri Suzuki Design

Joanne Lee – Looking Outward 04

Janet Cardiff’s The Forty Part Motet, 2001 plays a 40-track 14-minute recording on 40 speakers.

At The Scottsdale Museum of Contemporary Art, an exhibit called “The Five Senses” was displayed from Feb 1- May 4, 2014. Naturally, one of the senses that was explored was sound. Janet Cardiff’s The Forty Part Motet was displayed in an empty room on 40 speakers. The congregational choir of the Gothic Salisbury Cathedral were asked to record a choral arrangement of Thomas Tallis’s Spem in alium (The Forty Part Motet). This is an a capella piece, meaning that there is no instrumental accompaniment.

Cardiff’s installation is not only a technically complex recording, but also has many details to give a unique sensory experience. The most important is that each of the 40 speakers are synchronized to play 1  track in the recording (each singer has their own individual channel). These speakers are placed at eye level in an oval, in groups of 5 (just like in the original chorus). I really admire this installation because I love choral music. There is something unique about the way all of the voices travel to the audience and mesh together to hit you at once, and that can only be experienced live. This installation seems to emulate that experience despite using speakers by giving each voice a different speaker channel. I wish I had gotten to experience this exhibit.

A video showing a glimpse of The Forty Part Motet with a voiceover by Janet Cardiff.

Alexandra Kaplan – Looking Outwards -04

 

A piece of sound art that stood out to me was Lines which was created in 2016 by composer Anders Lind. The installation is a series of lines on the floor, walls, and hanging down from the ceiling that can be interacted with by the audience to make different pitched sounds. I was really drawn to how participatory the piece is, I love it when art is accessible to its audience and promotes discovery in its viewers. It is also great in how it can be a group experience with people creating music together as well as a solo one.

I would think that the algorithm for this piece would use motion sensors to determine how far away an obstruction is and to play a certain pitch/tempo per distance.

 

Demonstrating part of the installation

 

Another part of the installation, this time activated by walking
Posts can be put down to make multiple notes at once even with just one person
This part of the installation is activated by how far up and down you are from the sensors.
A group of children plays with the installation