Category: Section E

mstropka-Project02-Variable-Face

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project 02


//defining variables for points that define the shape of the face
var point1x = 405
var point1y = 75
var point2x = 405
var point2y = 565
var point3x = 75
var point3y = 565
var point4x = 75
var point4y = 75

//variables for colors
var r = 255
var g = 255
var b = 255

//colors for eyes
var r1 = 225
var g1 = 225
var b1 = 225

var eyesize = 20
var mouthsize = 2



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

}

function draw() {
  background(250);

//outside of face is drawn with a closed curveVertex shape
  strokeWeight(5);
  fill(r, g, b);
  beginShape();
  curveVertex(point1x, point1y);
  curveVertex(point1x, point1y);
  curveVertex(point2x, point2y);
  curveVertex(point3x, point3y);
  curveVertex(point4x, point4y);
  endShape(CLOSE);

//location of right and left eyes is driven by the points that control the outside of the face
//so that they always are drawn inside the shape of the head
  strokeWeight(2);
  fill(r1, g1, b1);
  ellipse(point1x - 40, point1y + 40, eyesize, eyesize);

  strokeWeight(2);
  fill(r1, g1, b1);
  ellipse(point4x + 40, point4y + 40, eyesize, eyesize);

//the mouth shape is made by dividing and multiplying the variables of the head shape
//to make a similar shape, but smaller
  beginShape();
  curveVertex(point1x/2, point1y*2);
  curveVertex(point1x/2, point1y*2);
  curveVertex(point2x/2, point2y/2);
  curveVertex(point3x*2, point3y/2);
  curveVertex(point4x*2, point4y*2);
  endShape(CLOSE);
  
//bags under eyes
  noFill();
  arc(point1x - 40, point1y + 40, 50, 50, 0, HALF_PI);
  arc(point4x + 40, point4y + 40, 50, 50, 0, HALF_PI);

}

function mousePressed() {

// when mouse is pressed, the points that define the face shape move
// within a range such that the outline will always take up most of the canvas
  point1x = random(205,405);
  point1y = random(75, 150);
  point2x = random(205,405);
  point2y = random(365,565);
  point3x = random(75, 150);
  point3y = random(365,565);
  point4x = random(75,150);
  point4y = random(75,150);

//when mouse is clicked, a random rgb value is assigned to colors
  r = random(0,255);
  g = random(0,255);
  b = random(0,255);

  r1 = random(0,255);
  g1 = random(0,255);
  b1 = random(0,255);
}

I tried to make a program that would randomly generate almost every aspect of the face, but also have all of the faces look similar enough that they could be related. My method for this was to create a shape using curveVertex points that would change every time the mouse is clicked and have all of the other features in the face defined by these points. I also added bags under the eyes to give the faces a little more character. One thing I couldn’t figure out was keeping the features from touching each other or going off of the face

svitoora – 02 Looking Outwards

Digitally generated column head.

Michael Hansmeyer‘s Generative Columns 

The artist worked alone to digitally generate these column, but collaborated with others to technically execute these into physical objects. Each column starts off with a cube. The cube is then algorithmically folded along certain “humanly invisible” spots. These “humanly invisible” spots refers to the mathematical maxima or minima on the surfaces of the object based on certain mathematical interpretations such as: tangency, tension, normals ,etc.

Digitally generated column physically existing thanks to laser-cutting.

Columns are exemplars of the century. From the Chinese to the Greeks, columns carry with them the aesthetic and moral values of the culture at a given point in time. Task with the job to design columns for 21st century, Hansmeyer decided to digitally generate these column and made them from stacking laser cut paper. According to Hansmeyer, the 21st century can be classified by the rise of the Digital Age and algorithms, therefore columns that are permuted and generated digitally by the computer to exemplify this era’s aesthetic seems appropriate.

Algorithmically generated details of the column. Architecturally, these fine details would be humanly impossible to plan and render, but currently it’s made possible by the computer.

Sheenu-Looking Outwards-02

