## Sean Meng – Project 5

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

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

## Sean Meng – Looking Outwards 5

### The Avatar

###### 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

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

``````/*
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);
}
}

//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);
rectMode(CORNER);
rect(0,0, 20, 8);
pop();
//the left ellipse or branch
push();
noStroke();
translate(83, 112);
ellipse(0,0, 10, 30);
pop();
//the branch on the right side
push();
translate(100,100)
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

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

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

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