Category: Project-02-Variable-Face

amui1 – Project-02-Variable-Face

amui1-project2

//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-02

var val = 0
var headW = 400
var headH = 371
var backR = 225
var backG = 225
var backB = 225

function setup() {
    createCanvas(600,600);
    backR = random(0,255);
    backG = random(0,255);
    backB = random(0,255);
    background(backR,backG,backB);
}

//when mouse is clicked, do these functions
function mouseClicked() {
  if (val <= 0) {
    //sad background
    backR = random(0,43);
    backG = random(151,255);
    backB = random(207,255);
    push(new sad);
    val += 1;
  } else{
    //angry background
    if (val == 1) {
      backR = random(188,255);
      backG = random(0,30);
      backB = random(0,55);
      push(new hungry);
      val += 1;
    } else{
      //happy background 
      backR = random(180,255);
      backG = random(190,255);
      backB = random(0,50);
      push(new happy);
      val = 0;
    }

  }
}

function sad() {
    headW = random(300,400);
    background(backR,backG,backB);
    //hair
    strokeWeight(0);
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    strokeWeight(3);
    arc(width/2,470,145,65, PI,0);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(208,226,50,45);
    ellipse(385,226,50,45);
    fill(249,214,159);
    ellipse(201,222,70,41);
    ellipse(395,222,70,41);
    //worrymark
    strokeWeight(2);
    arc(400,470,5,12,HALF_PI, 3*HALF_PI);
    arc(200,470,5,12,3*HALF_PI, HALF_PI);
    //eyebag
    fill(132,81,36);
    strokeWeight(0);
    ellipse(222,385,40,11);
    ellipse(380,385,40,11);
}

function hungry() {
    headW = random(350,400);
    background(backR,backG,backB);
    //hair
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    fill(132,81,36);
    ellipse(width/2,455,100,80);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(230,226,50,45);
    ellipse(375,226,50,45);
    fill(249,214,159);
    ellipse(240,220,67,39);
    ellipse(364,220,70,41);
    //angry lines
    strokeWeight(2);
    line(150,350,170,370);
    line(430,370,450,350);
    //banana
    fill(255,255,0);
    strokeWeight(0);
    beginShape();
    vertex(mouseX, mouseY);
    bezierVertex(mouseX + 50, mouseY - 20,
               mouseX + 50, mouseY + 55,
               mouseX, mouseY + 55);
    bezierVertex(mouseX + 20, mouseY + 60,
               mouseX + 30, mouseY + 5,
               mouseX, mouseY);
    endShape();
}

function happy() {
    headW = random(400,450);
    background(backR,backG,backB);
    //hair
    fill(132,81,36);
    triangle(width/2 - 50,200,width/2, 70, width/2 + 50, 200);
    triangle(width/2 - 10,200,width/2 - 30, 80, width/2 + 80, 200);
    triangle(width/2 - 50,200,width/2 + 30, 70, width/2 + 60, 200);
    //shadow
    fill(132,81,36);
    ellipse(width/2,280,headW+15,headH - 11);
    ellipse(125,height/2,190,170);
    ellipse(475,height/2,190,170);
    strokeWeight(0);
    //ears
    fill(194,128,69);
    ellipse(125,height/2,171,157);
    ellipse(476,height/2,171,157);
    fill(234,161,178);
    ellipse(125,height/2,119,105);
    ellipse(475,height/2,119,105);
    //head
    fill(194,128,68);
    ellipse(width/2,height/2,headW,headH);
    fill(249,214,159);
    ellipse(220,height/2,175,216);
    ellipse(380,height/2,175,216);
    ellipse(300,388,390,255);
    ellipse(300,468,209,124);
    //eyes
    strokeWeight(1);
    fill(255);
    ellipse(230,312,115,115);
    ellipse(375,312,115,115);
    fill(0);
    ellipse(230,312,65,65);
    ellipse(375,312,65,65);
    strokeWeight(0);
    fill(255);
    ellipse(248,293,20,20);
    ellipse(390,290,20,20);
    //nose
    fill(194,128,68);
    ellipse(width/2,420,105,105);
    ellipse(width/2,455,168,115);
    //mouth
    strokeWeight(3);
    arc(width/2,440,145,65, 0, PI);
    //nostrils
    fill(0);
    strokeWeight(0);
    ellipse(285,403,20,20);
    ellipse(318,403,20,20);
    //eyebrows
    fill(110,75,33);
    ellipse(188,239,50,35);
    ellipse(410,239,50,35);
    fill(249,214,159);
    ellipse(193,245,50,30);
    ellipse(405,245,50,28);
    //laugh
    strokeWeight(2);
    arc(400,470,5,12,HALF_PI, 3*HALF_PI);
    arc(200,470,5,12,3*HALF_PI, HALF_PI);
}

