Category: Section B

nayeon-variable_faces

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-02_Variable Faces


var pupil = 70;
var eyeS = 100;
var faceW = 300;
var faceH = 240;
var bodyW = 300;
var bodyH = 300;
var feetW = 50;
var feetH = 60;
var wingW = 100;
var wingH = 170;
var r = 166;
var g = 95;
var b = 38;
var dir = 1;
var speed = 0.5;



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

function draw() {
    background(250);
    noStroke();

//body
    fill(r, g, b);
    ellipse((width / 2), 420, bodyW, bodyH);

//ears
    push();
    translate(160, 200);
    rotate(30);
    translate(-160, -200);
    arc(150, 220, 180, 130, 0, 180);
    pop();

    push();
    translate(350, 350);
    rotate(-30);
    translate(-350, -350);
    arc(400, 220, 180, 130, 0, 180);
    pop();


//head
    ellipse((width / 2), (height / 2), faceW, faceH);

    fill(235, 207, 174);
    ellipse((width / 2), (height / 2) + 10, (faceW - 50), (faceH - 30));

    fill(207, 145, 74);
    ellipse((width / 2) - 50, (height / 2), eyeS + 40, eyeS + 20);
    ellipse((width / 2) + 50, (height / 2), eyeS + 40, eyeS + 20);

//eyes
    fill(260);
    ellipse((width / 2) - 50, (height / 2), eyeS, eyeS);
    ellipse((width / 2) + 50, (height / 2), eyeS, eyeS);

    fill(r -100, g -100, b -100);
    ellipse((width / 2) - 50, (height / 2), pupil, pupil);
    ellipse((width / 2) + 50, (height / 2), pupil, pupil);

    pupil += dir * speed;
    if (pupil > 80) {
        dir = -dir;
        pupil = 80;
    } else if (pupil < 50) {
        dir = -dir;
        pupil = 50;
    }

//beak
    fill(219, 164, 0);
    ellipse((width / 2), (height / 2) + 40, 40, 70);

//feet
    ellipse((width / 2) - 50, 570, feetW, feetH);
    ellipse((width / 2) + 50, 570, feetW, feetH);

//feather
    fill(235, 207, 174);
    triangle((width / 2) - 30, 450, (width / 2) -20, 470, (width / 2) -10, 450);
    triangle((width / 2) - 10, 450, (width / 2), 470, (width / 2) + 10, 450);
    triangle((width / 2) + 30, 450, (width / 2) +20, 470, (width / 2) +10, 450);


//wings
    fill(r -20, g -20, b -20)
    ellipse((width / 2) - 120, 480, wingW, wingH)
    ellipse((width / 2) + 120, 480, wingW, wingH)

}

function mousePressed() {

    faceW = random(250, 350);
    faceH = random(200, 280);
    eyeS = random(80, 120);
    pupil = random(50, 90);
    bodyW = random(250, 350);
    bodyH = random(250, 350);
    feetW = random(30, 70);
    feetH = random(50, 90);
    wingW = random(70, 130);
    wingH = random(150, 200);
    r = random(130, 190);
    g = random(70, 115);
    b = random(0, 50);

  }

I made a draft of a cute owl and painted it with Photoshop, and started to code shapes. Now it became bit odd for ordinary owl, but I like the randomness shapes of this creature!

sketch

//Hanna Jang 
//hannajan@andrew.cmu.edu 
//Section B 
//Project 2: Variable Faces

var BGcircleSize=250;
var BGcircleSize2=280;
var UpperFaceWidth=100; 
var UpperFaceHeight=80; 
var SmileX=300; 
var SmileY=245;
var Smilewidth=15; 
var SmileHeight=15; 
var anglestart=0; 
var LowerFaceWidth=150; 
var LowerFaceHeight=100;
var EyeSize=27;
var PupilSize=7;
var NostrilWidth=5;
var NostrilHeight=15; 
var EarSize=25;
var InnerEarSize=13;

function setup() {
    createCanvas(640, 480);
    background(245, 196, 224);
}

function draw() {
	//Background Circles
	fill(27, 71, 128);
	ellipse(width/2, height/2-45, BGcircleSize2, BGcircleSize2);
	fill(255);
	noStroke();
	ellipse(width/2, height/2-45, BGcircleSize, BGcircleSize);
	
	//ears 
	fill(202, 197, 245);
	var LXear =width/2-UpperFaceWidth*0.40; 
	var RXear =width/2+UpperFaceWidth*0.40; 
	ellipse(LXear, height/2-105, EarSize, EarSize);
	ellipse(RXear, height/2-105, EarSize, EarSize);
	
	//innerears
	fill(157, 141, 187); 
	var LXear =width/2-UpperFaceWidth*0.40; 
	var RXear =width/2+UpperFaceWidth*0.40; 
	ellipse(LXear, height/2-105, InnerEarSize, InnerEarSize);
	ellipse(RXear, height/2-105, InnerEarSize, InnerEarSize);
	
	//UpperFace
	fill(202, 197, 245); 
	ellipse(width/2, height/2-75, UpperFaceWidth, UpperFaceHeight);
	
	//LowerFace 
	fill(202, 197, 245);
	ellipse(width/2, height/2-20, LowerFaceWidth, LowerFaceHeight);

	//eyes 
	var LXeye =width/2-UpperFaceWidth*0.27;
	var RXeye =width/2+UpperFaceWidth*0.27;
	fill(255);
	noStroke();
	ellipse(LXeye, height/2-83, EyeSize, EyeSize);
	ellipse(RXeye, height/2-83, EyeSize, EyeSize);
	
	//pupils
	var LXpupil =width/2-UpperFaceWidth*0.27; 
	var RXpupil =width/2+UpperFaceWidth*0.27;
	fill(0);
	ellipse(LXpupil, height/2-81, PupilSize, PupilSize);
	ellipse(RXpupil, height/2-81, PupilSize, PupilSize);
	
	//nostrils
	var LXnostril =width/2-LowerFaceWidth*0.30;
	var RXnostril =width/2+LowerFaceWidth*0.30;
	ellipse(LXnostril, height/2-30, NostrilWidth, NostrilHeight);
	ellipse(RXnostril, height/2-30, NostrilWidth, NostrilHeight);
	
	//smile 
	fill(198, 73, 59);
	arc(SmileX, SmileY, Smilewidth, SmileHeight, anglestart, PI+QUARTER_PI, OPEN);
	}
	