An interesting generated art piece I found was a very grotesque grotto made by artists Benjamin Dillenburger and Michael Hansmeyer. The grotto was constructed through 3D printed sandstone and two 156 gigabyte computational algorithms that took two years to develop. Construction and assembly of the grotto itself took a month and two days. It was commissioned by the Centre Pompidou in Paris for a 2017 exhibition on 3D printed art. What I like about the grotto is the natural and organic design it has. It never ceases to amaze me on how a computer can make something so beautiful. Buildings in general tend to look man-made, no matter how natural and organic it tries to look. This is probably due to the fact that people can make small mistakes in the design and cannot make extremely complicated and organic designs. With computers, the grotto was perfectly constructed and also perfectly complex in order to create a perfectly organic-looking structure. According to the artist, the grotto was made not for function, but rather spurring imagination and amazement for computer art.



http://www.archdaily.com/868540/this-mysterious-3d-printed-grotto-challenges-boundaries-of-computational-geometry-and-human-perception

A 3D printed grotto generated with an algorithm

dayoungl – Project02

sketch

//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Project-02
var eyeDepth = 100;
var eyeLevel = 175;
var faceWidth = 250;
var faceHeight = 330;
var earWidth = 20;
var earLength = 120;

function setup() {
    createCanvas(400, 600);
    angleMode(DEGREES);
}
//create a face of a Moai sculpture
function draw() {
    background(170,195,227);
    //ears
    fill(121,117,130);
    noStroke();
    rect(60,eyeLevel+20,earWidth,earLength);
    rect(320,eyeLevel+20,earWidth,earLength);
    //face shape
    fill(74,72,77);
    noStroke();
    rect(75,75, faceWidth,faceHeight);
    arc(width/2,75,faceWidth,60,180,0);
    arc(width/2,400,faceWidth,80,0,180);
    //eyehole
    fill(32,31,39);
    arc(width/2,eyeLevel,faceWidth,eyeDepth,180,0);
    //nose
    fill(121,117,130);
    arc(width/2,eyeLevel,60,45,180,0);
    quad(170,eyeLevel,230,eyeLevel,240,300,160,300);
    var noseTip = 300;
    var noseWidth = 80;
    fill(59,57,62);
    noStroke();
    arc(width/2,noseTip,noseWidth,noseWidth-45,0,180);
}


function mousePressed() {
    earLength = random(100,150);
    eyeLevel = random(150,185);
    eyeDepth = random(70,140);
      
}

Moai Fam

svitoora – 02 Variable Face

Supawat’s Portrait

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Variable Portrait
// This code is a spin-off of the variable face example on:
// https://courses.ideate.cmu.edu/15-104/f2017/week-2-due-sep-8/

// Global Setup
	// Global
	var width = 480;
	var height = 640;
	var BLACK = "#5c5e60";
	var BG = "#ebe7e0"
	var SKIN = "#fffbf3"

	// Simple beginning template for variable face.
	var eyeSize_cur = 20;
	var faceWidth_cur = 125;
	var faceHeight_cur = 150;
	var hat_height = -faceHeight_cur + .825 * height;
	var hat_width = faceWidth_cur * 1.25;
	var eye_blacksize = .75;
	var hat_max_cur = height * .20;
	var face_top = (height * .5) - faceHeight_cur
	var mustache_y_cur = (height / 2) + eyeSize_cur * 1.5
	var mustache_low_cur = mustache_y_cur + 10
	var mustache_width_cur = faceWidth_cur / 4;
	var mustache = false

	// Declaring Variable to be assigned in setup
	var eyeSize_next;
	var hat_max_next;
	var faceWidth_next;
	var faceHeight_next;
	var mustache_width_next;
	var mustache_low_next;
	var mustache_width_next;
	var mustache_ratio;
	var click = 0;

