haewanp – Project 02 – Variable Face

Variable Face

//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Project-02-variable-Face

var eyeSize = 15;
var x = 10;
var y = 9;
var t = 5;
var faceY = 5;
var faceX = 3;
var color1 = 0;
var color2 = 150;
var color3 = 240;
var eyeX = 240;
var eyeY = 310;
var n = 10;
var v = 0;


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

function draw() {
    background(252);
    
    //hair
    noStroke();
    fill(255 - color1, 235, 70 + color1);
    beginShape();
    curveVertex(170, 220);
    curveVertex(width / 2 - (faceX+9)*x, 210);
    curveVertex(170, height / 2 - 3*y*faceY - 7*faceY); //
    curveVertex(230, height / 2 - 3*y*faceY - 7*faceY); //
    curveVertex(width / 2 + (faceX+5)*x, height / 2 - 3*y*faceY - 7*faceY);
    curveVertex(width / 2 + (faceX+6.5)*x, 195);
    curveVertex(305, 230);
    curveVertex(270, 215);
    curveVertex(265, height / 2 - 20*faceY);
    curveVertex(285, height / 2 - 14*faceY);
    curveVertex(240, height / 2 - 12*faceY);
    curveVertex(220, height / 2 - 18*faceY);
    curveVertex(210, 210);
    curveVertex(200, 230);
    curveVertex(180, 235);
    curveVertex(170, 220);
    curveVertex(width / 2 - (faceX+9)*x, 210);
    curveVertex(170, height / 2 - 3*y*faceY - 7*faceY);
    endShape();
    
    //cheek
    noStroke();
    fill(255 - color1/2, color2 - 50, 210 - color1);
    ellipse(width/2 + 70, 350, 8*x, 8*x);
    ellipse(width/2 - 80, 350, 8*x, 8*x);
    
    //face
    noFill();
    stroke(color1, color2 - 40, 255 - color1);
    strokeWeight(4.5);
    curveTightness(0);
    beginShape();
    curveVertex(width / 2 - (faceX+5)*x, height / 2 - (faceY+8)*y);
    curveVertex(width / 2 - (faceX+1)*x, height / 2 - 3.2*y*faceY); 
    curveVertex(width / 2 - (faceX-5)*x, height / 2 - 3.2*y*faceY); //
    curveVertex(width / 2 - (faceX-10.5)*x, height / 2 - 2.5*y*faceY);
    curveVertex(width / 2 + (faceX+7)*x, height / 2 - faceY*y);
    curveVertex(width / 2 + (faceX+5)*x, height / 2 + 9*y);
    curveVertex(width / 2 + (faceX-2)*x, height / 2 + 15*y);
    curveVertex(width / 2 - (faceX+4)*x, height / 2 + 12*y);
    curveVertex(width / 2 - (faceX+7)*x, height / 2 + faceY*y);
    curveVertex(width / 2 - (faceX+8)*x, height / 2 - faceY*y);
    curveVertex(width / 2 - (faceX+6)*x, height / 2 - (faceY+8)*y);
    curveVertex(width / 2 - (faceX+1)*x, height / 2 - 3.2*y*faceY);
    curveVertex(width / 2 - (faceX-5)*x, height / 2 - 3.2*y*faceY);
    endShape();
    
    //ear
    ellipse(width / 2 - (faceX+8.5)*x, height / 2 - (faceY-3)*y, 30, 40);
    ellipse(width / 2 + (faceX+7)*x, height / 2 - (faceY-3)*y, 30, 40);
    
    //eye
    ellipse(205 - faceY, eyeY - 35 + eyeSize/2, eyeSize, eyeSize);
    ellipse(275 + faceY, eyeY - 35 + eyeSize/2, eyeSize, eyeSize);

    stroke(255, color2 - 55, color2 - 40);
    
    curve(175 + faceY*(faceX/8), eyeY + 60 + 2*faceY, 
          175 + faceY*(faceX/8), eyeY - 40 + 2*faceY, 
          225 - faceY, eyeY - 40 + 2*faceY, 
          225 - faceY, eyeY + 60 + 2*faceY);
    curve(255 + faceY, eyeY + 60 + 2*faceY, 
          255 + faceY, eyeY - 40 + 2*faceY, 
          305 - faceY*(faceX/8), eyeY - 40 + 2*faceY, 
          305 - faceY*(faceX/8), eyeY + 60 + 2*faceY);
    
    //eyebrow
    line(width/2 - 55, eyeY - 70 + 7*v, width/2 - 25, eyeY - 60 + v);
    line(width/2 + 55, eyeY - 70 + 7*v, width/2 + 25, eyeY - 60 + v);
    
    
    //nose
    line(width / 2, 325, 240, 305);
    line(width / 2, 325, width / 2 - 2*n, 337);
    line(width / 2 - 2*n, 337, width / 2, 351);
    
    //mouth
    strokeJoin(ROUND);
    beginShape();
    vertex(width / 2 + 5*faceX, 390);
    vertex(width / 2 - 5*faceX - 6, 390);
    vertex(width / 2 - 3*faceX, 380);
    vertex(width / 2, 385);
    vertex(width / 2 + 10, 380);
    vertex(width / 2 + 5*faceX, 390);
    vertex(width / 2 - 3, 405);
    vertex(width / 2 - 5*faceX - 6, 390);
    endShape();
    
}

