Month: September 2018

Sean Meng – Project 5

sketch


function setup() {
    createCanvas(500, 500);

}

function draw() {
    
    background(245,245,220);
    noStroke()
//The repreating circles 
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            fill(178,34,34);   
            ellipse(50*x + 25, 50*y + 40, 10, 10);

        }

    }
//The first set of vertical shapes
    for (var a = 0; a < 5; a++) {
        for (var b = 0; b < 7; b++) {
            fill(0,0,139);
            rect(a*100, b*60, 5, 200)
        }
    }

//The second set of vertical shapes    
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            fill(210,180,140)
            rect(i*100+45, j*50, 20, 200)
        }
    }
//The first set of horizontal shapes
    for (var m = 0; m < 5; m++) {
        for (var n = 0; n < 15; n++) {
            fill(240,230,140)
            rect(m*120, n*50, 300, 3)
        }    
    }
//The second set of horizontal shapes
    for (var p = 0; p < 5; p++) {
        for (var q = 0; q < 15; q++) {
            fill(255)
            rect(p*120, q*50+20, 300, 12)
        }    
    }
    
}

Speaking of something that I would wear everyday, plaid pattern is one of my favorites. In this project, I played with simple geometries and designed this multicolored plaid pattern. And I added circle shapes to contrast with the rectangles to increase the visual balance.

Xiaoying Meng- Looking Outwards 05

(Phillips Exeter Academy Library by Alex Roman)

These are two photo-realistic architecture renders made by Alex Roman. Other examples can be found here. The quality of light and texture make the renders look like photos. I admire 3D computer renders such as this one because they make the viewers feel like they are in the space, looking at the building. They emphasize the details of the building, qualities that people might miss. I think the algorithms that rendered the works might be linking color and light intensity together, using different colors to describe the quality of light. The algorithms might also be using the size of pixels to describe the smooth/roughness of materials. The artist can choose to express a specific quality of the building or the vibe he/she wants the viewer to experience.

 

Lan Wei-Project-02-Variable-Face

sketch

var facePink = 20;
var eyeW = 50;
var eyeH = 7;
var eyebrowH1 = 270;
var eyebrowH2 = 270;
var mouthH = 355;

function setup() {
    createCanvas(640, 480);
    background(255, 196, 238);
    strokeWeight(3);
}

function draw() {
    //hat
    fill(196, 42, 42);
    stroke(196, 42, 42);
    ellipse(300, 260, 205, 195);

    //quilt
    ellipse(300, 570, 320, 500);
    stroke(232, 139, 139);
    push();
    strokeWeight(40);
    beginShape();
    curveVertex(240, 350);
    curveVertex(240, 290);
    curveVertex(230, 370);
    curveVertex(350, 440);
    curveVertex(360, 470);
    curveVertex(350, 500);
    curveVertex(330, 600);
    curveVertex(330, 700);
    endShape();
    pop();

    //face
    fill(250, 240, 200);
    stroke(250, 240, 200);
    beginShape();
    curveVertex(220, 100);
    curveVertex(220, 240);
    curveVertex(230, 350);
    curveVertex(300, 400);
    curveVertex(370, 350);
    curveVertex(380, 240);
    curveVertex(380, 100);
    endShape();
    push();
    fill(232, 169, 132);
    stroke(232, 169, 132);
    ellipse(250, 360, facePink, facePink);
    ellipse(350, 360, facePink, facePink);
    pop();

    //eyebrow
    stroke(0);
    push();
    strokeWeight(5)
    line(230, eyebrowH1, 270, eyebrowH2);
    line(370, eyebrowH1, 330, eyebrowH2);
    pop();

    //eye
    line(220, 320, 270, 330);
    push();
    translate(350, 325);
    fill(255);
    strokeWeight(2);
    rotate(radians(-7));
    ellipse(0, 0, eyeW, eyeH);
    strokeWeight(3);
    ellipse(-2, 0, 5, 5);
    pop();

    //mouth
    fill(250, 70, 70);
    stroke(250, 70, 70);
    triangle(300, mouthH, 293, 375, 307, 375);
    fill(255);

    //hair
    fill(0);
    stroke(0);
    quad(220, 241, 170, 330, 230, 370, 230, 350);
    quad(380, 241, 370, 241, 370, 370, 450, 330);

    //hat part 2
    fill(207, 71, 71);
    stroke(207, 71, 71);
    ellipse(300, 247, 175, 45);
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    facePink = random(15, 30);
    eyeW = random(45, 52);
    eyeH = random(7, 40);
    eyebrowH1 = random(250, 270);
    eyebrowH2 = random(265, 285);
    mouthH = random(350, 370);
}

