Category: Project-02-Variable-Face

BrandonHyun-Project-02-Variable Face

bhyun1-project02.js

//brandonhyun
// 15-104 Section B
//bhyun1@andrew.cmu.edu
//project-02

var eyeSize = 50;
var noseSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var eyebrowslength = 180;


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

function draw() {
//ears
  strokeWeight(5);
  //left Ear
  fill(219,153,52);
  ellipse(width/2.7 ,height/4.8 ,50,50);
  //RightEar
  fill(219,153,52);
  ellipse(width/2.7 + 170 , height/4.8 ,50,50);


//Shape of a face
  stroke(0);
  fill(219,153,52);
  ellipse(width/2,height/2,faceWidth,faceHeight);

  var eyeLX = width / 2 - faceWidth * 0.2;
  var eyeRX = width / 2 + faceWidth * 0.2;

//eye
  fill(0);
  ellipse(eyeLX,height/2.3,eyeSize/3,eyeSize/3);
  ellipse(eyeRX,height/2.3,eyeSize/3,eyeSize/3);
//eyebrows
fill(0);
strokeWeight(5);
strokeCap(ROUND);
line(eyeLX-30,eyebrowslength, eyeLX+30,eyebrowslength);
line(eyeRX-30,eyebrowslength, eyeRX+30,eyebrowslength);

//nose
fill(0);
ellipse(width/2,height/2 + 10,noseSize/3,noseSize/3);
fill(255);
noStroke();
ellipse(width/2 - 10,height/2 + 20,noseSize/2,noseSize/2);
fill(255);
noStroke();
ellipse(width/2 + 10,height/2 + 20,noseSize/2,noseSize/2);
}


function mousePressed() {

  eyebrowslength = random (100,200);
  eyeSize = random(10, 100);
  noseSize = random(10,50);

}

I was interested with the Character named Ryan from Kakao Talk, which is a messaging platform in South Korea. Everyone is obsessed with this character and this character became one of the icons for the Kakao co.

When I was working I wanted to recreate the character by myself by using codes and I also wanted to have some movements when the user is clicking.

Components that moves when there is a click are the eyebrows, eyes, and the nose. By having this movement it seems like Ryan is expressing different emotions.

thlai-Project-02-Variable-Face


thlai-project02

// Tiffany Lai
// 15-104 Section A
// thlai@andrew.cmu.edu
// Project-O2

var eyeSize = 0;
var mouth1 = 60;
var mouth2 = 120;
var skinR = 210;
var skinG = 210;
var skinB = 210;
var eyebrows = 275;
var eyebrowStroke = 10;
var snout = 115;
var jaw1 = 240;
var jaw2 = 200;

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

function draw() {
    background(255, 250, 230);
    noStroke();

    fill(skinR, skinG, skinB);
    beginShape(); // left ear
        curveVertex(220, 260);
        curveVertex(220, 260);
        curveVertex(180, 100);
        curveVertex(120, 100);
        curveVertex(170, 280);
        curveVertex(170, 280);
    endShape(); 

    beginShape(); // right ear
        curveVertex(250, 280);
        curveVertex(250, 280);
        curveVertex(300, 100);
        curveVertex(350, 100);
        curveVertex(310, 280);
        curveVertex(320, 280);
    endShape();

    ellipse(width/2, height/2, 200, 200); // head top
    ellipse(width/2, height/2+40, jaw1, jaw2); // head bottom

    fill(255);
    ellipse(width/2, height/2+60, snout, snout); // snout

    fill(70);
    ellipse(width/2-50, height/2, eyeSize+20, eyeSize+30); // left eye
    ellipse(width/2+50, height/2, eyeSize+20, eyeSize+30); // right eye

    push();
    stroke(skinR-20, skinG-20, skinB-20);
    strokeWeight(eyebrowStroke);
    line(178, eyebrows, 198, eyebrows-5); // left eyebrow
    pop();

    push();
    stroke(skinR-20, skinG-20, skinB-20);
    strokeWeight(eyebrowStroke);
    line(300, eyebrows, 280, eyebrows-5); // right eyebrow
    pop();

    fill(250, 225, 235);
    triangle(width/2-10, height/2+30, width/2+10, height/2+30, width/2, height/2+50); // nose

    fill(255, 100, 140);
    arc(width/2, height/2+60, 80, 80, mouth1, mouth2); // mouth
}