function mousePressed() {
    eyeSize = random(10, 25);
    eyeX = random (220, 250);
    eyeY = random (300, 320);
    x = random(8,12);
    y = random(7,10);
    t = random(7,20);
    faceY = random(5,7);
    faceX = random(3,5);
    color1 = random(0, 85);
    color2 = random(85, 170);
    color3 = random(170, 255);
    n = random(6,12);
    v = random(-2,4);
}

It is fun to watch the face keeps changing. It was not easy to make everything in right proportion. Also, I sketched on illustrator then tried to figure out how to draw with p5.js. It has to be simplified even though I thought my sketch was not so complicated. Maybe need more practice to control p5.js.

heeseoc-LookingOutwards-02

http://www.butterfly.ie/

“Particle Man” and “Universe Hand” are computer generated artworks by artist Glenn Marshall. He developed a way to digitally visualize what he had in mind through manipulating the system of Cinema 4D using the Python language. They are experimental digital artworks that creates 3D sculptural forms using mathematical and scientific models of particle collisions, creating the shape of human body parts using thousands of particles of close proximity that are released from a source in 3D space.

What I like about these are how he effectively uses the simple dots and lines in a 3D space to create more complex shapes. The intertwining strands creating a shape that looks organic, which is interesting because the artwork itself is obviously very artificial. Also, I like how his works are presented in an indefinite digital space with illuminated objects, which almost feels really like the universe, just like how he named his second piece.

keuchuka-project2-variablefaces

project2

// Fon Euchukanonchai
// section A
// keuchuka@andrew.cmu.edu
// Project 2

//face coordinates
var faceX = 158;
var faceY = 103;
var faceW = 200;
var faceH = 320;
var faceRotate = -5;

var colorR = 249;
var colorG = 201;
var colorB = 216;


//facial features coordinates
var featureA = 130;
var featureB = 180;
var featureC = 150;
var featureD = 160;
var featureE = 220;
var featureE = 190;


function setup() {
    createCanvas(480, 640);
    background(255);
    noStroke(0);

   }
 
 function draw() {

    //face
    push();
    fill(colorR, colorG, colorB);
    noStroke();
    angleMode(DEGREES);
    rotate(faceRotate);
    rect(faceX, faceY, faceW, faceH, 20);
    pop();

    //top left eyes

    rotate(faceRotate-5);
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA, featureB);
    curveVertex(featureA, featureB);
    curveVertex(featureC, featureD); 
    curveVertex(featureE, featureE);
    curveVertex(featureE, featureE);
    endShape();

    //top right eyes
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureB);
    curveVertex(featureA*2, featureB);
    curveVertex(featureC+230, featureD); 
    curveVertex(featureE*2, featureE);
    curveVertex(featureE*2, featureE);
    endShape();

    //bottom left eyes
    noFill();
    strokeWeight(3);
    stroke(0);
    beginShape();
    curveVertex(featureA+20, featureB+40);
    curveVertex(featureA+20, featureB+40);
    curveVertex(featureC+20, featureD+70); 
    curveVertex(featureE, featureE+40);
    curveVertex(featureE, featureE+40);
    endShape();

    //bottom right eyes
    noFill();
    strokeWeight(3);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureB+50);
    curveVertex(featureA*2, featureB+50);
    curveVertex(featureC+200, featureD+90); 
    curveVertex(featureE+180, featureE+50);
    curveVertex(featureE+180, featureE+50);
    endShape();

    //nose
    noFill();
    strokeWeight(2);
    stroke(0);
    beginShape();
    curveVertex(featureA*2, featureA*2);
    curveVertex(featureA*2, featureA*2);
    quadraticVertex(featureA+110, featureC*2, featureA*2, featureD*2);
    quadraticVertex(featureA*2, featureB*2, featureA*2, featureD*2);
    curveVertex(featureA*2, featureE*2);
    curveVertex(featureA*2, featureE*2);
    endShape();

    //mouth
    noFill();
    strokeWeight(1);
    stroke(0);
    beginShape();
    curveVertex(featureB, featureC*3);
    curveVertex(featureB, featureC*3);
    quadraticVertex(featureA*2, featureC*3, featureA*2, featureD*3);
    quadraticVertex(featureD*2, featureD*3, featureC*2, featureD*3);
    curveVertex(featureB*2, featureD*3);
    curveVertex(featureB*2, featureD*3);
    endShape();

    //moustache
    fill(0);
    arc(featureA*2-10, featureC*3-10, 30, 15, -180, 0)
    rotate(20);
    arc(featureA*3+30, featureC*2+25, 30, 15, -180, 0)

    //mole
    fill(0);
    stroke(0);
    strokeWeight(1);
    ellipse(featureC, featureD-140, 20, 20);

}

