Sharon Yang Looking Outward 05 – 3D Art

Sergi Caballer is a 3D character modeler working at Walt Disney Animation Studios. He is the creator of 3D characters in various movies, some of the very well-known ones including Zootopia and The Pirate!. The 3D art project that I especially admire and so looked further into was Crocodile character from the film ‘Justin and the Knights of Valour’. As the film targeted towards quite young kids, the character is made to look both witty and friendly though crocodiles are typically described to be terrifying and vicious. Yet, the features of a crocodile in the character are mostly present and are quite realistic. As Caballer elaborates on this art work, it consisted of character modeling, facial shapes modeling and UV´s, which are all intricate processes, and it has taken two years (from 2009 to 2010) for completion. The work was done through using Softimage and uvLayout. He has fully adjusted the main facial structures as well as the additional corrective shapes, allowing for the character’s greater facial movements, once again, appropriate for the film’s audience.

Sergi Caballer’s Crocodile in the film ‘Justin and the Knights of Valour’ 2009-2010

 

Lingfan Jiang – Project 05 – Wallpaper

lingfanj-project05

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-05

var tx; //triangle positions
var tw = 60; //triangle width

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

function draw(){
    background(229, 249, 224);
    translate(-150, -200); //make sure the pattern fills canvas

    for (var tx = 0; tx < 800; tx += (1.25 * tw)){ //make sure the distance between the triangles stays 1.25 in x axis
        for (var j = 0; j < 20; j++){ //make the pattern repeats in the y axis

            fill(163, 247, 181);
            stroke(229, 249, 224);
            strokeWeight(10); //create a different visual effect where one group of triangles has lineweight and the other don't
            //calculating the positions of each points using tw and tx
            //basically all the triangles are based on the first triangle created in the left up corner
            triangle(tx + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
                    tx + tw + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
                    tx + tw / 2 + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw / 2) + (j * 3 * sqrt(3) / 4 * tw));


            fill(64, 201, 162);
            noStroke();
            //calculating the other group of triangles using tw and tx
            triangle(tx + 0.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw), 
                    tx + 1.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw), 
                    tx + 1.25 * tw + (j * tw / 4), (sqrt(3) * tx / 5) - (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw));
        }
    }
}

This is the starting idea of my wallpaper, and I really liked how triangles form the hexagon in the middle. However, when I get into the codes, I realized the difficulties to code triangles. In order to form the triangles, I have to calculate the positions of each point and the distance with other ones so that they could form the hexagon perfectly. It is also hard to lay out those triangles since they do not array in the x or y-axis directly. Instead, they move diagonally. Therefore, it is harder to use the nested loop. In the end, I played a little bit with line weights and color to make it look nicer and more interesting.

Looking Outwards 5 – 3D Computer Graphics

Star Wars: Rogue One, the second of the recent Star Wars spin offs, was a great success in the box office. This movie, unlike the other recent Star Wars remake, had a more difficult chronological placement. As a result, the writers of the film brought back many characters from a movie that was made in 1977. Due to the large span of time that has passed, one of the supporting actors, Peter Cushing, had passed away in the meantime. Instead of writing his character out of the new movie, the writers decided to ambitiously include the character Cushing played by recreating him through computer generation. Motion Capture Technology is a method of computer animation that involves using a real life actor whose motion in a role is recorded with intricate detail and then mapped to a CGI model that perfectly mimics the actor. The computer generated model of Cushing was rendered based on a plaster cast of his face that had been made in the 80s. The mapping onto this rendering was created by the actor wearing a mask with dots which move with his facial expressions and then replicating these same dot’s movements on the computer model. The effect is a flawlessly animated replication of a dead actor, the first time such a stunt has been pulled off.

Min Jun Kim- Looking Outwards 5


This is the scene from Dr.Strange that I thought was the most interesting out of CG effects. It is the open your eyes scene from Dr. Strange.

The 3D computer graphics project that stood out to me the most is the scene from the movie Dr. Strange. I thought that this scene was immensely visibly engaging and incorporates so many different elements, such as entities and even a butterfly. What I admire the most of it is simply how realistic it is and how it sucks the audience into a whole new reality. By referencing what we are familiar with, such as the planet Earth and a butterfly, we are able to see just how surreal the experience is. The point of CG typically is to make untrue things seem as realistic as possible, but with this project, its goal was the opposite- to make things seem bizarre as possible but with such technological skills to make the surreal look realistic and blend well with the actor himself. I admire these aspects because it is something so different and unique and at the same time memorable.
I think that the algorithms that were used to generate these scenes definitely used 3D algorithms like camera to make things more 3D. I also think that they used scale and translate in the parts where locations are being zoomed out, while the characters stay in the same place. The must have also used recursion because there were a lot of recurring elements when Dr. Strange is in the different dimensions.
The director’s artistic sensibilities manifested in the final form when he was able to tell such a compelling story with the crazy graphics. He used a voiceover to explain what is going on in the scene and how it relates to the story. Doing so anchors the intense and out-worldly CG into a rock-hard reality in the story and doesn’t confuse the audience but rather teaches them. I think that this particular scene sets up the story of the whole movie very well.

