September 2017 – Page 4 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

amui1-LookingOutwards-05

For this Looking Outwards, I decided to reflect on this piece:

It is called “One is the Loneliest Number” by Stefan Morrell. When it comes to 3D computer graphics, I usually gravitate towards CGI animations and short stories. However, just like what the post says, looking outwards is about searching for inspiration in new things.

I thought this piece was really inspiring because of the immense amount of detail the artist included in each piece of the graphic. If you zoom into the buildings, you can see that the artist rendered every single piece of it: from buttons, to panels, to gateways, to objects, etc. In addition, I really like the concept of this piece. It shows one lonely space craft in a humongous arena. When I looked at this piece, I immediately thought of the phrase: “small fish in a big pond.” I really like the contrast in size and sense of depth portrayed throughout this whole piece.

Lastly, the artist did not release any information on his process for this piece. However, I discovered that Stefan Morrell is an environmental artist from New Zealand and the bulk of his pieces have won awards for being extremely photo realistic 3d.

Find piece in better quality here

Link to Stefan Morrell’s full page of pieces here and here

heeseoc-Project05-Wallpaper

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-05

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

function draw() {
	grid();
	grid2();
	grid3();
	grid4();
}

function grid() {
	background(243,242,224);
	angleMode(DEGREES);
	rotate(45);

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			
			strokeWeight(7.5);
			stroke(250,176,91);
			fill(235,1,0);
			rect(x-15,y-15,150,150); //red rect w/ yellow str//
		}
	}
}

function grid2() {

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(81,56,49);
			fill(235,176,14);
			rect(x+90,y+250,100,100); //yellow rect w/ brown str//

			stroke(47,215,127);
			fill(95,115,0);
			rect(x+100,y+260,80,80); //olive rect w/ neon green str//

			stroke(229,129,7);
			fill(234,7,14);
			rect(x+110,y+270,60,60);

			stroke(47,215,127); //green flower petals//
			fill(95,115,0);
			ellipse(x+125,y+285,25,25);
			ellipse(x+125,y+315,25,25);
			ellipse(x+155,y+315,25,25);
			ellipse(x+155,y+285,25,25);

			strokeWeight(2); //red flower petals//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+126,y+300,20,20);
			ellipse(x+155,y+300,20,20);
			ellipse(x+140.5,y+314.5,20,20);
			ellipse(x+140.5,y+285.5,20,20); 

			stroke(81,56,49); //yellow center//
			fill(255,192,1);
			ellipse(x+140.5,y+300,20,20); 
		}
	}
}

function grid3() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			strokeWeight(5);
			stroke(255,100,8);
			fill(0,0,153);
			rect(x,y,120,120); //blue rect w/ orange str//

		}
	}
}

function grid4() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(0,0,153);
			fill(240,175,23);
			ellipse(x+60,y+220,100,100); //yellow cirlces within blue rect//

			stroke(68,220,135);
			fill(255,119,1);
			ellipse(x+60,y+220,80,80); //orange circles with neon green stroke//

			strokeWeight(2.5); //red petals within the orange circle//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+40,y+220,40,20);
			ellipse(x+80,y+220,40,20);
			ellipse(x+60,y+200,20,40);
			ellipse(x+60,y+240,20,40);

			strokeWeight(1.5); //green petals within the orange circle//
			stroke(243,242,224); 
			fill(95,115,0);
			ellipse(x+45,y+205,20,20);
			ellipse(x+45,y+235,20,20);
			ellipse(x+75,y+235,20,20);
			ellipse(x+75,y+205,20,20);

			strokeWeight(2.5); //orange center//
			stroke(255,195,112);
			fill(255,119,1);
			ellipse(x+60,y+220,35,35);
		}
	}
}

I was inspired by the traditional pattern of Korea. I simplified the pattern so that I would be able to execute it with coding, and adhered to the color scheme in the reference shown below. It has a lot of repetition and symmetrical shapes, which I thought was interesting to show through computation. Also, how these traditional patterns are meant to be crafted and drawn by hand but could also be digitally generated was another point of interest. I had to split my pattern into parts because it did not let me layer some shapes on top of other shapes even though I carefully controlled the order of my lines of codes.

jamieh-Looking-Outwards-05

Diego Querol is a 3D artist and renders interior spaces as if the render itself was a photograph taken on site. He uses the modeling tool 3ds Max and rendering tool VRay to generate his renders. The entire process of generating an interior render starts from finding inspiration images on composition and details that could hint stories to modeling the interior pieces to adding textures and light. Within the process of rendering in VRay, the scale of the textures must match with reality and the multiple lighting options must be adjusted in a way that would enhance the rendering. For example, the scale of the pattern on the wood cannot be too big or small. And the treatment of glass and reflective surfaces because of the way light behaves on such surfaces (light is absorbed, transmitted and reflected on glass).