function setup() {
	createCanvas(480, 640);
	// Specified next iteration to avoid random in global 
	eyeSize_next = random(10, 30);
	faceWidth_next = random(75, 200);
	faceHeight_next = random(100, 200);
	hat_max_next = height * .1;
	face_top = (height * .5) - faceHeight_cur;
	mustache_low_next = mustache_y_cur + random(10, 30);
	mustache_width_next = faceWidth_cur * random(.1, .3);
	mustache_ratio = 1.1;
	mustache_y_next = (height / 2) + eyeSize_next * random(1, 2)
	mustache_choice = [false, false, true]; // 1/3 chance of getting mustache
}

function draw() {
	background(BG);
	stroke(BLACK);

	// Animation's Derivative for non-linear transition
		var d_faceWidth = (Math.abs(faceWidth_cur - faceWidth_next)) / 4;
		var d_faceHeight = (Math.abs(faceHeight_cur - faceHeight_next)) / 15;
		var d_eyeSize = (Math.abs(eyeSize_cur - eyeSize_next)) / 20;
		var d_hat_max = (Math.abs(hat_max_cur - hat_max_next)) * .25;
		var d_mustache_low = (Math.abs(mustache_low_cur - mustache_low_next)) /
			40;
		var d_mustache_width = (Math.abs(mustache_width_cur -
			mustache_width_next)) / 8;

	// Adding back derivative for non-linear animation
		// facewidth
		if (faceWidth_cur > faceWidth_next) {
			faceWidth_cur = faceWidth_cur - d_faceWidth;
		} else {faceWidth_cur = faceWidth_cur + d_faceWidth;}

		// faceHeight
		if (faceHeight_cur > faceHeight_next) {
			faceHeight_cur = faceHeight_cur - d_faceHeight;
		} else {faceHeight_cur = faceHeight_cur + d_faceHeight;}

		// eyeSize
		if (eyeSize_cur > eyeSize_next) {
			eyeSize_cur = eyeSize_cur - d_eyeSize;
		} else {eyeSize_cur = eyeSize_cur + d_eyeSize;}

		// Hat Max
		if (hat_max_cur > hat_max_next) {
			hat_max_cur = hat_max_cur - d_hat_max;
		} else {hat_max_cur = hat_max_cur + d_hat_max;}

		// Mustache Low
		if (mustache_low_cur > mustache_low_next) {
			mustache_low_cur = mustache_low_cur - d_mustache_low;
		} else { mustache_low_cur = mustache_low_cur + d_mustache_low;}

		// mustache_width
		if (mustache_width_cur > mustache_width_next) {
			mustache_width_cur = mustache_width_cur - d_mustache_width;
		} else {mustache_width_cur = mustache_width_cur + d_mustache_width;}

	// Draw
		// Face
		fill(SKIN);
		strokeWeight(1);
		face_top = (height * .5) - faceHeight_cur;
		strokeWeight(0);
		fill(SKIN);
		ellipse(width / 2, height / 2, faceWidth_cur, faceHeight_cur);
		strokeWeight(1);
		fill(SKIN);

		// Eye Whites
		var eyeLX = width / 2 - faceWidth_cur * 0.25;
		var eyeRX = width / 2 + faceWidth_cur * 0.25;
		ellipse(eyeLX, height / 2, eyeSize_cur, eyeSize_cur);
		ellipse(eyeRX, height / 2, eyeSize_cur, eyeSize_cur);
		noFill();

		// Eye Black
		fill(BLACK);
		ellipse(eyeLX, height / 2,
			eyeSize_cur * eye_blacksize, eyeSize_cur * eye_blacksize);
		ellipse(eyeRX, height / 2,
			eyeSize_cur * eye_blacksize, eyeSize_cur * eye_blacksize);

		// Hat
		rectMode(CENTER);
		hat_height = Math.abs(((height / 2) - eyeSize_cur * 2), face_top)
		hat_width = faceWidth_cur * 1.25;
		rect(width / 2, hat_height, hat_width, 1);

		// Hat Line
		rectMode(CORNERS);
		rect((width / 2) - faceWidth_cur / 2, hat_height,
			(width / 2) + faceWidth_cur / 2, hat_max_cur);

		// Brow
		noFill();
		arc(eyeLX, height / 2 - eyeSize_cur * .75,
			eyeSize_cur * 1.25, eyeSize_cur * 1.25,
			PI + ((2 * PI) * .10), 0 - ((2 * PI) * .10));
		arc(eyeRX, height / 2 - eyeSize_cur * .75,
			eyeSize_cur * 1.25, eyeSize_cur * 1.25,
			PI + ((2 * PI) * .10), 0 - ((2 * PI) * .10));

		// nose
		line(width / 2, (height / 2) + eye_blacksize * 1.2,
			width / 2, (height / 2) + eyeSize_cur);
		rectMode(CORNERS);
		rect((width / 2) - faceWidth_cur * .05, (height / 2) + eyeSize_cur,
			(width / 2) + faceWidth_cur * .05, (height / 2) + eyeSize_cur);

	// Moustache or No Moustache
		if (mustache == false) {
			// Mouth
			arc(width / 2, height / 2 + faceHeight_cur * .20,
				faceWidth_cur * .3, faceWidth_cur * .3,
				0 + ((2 * PI) * .1), PI - ((2 * PI) * .1));
		} else {
			// Mustache
			fill(BLACK);
			var mustache_y = (height / 2) + eyeSize_cur * 1.75
			quad((width / 2) - mustache_width_cur, mustache_y,
				(width / 2) + mustache_width_cur, mustache_y,
				(width / 2) + mustache_width_cur * mustache_ratio,
				mustache_low_cur,
				(width / 2) - mustache_width_cur * mustache_ratio,
				mustache_low_cur);}
}

