ntroutma-a02

//Nicholas Troutman
//15.104 section C
//ntroutma@andrew.cmu.edu
//Assignment-02
//16.09009


//formatting
	var varX = 120
	var varY = 80

	var varLoop = 1;

function setup()
{
    createCanvas (640, 480);
    background ("#80B6D1");
}

function draw() 
{

//formatting

	stroke (0);
	strokeWeight (1);


//facial varibles
 	var varFH = random(100, 120); //face height
	var varFW = random(100, 120); //face width
	var varCH = varFH + random(20, 30); // chin length
	var varCW = varFW - random(20, 40); //chin width
	var varNH = random(20, 40); //nose length
	var varNW = random(10, 18); //nose width
	var varMW = random(10, 30); //mouth width
	var varMH1 = random(2, 8); var varMH2 = random(3, 6); var varMH3 = random(2, 8);//mouth height
	var varEW = random(20, 25); //eye width
	var varEH = random(8, 15); //eye height
	var varEC1 = random(50, 250); var varEC2 = random(50, 250); var varEC3 = (50, 250);//eye color
	var varBL1 = random(0, 4); var varBL2 = random(1, 6); var varBL3 = random(0, 8); //left eyebrow
	var varBR1 = random(0, 4); var varBR2 = random(1, 6); var varBR3 = random(0, 8); //right eyebrow


//facial shape
	fill("#FAFCFC");
	//noFill();
	beginShape ();
		curveVertex (varX + .33 * varFW, varY + .1 * varFH);
		curveVertex (varX, varY);
		curveVertex (varX - .33 * varFW, varY + .1 * varFH);
		curveVertex (varX - .48 * varFW, varY + .33 * varFH);
		curveVertex (varX - .5 * varFW, varY + .66 * varFH);
		curveVertex (varX - .5 * varCW, varY + varFH);
		curveVertex (varX, varY + varCH);
		curveVertex (varX + .5 * varCW, varY + varFH);
		curveVertex (varX + .5 * varFW, varY + .66 * varFH);
		curveVertex (varX + .48 * varFW, varY + .33 * varFH);
		curveVertex (varX + .33 * varFW, varY + .1 * varFH);
		curveVertex (varX, varY);
		curveVertex (varX - .33 * varFW, varY + .1 * varFH);
		endShape();

//nose
	noFill();
	beginShape();
		curveVertex (varX, varY + .5 * varFH);
		curveVertex (varX, varY + .5 * varFH);
		curveVertex (varX - .5 * varNW, varY + .5 * varFH + .8 * varNH);
		curveVertex (varX, varY + .5 * varFH + varNH);
		curveVertex (varX + .5 * varNW, varY + .5 * varFH + .8 * varNH);
		curveVertex (varX, varY + .5 * varFH);
		//curveVertex (varX, varY + .5 * varFH);
		endShape();
//mouth
	noFill();
	beginShape();
		curveVertex (varX - .5 * varMW, varY + .85 * varCH - varMH1);
		curveVertex (varX - .5 * varMW, varY + .85 * varCH - varMH1);
		curveVertex (varX, varY + .85 * varCH - varMH2);
		curveVertex (varX + .5 * varMW, varY + .85 * varCH - varMH3);
		curveVertex (varX + .5 * varMW, varY + .85 * varCH - varMH3);
		endShape();

//eyes
	noFill(); 
	beginShape(); //right eye
		curveVertex (varX + .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX + .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX + .1 * varFW + .5 * varEW, varY + .45 * varFH);
		curveVertex (varX + .1 * varFW + varEW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX + .1 * varFW + varEW, varY + .45 * varFH + varEH);
		curveVertex (varX + .1 * varFW + varEW, varY + .45 * varFH + varEH);
		endShape();


	beginShape(); //left eye
		curveVertex (varX - .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX - .1 * varFW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX - .1 * varFW - .5 * varEW, varY + .45 * varFH);
		curveVertex (varX - .1 * varFW - varEW, varY + .45 * varFH + .5 * varEH);
		curveVertex (varX - .1 * varFW - varEW, varY + .45 * varFH + varEH);
		curveVertex (varX - .1 * varFW - varEW, varY + .45 * varFH + varEH);
		endShape();

	fill (varEC1, varEC2, varEC3);
	ellipse (varX - .1* varFW - .5 * varEW, varY + .45 * varFH + .5* varEH,
	         .66 * varEH, .66 * varEH); //right iris

	ellipse (varX + .1* varFW + .5 * varEW, varY + .45 * varFH + .5* varEH,
	         .66 * varEH, .66 * varEH); //left iris


//face 1 eyebrows
	noFill();
	beginShape(); //right eyebrow
		curveVertex (varX + .1 * varFW, varY + .4 * varFH - varBR1);
		curveVertex (varX + .1 * varFW, varY + .4 * varFH - varBR1);
		curveVertex (varX + .1 * varFW + .5 * varEW, varY + .4 * varFH - varBR2);
		curveVertex (varX + .1 * varFW + varEW, varY + .4 * varFH - varBR3);
		curveVertex (varX + .1 * varFW + varEW, varY + .4 * varFH - varBR3);
		endShape();

	beginShape(); //left eyebrow
		curveVertex (varX - .1 * varFW, varY + .4 * varFH - varBL1);
		curveVertex (varX - .1 * varFW, varY + .4 * varFH - varBL1);
		curveVertex (varX - .1 * varFW - .5 * varEW, varY + .4 * varFH - varBL2);
		curveVertex (varX - .1 * varFW - varEW, varY + .4 * varFH - varBL3);
		curveVertex (varX - .1 * varFW - varEW, varY + .4 * varFH - varBL3);
		endShape();



//loop function
	if (varLoop < 3) {
		varX = varX + 200;
		varLoop ++; 
		loop();
	}
	else if (varLoop < 4) {
		varX = 120;
		varY = varY + 200;
		varLoop ++;
		loop();
	}
	else if (varLoop > 5, varLoop < 6) {
		varX = varX + 200; 
		varLoop ++;
		loop();
	}
	else {
		noLoop();
	}

	
}