function mousePressed() {
    eyeSize = random(-10, 20);
    mouth1 = random(-10, 80);
    mouth2 = random(100, 190);
    skinR = random(200, 240);
    skinG = random(200, 240);
    skinB = random(200, 240);
    eyebrows = random(240, 300);
    eyebrowStroke = random(5, 20);
    snout = random(95, 150);
    jaw1 = random(220, 250);
    jaw2 = random(175, 210);
}

 

Jdbrown – Project 2: Electric Boogaloo

JdbrownProject02

// Joshua Brown
// Jdbrown@andrew.cmu.edu
// Section C
// Project 2: Face Generation

var faceWidth = 200;
var faceHeight = 150;

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

function draw () {
    background (190, 50, 90);
    noStroke ();

    fill (random (30, 60), random (60, 120), random (90, 180));

    // Drawing background triangles

    triangle (0, 480, 240, 480, 240, 240);  // idk why not
    triangle (640, 480, 400, 480, 400, 240);  // idk why not
    triangle (0, 0, 240, 0, 240, 240);  // idk why not
    triangle (640, 0, 400, 0, 400, 240); // idk why not

    // Drawing actual face

    fill (255);
    ellipse (width / 2, height / 3 + 50, width / 4, height / 3);    // drawing face outline

    fill (200);
    ellipse (width / 2, height / 3 + 50, width / 6, height / 5);    // drawing face outline

    stroke (0);
    strokeWeight (5);

    fill (255);
    ellipse (width / 3 + 75, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 12, height / 9);    // drawing eye socket (R)
    
    noFill ();

    ellipse (width / 3 + 75, height / 3 + 25, width / 16, height / 12);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 16, height / 12);    // drawing eyeball Ring1 (R)
    ellipse (width / 3 + 75, height / 3 + 25, width / 24, height / 20);     // drawing eyeball Ring2 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 24, height / 20);    // drawing eyeball Ring2 (R)

    fill (random (30, 60), random (60, 120), random (90, 180));

    ellipse (width / 3 + 75, height / 3 + 25, width / 52, height / 40);     // drawing eyeball Ring1 (L)
    ellipse (width / 3 + 140, height / 3 + 25, width / 52, height / 40);    // drawing eyeball Ring1 (R)

    ellipse (width / 2, height / 3 - 65, faceWidth / 10, faceHeight / 6);   // drawing third eye

    ellipse (width / 2, height / 3 + 185, faceWidth / 10, faceHeight / 6);   // drawing third eye blind

    fill (0);
    arc (width / 2, height / 2, width / 6, faceHeight / 6, 90, PI); // drawing mouth

}

function mousePressed () {

    width = random (160, 1280) + random (10, 50);
    height = random (120, 920) + random (10, 50);

}

This project went through a few iterations, but the most challenging aspect was that I discovered “random” commands. As you can see, I couldn’t help myself, and there’s a psychedelic quality to the overall presentation. Sorry ’bout it.

Josh

merlebac Project-02 Section B

merlebac Project-02

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Assignment-02-A

/* For this assignment I used the example provide in the assignment
description as a starting point. I then used what I learned from
that to add my own details and variation to the assignment. */

// Global Parameter Variables

var eyeWidth = 30
var eyeHeight = 30
// Determines width and height of eyes

var faceWidth = 150
var faceHeight = 150
// Determines width and height of face

var lipWidth = 100
var lipHeight = 10
// Determines width and height of lip

var noseP1X = 315
var noseP1Y = 265
// Determines 1st point of triangle nose