function mousePressed() {
	// when the user clicks, the next face is randomly generated
	// and eased into via animation
	faceWidth_next = random(75, 200);
	faceHeight_next = random(100, 200);
	eyeSize_next = random(10, 30);
	eye_blacksize = random(.25, .75);
	hat_max_next = random(height * .1, hat_height - 60);
	mustache_y_next = (height / 2) + eyeSize_next * random(1, 2)
	mustache_low_next = mustache_y_next + random(20, 40);
	mustache_width_next = faceWidth_next * random(.1, .3);
	mustache_ratio = random(1, 2);
	mustache_width_cur = mustache_width_cur / 2; // Fans stache out
	mustache = random(mustache_choice);
	click += 1; // tacks amount of clicks
}

As a design and HCI student, one simple method I learn to humanize screen based technology is to make graphic transition less “jarring”. In real life, nature does not just change its shape based on an interaction. Nature morphs, pops, and grows into its next form; nature transitions. And within those transitions are specific qualities and characteristics that brings life and animate the dead into life.

To achieve this vivacity, I created a program that introduces an axis of time. A current state and next state variable is created, and every 60 fps the current state approaches the next state variable. Instead of using the traditional approach of +=1 which results in a linear transition, I created a differences variable(∆) that eases the transition by adding in a fraction of the difference between the current and next state. In pseudo-code, while(cur_state ≠ next state){ cur_state±(∆state*some fraction)}.

In actual code:


Looking back at this, the transition code part of this could be re-written as a function with multiple inputs to clean up the program as such:


Lastly, I chose warm monochromatic color scheme to make my generative appear warm and inviting.

Grays with warm tints and shades to convey warmth.

Initial hand sketch from sketchbook:

 

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

rmanagad-Project02-variablefaces-SectionE

rmanagad-variable

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project 02 - Section E

//body dimensions
var bodX = 241.2;
 	bodY = 500;
	bodW = 145.8;
	bodH = 218.7;
	curve1 = 15;
	curve2 = 15;
	curve3 = 15;
	curve4 = 15;

//eye dimensions
var eyeW = 25.5;
    eyeH = 8.1;
var eyeLX = 200.7;
var eyeRX = 283.9;
var eyeY = 454;
var nosecurve1 = 15;
	nosecurve2 = 15;
	nosecurve3 = 15;
	nosecurve4 = 15;