I chose to do a sequence of emotions of a monkey: sad, then hungry (with a banana toying him), then happy. I started out sketching my monkey faces using Illustrator. Starting with this really streamlined my process when coding. I had a lot of fun with this project and am happy with my result.

ablackbu – Section C – Project-02-Variable-Face

sketch

//eye
var eyeSize = 15;
var outerEyeSize=40;


//mouth
var mouthWidth = 50;
var innerMouth = 30;

var mouthCorner3 = 15;
var mouthCorner4 = 20;


//face 
var faceWidth = 100;
var faceHeight = 175;

var faceCorner1 = 20;
var faceCorner2 = 15;
var faceCorner3 = 25;
var faceCorner4 = 40;

//color
var colorR = 50;
var colorG = 50;
var colorB = 50;

var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;

var colorR3 = 200;
var colorG3 = 200;
var colorB3 = 200;


//eyebrow
var brow = 3;
var browAngle = 100;


 


function setup() {
    createCanvas(640, 480);
    textSize(12);
}
 
function draw() {
    background(255);
   
    //body
    strokeWeight(3);
    fill(colorR3,colorG3,colorB3);
    stroke(0);
    rectMode(CENTER);
    rect(150,300,150,200,40,40,0,0);

    //arms
    strokeWeight(3);
    noFill();
    stroke(0);
    line(100,400,110,270);
    line(200,400,190,270);

    //face
    fill(colorR2,colorG2,colorB2);
    stroke(85,242,149);
    rectMode(CENTER);
    rect(150, 150, faceWidth,  faceHeight, faceCorner1, faceCorner2,
        faceCorner3,faceCorner4);

    //mouth
    stroke(132,223,244);
    fill(250,147,247);
    rect(150, 200, mouthWidth, 50,2, 2,mouthCorner3,mouthCorner4);
   
    //left eyebrow
    stroke(0);
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeLX = 150 - faceWidth * 0.25;   
    line(eyeLX - 10, 100,eyeLX + 10,browAngle);

    //right eyebrow
    strokeWeight(brow);
    strokeCap(ROUND);
    var eyeRX = 150 + faceWidth * 0.25;
    line(eyeRX - 10, browAngle, eyeRX + 10, 100);

    //eyes
    fill(colorR,colorG,colorB);
    strokeWeight(0);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, eyeSize, eyeSize);
    ellipse(eyeRX, 150, eyeSize, eyeSize);

    //glasses
    noFill();
    stroke(0);
    strokeWeight(1);
    var eyeLX = 150 - faceWidth * 0.25;
    var eyeRX = 150 + faceWidth * 0.25;
    ellipse(eyeLX, 150, outerEyeSize, outerEyeSize);
    ellipse(eyeRX, 150, outerEyeSize, outerEyeSize);


    //SPEECH bubble
    noStroke();
    fill(colorR,colorG,colorB);
    triangle(230,100,250,100,200,180);
    ellipse(250,100,100,50);

    //text
    fill(255);
    text("wasssup", 280, 145, 100, 100);




}
 
function mousePressed() {
    faceWidth = random(80, 140);
    faceHeight = random(170, 200);
    mouthWidth = random(30, 70);
    innerMouth = random(10, 40);

    //eye
    eyeSize = random(10, 20);
    outerEyeSize = random(30,50);
    
    //face corners
    faceCorner1 = random(0,50);
    faceCorner2 = random(10,50);
    faceCorner3 = random(10,50);
    faceCorner4 = random(10,50);

    //mouth corners
    mouthCorner3 = random(5,30);
    mouthCorner4 = random(5,30);

    //color
    colorR = random(20,100);
    colorG = random(20,100);
    colorB = random(20,100);

    colorR2 = random(150,255);
    colorG2 = random(150,255);
    colorB2 = random(150,255);

    colorR3 = random(50,200);
    colorG3 = random(50,200);
    colorB3 = random(50,200);

    //brow
    brow = random(1,5);
    browAngle = random(95 - 5,105);


}