var noseP2X = 320
var noseP2Y = 255
// Determines 2nd point of triangle nose

var noseP3X = 325
var noseP3Y = 265
// Determines 3rd point of triangle nose

var hornX = 250
var hornY = 150
// Determines last point of horns

var fangP3 = 300
// Determines fang length

// Global color Variables

var faceColorR = 255
var faceColorG = 255
var faceColorB = 255
// Determines the color combination of face

var eyeColorR = 255
var eyeColorG = 255
var eyeColorB = 255
// Determines color combination of eyes

var lipColorR = 255
var lipColorG = 255
var lipColorB = 255
// Determines color combination of lip

var noseColorR = 255
var noseColorG = 255
var noseColorB = 255
// Determines color of nose

var hornColorR = 255
var hornColorG = 255
var hornColorB = 255
// Determines color of the horns

var fangColorR = 255
var fangColorG = 255
var fangColorB = 255
// Determines color of the fangs

function setup() {
    createCanvas(640, 480);
    // Creates a black canvas
}

function draw() {
    background(0);
    
    fill(hornColorR, hornColorG, hornColorB);
    triangle(320, 270, 320, 210, hornX, hornY);
    // Creates left horn

    fill(hornColorR, hornColorG, hornColorB);
    triangle(320, 270, 320, 210, width - hornX, hornY);
    // Creates right horn

    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    // Creates a circle for the face
    
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    // Chooses a coordinate for the eyes

    fill(fangColorR, fangColorG, fangColorB);
    triangle(280 + 0.1 * faceWidth, 280,
        290 + 0.1 * faceWidth, 280, 285 + 0.1 * faceWidth, fangP3);
    // Creates left fang

    fill(fangColorR, fangColorG, fangColorB);
    triangle(360 - 0.1 * faceWidth, 280,
        350 - 0.1 * faceWidth, 280, 355 - 0.1 * faceWidth, fangP3);
    // Creates right fang
    
    fill(lipColorR, lipColorG, lipColorB);
    rectMode(CENTER);
    // Centers rectangle
    rect(width / 2, height / 2 + 40,
        lipWidth, lipHeight);
    // Creates and chooses parameters of lip

    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
    // Creates a left eye for the face
    
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
    // Creates a right eye for the face

    fill(noseColorR, noseColorG, noseColorB);
    triangle(noseP1X, noseP1Y, noseP2X, noseP2Y, noseP3X, noseP3Y);
    // Creates triangle as a nose

}

function mousePressed() {
// Shape randomizers

    eyeWidth = random(10, 50);
    eyeHeight = random(10, 50);
    // Randomizes the width and height of the eyes
    
    faceWidth = random(100, 200);
    faceHeight = random(100, 200);
    // Randomizes the width and height of the face

    lipWidth = random(75, 150);
    lipHeight = random(5, 15);
    // Randomizes the width and height of the lip

    hornX = random(150, 250);
    hornY = random(50, 150);
    // Randomizes the last poing of the horn

    noseP1X = random(305, 315);
    noseP1Y = random(255, 265);
    // Randomizes the 1st point of the nose

    noseP2X = random(315, 325);
    noseP2Y = random(245, 255);
    // Randomizes the 2nd point of the nose

    noseP3X = random(325, 335);
    noseP3Y = random(255, 265);
    // Randomizes the 3rd point of the nose

    fangP3 = random(300, 400);
    // Randomizes the bottom of the fang

// Color Randomizers

    faceColorR = random(0, 255);
    faceColorG = random(0, 255);
    faceColorB = random(0, 255);
    // Randomizes the color of the face

    eyeColorR = random(0, 255);
    eyeColorG = random(0, 255);
    eyeColorB = random(0, 255);
    // Randomizes the color of the eyes

    noseColorR = random(0, 255);
    noseColorG = random(0, 255);
    noseColorB = random(0, 255);
    // Randomizes the color of the nose

    lipColorR = random(0, 255);
    lipColorG = random(0, 255);
    lipColorB = random(0, 255);
    // Randomizes the color of the lip

    hornColorR = random(0, 255);
    hornColorG = random(0, 255);
    hornColorB = random(0, 255);
    // Randomizes the color of the horns

    fangColorR = random(0, 255);
    fangColorG = random(0, 255);
    fangColorB = random(0, 255);
    // Randomizes the color of the fangs

}