//nose dimensions
var noseW = 42;
var noseH = 34;
var noseX = 242.3;
var noseY = 486;
var noseW2 = 22;
	noseH2 = 13;
	noseX2 = 242;
	noseY2 = 502;

//ear dimensions
var earLX1 = 185.4;
	earLY1 = 393;
	earLX2 = 196.4;
	earLY2 = 374;
	earLX3 = 207.5;
var earRX1 = 273.6;
	earRX2 = 284.6;
	earRY2 = 374;
	earRX3 = 295.2;

//ground dimensions
var darkgroundW = 199.1;
    darkgroundH = 71.8;
    darkgroundX = 240.1;
	darkgroundY = 410.8;
var midgroundW = 136.6;
	midgroundH = 73.8;
var midgroundLX = 153.3;
var midgroundRX = 330.3;
	midgroundY = 399.2;
var lightgroundW = 138.9;
    lightgroundH = 53.235;
var lightgroundRX = 310.6;
var lightgroundLX = 174.1;
	lightgroundY = 373.7;

//colors
var darkgroundR = 74;
	var darkgroundG = 74;
	var darkgroundB = 63;
	var midgroundR = 121;
	var midgroundG = 122;
	var midgroundB = 97;
	var lightgroundR = 155;
	var lightgroundG = 154;
	var lightgroundB = 124;
	var bodycolorR = 234;
	var bodycolorG = 229;
	var bodycolorB = 209;
	var earcolorR = 239;
	var earcolorG = 119;
	var earcolorB = 99;


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

function draw(){
	background (245, 245, 240)
	rectMode(CENTER);

	//lightground in the back
	noStroke();
	fill(lightgroundR, lightgroundG, lightgroundB);
	rect(lightgroundLX, lightgroundY, lightgroundW, lightgroundH, curve1, curve2, curve3, curve4);
	rect(lightgroundRX, lightgroundY, lightgroundW, lightgroundH, curve1, curve2, curve3, curve4);

//if else statements were added to simulate the motion of the dog...
//popping its head above the ground.

	//ears
	noStroke();
	fill(earcolorR, earcolorG, earcolorB);
	triangle(earLX1, earLY1, earLX2, earLY2, earLX3, earLY1);
	triangle(earRX1, earLY1, earRX2, earRY2, earRX3, earLY1);
	if (earLY1 > 220) {earLY1 = earLY1 - 1;
	} else {earLY1 = 221}; //it will continue to rise as long as it's placement is below its original.
	if (earLY2 > 201) {earLY2 = earLY2 - 1;
	} else {earLY2 = 202};
	if (earRY2 > 201) {earRY2 = earRY2 - 1;
	} else {earRY2 = 202};

	//body
	noStroke ();
	fill (bodycolorR, bodycolorG, bodycolorB);
	rect (bodX, bodY, bodW, bodH, curve1, curve2, curve3, curve4);
	if (bodY > 328) {bodY = bodY - 1;
	} else {bodY = 328};

	//eyes
	noStroke();
	fill(0);
	rect (eyeLX, eyeY, eyeW, eyeH, curve1, curve2, curve3, curve4);
	rect (eyeRX, eyeY, eyeW, eyeH, curve1, curve2, curve3, curve4);
	if (eyeY > 281) {eyeY = eyeY - 1;
	} else {eyeY = 282};

	//nose
	noStroke();
	fill(earcolorR, earcolorG, earcolorB);
	rect(noseX2, noseY2, noseW2, noseH2, curve1, curve2, curve3, curve4);
	if (noseY2 > 329) {noseY2 = noseY2 - 1;
	} else {noseY2 = 330};
	noStroke();
	fill(lightgroundR, lightgroundG, lightgroundB);
	rect(noseX, noseY, noseW, noseH, curve1, curve2, curve3, curve4);
	if (noseY > 313) {noseY = noseY - 1;
	} else {noseY = 314};


	//midground
	noStroke();
	fill(midgroundR, midgroundG, midgroundB);
	rect(midgroundLX, midgroundY, midgroundW, midgroundH, curve1, curve2, curve3, curve4);
	rect(midgroundRX, midgroundY, midgroundW, midgroundH, curve1, curve2, curve3, curve4);

	//darkground in the front
	noStroke();
	fill(darkgroundR, darkgroundG, darkgroundB);
	rect(darkgroundX, darkgroundY, darkgroundW, darkgroundH, curve1, curve2, curve3, curve4);

	//invisible clipping layer
	noStroke();
	fill(245, 245, 240);
	rect(242.4, 542.7, 240.7, 194.5)
}