It’s fun to add dynamic effect to an image with randomness. And I find the mousePressed() function very useful to interact with audiences.

yinjiet-LookingOutwards-05

3D Computer Graphics — Transformers

CGI & VFX Showreels: ILM “Transformers 3” by Brad Kinley

Talking about three dimensional computer graphics art, Transformers series must be one of the masterpieces.  The 165-minute movies are mostly about intricate giant robot actions. It is extremely data-heavy behind the scene. The artwork starts with a lot of design and photoshop in 2D. Then they producers turn the 2D artworks into a 3D characters and built all its little pieces little by little. For example, Optimus has over 10000 pieces in him and every single piece in him has to modeled correctly. For me, the whole movie is like a collection and every single robot is like a piece of 3D computational artwork. With all the structures, colors, animations and etc come together, the robots become realistic on the screen.

source link: https://www.creativebloq.com/making-transformers-3123105

 

Sean Meng – Looking Outwards 5

The Avatar

The left image shows the blue cat-like alien Neyitiri shouting. The right image shows the actress who portrays her, Zoe Saldana, with motion-capture dots across her face and a small camera in front of her eyes.

The computational-capture graphics technique

Speaking of computational 3D artwork, the first project that comes to  my mind is definitely the 2009 sci-fic movie Avatar by James Cameron. I still remember when I first saw the movie, I was totally shocked by the breathtakingly beautiful scene: the Avatars, the enormous valley, the dragons etc. I was even more surprised when I knew those graphics were computer generated. The director planned to make use of photorealistic computer-generated characters, created using new motion capture animation technologies he had been developing in the 14 months leading up to December 2006. Innovations include a new system for lighting massive areas like Pandora’s jungle, a motion-capture stage or “volume” six times larger than any previously used, and an improved method of capturing facial expressions, enabling full performance capture. To achieve the face capturing, actors wore individually made skull caps fitted with a tiny camera positioned in front of the actors’ faces; the information collected about their facial expressions and eyes is then transmitted to computers.

Reference:

http://www.avatarmovie.com/

Project 05 – Min Lee

sketch

function setup() {
    createCanvas(600, 600);
    background(169, 209, 226);
}