//when mouse clicks, face and facial features dance

function mousePressed() {

    background(255);
    faceX = random(70, 200);
    faceY = random(50, 150);
    faceW = random(150, 300);
    faceH = random(250, 350);
    faceRotate = random(-15, 15);

    colorR = random(150, 300);
    colorG = random(150, 300);
    colorB = random(150, 300);

    featureA = random(120, 140);
    featureB = random(170, 190);
    featureC = random(140, 160);
    featureD = random(150, 170);
    featureE = random(210, 230);
    featureE = random (180, 200);

}

I wanted to create a line portrait that had simple parts, all of its parts moving, and constantly generating something new from random values. The result is an interesting one as the features constantly change but the attitude remains the same.

keuchuka-lookingoutwards2

064c from dextroorg on Vimeo.

Dextro, an anonymous artist, makes generative video art, and has been working on it since the mid-90s. His work looks like waves in one shot and like glitchy fields in another. I find it interesting because he had begun as a 3D artist working in the architecture field. His work, therefore, were influenced by creating physical landscapes in virtual spaces. Dextro exclusively uses Processing, finding relationships between different parts of his work. As he worked in an architectural setting, he was influenced by creating vast landscapes through algorithmic procedures – some real, some fantasy-like. He finds that experimenting with code introduces interesting art – when the script is unstable, the change can be surprising. He switches between oil painting and Processing, and believes that painting simulates physical algorithm. He also codes straight from his oil paintings, trying to represent all the interesting parts of the oil paint using code.

ssharada-looking-outwards-02

Notional Field is an interactive installation created by Annica Cuppetelli and Cristobal Mendoza. The work is a wall-mounted sculpture containing vertical and parallel elastic like cords that are projected onto a flat surface. The motion of these lines are determined by an algorithm that forced them to respond to any movement in direction that occurs directly in front of them. What I found really interesting about this project is how it looks so three-dimensional – when the cords move around there is shadow movement that makes the work seem all the more believable. Furthermore, when the cords are pushed towards a corner of two walls, they almost bounce off and project onto the adjacent wall that makes the cords look as though they are actually jumping off of the wall.
According to the artists, the piece revolves around the idea of interface, which is interpreted as the point of contact between two different entities, and is displayed in the work in several ways: between the viewer and the piece (a human/computer interface); between the real and the virtual (the physical structure and its relationship with the projected structure); between the foreground and the background (as the projection interferes with the sculpture).

ljkim – Looking Outwards 02

Vergance – short version by Tina Frank

vergence (short version) from Tina Frank on Vimeo.

This project focuses on the threshold of spatial perception. The artist uses geometric shapes and consistent color scheme to be consistent. I think it works effectively in this case because it captures the audience’s attention. The artist also uses a sound track to accompany the piece which also effectively works to create a wholesome experience. I admire the simplicity of the work but being able to capture someone’s attention for something so basic.

I’m assuming that the project uses set variables and the random function. But majority of the video graphics seems intentional and designed. I can also see the artist using a function that I am unaware of that spreads the squares evenly.