//random assignment of value are within the "mousePressed" function,
//randomizing the values between a given parameter 
//every time the mouse is clicked.

function mousePressed () {
	bodycolorR = random(210, 240);
	bodycolorG = random(210, 245);
	bodycolorB = random(200, 210);

	earLY1 = random(393, 393)
	earLY2 = random(374, 394);
	earLX1 = random(188, 190);
	earLX2 = random(193, 199);
	earLX3 = random(203, 210);
	earRY2 = random(374, 394);
	earRX1 = random(269, 276);
	earRX2 = random(280, 288);
	earRX3 = random(291, 299);
	if (earLY1 > 220) {earLY1 = earLY1 - 5;
	} else {earLY1 = 221}; 
	if (earLY2 > 201) {earLY2 = earLY2 - 5;
	} else {earLY2 = 202};
	if (earRY2 > 201) {earRY2 = earRY2 - 5;
	} else {earRY2 = 202};
	// changed the speed of ears so they "flop" out at the top.

	eyeH = random(4, 16);
	eyeW = random(14, 24);
	eyeLX = random(195, 210);
	eyeRX = random(273, 288);
	eyeY = random(453, 453);
	if (eyeY > 281) {eyeY = eyeY - 15;
	} else {eyeY = 282};

	noseW = random(20, 45);
	noseH = random(20, 35);
	noseX = random(235, 248);
	noseY = random(486, 486);
	if (noseY > 313) {noseY = noseY - 15;
	} else {noseY = 314;}


	noseW2 = random(20, 24);
	noseH2 = random(12, 14);
	noseX2 = random(236, 246);
	noseY2 = random(502, 502);
	if (noseY2 > 330) {noseY2 = noseY2 - 15;
	} else {noseY2 = 330};

	bodW = random(130, 160);
	nosecurve1 = random(5, 25);
	nosecurve2 = random(15, 25);
	nosecurve3 = random(15, 25);
	nosecurve4 = random(15, 25);
	bodY = random(500, 500);
	if (bodY > 328) {bodY = bodY - 15;
	} else {bodY = 328}

	}





//have (variable) += dir * speed;
//if ((variable) = height/2) {dir = 0 * dir;
//	}

In approaching this project, I took into consideration the movement elements learned in class — how could I incorporate them into a program that randomly generated values? My first idea was to create a program that popped up an ID card, but I wanted more of a surprise element — this prompted a switch to an animal popping its head out of a hole, and I ultimately decided on keeping ambiguity behind the species as a “to-be-decided” depending on what the random function generates.

I primarily used Illustrator as aid in creating this program in order to obtain coordinate values, size values, and color values. To get the animal to animate, I used a motion technique (x = x – 1) in conjunction with conditional statements to restrict the animal from moving too high. Because I focused on keeping the body parts aligning correctly during the animation, I wasn’t able to play too much with variation in the random generation of y-coordinates — all end-animation y-coordinate-placements were the same as the original image, and I’d like to experiment later in modifying that value as well.

Sheenu-Project-02-Variable Face

sketch
This was a very fun and interesting project. I wanted to create an “Emoji” looking picture that completely changes every time you click the screen. I thought the outline and the shadow were going to be hard to make, but it was actually very easy since I was using variables. This is the first time I used text in one of my projects. I really liked how it turned out and I am glad that I learned “random” in P5.js. I learned a while ago how to use Random in Adobe AS2 and it is a lot harder and more complicated. 