This type of artwork can bring a space to reality, which was once imagined. Querol also spends a lot of time and effort focusing on adding in details and filling the space with what is needed in order to convey a story or an atmospheric environment. This can be seen through his Arts and Crafts (below) rendered artwork, which is one of my favourite works of his.

Nayeon-Project05-WallPaper

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-05 (WallPaper)

function setup() {
    createCanvas(451, 600);
    background(255);
    noStroke();
}

function draw() {
  //background pattern
    for (var x = 0; x < width + 50; x += 50) {
      for (var y = 0; y < height + 50; y += 50) {
        fill(230, 130, 90, 100);
        ellipse(x, y, 100, 100);
      }
    }
  //white lines
    var x = 0;
    var y = 0;
    var len = height;
    var spacing = 50;

    for (var x = 25; x < width; x += spacing) {
  //white lines_thick line
      strokeWeight(8);
      stroke(255, 200);
      line(x, y, x, y + len);
  //white lines_thin lines
      strokeWeight(2);
      stroke(255, 180);
      line(x + 8, y, x + 8, y + len);
      line(x + 42, y, x + 42, y + len);
    }
  //flowers
    push();
    var px = 0;
    var py = 0;
    for (var px = 0; px < width; px += spacing) {
      for (var py = 0; py < height + 50; py += 50) {
      flower(px, py);
    pop();
    }
  }
    noLoop();
}
  //flower draw function
  function flower(px, py) {
    push();
    translate(px, py);
    noStroke();
    for (var i = 0; i < 6; i ++) {
      fill(250, 80, 60);
      ellipse(0, 0, 6, 15);
      rotate(PI/4)
      fill(255);
      ellipse(0, 0, 3, 3);
    }
  }

I got inspired by this wallpaper. It reminds me of grandparents house.

From this image, I tried to make something similar, but using loop function and shapes. It was fun to manipulate some var and loops to create different images. Changing small position creates whole other images.

Matthew Elrebacher Looking Outward-05

One piece of 3D art that I found to be very interesting was “I am no Chuck Close” by Patrick Gunderson. I find the piece to be strangely mesmerizing. It is obvious that it is supposed to be a face, but the disjointed appearance of the piece gives it a feeling of unease. A big part of this is how the eyes are obscured. I also feel that the green background gives me the impression that the face is lost in time. This is further enforced by the random crescent moon shapes put around the canvas. The algorithms used to create this were likely very complex. I assume he used a large amount of loop variables to create lines, as well as geometric shapes. It is also possible that he worked on this in a modeling program such as maya or blender.

Gunderson, Patrick. “I Am No Chuck Close.” Flickr, Yahoo!, 11 Mar. 2009, www.flickr.com/photos/gunderson/3345620341/in/photostream/.

jooheek-Project05-Wallpaper

sketch

function setup() {
    createCanvas(450, 450);
    ellipseMode(CENTER);
    angleMode(DEGREES);
}

function draw() {
	background(255, 227, 238);

	noStroke();

	//orange position variables
	var orangeX = 0;
	var orangeY = 50;

	//start of loops for oranges
	for (orangeY = 0; orangeY < 500; orangeY += 115) {
		for (orangeX = 0; orangeX < 500; orangeX += 115) {

			//shadow of oranges
			fill(191, 128, 153);
			ellipse(orangeX + 5, orangeY + 5, 70, 70);

			//if-else that makes orange slices at every even increment
			//and whole oranges at every odd increment
			if ((orangeX+1)%2 == 0) {

				//outer orange peel circle
				fill(249, 201, 65);
				ellipse(orangeX, orangeY, 70, 70);

				//inner lighter orange peel circle
				fill(249, 234, 175);
				ellipse(orangeX, orangeY, 60, 60);

				//inner orange slice sections
				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 7, 72);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 79, 144);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 151, 216);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 223, 288);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 295, 360);

			} else {

				//whole orange peel
				fill(249, 201, 65);
				ellipse(orangeX, orangeY, 70, 70);

				//orange shine circles
				fill(249, 225, 130);
				ellipse(orangeX + 23, orangeY - 10, 10, 10);

				fill(249, 225, 130);
				ellipse(orangeX + 15, orangeY - 20, 5, 5);

				//orange leaf
				fill(99, 187, 83);
				ellipse(orangeX - 10, orangeY - 35, 15, 8);
			}
		}
	}