heeseoc-Project-02-Variable-Face

heeseoc-variation

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

var faceW = 200;
var faceH = faceW - 20;

var eyeW = 60;
var eyeH = 40;
var eyeY = 315;

var pupilW = 15;

var noseW = 50;
var noseH = noseW - 10;
var noseY = 355;

var colorR = 165;
var colorG = 180;
var colorB = 180;

var colorR1 = 255;
var colorG1 = 241;
var colorB1 = 108;
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(250);
    noStroke();

    //ears//
    fill(colorR, colorG, colorB);
    triangle(width/2 - faceW/2, height/2, 330 - faceW, 220, width/2 - 20, height/2 - faceH/2 + 10);
    triangle(width/2 + faceW/2, height/2, 150 + faceW, 220, width/2 + 20, height/2 - faceH/2 + 10);

    fill(colorR+40, colorG+40, colorB+40);
    triangle(width/2 - faceW/2 + 20, height/2 + 20, 340 - faceW, 240, width/2 + 10, height/2 - faceH/2 + 30);
    triangle(width/2 + faceW/2 - 20, height/2 - 10, 140 + faceW, 240, width/2 - 10, height/2 - faceH/2 + 30);
    
    //face//
    fill(colorR, colorG, colorB);
    ellipse(width / 2, height / 2, faceW, faceH);

    //eyes//
    fill(colorR1,colorG1,colorB1);
    var eyeLX = width / 2 - faceW * 0.25;
	var eyeRX = width / 2 + faceW * 0.25;
    ellipse(eyeLX, eyeY, eyeW, eyeH);
    ellipse(eyeRX, eyeY, eyeW, eyeH);

    //pupils//
    fill(50);
    ellipse(eyeLX, eyeY, pupilW, eyeH-10);
    ellipse(eyeRX, eyeY, pupilW, eyeH-10);

    //nose //
    fill(colorR+40, colorG+40, colorB+40);
    var noseLX = width / 2 - faceW * 0.09;
    var noseRX = width / 2 + faceW * 0.09;
    ellipse(noseRX, noseY, noseW, noseH);
    ellipse(noseLX, noseY, noseW, noseH);

    fill(0);
    triangle(noseRX, noseY - noseH/2, noseLX, noseY - noseH/2, width/2, noseY-10);

}
 
function mousePressed() {
    faceW = random(150, 200);
    faceH = random(130, 180);

    eyeW = random(40, 70);
    eyeH = random(30, 50);
    eyeY = random (310, 325);

    pupilW = random (5,25);

    noswW = random (40,60);
    noseH = random (30,50);
    noseY = random (350,360);

    colorR = random (165, 240);
    colorG = random (165, 240);
    colorB = random (165, 240);

    colorR1 = random (192, 245);
    colorG1 = random (241, 243);
    colorB1 = random (192, 245);

}

I tried to show how the cats’ pupil dilate depending on the brightness of the light their eyes are capturing. I took a close look at how cats’ eyes are in real life, and noticed how their pupils are vertical. So I kept the height of my cat’s pupil proportional to the height of the eyes, leaving the width change randomly. I also wanted to give changes to the background colors depending on the size of the pupil, but even after many tries, wasn’t able to figure out if the numbers for pixel units that are used for the width of the pupils are also applicable for the color coding for the background.

ssharada-project-02-variable-face-section-a

project-02-1.js

//Shariwa Sharada
//Section A
//ssharada@andrew.cmu.edu
//Project-02-Variable Face

var x = 0
var y = 0
var eyeWidth = 12.5
var eyeHeight = 17.5
var earWidth = 50
var earHeight = 100
var bodyWidth = 350
var bodyHeight = 750
var armPlacementX = 100
var armPlacementY = 675
var noseWidth = 20
var noseHeight = 30
var eyeColour = (119,79,56)
var noseColour = (119,79,56)
var bodyColour = (255, 254, 240)

function setup() {
	createCanvas(500, 800);
	background(218,239,239);	
}