//Sheenu You
//Section E
//sheenuy@andrew.cmu.edu
//Assignment-02-A
var faceW = 300;
var faceH = 300;
var faceR =255;
var faceG =207;
var faceB =35;
var eye1=70;
var eyex= 180;
var eye2=40;
var eyex2=180;
var eyeh=240;
var mouthw=200
var mouthh=150
function setup() {
    createCanvas(480, 640);
}

function draw() {
	//Background
	noStroke();
	background(27,165,207);
	//Shadow
	fill(0, 115, 181);
	ellipse(250, 340, faceW, faceH)
	//Outline
	fill(255);
	ellipse(width/2, height/2, faceW+10, faceH+10)
	//Face
	//Actual face
	fill(faceR, faceG, faceB);
	ellipse(width/2, height/2, faceW, faceH)
	//Eyes
	fill(255);
	ellipse(eyex, eyeh, eye1, eye1)
	ellipse(eyex+120, eyeh, eye1, eye1)
	//Pupil
	fill(0);
	ellipse(eyex2, eyeh, eye2, eye2)
	ellipse(eyex2+120, eyeh, eye2, eye2)
	//Mouth
	fill(255,104,62);
	ellipse(240, 370, mouthw, mouthh)
	//TextBox
	fill(255);
	rectMode(CENTER);
	rect(width/2, 565, 350, 130,20)
	fill(faceR,faceG,faceB)
	textSize(50);
    text("WHOA!", 155, 580);
}
	function mousePressed(){ 
	//When you click anywhere, you can change stuff
	faceW = random(250, 350);
	faceH = random(250, 350);
	faceR =random(0, 255);
	faceG =random(0, 255);
    faceB =random(0, 255);
	eye1=random(1,150);
	eyex= random(170,190);
	eye2=random(1,70);
	eyex2=random(170,190);
	eyeh=240;
	mouthw=random(100,300);
	mouthh=random(50,200);
}

sunmink-project2-VariableFace

sketch


//Sun Min (Chloe) Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project-02

var eyeSize = 20; 
var faceWidth = 120; 
var faceHeight = 140; 
var noseSize = 15; 
var mouthSize = 30; 
var background1 = (203); 
var background2 = (228);
var background3 = (248); 

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

function draw() {
    background(background1, background2, background3);
    //face
    noStroke(0); 
    fill(246, 217, 188);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3; 
    var eyeRX = width / 2 + faceWidth * 0.3; 

    //eyes
    fill(255, 255, 255); 
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //pupil 
    fill(64, 60, 58); 
    ellipse(eyeLX, height / 2, eyeSize / 2.5, eyeSize / 2.5);
    ellipse(eyeRX, height / 2, eyeSize / 2.5, eyeSize / 2.5);

    //nose 
    stroke(64, 60, 58);
    strokeWeight(1);
    arc(width / 2, height / 1.9, noseSize, noseSize, 180, 11.7, PI);

    //mouth 
    fill(217, 134, 138);
    noStroke(0);
    ellipse(width / 2, height / 2 + 40, mouthSize * 1.2, mouthSize / 2);
    


}

    function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 100 and 150.
    faceWidth = random(100, 150);
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseSize = random(20, 10); 
    mouthSize = random(30, 10); 
    background1 = random(0, 255); 
    background2 = random(0, 255); 
    background3 = random(0, 255); 

}

For this project, I chose a simple face structure to emphasize the change in background color and change in the elements of the face when “mousePressed” function is activated. It was interesting to use this new function and create an interactive graphics for the first time, and I look forward to experimenting more variables to build more complex designs in the future.

 

hqq-secE-project02-variable-faces

hamza

//hamza qureshi
//section e
//project 02
//hqq@andrew.cmu.edu

//here's carl, y'all!