//cherry variable positions set to be in middle of each orange increment
	var cherryX = 57;
	var cherryY = 57;

	//start of for loops for cherries
	//same increment but starts at the middle of orange increment
	for (cherryY = 57; cherryY < 500; cherryY += 115) {
		for (cherryX = 57; cherryX < 500; cherryX += 115) {
			//stem shadows
			stroke(211, 148, 173);
			strokeWeight(3);
			noFill();
			//right stem shadow
			arc(cherryX + 18, cherryY + 8, 60, 60, 180, 250);
			//left stem shadow
			arc(cherryX + 38, cherryY - 22, 70, 70, 123, 170);

			//stems
			//right stem
			stroke(99, 187, 83);
			arc(cherryX + 15, cherryY + 5, 60, 60, 180, 250);
			//left stem
			arc(cherryX + 35, cherryY - 25, 70, 70, 123, 170);

			//leaf shadow
			noStroke();
			fill(211, 148, 173);
			ellipse(cherryX + 13, cherryY - 18, 20, 10);
			//leaf
			fill(99, 187, 83);
			ellipse(cherryX + 10, cherryY - 21, 20, 10);

			//cherries
			//right cherry shadow
			fill(211, 148, 173);
			ellipse(cherryX + 18, cherryY + 18, 20, 20);
			//left cherry shadow
			fill(211, 148, 173);
			ellipse(cherryX -12, cherryY + 18, 20, 20);
			//right cherry
			fill(239, 58, 71);
			ellipse(cherryX + 15, cherryY + 15, 20, 20);
			//left cherry
			fill(239, 58, 71);
			ellipse(cherryX - 15, cherryY + 15, 20, 20);
			//left cherry shine
			fill(249, 125, 135);
			ellipse(cherryX + 18, cherryY + 10, 5, 5);
			//right cherry shine
			fill(249, 125, 135);
			ellipse(cherryX - 12, cherryY + 10, 5, 5);
		}
	}

}

I started by looking at inspiration from the Internet and found cute fruit wallpapers that I really liked, so I decided to do some kind of wallpaper with oranges. But, I realized that just oranges seemed too bland and wanted to add some other fruit that would compliment it, so I chose the cherry. I also wanted to have some kind of element alternate, so I made the whole orange and sliced orange alternate.

Sheenu-Project-05-Background

sketch

function setup() {
    createCanvas(480, 480);
    background("#F9CDAD");
}

function draw() {
	for(var x=0; x<=8; x++){
		for(var y=0; y<=8; y++){
		fill(255);
		noStroke();
		//GUIDE
		//rect(x*60,y*60,60,60);
		//GREEN Lines
		stroke("#83AF9B")
		strokeWeight(8);
		line(x*60,68+y*60,68+x*60,y*60);
		stroke("#C8C8A9")
		strokeWeight(4);
		line(x*60,68+y*60,68+x*60,y*60);
		//RED Lines
		
		stroke("#FE4365")
		strokeWeight(15);
		line(-8+x*60,-8+y*60,68+x*60,68+y*60);
		stroke("#FC9D9A")
		strokeWeight(8);
		line(-14+x*60,-14+y*60,74+x*60,74+y*60);
		


	}
	}
}

I really aimed to make this background look visually pleasing color-wise. I found a palette online I really liked and used it to color this striped background. I think it looks really nice and looks like a background for a bakery or a candy. I would totally wear a texture like this around school. I made the canvas 480×480 and divided it by 8 giving me 60, meaning that 64 60×60 squares will fill the whole entire canvas. I started with a draft rectangle and worked on the texture from there.

jwchou-project05-wallpaper

sketch 285

// Jackie Chou
// Section E
// jwchou@andrew.cmu.edu
// Project-05-Wallpaper