function draw() {	
	if (random(1) > 0.5) {
		stroke(114, 169, 182);
		strokeWeight(.5);
    	line(x, y, x-40, y-40);
 	} 
 	else {
 		stroke(114, 169, 182);
 		strokeWeight(.5);
    	line(x, y-40, x-40, y);
	}

	x += 60;
	if (x > width) {
		x = 0;
		y += 10;
	}

	if (y > height) {
		background(218,239,random(220,260));
		x = 0;
		y = 0;
	}
//ears
	push();
	rotate(PI*3.8);
	translate(-475,150);
	fill(bodyColour);
	stroke(241,212,175);
	strokeWeight(2);
	ellipse(width/1.6, height/1.9, earWidth, earHeight);
	ellipse(width/3.2, height/1.8, earWidth, earHeight);
	pop();

//body, arm, ears
	push();
	rotate(PI*3.8);
	translate(-475,150);
	fill(bodyColour);
	stroke(241,212,175);
	strokeWeight(2);
	ellipse(width/2, height/1.06, bodyWidth, bodyHeight);
	ellipse(armPlacementX, armPlacementY, width/4, height/2);
	pop();

//paw fingers
	stroke(119, 79, 56);
	strokeWeight(1.5);
	line(armPlacementX-25, armPlacementY+47, armPlacementX, armPlacementY+75);

	push();
	translate(-11, 4);
	line(armPlacementX-25, armPlacementY+47, armPlacementX, armPlacementY+75);
	pop();

	push();
	translate(-18, 14);
	line(armPlacementX-25, armPlacementY+47, armPlacementX, armPlacementY+75);
	pop();

//eyes
	fill(eyeColour);
	noStroke();;
	ellipse(width/3, height/1.17, eyeWidth, eyeHeight);
	ellipse(width/2.3, height/1.25, eyeWidth, eyeHeight);

//nose
	push();
	rotate(PI*0.175);
	translate(340,-160);
	fill(noseColour);
	ellipse(width/2.3, height/1.25, noseWidth, noseHeight);
	pop();

//mouth
	push();
	noFill();
	stroke(eyeColour);
	arc(250, 700, 75, 120, PI*0.17, PI/1.73);
	pop();
}

function mouseClicked(){
	background(218,239,random(220,260));
	y=0
	x=0
	earWidth = random(25, 75);
	earHeight = random(75, 125);
	eyeWidth = random(5, 25);
	eyeHeight = random(10, 30);
	armPlacementX = random(75, 125);
	armPlacementY = random(650, 700);
	eyeColour = (random(99,139),random(59,99),random(56,166));
	noseColour =(random(99,139),random(59,99),random(56,166));
	noseWidth = random (noseWidth-7.5, noseWidth+7.5);
	noseHeight = random (noseHeight-7.5, noseHeight+7.5);
}

This is a polar bear that is waving at you with a little precipitation around him. The eyes, arm movement, background, nose, and ears have been made variable through colour and/or positioning.

hdw – Looking Outwards 2

Matthieu Regout is a designer who proposed an identity redesign for the city of Brussels. He wrote generative code to create a blue polygon and a red polygon, overlapped as a series of forms to show the hybrid nature of the city.

The algorithm that generated the work was built on a series of rotated views of a perspective pyramid. Regout took two perspectives of the generated forms from complimentary angles, and used opposing colors to show the duality. The final product created a clean and simple series of designs, which is appropriate for the branding system the image exists in. The series of two forms coming together to create a single image served to emphasize the hybrid nature of which Regout meant to bring out. The simplicity of the forms acted together to form a system of the printed posters and booklets for the city’s visual identity.

Matthieu’s process work:

Final poster:

Identity system:

Matthieu posted his project, “Brussels – The Hybrid City” on Behance in December, 2013.

mjeong1-Looking Outwards-02-SectionA

An algorithm generates numerous interlocking objects

Computer-generated interlocking 3D joinery, inspired by Japanese joinery by a researcher at University of Applied Arts in Vienna, Aryan Shahabian.

Japanese wood joinery is widely known for its complexity and delicacy. Japanese carpenters have been making this beautiful wood joinery, known as Daiku, from generation to generation. Their exceptionally advanced joinery skill makes not only a wonderful decorative feature, but also a functional piece of design.

Even though this Japanese joinery has long been admired by people, it was almost impossible for normal people to make their own joinery design since it requires a impressive artistic craft. However, the algorithm that Aryan Shahabian created made possible for people without those skills to design their own Daiku. The algorithm handles complex geometry of joinery and organic form of the final object through software.

Furthermore, it might be more interesting if the algorithm could generate curvilinear shape instead of rectangular joinery. It might require additional geometrical solution.

Link to original

Link to archdaily original