Source:
Movie: Dr. Strange
Director: Mads Mikkelsen
Actor in scene: Benedict Cumberbatch

Audrey Zheng – Project 04

I am using one of my autolab grace days for this project.

sketch

// Audrey Zheng
// Section A
// audreyz@andrew.cmu.edu
// Project 04

var cwidth = 300;
var cheight = 400;

var listPoints1 = new Array();
var listPoints2 = new Array();

function setup() {
    createCanvas(cwidth, cheight);
}

function strings() {

	stroke(0);


	var x = 10;
	var y = cheight/2;
	//var listPoints1 = new Array();

	for (var i = 0; i <21; i++) {

		point(x,y);

		var p = new Array(x,y);
		listPoints1.push(p);

		x += 14;

	}

	var x2 = cwidth/2;
	var y2 = 60;
	//var listPoints2 = new Array();

	for (var j = 0; j<21; j++) {

		point(x2,y2);

		var point2 = new Array(x2,y2);
		listPoints2.push(point2);

		y2 += 14;
	}

	noLoop();

	var start = 0;
	var end = 9;

	var start2 = 20;

	var end2 = 11;


	for (var k = 0; k<10; k++) {
		line(listPoints1[start][0], listPoints1[start][1], listPoints2[end][0], listPoints2[end][1]);
		line(listPoints1[start2][0], listPoints1[start2][1], listPoints2[end][0], listPoints2[end][1]);
		line(listPoints1[start2][0], listPoints1[start2][1], listPoints2[end2][0], listPoints2[end2][1]);
		line(listPoints1[start][0], listPoints1[start][1], listPoints2[end2][0], listPoints2[end2][1]);

		start += 1;
		end -= 1;

		start2 -= 1;
		end2 += 1;





	}

}




function draw() {
	background(220);

	stroke(255);
	line(10,cheight/2, 290, cheight/2);
	line(cwidth/2, 60, cwidth/2, cheight-60);

	strings();
    
}

function mousePressed() {
	print(listPoints2.length);
	print(listPoints1.length);
	print("5");

}

project 04

sketch.js

/*
Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-04
*/

function setup() {
    createCanvas(400, 300);
    background(0);
   
}

function draw() {
//curves
for(var i=10; i <200; i+=15) {
    stroke(13,238,255);
    line(i,20,320, i);
}

for(var i=20; i <400; i+=15) {
    stroke(13,238,255);
    line(200,i,i, 300);
}

for(var i=20; i <400; i+=15) {
    stroke(13,238,255);
    line(25,i,i, 275);
}

for(var i=20; i <400; i+=15) {
    stroke(13,238,255);
    line(25,i,i, 275);
    }

for(var i=10; i <700; i+=15) {
    stroke(13,238,255);
    line(i,100, 300,i);
    }



  var x = 0;
//red beams
    for (var i = 0; i < 50; i++) { 
    //for loop allows me to control the width of the beam of lines starting from a certain point 
        stroke(255, 0, 0);
        strokeWeight(1);
        line(300, 300, x, mouseY); //moves on mouse Y
}

//blue beams
var j = 1;
       for (var i = 4; i < 100; i++) { 
        j += 10;
        stroke (0, 0, 255);
        strokeWeight(2);
        line(300, 300, mouseX, 0);// moves on mouse x 
    }
//green beams
var w = 100;
       for (var i = 4; i < 200; i++) {
        stroke (0,255,0);
        strokeWeight(.5);
        line(400, 0, w, mouseY);//moves on mouse Y
    }
//yellow beams
var g = 100;
       for (var i = 5; i < 20; i++) {
        stroke (255,255,0);
        strokeWeight(.5);
        line(0, 0, mouseX, 275);// moves on mouse x 
    }
//purple beams
var m = 100;
       for (var i = 5; i < 50; i++) {
        stroke (252,141,255);
        strokeWeight(.5);
        line(25, 275, mouseX, mouseY);//moves on mouse Y and X
    }

//rect border
noFill();
stroke(255);
rect(20,20,355,255)

stroke(0);
strokeWeight (4);
rect(0,0,400,300);



}