Working on this project was an interesting experience for me. I started out by just creating a regular face, and sort of hit a creativity block after that. I decided that it would be cool if the colors would constantly change against a black background so I made each color a variable. Finally, I decided to give the face fangs and horns in order to increase the variability, as well as make it more visually interesting.

aboyle-Sect D-Project 2-Variable Face

aboyle Var Face

//Anna Boyle
//aboyle@andrew.cmu.edu
//Section D
//Project 2


//variables
    var eyeWidth =20
    var eyeHeight=20
    var faceWidth=100
    var faceHeight=100
    var pupil=170
    var noseWidth=5
    var noseHeight=130
    var nosePosition=80
    var browthickness=2
    var brow=80
    var hairLength=150
    var mouth;

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


function draw() {
    background(157,242,171);
    strokeWeight(0);
//hair
    fill(71,44,21);
    ellipse(195,80,faceWidth+20,faceHeight-20);
    rect(115,110,160,hairLength);
    //black rectangle gives hair more depth
    fill(0);
    rect(130,110,130,hairLength);
//shirt
    fill(0,204,204);
    ellipse(195,230,150,50);
    rect(120,230,140,190);
    fill(6,142,142);
    rect(145,270,7,150);
//pants
    fill(19,38,112);
    rect(140,420,120,220);
    fill(0)
    rect(195,450,7,220)
//neck
    fill(142,88,51);
    rect(175,150,40,70);
//button
    fill(114,4,4);
    ellipse(400,330,100);
    fill(255,0,0);
    //gives the effect of button being pushed
    if (mouseIsPressed)
      ellipse(400,330,100);
    else
      ellipse(400,320,100);
//head
    fill(198,147,111);
    ellipse(195, 120,faceWidth,faceHeight);
//hands
    rect(120,420,35,40);
    //slight change makes button movement look more natural
    if (mouseIsPressed)
      rect(385,304,33,38);
    else
      rect(385,304,35,40);
//ears
    strokeWeight(0);
    ellipse(190-faceWidth/2,120,30);
    ellipse(200+faceWidth/2, 120, 30);
//nose
    fill(142,88,51);
    triangle(190,nosePosition,190-noseWidth,noseHeight,190+noseWidth,noseHeight);
//eyes
    strokeWeight(2);
    fill(256);
    ellipse(210,95,eyeWidth,eyeHeight);
    ellipse(170,95,eyeWidth,eyeHeight);
//pupils
    fill(0);
    ellipse(pupil,95, eyeWidth/2, eyeHeight/2);
    ellipse(pupil+40, 95, eyeWidth/2, eyeHeight/2);
//mouth
    noFill()
    //switches the mouth between smile and straight
    if (mouth<=0.5)
      curve(200,50,170,160,215,160,200,50);
    else
      line(170,160,215,160);
//earrings
    fill(236,200,21);
    strokeWeight(0);
    rect(183-faceWidth/2, 127, 10,10);
    rect(197+faceWidth/2,127,10,10);
//eyebrows
    strokeWeight(browthickness);
    line(155, 75, 185, brow);
    line(195,brow,225,75);
//arm
    fill(0,204,204);
    strokeWeight(0);
    rect(300,310,85,30);
    translate(width/5, height/5);
    rotate(PI/3.0);
    rect(165,-100,120,30);
}


function mousePressed(){
  faceWidth=random(130,170);
  faceHeight=random(150,190);
  eyeWidth=random(10,37);
  eyeHeight=random(15,35);
  pupil=random(165,175);
  noseWidth=random(5,10);
  noseHeight=random(130,150);
  nosePosition=random(95,120);
  browthickness=random(2,9);
  brow=random(60,92);
  hairLength=random(75,230);
  mouth=random(0,1)
}