I thought the most interesting part of this project was how relationships  between objects came into play. What this means is that the designer has to take into account objects moving relative to other objects that are also moving. The most interesting part was also the hardest for me in that I had some trouble staying on top of all the information I was trying to portray. Once I got the main framework down it was really satisfying every additional shape I made.

myoungsh-project02-variableface

sketch

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

//legs
var standing = 10;

//arms
var armLength = 50;

//face
var faceWidth = 175;
var faceHeight = 125;
var faceX = 330;
var faceY = 250;
var corner1 = 10;
var corner2 = 20;
var corner3 = 30;
var corner4 = 40;

//eyes
var eyeSize = 20;
var eyeLX = 450;
var eyeRX = 400;

//mouth
var mouthX = 425;
var mouthY = 355;
var mouthWidth = 50;
var mouthHeight = 35;

//lips
var lips = 10;

//thing
var thingX = 200;
var thingY = 100;
var thingWidth = 20;
var thingHeight = 15;

//face color
var colorFg = 210;
var colorFb = 210;

//eye+mouth color
var colorE = 100;

//lips color
var colorLg = 70;
var colorLb = 70;

//thing color
var colorTHr = 210;
var colorTHg = 210;
var colorTHb = 240;

//background color
var colorBr = 225
var colorBg = 250

function draw() {
    background(colorBr, colorBg, 256);
    
    //legs
    strokeWeight(0)
    fill(0)
    rect(425+standing, 350, 5, 200);
    
    strokeWeight(0)
    fill(0)
    rect(405+standing, 350, 5, 200);
      
    //arms
    strokeWeight(0)
    fill(0)
    rect(230+armLength, 325, 350-(armLength*1.5), 5)
    
    //face
    strokeWeight(0)
    fill(245, colorFg, colorFb)
    rect(faceX, faceY, faceWidth, faceHeight, 
    corner1, corner2, corner3, corner4);
    
    //left eye
    strokeWeight(0)
    fill(colorE)
    ellipse(eyeLX, 320, eyeSize, eyeSize);
   
    //right eye
    strokeWeight(0)
    fill(colorE)
    ellipse(eyeRX, 320, eyeSize, eyeSize);
    
    //mouth
    strokeWeight(lips)
    stroke(256, colorLg, colorLb)
    fill(colorE-30)
    ellipse(mouthX, mouthY, mouthWidth, mouthHeight);
    
    //eyes
    eyeSize = random(10, 30);
    
    //thing
    strokeWeight(0)
    fill(colorTHr, colorTHg, colorTHb)
    rect(thingX, thingY, thingWidth, thingHeight, 
    corner1/2, corner2/2, corner3/2, corner4/2);    
    
    //thing
    thingX = random(100, 300)
    thingY = random(75, 125)
    thingWidth = random(10, 35)
    thingHeight = random(10, 35)
}
 
function mousePressed() {
    //legs
    standing = random(0, 25)
    
    //arms
    armLength = random(0, 100)
    
    //face
    faceWidth = random(150, 180);
    faceHeight = random(130, 150);
    faceX = random(320, 350);
    faceY = random(240, 270);
    corner1 = random(0, 50)
    corner2 = random(0, 50)
    corner3 = random(0, 50)
    corner4 = random(0, 50)

    //eyeX
    eyeLX = random(380, 420);
    eyeRX = random(430, 470);
    
    //mouth
    mouthX = random(420, 430);
    mouthY = random(350, 360);
    mouthWidth = random(40, 60);
    mouthHeight = random(30,40);

    //lips
    lips = random(5, 10);

    //face color
    colorFg = random(180, 220);
    colorFb = random(75, 150);
    
    //eye color
    colorE = random(50, 200);
    
    //lips color
    colorLg = random(75, 125);
    colorLb = random(75, 125);
    
    //thing color
    colorTHr = random(200, 220);
    colorTHg = random(200, 220);
    colorTHb = random(230, 250);
    
    //background color
    colorBr = random(215, 256);
    colorBg = random(245, 256);

}

 

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.

agusman-Project02-VariableFace

agusman-02-variableface