I made my work look like laser beams at a concert. I used for loops to create the beams of lines together as well as the series of lines that created curves.

Project 4 rrandell

sketch

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

function setup() {
    createCanvas(400, 300);
    background(210, 40, 230);
}

function draw() {

	for(var i = -40; i < 600; i += 20){
		strokeWeight(4);
		stroke(200, 50, 180);
		line(i, 150, 150, i);

	}
	for(var x = 0; x < 300; x += 15){
		strokeWeight(2);
		stroke(180, 20, 170);
		line(x, 200, 100, x);
	}
	for(var y = 0; y < 400; y += 10){
		strokeWeight(2);
		stroke(170, 70, 190);
		line(y, 0, 300, y);
	}
	for(var r = 60; r < 200; r += 5){
		strokeWeight(.5);
		stroke(210, 30, 150);
		line(r + 6, 0, 400, r);
	}
	for(var q = 80; q < 300; q += 7){
		strokeWeight(.1);
		stroke(255, 0, 100);
		line(q, 300, 5, q)
	}
	for(var e = 30; e < 600; e += 10){
		strokeWeight(1)
		stroke(250, 30, 200);
		line(200, e, e, 100)
	}

}

For my project I wanted to see how shades of pink interacted with each other and how the curves can frame parts of the canvas.

Project 04: String Art

sketch

/* Samantha Ho
Section E 
sch1@andrew.cmu.edu
Project 04*/

function setup() {
	createCanvas(400  , 300);

	}

function draw() {
    background(240,240,240);
	//back dark wave
       	strokeWeight(2);
	stroke(0,0,255);
	x1 = 30;
	x2 = 40;
	y1 = 400;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}

    //light back wave
	strokeWeight(2);
	stroke('cyan');
	x1 = 0;
	x2 = 60;
	y1 = 500;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //light thin wave
	strokeWeight(2);
	stroke('cyan');
	x1 = 0;
	x2 = 60;
	y1 = 500;
	y2 = 50;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //green horizon wave
	strokeWeight(2);
	stroke(0,230,230);
	x1 = 0;
	x2 = 400;
	y1 = 150;
	y2 = 100;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
     //red horizon wave
	strokeWeight(.5);
	stroke(0,230,230);
	x1 = 0;
	x2 = 400;
	y1 = 500;
	y2 = 100;
	for (var i = 0; i < 20; i += 1) {//move the waves
		x1 += min(mouseX, 300);
		y2 += 15;
		line(x1, y1, x2, y2);
	}
    
 
	//sunrays
	strokeWeight(2);
	stroke('yellow');
	x3 = 0;
	x4 = -300;
	y3 = 0;
	y4 = 300;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 600);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
    //dark sunrays
    strokeWeight(2);
	stroke(200,200,0);
	x3 = 0;
	x4 = -200;
	y3 = 0;
	y4 = 300;
	for (var i = 0; i < 20; i += 1) {
		x4 += min(mouseX, 600);
		y3 -= 15;
		line(x3, y3, x4, y4);
	}
}

I made this because I was inspired by the quality of the “strings”. I wanted to make an entire moving picture with a horizon and everything. I found it difficult though to completely control the landscape. It may be due to the quality of the “material”, but conceptually it was challenging to wrap my head around the forms.

Liz Maday Project 4

liz m proj 4 

//Elizabeth Maday
//emaday@andrew.cmu.edu
//Section A
//Project 04

//big purple variables
var x1; 
var y1;
var x2;
var y2;
//orange variables
var a1; 
var b1;
var a2;
var b2;
// corner a variables
var c1;
var d1;
var c2;
var d2;
//corner b variables
var e1;
var f1;
var e2;
var f2;
//click variables
var jump;
var eyeSize;

function setup() {
	createCanvas(400, 300);
}