I thought this was a cool assignment! I had a lot of fun playing with the variables, even though I couldn’t add as many details as last time. For some reason when I refresh the page the face looks pretty weird, but once I start clicking the mouse it looks like how I want it to.

I also decided to give my subject apparent agency over her own face changes by making it look like she’s pressing a button. Though rather simple, I hope it’ll help me remember the difference between mousePressed and mouseIsPressed in the future.

In retrospect, I wish I had done more with curves and more complicated shapes, but overall I’m okay with how it turned out.

abradbur-Project-02-Variable Face

facegenerator 

//global variables
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var pupilSize = 10;
var noseLength = 30;
var noseHeight = 30;
 
function setup() {
    createCanvas(640, 480);
    rectMode(CENTER);
}
 
function draw() {
    noStroke();
    background(108, 207, 246);

    //hair + torso
    fill(112, 102, 119);
    rect(width/2, height/2 + 30, faceWidth + 10, faceHeight - 30);
    ellipse(width/2, height/2 - faceHeight/4, faceWidth + 10, faceHeight - 40);

    //face shape
    fill(204, 183, 174);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyeballs + pupils
    var eyeLX = width/2 - faceWidth * 0.25;
    var eyeRX = width/2 + faceWidth * 0.25;
    var eyeLH = height/2 - faceHeight * 0.25;
    var eyeRH = height/2 - faceHeight * 0.25;
    fill(255);
    ellipse(eyeLX, eyeLH, eyeSize, eyeSize);
    ellipse(eyeRX, eyeRH, eyeSize, eyeSize);
    fill(186, 199, 190);
    ellipse(eyeLX, eyeLH, pupilSize, pupilSize);
    ellipse(eyeRX, eyeRH, pupilSize, pupilSize);

    //mouth
    fill(166, 128, 140);
    arc(width/2, height/2 + faceHeight * 0.25, 100, 50, HALF_PI, PI);

    //nose
    fill(255, 202, 177);
    rect(width/2, height/2, noseLength, noseHeight);
    
    }

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 
    faceWidth = random(100, 400);
    faceHeight = random(70, 300);
    eyeSize = random(55, 70);
    pupilSize = random(5, 50);
    noseLength = random(20, 70);
    noseHeight = random(20, 70);
}

At first I wanted to make this a lot more complex than the way it turned out, but I definitely didn’t give myself enough time. I was going to make the shape of the nose switch between a circle, square, and triangle, in addition to having randomized proportions. I was also going to go with three different hairstyles and mouth options.

Alas, abandoned plans.

Unfortunately, I ended up only messing around with the proportions of the face, so I’m a little disappointed in the result. I might play with it more on my own.

jwchou-Project-02-VariableFace

sketch 2

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project 2

var eyeSize = 20;
var pupilX = 268;
var pupilY = 124;
var pupilSize = 6.5;
var armRotation = 0;
var MouthWidth = 50;
var MouthHeight = 30;
var RightEyeY = 120;
var mouth = 1;
var mouthExpressions = [1,2];


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

