## mstropka-Project02-Variable-Face

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

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.

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.

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

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

Initial hand sketch from sketchbook:

SaveSave

SaveSave

SaveSave

SaveSave

SaveSave

``````//Robert Managad
//Section E
//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);
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

``````
//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 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;
//mouth variables
var width_mouth = 200;
var height_mouth = 40;
var color_mouth = 190;
var strokeColor_mouth = 235;
//eyes variables
var x_eye1 = 23

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

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

}

function mousePressed(){
R_bg = random(0,40);
G_bg = random(200,245);
B_bg = random(245,255);
width_mouth = random(210,290);
height_mouth = random(10,30);
color_mouth = random(180,220);
strokeColor_mouth = random(235,255);
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.