function setup() {
    createCanvas(480, 480);
    //background(161, 209, 255);
    background(164, 225, 219);

    var move;
    var r;
    var g;
    var b;
    var num;

    var cloudX = random(0, width); //random location of cloud 1
    var cloudY = random(0, height);

    var cloudX1 = random(0, width); //random location of cloud 2
    var cloudY1 = random(0, height);

    var cloudX2 = random(0, width); //random location of cloud 3
    var cloudY2 = random(0, height);

    var cloudX3 = random(0, width); //random location of cloud 4
    var cloudY3 = random(0, height);

    var cloudX4 = random(0, width); //random location of cloud 5
    var cloudY4 = random(0, height);

    var cloudX5 = random(0, width); //random location of cloud 6
    var cloudY5 = random(0, height);

    //cloud 1
    noStroke();
    fill(255, 255, 255, 80);
    ellipse(cloudX, cloudY, 70, 50);
    ellipse(cloudX + 15, cloudY - 10, 60, 40);
    ellipse(cloudX + 30, cloudY + 15, 40, 30);
    ellipse(cloudX + 35, cloudY, 50, 30)

    //cloud 2
    ellipse(cloudX1, cloudY1, 100, 70);
    ellipse(cloudX1 + 15, cloudY1 - 10, 70, 50);
    ellipse(cloudX1 + 30, cloudY1 + 15, 80, 50);
    ellipse(cloudX1 + 35, cloudY1, 50, 30)
 
    //cloud 3
    ellipse(cloudX2, cloudY2, 70, 50);
    ellipse(cloudX2 + 15, cloudY2 - 10, 50, 30);
    ellipse(cloudX2 + 30, cloudY2 + 15, 30, 10);
    ellipse(cloudX2 + 35, cloudY2, 40, 20)

    for(var y = 0; y < 6; y++) {
        if (y % 2 == 0) { //is row is even
            move = 45; //offset by 35
            r = 222; //pink
            g = 147;
            b = 142;
            num = 4; //have four planes

        } else {
            move = 0; //if row is odd, offset by zero
            r = 202; //purple
            g = 151;
            b = 222;
            num = 5; //have five plaes
        }
       
        for(var x = 0; x < num; x++) {
            xPos = x * 90 + move + 25; // x Position + offset
            yPos = y * 75 + 20; // y Position

            noStroke();
            fill(190);
            ellipse(xPos + 40, yPos + 40, 70, 11); //wings
            ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
            fill(108, 190, 225);
            ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
            ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
            ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
            fill(0);
            ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
            ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
            fill(190);
            ellipse(xPos + 40, yPos + 15, 5, 17); //tail
            fill(0);
            beginShape(); //cockpit
            vertex(xPos + 35, yPos + 50);
            vertex(xPos + 40, yPos + 57);
            vertex(xPos + 45, yPos + 50);
            vertex(xPos + 45, yPos + 45);
            vertex(xPos + 40, yPos + 50);
            vertex(xPos + 35, yPos + 45);
            vertex(xPos + 35,yPos +  50);
            endShape();

    }

    //cloud 4
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(cloudX3, cloudY3, 70, 50);
    ellipse(cloudX3 + 15, cloudY3 - 10, 60, 40);
    ellipse(cloudX3 + 30, cloudY3 + 15, 40, 30);
    ellipse(cloudX3 + 35, cloudY3, 50, 30)

    //cloud 5
    ellipse(cloudX4, cloudY4, 100, 70);
    ellipse(cloudX4 + 15, cloudY4 - 10, 70, 50);
    ellipse(cloudX4 + 30, cloudY4 + 15, 80, 50);
    ellipse(cloudX4 + 35, cloudY4, 50, 30)
 
    //cloud 6
    ellipse(cloudX5, cloudY5, 70, 50);
    ellipse(cloudX5 + 15, cloudY5 - 10, 50, 30);
    ellipse(cloudX5 + 30, cloudY5 + 15, 30, 10);
    ellipse(cloudX5 + 35, cloudY5, 40, 20)

}
}

For this project, I was inspired by a sweater I used to own that had a bunch of planes on it. I wanted to create something in the same vein, and I also wanted to incorporate a few random elements, which became a few clouds in the pattern that have random coordinates.

akluk – Section A – Looking outwards-05

The project that I was inspired by that was related to 3-dimensional graphics is Lee Grigg’s Xgen’s 3D renderings, created in 2014.

What I believe makes these renderings interesting is the fact that each surface is created by elevating or moving a “3D’ pixel to create structures and models. As we know, the basis of all computer graphics is visualizing data, and this is achieved with pixels, the building blocks of all images in computers. It is impressive that even something ground in such structured and calculated can create renderings reminiscent of occurrences in real life. While the artist simply used a program, Maya and Arnold, to create the renderings and graphics. What really impresses me is the program that is able to simulate “vision”, where it can determine shadows, depth, colors, and lighting. That is truly what is impressive about 3D graphics. The artist always seems to like to create 3D models but not smooth renderings but with disjointed and pixelated methods. Below is a link to the referred work.
Maya XGen Colored Cubes and Spheres Rendered with Arnold

hschung-LookingOutwards-05

2016 AICP Sponsor Reel – Dir Cut from Method Studios on Vimeo.

When I think of impressive or inspiring 3D computer graphics, I am intensely drawn to this animated video that worked with Major Lazer’s “Light It Up.” Deluxe’s Method Studios was hired by production company RSA to produce this video. They used motion capture technology in conjunction with procedural animation and dynamic simulations. It has a variety of different characters with wildly unique body types and interesting textures that are not usually paired with human figures, and works in sync with music as well. I am intrigued by this video every time I watch it, because it looks so believable, and yet the textures and behaviors of the people dancing in the video would never make sense in real life. I really like it because its creators were able to take his imaginative characters and render them believably so that other people could see his creation. It’s so fantastically imaginative and entertaining.