After a few quick image searches of chernoff faces, I found that most of them were very cartooned and perhaps unrealistic in their varied aspects. That’s fine, now I just need to create my own crude cartoon sketches.
I began with the head shape knowing that I needed something other than an ellipse. After some trial and much error I was able to create a crude but not obscene outline using an origin point at the top of the head and relating my variables to it. This allowed me to vary the height and width of the face at multiple points without potential of misalignment.
Facial features were created in the same way, with reference to the origin point. variable domains were tweaked so that there was no possibility of them intersecting or being placed outside the face. *I found it helpful to allow the function to loop during this, so that I could see all possible outcomes of the line.*
I now have a legion of slightly critical chernoff faces.

A01- face

//Nicholas Troutman
//15.104 section C
//ntroutma@andrew.cmu.edu
//Assignment-01

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

function draw() {
	background("#FAFCFC");

	noStroke();

//face

	fill("#E3BA8A");

	beginShape();
		vertex(125, 340);
		vertex(175, 430);
		vertex(150, 550);
		vertex(100, 450);
	endShape();

	beginShape();
		vertex(300, 465);
		vertex(400, 430);
		vertex(350, 500);
		vertex(265, 560);
	endShape();

	beginShape();
		vertex(320, 360);
		vertex(340, 370);
		vertex(330, 450);
		vertex(315, 430);
		vertex(315, 420);
		vertex(300, 405);
	endShape();

	beginShape();
		vertex(335, 345);
		vertex(335, 355);
		vertex(380, 365);
		vertex(395, 385);
		vertex(420, 405);
		vertex(435, 350);
	endShape();

	beginShape();
		vertex(295, 180);
		vertex(320, 190);
		vertex(375, 220);
		vertex(435, 310);
		vertex(435, 260);
		vertex(385, 200);
	endShape();


	ellipse(105, 315, 55, 110);

//mouth and nose

	fill("black");
	angleMode(DEGREES);

	rotate(15);

	fill("#BD4A5F");
	ellipse(350, 425, 75, 55);

	fill("black");
	ellipse(350, 420, 75, 45);

	rotate(345);

	noFill();
	stroke(0);
	strokeWeight(3);

	curve(100,500, 230,430, 250,425, 450,420);

	noStroke();

//eyes

	fill("#DFEDF5");

	ellipse(383, 376, 45, 27);

	fill("#80B6D1");

	ellipse(230, 335, 23, 23);

	ellipse(385, 375, 23, 23);

	noFill();
	stroke(0);
	strokeWeight(3);

	curve(185,360, 185,305, 225,310, 225,330, 240,350);

	curve(345,380, 345,365, 380,355, 385,355, 385,375, 400,420);

//eyebrows
	noStroke();
	fill("#DBC900");

	beginShape();
		vertex(190, 280);
		vertex(220, 275);
		vertex(265, 300);
		vertex(265, 305);
	endShape();

	beginShape();
		vertex(350, 342);
		vertex(420, 325);
		vertex(440, 355);
		vertex(410, 342);
	endShape();


//hair

	fill("#DBC900");

	beginShape();
		vertex(145, 150);
		vertex(220, 175);
		vertex(140, 275);
		vertex(115, 250);
	endShape();

	beginShape();
		vertex(160, 145);
		vertex(250, 100);
		vertex(240, 175);
	endShape();


	beginShape();
		vertex(270, 90);
		vertex(390, 120);
		vertex(380, 190);
		vertex(250, 170);
	endShape();

	beginShape();
		vertex(0, 0);
		vertex(0, 0);
		vertex(0, 0);
		vertex(0, 0);
	endShape();

	noFill();
	stroke("#DBC900");
	strokeCap(SQUARE);
	strokeWeight(20);
	curve(200, 600, 400, 190, 500, 330, 200, 800);

	noStroke();
//shirt

	fill("black");

	beginShape();
		vertex(220, 600);
		vertex(355, 500);
		vertex(360, 580);
		vertex(230, 685);
	endShape();

		beginShape();
		vertex(65, 515);
		vertex(85, 600);
		vertex(65, 675);
		vertex(45, 575);
	endShape();

	noLoop();

}