function draw() {
	//background will change color based on mouseX coordinates
	background(172, 230, 226); // blue
    if(mouseX < (width/3)){
      background(226, 225, 163); // yellow
    }
    if(mouseX > (2/3)*width){
      background(244,189,100); //orange
    }

	noStroke();

	//right eye
	fill(0);
	ellipse(349, RightEyeY, eyeSize, 1.5*eyeSize);

	//head
	fill(43, 132, 212);
	beginShape();
	curveVertex(228, 169);
	curveVertex(228, 169);
	curveVertex(267, 85);
	curveVertex(330, 41);
	curveVertex(355, 78);
	curveVertex(350, 146);

	//torso
	curveVertex(347, 178);

	//legs
	curveVertex(358, 261);
	curveVertex(359, 311);
	curveVertex(367, 369);
	curveVertex(387, 409);
	curveVertex(404, 417);
	curveVertex(417, 437);
	curveVertex(386, 440);
	curveVertex(352, 435);
	curveVertex(343, 422);
	curveVertex(315, 365);

	//pelvis
	curveVertex(296, 337);

	//left leg
	curveVertex(286, 358);
	curveVertex(276, 396);
	curveVertex(273, 402);
	curveVertex(282, 416);
	curveVertex(289, 432);
	curveVertex(272, 438);
	curveVertex(246, 436);
	curveVertex(234, 429);
	curveVertex(236, 378);
	curveVertex(238, 340);
	curveVertex(238, 298);
	curveVertex(238, 298);
	curveVertex(229, 230);
	curveVertex(229, 230);
	endShape();

   
    //left eye
    fill(255)
    ellipse(267, 130, eyeSize, 1.5*eyeSize)
    fill(0);
    ellipse(264, 130, eyeSize, 1.5*eyeSize);
    fill(255);
    ellipse(pupilX, pupilY, pupilSize, pupilSize);


     //white body
    fill(255);
    rotate(0*PI);
    beginShape();
    curveVertex(300, 307);
    curveVertex(265, 232);
    curveVertex(265, 192);
    curveVertex(277, 143);
    curveVertex(292, 104);
    curveVertex(309, 72);
    curveVertex(334, 55);
    curveVertex(338, 57);
    curveVertex(344, 87);
    curveVertex(344, 113);
    curveVertex(342, 149);
    curveVertex(340, 177);
    curveVertex(337, 201);
    curveVertex(340, 227);
    curveVertex(327, 264);
    curveVertex(312, 293);
    endShape();

    //mouth
    fill(0);

    //frown
    if(mouth == 1){
      arc(309, 155, MouthWidth, MouthHeight, PI, 2*PI);
    }
    //smile
    if(mouth == 2){
    	arc(309, 135, MouthWidth, MouthHeight, 0, PI);
    }

    //left arm
    fill(43, 132, 212);
    rotate(armRotation*PI);
    beginShape();
    curveVertex(258, 251);
    curveVertex(251, 280);
    curveVertex(232, 270);
    curveVertex(218, 240);
    curveVertex(201, 218);
    curveVertex(182, 180);
    curveVertex(162, 138);
    curveVertex(152, 120);
    curveVertex(151, 112);
    curveVertex(156, 107);
    curveVertex(162, 106);
    curveVertex(152, 120);
    curveVertex(151, 112);
    curveVertex(156, 107);
    curveVertex(162, 106);
    curveVertex(172, 114);
    curveVertex(183, 126);
    curveVertex(204, 144);
    curveVertex(226, 166);
    curveVertex(256, 196);
    curveVertex(260, 224);
    endShape();

    //right arm
    beginShape();
    curveVertex(340, 118);
    curveVertex(342, 205);
    curveVertex(345, 224);
    curveVertex(345, 256);
    curveVertex(347, 267);
    curveVertex(360, 243);
    curveVertex(366, 234);
    curveVertex(376, 220);
    curveVertex(388, 206);
    curveVertex(398, 191);
    curveVertex(410, 176);
    curveVertex(417, 167);
    curveVertex(430, 145);
    curveVertex(446, 118);
    curveVertex(453, 102);
    curveVertex(447, 96);
    curveVertex(439, 100);
    curveVertex(424, 108);
    curveVertex(409, 122);
    curveVertex(390, 134);
    curveVertex(370, 153);
    curveVertex(340, 188);
    endShape();
}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    pupilX = random(258, 271);
    pupilY = random(122, 138);
    pupilSize = random(6.5, 15);
    armRotation = random(-0.01, 0);
    MouthWidth = random(15, 50);
    MouthHeight = random(15,40);
    RightEyeY = random(105,135);
    mouth = random(mouthExpressions); //mouth will change from frown to smile

}