//
// Anna Gusman
// agusman@cmu.edu
// Section A
// Project 02
// This program creates variable faces

var faceWidth = 150;
var faceHeight = 150;
var eyeVelX = 0; //eye velocity x
var eyeVelY = 0.4; //eye velocity y
var eyeSize = 40;
var rightEye = 40;
var leftEye = 40;
var leftEyeX = 5;
var leftEyeY = 20;
var rightEyeX = 40;
var rightEyeY = 20;
var eyeColor1;
var eyeColor2;
var mouthWidth = 100;
var mouthHeight = 50;
var mouthXcor = 30;
var mouthYcor = 50;
var color1;
var color2;

function setup() {
    createCanvas(400, 400);
    eyeColor1 = color(0)
    eyeColor2 = color(255, 200, 255);
}

function draw() {
    stroke(0.1)
    background(255, 255, 255);
    fill(255,255,255);

    //Head//
    from = color(255, 219, 0);
    to = color(182, 152, 0);
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, leftEye, leftEye);
    ellipse(eyeRX, height / 2, rightEye, rightEye);

    noStroke()
    from = color(255, 217, 0);
    to = color(253, 176, 0);
    for (var i = 0; i < faceWidth; i++) {
      fill(lerpColor(to, from, (i+1)/faceWidth));
      ellipse(width / 2 , height/2 - i*0 , faceWidth-i, faceHeight-i);
  }
    //Draw eyes in the right order
    if (eyeVelX>0) {
      drawLeftEye();
      drawRightEye();
    } else {
      drawRightEye();
      drawLeftEye();
    }

    //mouth//
    arc(mouthXcor / .15, mouthYcor / .2, mouthHeight, mouthWidth, 0, PI);

}

    //Left Eye//
function drawLeftEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < leftEye; i++) {
      fill(lerpColor(eyeColor1, eyeColor2, (i+1)/eyeSize));
      ellipse(width / 2 - i + rightEyeX, height/2 - i*eyeVelY - rightEyeY, eyeSize-i, eyeSize-i);
  }
}
    //Right Eye//
function drawRightEye(){
    noStroke()
    from = color(0, 0, 0);
    to = color(255, 200, 255);
    for (var i = 0; i < rightEye; i++) {
        fill(lerpColor(to, from, (i+1)/rightEye));
        ellipse(width / 2.5 - i + leftEyeX, height/2 - i*eyeVelY - leftEyeY, eyeSize-i, eyeSize-i);
  }
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(150, 200);
    faceHeight = random(150, 200);
    eyeSize = random(30, 50);
    rightEye = random(0, 40);
    leftEye = random(0, 40);
    mouthHeight = random(10,80)
    mouthWidth = random(20, 50)
    eyeColor1;
    eyeColor2;
}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

This project pushed me in ways I could not expect. My initial vision was to play with the idea of exploring all the possible iterations between a set of my favorite emojis, allowing me to generatively view all the intermediary emotional states between them. I also wanted to play with gradients to give an extra dimension to these expressions- and thus I hurled myself into the realm of for loops. I realize that this may have been beyond the scope of the assignment, but it was fascinating to learn the logic and technique behind creating this visual element and how a computer understands to draw it.

cchau1 – Project02 – Variable Faces

sketch


var eyeSize = 35;
var whiteSize = 15;
var faceWidth = 200;
var faceHeight = 200;
var r, g, b
var noseX = 20
var noseY = 10
var whiteHeight = 100
var whiteWidth = 35
var pinkHeight = 120
var pinkWidth = 40
var bodyW = 200
var bodyH = 250

function setup() {
    createCanvas(480,640);
    angleMode(CENTER)
    smooth()
    r = random(255);
    g = random(255);
    b = random(255);
}