function draw() {
	// milk boxes 
	var xPosition = 0;
	var yPosition = 0;
	translate(0, -50);
	fill(255);

	for (var y = 1; y < 12; y++) {
		for (var x = 0; x < 10; x++) {
			if (y % 2 == 0) {
				var spaceX = 90;
				var spaceY = 60;
				//milk face
				quad(xPosition + spaceX * x, yPosition + spaceY * y,
				xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y, 
				xPosition + spaceX * x, yPosition + 70 + spaceY * y);
				//milk side
				quad(xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition + 58 + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y);
				//milk middle
				quad(xPosition + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y);
				//milk top
				quad(xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 - 3 + spaceY * y, 
				xPosition + 10 + spaceX * x, yPosition - 22 - 3 + spaceY * y)
				//milk triangle
				triangle(xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y);
				//box crease
				line(xPosition + 50 + 6 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 7 + spaceY * y)
				//milk eyes
				push();
				fill(0);
				ellipse(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
				ellipse(xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
				curve(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 
					xPosition + 20 + spaceX * x, yPosition + spaceY * y + 20 + 6,
					xPosition + 32 + spaceX * x - 2, yPosition + spaceY * y + 20 + 6,
					xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20)
				pop();

			} else {
				var spaceX = 75;
				var spaceY = 60;
				//milk face
				quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y, 
				xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
				//milk side
				quad(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition + 58 + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
				//milk middle
				quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y);
				//milk top
				quad(xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y, 
				xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y)
				//milk triangle
				triangle(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y);
				//box crease
				line(xPosition + 50 + 6 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 7 + spaceY * y)
				//milk eyes
			};
		};
	};
}

For this project I wanted to create a wallpaper full of cute milk boxes with different faces, but I came across a problem trying to create the second face, so it’s not as cute. I’d still drink it.

Yingying Yan-Project-05-Wallpaper

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-05
*/

var oy = 0; // orginal y position
var ox = 0; // original x position 
var tw = 50; // the width spacing
var th = 50; // the height spacing

function setup() {
    createCanvas(585, 600);
    background(234, 185, 83);

}

function draw() {
	// for all the odd rolls and columns, we will draw flowers
	//by calling the x and y position
	for (var y = 0; y < 20; y++) {
	    for (var x = 0; x < 20; x++) {
	    	if((x % 2 == 1) & (y % 2 == 1)){
            var py = oy + y * th;
            var px = ox + x * tw;
            push();
            flower(px, py);
            pop();
        }
    // for all the even rolls and columns, we will draw cactus
    // by changing the x and y position
            if ((x % 2 == 1) & (y % 2 ==1)){
        	var ly = oy + y * th;
        	var lx = ox + x * tw;
        	push();
        	cactus(lx, ly);
        	pop();

        }
    }
}

noLoop();
}

// function that draws the flower with variables x and y
function flower (x,y) {
	translate (x, y);
	scale(0.5)
	for (var i = 0; i < 7; i += 1) {
        fill(147, 87,37, 100);
        noStroke();
		rectMode(CENTER);
		ellipse (0, 0, 20, 100);
		rotate(radians(45));
	}
}

//function that draws cactus and called by variable x and y 
function cactus(x, y) {
    translate(x,y);
    scale(0.5);
    noStroke();
    //the vertical stem
    fill(90,87,36, 140);
	ellipse(100, 100, 10, 100);
    // the left rectangle bend
	push()
	noStroke();
	translate(85,110);
	rotate(radians(30))
	rectMode(CORNER);
	rect(0,0, 20, 8);
	pop();
    //the left ellipse or branch
	push();
	noStroke();
	translate(83, 112);
	rotate(radians(-50));
	ellipse(0,0, 10, 30);
	pop();
    //the branch on the right side
    push();
	translate(100,100)
	rotate(radians(-120));
	ellipseMode(CORNER);
	ellipse(0, 0, 10, 50);
	pop();


}

I wanted to draw minions and bananas, but it was too challenging so I ended up drawing flowers and cactus. I like how I accidentally made my flower transparent, that was cool. Then I basically used assignment B’s method to place my flowers and cactus. This project is a little bit stressful than the other ones. As you can tell I turned this in 5 minutes before it is due.

Katherine Hua – Project-05 – Wallpaper

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-05 */

function setup() {
    createCanvas(600, 600);
    background(213, 233, 233);
    noLoop();
}


function draw() {
	var potatoOX = 70; // original x point of potato
    var potatoOY = 80; // original y point of potato
    var potatoW = 80; // width of potato
    var potatoH = 100; // height of potato
    var tw = 90;
    var th = 110;

	for (var y = 0; y < 5; y++) {
		for (var x = 0; x < 6; x++) {
			//POTATO
    		var potatoX = potatoOX + x * tw; // x position of following potatoes
    		var potatoY = potatoOY + y * th; // y position of following potatoes

   			//body
    		strokeWeight(1);
    		stroke(109, 90, 61);
    		fill(231, 193, 144); 
		 	ellipse(potatoX, potatoY, potatoW, potatoH);

		 	//eyes
		 	strokeWeight(4);
		 	point(potatoX - 25, potatoY - 7);
		 	point(potatoX + 2, potatoY - 7);

		 	//right arm
		 	strokeWeight(1);
		 	beginShape();
		 	curveVertex(potatoX + 2, potatoY + 10);
		 	curveVertex(potatoX + 2, potatoY + 10);
		 	curveVertex(potatoX - 5, potatoY + 11);
		 	curveVertex(potatoX - 10, potatoY + 15);
		 	curveVertex(potatoX - 7, potatoY + 20);
		 	curveVertex(potatoX + 5, potatoY + 20);
		 	curveVertex(potatoX + 5, potatoY + 20);
			endShape();

			//left arm
			beginShape();
		 	curveVertex(potatoX - 5, potatoY + 10);
		 	curveVertex(potatoX - 25, potatoY + 10);
		 	curveVertex(potatoX - 18, potatoY + 11);
		 	curveVertex(potatoX - 13, potatoY + 15);
		 	curveVertex(potatoX - 16, potatoY + 20);
		 	curveVertex(potatoX - 24, potatoY + 20);
		 	curveVertex(potatoX - 24, potatoY + 20);
		 	endShape();

			//left foot
			beginShape();
		 	curveVertex(potatoX - 20, potatoY + 30);
		 	curveVertex(potatoX - 20, potatoY + 30);
		 	curveVertex(potatoX - 27, potatoY + 31);
		 	curveVertex(potatoX - 32, potatoY + 35);
		 	curveVertex(potatoX - 29, potatoY + 40);
		 	curveVertex(potatoX - 17, potatoY + 40);
		 	curveVertex(potatoX - 17, potatoY + 40);
		 	endShape();

			//right foot
			beginShape();
		 	curveVertex(potatoX + 10, potatoY + 30);
		 	curveVertex(potatoX + 10, potatoY + 30);
		 	curveVertex(potatoX + 3, potatoY + 31);
		 	curveVertex(potatoX - 2, potatoY + 35);
		 	curveVertex(potatoX + 1, potatoY + 40);
		 	curveVertex(potatoX + 13, potatoY + 40);
		 	curveVertex(potatoX + 13, potatoY + 40);
		 	endShape();

			//mouth
			fill(246, 232, 226);
			ellipse(potatoX - 12, potatoY - 3, 12, 6);
			
		
		}
	}
}

I wanted to recreate one of my stuffed animals. It is so cute. I wish I could have given him a friend in my design, but I ran out of time. Through this project, I familiarized myself more with how to use curveVertex functions to create shapes such as the arms and the legs. Although they are small parts of the character I created, it took a while to get the curves and coordinates right. I can see this design being on phone cases, pencil pouches, stickers, digital backgrounds, etc. Below is a sketch of what I based my wallpaper’s character off of.

Robert Oh-LookingOutwards-05

“The Forest” by Joannie Leblanc

This luscious realistic forest graphic was created by Joannie Leblanc. I really admire Leblanc’s work because she is a lighting artist, creating realistic scenes for video games. You can see her specialty in lighting absolutely perfecting this art. This specific graphic was not part of a video game, but served as an experiment as to how important light can serve to create a 3-D environment. It really opened my eyes to how such small details (like lighting) can affect how I am able to view different pieces of art.

Leblanc was able to create this graphic using Unreal Game Engine 4. She states that she was able to create all this lighting details using their new lighting features.

I personally have never worked with the Unreal Game Engine, but I can guess that this graphic was made by meticulously placing different lighting angles all over the environment (in order to give you that depth and immersion).

All in all, I am incredibly impressed by the realistic attributes of this piece, and if all video games paid this much attention to detail, as a huger gamer, I would be very pleased 🙂 .

Project 5 rrandell

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 5 */


function setup() {
    createCanvas(400, 400);
    noLoop(); 
}
 
function draw() {
    background(205, 100, 230);

for (var y = 0; y < 450; y += 50) {
        for (var x = 0; x < 450; x += 50)
            //fill(100, 230, 240); for some reason I cant get this to change
            ellipse(x, y, 50, 50);
        }
    for (var i = 10; i < 600; i += 15) {
    	strokeWeight(3);
        line(i, 400, i, 0);
    }
}

For this project I wanted to think about classic lines and simple shapes, I really like when colors contrast on wallpaper so I tried to stay true to a contrasting and also retro vibe.