function mousePressed() {
	//when the user's mouse clicks, these variables are reassigned
	//to random variables within specified ranges 
	
	BGcircleSize2=random(270, 350);
	EyeSize=random(20, 35);
	LowerFaceWidth=random(100, 180);
	LowerFaceHeight=random(90, 120);
	NostrilWidth=random(5, 15);
	NostrilHeight=random(15, 30);
	SmileX=random(280, 330);
	SmileY=random(240, 250);
	EarSize=random(25, 35); 
	
}
	
	

When I first saw the project assignment, I knew I wanted to make my character a hippo, one of my favorite animals. I then sketched up different ideas to make different changes on the hippo’s face when the mouse was clicked. This included variations in eyes, nostrils, ears, and the lower mouth area.

I then experimented with the different variations of sizes and movement of face structures. I was pleased to see that each time the mouse was clicked, a completely new hippo identity appeared, by random variation.

sketch

//Rachel Park
//Section B @ 10:30 AM
//rsp1@andrew.cmu.edu
//Project-02-VariableFace


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

}
    //variables for the face
    var eyesize = 20; //a
    var facewidth = 155; //b
    var faceheight = 125; //c
    var earwidth = 30;
    var earheight = 60;
    var antwidth = 20;
    var armswidth = 20;
    var armsheight = 20;
    var armheight = 20;
    var handsheight = 440;
    var handswidth = 155/3;
    var bodywidth = d/2-20;
    var d = 480; //bodysize
    var e = 180; //medium gray fill color
    var f = 138; //dark gray fill color

function draw() {
    background(212,249,246);

    //robot face
    var faceX = width/2
    var faceY = height/3

    rectMode(CENTER);
    noStroke();
    fill(e);
    rect(faceX,faceY,facewidth,faceheight,10);

    fill(220);
    rect(faceX,faceY,facewidth-20,faceheight/2,10);

    //ear things
    var earX = width/3
    var earY = height/3

    noStroke();
    fill(f);
    rect(earX-10,earY,earwidth,earheight,5);

    noStroke();
    fill(f);
    rect(width/2+90,earY,earwidth,earheight,5);

    //antennae
    var antY = height/6

    noStroke();
    fill(f);
    rect(width/2,antY+20,antwidth/2,antwidth*2+10,10);

    noStroke();
    fill(255,41,41);
    ellipse(width/2,antY-10,antwidth,antwidth,10);

    //eyes
    var eyeLX = width/2-38.75;
    var eyeRX = width/2+38.75;
    var eyeY = height/3

    noStroke();
    fill(255);
    ellipse(eyeLX,eyeY,eyesize*2,eyesize*2);
    ellipse(eyeRX,eyeY,eyesize*2,eyesize*2);

    fill(203,35,35);
    ellipse(eyeLX,eyeY,eyesize+10,eyesize+10);
    ellipse(eyeRX,eyeY,eyesize+10,eyesize+10);

    //arms joints
    var armsY = height/2
    fill(f);
    ellipse(width/4,armsY,armswidth,armsheight);
    ellipse(width-120,armsY,armswidth,armsheight);

    //legs & feet
    var legsX = width/2
    var legsY = height-125-35
    var legsYX = height-125+35

    fill(f);
    rect(legsX+60,legsY,40,100);
    rect(legsX-60,legsY,40,100);

    fill(203,35,35);
    rect(legsX+60,legsYX,80,40);
    rect(legsX-60,legsYX,80,40);

    //body
    var bodyX = width/2
    var bodyY = height/2+40
    var bodywidth = d/2-20
    var bodyheight = d/3

    noStroke();
    fill(e);
    rect(bodyX,bodyY,bodywidth,bodyheight,10);

    //arms down

    fill(180);
    rect(width/5+5,armheight+340,21,125,5);
    rect(width-100,armheight+340,21,125,5);

    //hands down
    fill(203,35,35);
    arc(width/4-20,armheight+420,155/3,155/3,3*PI/4,PI/4,PIE);
    arc(width/2+155-15,armheight+420,155/3,155/3,3*PI/4,PI/4,PIE);
}

function mousePressed(){
  armheight = random([10,30]);
  armswidth = random([20,30]);
  eyesize = random(10,20);
  facewidth = random(155,160);
  faceheight = random(125,150);
  earwidth = random(30,55);
  earheight = random(25,60);
  antwidth = random(20,30);
  bodywidth = random([220,210]);
}

For my project, I wanted to make a visual of a small robot because I honestly that it was fun to change up of the possible movements of the figure along with the various facial feature sizes. I had an okay time creating the graphics within the code, but eventually got stuck on the actual functions that were used to make the arms and facial features vary in sizes and locations on the canvas. Overall, I thought that this was a very interesting project and thought that it was a good way to continue to practice the skills that we have learned thus far.

My process included a lot of trial and error. Initially, I wanted the arms of the robot to translate upwards, making it look like it was waving its arms like a “hurrah!”, but eventually I came up with a code with slight changes to the image itself, making the robot look like it’s shrugging instead.