function draw() {
    noStroke();
    background(165,216,255);

//bunny ears
    noStroke()
    ellipseMode(RADIUS);
    fill(250,249,250);
    ellipse(290,180,whiteWidth,whiteHeight);

    ellipseMode(CENTER);
    fill(255,225,242);
    ellipse(290,180,pinkWidth,pinkHeight);

    ellipseMode(RADIUS);
    fill(250,249,250);
    ellipse(180,180,whiteWidth,whiteHeight);

    ellipseMode(CENTER);
    fill(255,225,242);
    ellipse(180,180,pinkWidth,pinkHeight);

//head
    fill(250,249,250);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2.5 - faceWidth * 0.25;
    var eyeRX = width / 2.5 + faceWidth * 0.25;

    fill(r,g,b); //applied r,g,b random color variables to eyes
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    fill(255); //white eye shine
    ellipse(eyeLX-9, height / 2 -10, eyeSize/1.5, eyeSize/1.5);
    ellipse(eyeRX-9, height / 2 -10, eyeSize/1.5, eyeSize/1.5);

    fill(255,186,223); //nose
    ellipse((width/2)-50, height/2,noseX,noseY);

//body
    fill(250,249,250);
    ellipse(width/2,height-100,bodyW,bodyH);

//flower
    translate(300,265);
    noStroke()
   for (var i = 0; i < 10; i ++) {
     fill(r,g,b);
     ellipse(0, 10, 20, 60);
     rotate(PI/5)
}

}

function mousePressed() {
    var d = dist(mouseX, mouseY, 20,60);
    if (d < 500) {
      r = random(255);
      g = random(255);
      b = random(255);
    }
    faceWidth = random(170, 250);
    faceHeight = random(15, 250);
    eyeSize = random(20,60);
    whiteHeight = random(80,140);
    whiteWidth = random(20,50);
    pinkHeight = random(90,150);
    pinkWidth = random(20,40);
    bodyW = random(200,250);
    bodyH = random(250,300);

  }

I initially planned to have only the face, eyes, and ear length to change but decided to also add a random color-changing function which was applied to the eyes and additional flower function. As I was deciding the range for the random width/height for the head, I thought to myself that in nature, there are many beautiful mathematical proportions that have allowed species to thrive but in our imagination and in cartoons, these proportions can be as hilarious or wacky as we desire!

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);
}

kyungak-Project-02-Variable-Face

sketch

//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Assignment-02-Variable-Faces

var facewidth = 260;
var faceheight = 240;
var outerLx = 275;
var outerY = 200;
var eyesize = 40;
var outerRx = 370;
var pupilsize = 7
var nosewidth = 80;
var noseheight = 40;
var nostrilwidth = 5;
var nostrilheight = 10;
var mouthtip = 340;
var mouthheight = 290;
var mouthleft = 310;
var mouthright = 330;
var pupilcolor = 0;

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

function draw() {
    background(198,192,214);
//ears
    fill(228,162,194);

//face
    fill(245,216,230);
    strokeWeight(3);
    stroke(228,162,194);
    ellipse(320,240,facewidth,faceheight);

//eyes
    fill(255);
    stroke(0);
    ellipse(outerLx,outerY,eyesize,eyesize); //left outerpart of eye
    ellipse(outerRx,outerY,eyesize,eyesize); //right outerrpart of eye

    fill(pupilcolor);
    ellipse(outerLx,outerY,pupilsize,pupilsize); //left pupil
    ellipse(outerRx,outerY,pupilsize,pupilsize); //right pupil

//nose
    fill(234,217,225);
    ellipse(320,250,nosewidth,noseheight); //outerpart of nose

    fill(151,139,145);
    ellipse(300,250,nostrilwidth,nostrilheight); //left nostril
    ellipse(340,250,nostrilwidth,nostrilheight); //right nostril

//mouth
    fill(151,139,145); 
    triangle(mouthleft,mouthheight,width/2,mouthtip,mouthright,mouthheight); 
}

function mousePressed() {
    //when the user clicks, the variables are randomly reassigned
    //within the given ranges
    facewidth = random(250,350);
    faceheight = random(230,350);
    outerLx = random(250,275);
    outerY = random(170,200);
    pupilsize = random(5,25);
    nosewidth = random(50,150);
    noseheight = random(30,70);
    nostrilwidth = random(3,10);
    nostrilheight = random(5,15);
    mouthtip = random(300,347);
    mouthleft = random(250,315);
    mouthright = random(325,390);
    mouthheight = random(300,320);
    pupilcolor = random(0,255);
}

As someone who is just learning about this program, learning and experimenting with the “mousePressed” function was interesting. Although I encountered a few problems here and there, I was able to overcome them and learn from the mistakes. I have also attached my notebook sketch of how the face originally looked. Although the result doesn’t synchronize with the sketch, I believe I will be able to make more intricate designs as I learn to utilize more features on javascript.