For this project, a friend gave me the suggestion that I should recreate left shark, who was took over the internet after Katy Perry’s 2015 Super Bowl Halftime Show.

To plot all the distinct points, I opened an image file in Adobe Illustrator and used the “info” window to find the pixel coordinate for the various different shapes.

Most everything was pretty straightforward, but I did have a hard time getting the arms (fins) to move and the color of the background to change.  In fact, I couldn’t figure out how to make the colors change on click, so I made it change based on mouse movement. I got the fins to rotate, but I need to learn how to change the point of rotation from the origin to another point.

serinal (section C) – project 02

*i’m not sure why the thing is getting cut off, but TECHNICALLY if you zoom out, it should work out*

sketch

// Serina Liu 
// Section C
// serinal@andrew.cmu.edu
// Project 02, Changing Faces

var eye = 40;
var faceWidth = 150;
var faceHeight = 200;
var mouthSize = 25;
var featherwidth = 30;
var featherheight = 60;
var beaklength = 160;
var pupilsize = 10;
var buttfeathers = 495;
var brow = 5; 
var browtilt = 130; 
//colors
var cR = 240;
var cG = 100; 
var cB = 192; 
//eyebrow
var eyebrows = 10;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(178, 255, 102);
    //head
    fill(256, 256, 256);
    rect(320, 240, faceWidth,  faceHeight);
    //top part of head 
    fill (220);
    rect (320, 240, faceWidth, faceHeight/2);
    //eyes
    fill(0, 0, 0);
    var eyeLX = 320 - faceWidth * 0.1;
    var eyeRX = 320 + faceWidth * 0.2;
    ellipse(eyeLX +10, height / 2, eye, eye);
    ellipse(eyeRX +10, height / 2, eye, eye);
    //eyepupils
    fill(256, 256, 256);
    ellipse (eyeLX+5, height/2, pupilsize, pupilsize);
    ellipse (eyeRX+5, height/2, pupilsize, pupilsize);
    //mouth
    fill(255, 255, 0);
    triangle(200, height/2 + 40, 360, 280, 360, 330);
    //mouthpiece2
    fill(255, 255, 0);
    triangle(beaklength, height/2 + 60, 360, 330, 360, 380);
    //head piece
    fill (255, 0, 0);
    ellipse(460, 240, featherwidth, featherheight);
    ellipse (470, 250, featherwidth, featherheight);
    ellipse (480, 260, featherwidth, featherheight);
    //butt feathers
    fill (256, 256, 256);
    triangle (buttfeathers, height/2 +120, 420, 390, 490, 4000);
    //underchin 
    fill (255, 0, 0);
    ellipse (350, 390, featherwidth, featherheight);
    ellipse (330, 390, featherwidth, featherheight);
    ellipse (370, 390, featherwidth, featherheight);
    //text
    fill(250, cG, cB);
    textSize(20);
    text("hello i am a chicken", 235, 145, 500, 500);
    //text
    fill(cR, 180, cB);
    textSize(20);
    text("hello i am a chicken", 450, 145, 500, 500);
    //text
    fill(cR, cG, 180);
    textSize(20);
    text("hello i am a chicken", 20, 145, 500, 500);
    //text
    fill (76, 153, 0);
    textSize (100);
    text("i am a chicken", 1, 30, 700, 700);
    //eyebrows
    fill(0,0,0);
    rect(eyeLX+7, 203, 30, eyebrows);
    rect(eyeRX+7, 203, 30, eyebrows);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(130, 165);
    faceHeight = random(300, 400);
    eye = random(10, 30);
    mouthSize = random(80, 100);
    featherwidth = random(30,60);
    featherheight = random(30, 60);
    beaklength = random(40, 120);
    pupilsize = random(7, 15);
    buttfeathers = random(40, 150);
    cR = random(1, 256);
    cG = random(1, 256);
    cB = random(1, 256);
    eyebrows = random(5, 15);
}