//background color variables
var R_bg = 20;
var G_bg = 225;
var B_bg = 255;
//arm variables
var y_armleft = 400;
var y_armright = 380;
//head variables
var width_head = 280;
var height_head = 90;
var color_head = 120;
//mouth variables
var width_mouth = 200;
var height_mouth = 40;
var color_mouth = 190;
var strokeColor_mouth = 235;
//eyes variables
var rad_eyes = 15;
var rad_pupil = 7;
var x_eye1 = 23

function setup(){
    createCanvas(640,480);
    rectMode(RADIUS);
    ellipseMode(RADIUS);
    angleMode(DEGREES);
}

function draw(){
    //background
    background(R_bg,G_bg,B_bg);
    //arms
    strokeWeight(20);
    stroke(0,0,color_head - 50);
    line(160,445,100,y_armleft + 5);
    stroke(0,0,color_head);
    line(160,440,100,y_armleft);
    line(485,440,545,y_armright);
    //body
    fill(0,0,color_head - 50);
    strokeWeight(0);
    rect(width/2-30,height/2+150,150,150,20);
    fill(210,180,180);
    stroke(0,0,color_head);
    strokeWeight(40);
    rect(width/2,height/2+150,150,150,20);
    //head
    strokeWeight(0);
    fill(0,0,color_head-50);
    rect(width/2-30,height/2+5,width_head+30,height_head+5,20);
    fill(0,0,color_head);
    rect(width/2,height/2,width_head,height_head,20);
    //mouth
    fill(color_mouth,20,86);
    strokeWeight(10);
    stroke(strokeColor_mouth,30,100);
    rect(width/2,height/2+40,width_mouth,height_mouth,20);
    if (width_head >= 0){
      width_mouth = width_head-20;
    }
    //eyes
    fill(255,255,255);
    strokeWeight(3);
    stroke(0,0,0);
    var left_eye = width/3-height_head*0.5
    var right_eye = left_eye + width/2
    ellipse(left_eye,height/2-30,rad_eyes,rad_eyes);
    ellipse(right_eye,height/2-30,rad_eyes,rad_eyes);
    fill(0,0,0);
    strokeWeight(0);
    ellipse(left_eye,height/2-30,rad_pupil,rad_pupil);
    ellipse(right_eye,height/2-30,rad_pupil,rad_pupil);
    if (rad_eyes >= 0){
      rad_eyes > rad_pupil
    }


}

function mousePressed(){
    R_bg = random(0,40);
    G_bg = random(200,245);
    B_bg = random(245,255);
    width_head = random(200,250);
    height_head = random(110,140);
    color_head = random(120,210);
    width_mouth = random(210,290);
    height_mouth = random(10,30);
    color_mouth = random(180,220);
    strokeColor_mouth = random(235,255);
    rad_eyes = random(10,20);
    rad_pupil = random(2,8);
    y_armleft = random(390,460);
    y_armright = random(390,460);



}

For my variable face project, I made Carl, a frantic little buddy who’s a bit nervous about Picture Day. The photographer keeps snapping photographs, and in each one, he expresses his anxiety by how agape his mouth his, h0w dilated his eyes are, and the way he waves his hands.

hqq-secE-LookingOutwards-02

Hi guys!

Generative design is a huge part of what has led to the resurgence of the architecture industry in the past few decades. Methods of parametric modelling and design have monumentally transformed the way that architects develop a formal logic to designing complex buildings.

Photo: Zaha Hadid Architects (ZHA)

One of the pioneering pieces of parametrically designed architecture came just after the turn of the century. Designed by Zaha Hadid in 2003, the Guangzhou Opera House has become a major staple to the community while expressing a generative algorithm derived from an early prototype of a now-popular modelling language called Grasshopper. The algorithm considered various inputs including topography, sunlight, and population density projections to achieve a superfluous design that achieves optimally designed sonic clarity while adapting to environmental conditions in China.

Grasshopper is now used throughout the architecture industry to make important considerations like weather, topography, or mathematical logic a staple in the design process.