I wanted to make this portrait as recognizable as possible, so I began with a sketched portrait, and spent my initial time designing and distilling shapes, abstracting as I went. Colors were picked to accentuate features and give a more cartooned aesthetic.

I was having some difficulty finding a single work to discuss, so I thought I would bring up Sean Ahlquist’s Process2. This is a- currently in progress- series of material studies (which double as interactive sculpture) focusing on fabrics based tensile structures. Fabric is one of the oldest and most understated materials, one which is still used globally for everything from clothing (okay thats obvious) to shelters, transport, packaging, and even space exploration. Utilizing advanced digital simulations in hand with CNC knit fiber, Ahlquist has been able to rethink woven textiles, dictating the pattern and function of both synthetic and natural fibers to study spatial and physical functions of high tensile, full tension building- which is to say, a structure which is created and maintained by acting forces. Aside from sculptural implications of light and soundscape, this technology presents possibility for use in full-scale interior and exterior building systems, as well as in temporary structure.

I initially discovered this work last march after seeing some of Ahlquist’s fabricated textile work while touring the Tubman School of Architecture. I was fascinated to say the least. This later inspired me to begin investigating temporary structures, and more recently, full tension systems. This work appeals to me in both originality and in its potential to found a new branch of materials engineering in the wake of the high data intensity permitted through computational design combined with advanced production methods and fiber testing.

Below we also have a slightly outdated but still nifty interactive webpage listing some of his work, a Facebook page, and an aesthetic Instagram feed.

http://www.proces2.com
https://www.facebook.com/researchMC/
https://www.instagram.com/sean_ahlquist/

this post has been updated~~