function draw() {
	background(0);
	strokeWeight(0.75);

    //big purple variables
    var x1 = 25;
    var y1 = height + 5;
    var x2 = 380;
    var y2 = 0;

    //big purple web
    for(i = 0; i < 25; i += .6) {
    	x1 += 5;
    	y1 -= 5;
    	x2 -= 4;
        y2 += 0;
    	stroke('purple');
    	line(x1, y1, x2, y2); 
    }

    //orange variables
        var a1 = 50
        var b1 = -40;
        var a2 = width - 200;
        var b2 = height + 20;

    //orange web
    for (i = 0; i < 37; i += .6) {
        a1 -= 3;
        b1 += 2;
        a2 += 5;
        b2 -= 0.5;
        stroke(255, 85, 0);
        line(a1, b1, a2, b2);
    }

    //corner a variables
    c1 = 0;
    d1 = height - 120;
    c2 = 70;
    d2 = height;

    //corner a web
    for (i = 0; i < 30; i += .5) {
    	c1 = 0
    	d1 = height - 120;
    	c2 -= 2;
    	d2 += 8;
    	strokeWeight(0.65);
    	stroke(0, 93, 68);
    	line(c1, d1, c2, d2);
    }

    //corner b variables
    e1 = -40;
    f1 = height - 90;
    e2 = 105;
    f2 = height;

    //corner b web
    for (i = 0; i < 30; i += .5) {
    	e1 += 1;
    	f1 += 2;
    	e2 = 105;
    	f2 += 5;
    	strokeWeight(0.65);
    	stroke(0, 93, 35);
    	line(e1, f1, e2, f2);
    }    

    //jump variable
    var jump = 0;
    var eyeSize = 2.5;

    if (mouseIsPressed) {
    	//stars
        for (i = 0; i < 100; i++) {
        
            fill('white');
            textSize(5);
    	    text('*', random(400), random(300));
        }

        //stars
        for (i = 0; i < 100; i++) {        
            fill('purple');
            textSize(12);
    	    text('*', random(400), random(300));
        }
        
        var jump = 20;
        var eyeSize = 4;
    }

    //spider variables
    var spiderX = 242 + (jump * 1.5);
    var spiderY = 235 + jump;
    var bodyWidth = 24;
    var bodyHeight = 20;
    //spider legs left
    noFill();
    stroke(255);
    arc(spiderX - bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX - bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI - QUARTER_PI, 0 - QUARTER_PI);
    //spider legs right
    noFill();
    stroke(255);
    arc(spiderX + bodyWidth/2, spiderY, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2, spiderY + 4, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2, spiderY + 9, bodyWidth * 0.75, bodyHeight * 0.75, PI, 0);
    arc(spiderX + bodyWidth/2.5, spiderY + 10, bodyWidth * 0.5, bodyHeight * 0.5, PI + QUARTER_PI, 0 + QUARTER_PI);
    //spider body
    stroke(0);
    fill(0);
    ellipse(spiderX, spiderY, bodyWidth, bodyHeight);
    //spider eyes
    strokeWeight(eyeSize);
    stroke(255);
    point(spiderX - bodyWidth/4, spiderY);
    point(spiderX + bodyWidth/4, spiderY);
    //spider mouth
    strokeWeight(1);
    stroke(255);
    line(spiderX - bodyWidth/6, spiderY + 3, spiderX + bodyWidth/6, spiderY + 3);

}

When I started looking at examples of string art, I immediately thought of a spider web. I liked that I got to integrate a Halloween theme into this project. Make sure to click the image!

Jisoo Geum – Project 04 – String Art

sketch

// Jisoo Geum
// Section B
// jgeum@andrew.cmu.edu 
// Project-04

function setup (){
	createCanvas(400,300);
	background(255);
}

function draw(){
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var circS = 10;
	//var ix = 1.2;
	var iy = 1.1;
//rectangle 
	fill(255,150,143);
	noStroke();
	rect(190,0,215,190);

//ellipses 
     for (circX = 0; circX <= width; circX += 15 ){
     	for (circY = 0; circY <= height; circY +=10){
     		if (circY>180){break;} // makes the loop stop at a certain point 
     		if (circX>180){break;}
     	circY = circY * iy;
     	//draw circles 
     	stroke(255,126,143);
     	strokeWeight(.5);
     	// circles at top left
     	noFill();
     	ellipse(circX ,circY , circS ,circS );
     	// circles at the bottom right 
     	push();
     	translate(200,200);
     	ellipse(circX ,circY , circS ,circS );
     	pop();		
 		}	
 	}
    //point loops from top left  
    for (var i = 0; i < 80; i++){ // assign increment value as i 
        x1 += i+10;
        y1 += i;
        x2 += 20;
        y2 += 10; 
        // grey lines 
        stroke(90);
        line(100, 0, width, y1); 
        if (x1 > 500){break;}
        line(width, height, 90+x1, 0); 
        // light blue lines
        stroke(109,145,255);
        line(0, y1, x1, height); 
        // dark blue lines lines
        stroke(40,90,255);
        line(100, y1, x1+100, height);      
    }

}

 

This project was very experimental for me since the process was different from the previous ones. I usually draw my ideas in my sketchbook or illustrator, and then translate it into javascript. For the string art, however, I began straight from javascript and then decided on the other elements such as shapes and color. I think using the line loop was very difficult to me because I often got confused with the x and y coordinates.