This particular project was kind of a challenge for me just because I was having trouble really understanding variables in general. However, once I started to understand the meaning of a variable, I was more easily able to code something. I knew I wanted to do an animal and I wanted to keep the colors of the chicken stable so I tried to manipulate all the other stuff that is involved with it. The text changing color was a fun little thing. Overall, I guess that I would love to have a bit more time to explore and refine my ideas. I think it would probably be helpful to actually sketch out my ideas prior to making it, but as of now and as of the level I am at, I think that it satisfies my standards.

eeryan-Project-02-VariableFace

sketch

//Erin Ryan
//eeryan@andrew.cmu.edu
//Lecture 1, Section C
//Project 02
var eyeSize = 20;
//face variables
var faceWidth = 100;
var faceHeight = 150;
var wink = 1;
//mouth variables
var mouthXone = 120;
var mouthXtwo = 140;
var mouthYone = 190;
var mouthYtwo = 190;
var mouthWidth = 10;
var mouthHeight = 10;
var mouthNumber = 1;
var rB = 40;
//body variables
var shoulderHeight = 265;
 
function setup() {
    createCanvas(300,300);
}
 
function draw() {
    background(255,255,210);
    //phone
    noStroke();
    fill(193,93,101);
    quad(45,140,70,150,70,212,45,200);
    var eyeY = height/2;//eye height
    //arm
    noFill();
    stroke(152,196,249);
    strokeWeight(10);
    beginShape();
    curveVertex(50,170);
    curveVertex(50,170);
    curveVertex(50,180);
    curveVertex(50,280);
    curveVertex(100,310);
    curveVertex(110,310);
    endShape();
    //shoulders
    noStroke();
    fill(50,80,109);
    rect(75,shoulderHeight,170,100,25,25,25,25);
    //face
    stroke(152,196,249);
    fill(197,255,237);
    strokeWeight(5);
    rect(100, 75, faceWidth,  faceHeight,25,25,40,40);
    var eyeLX = width / 2 - faceWidth * 0.25-10;
    var eyeRX = width / 2 + faceWidth * 0.25-10;
    stroke(50,80,109);
    noFill();
    //left eye
    strokeWeight(3);
    ellipse(eyeLX, eyeY, eyeSize, eyeSize);
    //mouth
    if(mouthNumber==1){
      noStroke();
      fill(193,93,101);
      arc(mouthXtwo, mouthYtwo, mouthWidth, mouthHeight,0,PI);
    }
    if(mouthNumber==2){
      stroke(193,93,101);
      line(mouthXone,mouthYone,mouthXtwo,mouthYone);
    }
    if(mouthNumber==3){
      noStroke();
      fill(193,93,101);
      ellipse(mouthXone,mouthYone,mouthWidth,mouthHeight);
    }
    //right eye
    if(wink==1){
      stroke(50,80,109);
      line(eyeRX-5, height/2,eyeRX+5, height/2);
    }
    else{
    noFill();
    stroke(50,80,109);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); 
    }
    
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(120, 180);
    eyeSize = random(10,20);
    mouthXone = random(120,130);
    mouthXtwo = random(140,150);
    mouthYone = random(180,190);
    mouthYtwo = random(155,165);
    mouthXthree = random(110,120);
    mouthYthree = random(155,165)
    mouthWidth = random(10,35);
    mouthHeight = random(5,25);
    mouthNumber = Math.floor((random()*3)+1);
    wink = Math.floor((random()*3)+1);
    eyeY = height/2 +(Math.floor((random()*7)+1));
    shoulderHeight = random(265,230);
    
}

I started off by tweaking the original template, finding slight differences like making the height of the eyes unequal, changing the radius of the curves of the face rectangle and adding strokes to different elements. I chose a color palette that I thought worked well with the simplistic faces I created, primarily desaturated primary colors.

After toying with conditionals and tweaking elements to give my faces different expressions, I decided that adding the context of a cell phone would tie my piece together. The different faces dictate how the phone is being used – are they taking a selfie? did they just read a text that irritated them?

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