rkondrup-project-02

face.js

/*Ryu Kondrup
rkondrup@andrew.cmu.edu
Section D
project-02*/
//feature variables

var eyeHeight = 30;
var eyeWidth = 15;
var noseyLiars = 50;
var mouthAgape = 30;
var hatHeight = 120;
var rightShadow = 15;
var downShadow = 10;
var mouthWidth = 30;
var r, g, b;

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

function draw() {
  background(26, 83, 92);
  //colors
    var darkDarkBlue = color(22, 74, 82);
    var darkBlue = color(26, 83, 92);
    var blue = color(78, 205, 196);
    var white = color(248, 255, 247);
    var red = color(255, 107, 107);
    var yellow = color(255, 231, 109);



noStroke();


//shirt SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 390+downShadow, 150, 200, 75);

//collar SHADOW
fill(darkDarkBlue);
ellipse(150+rightShadow, 320+downShadow, 160, 50);

//hat top SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 145+downShadow, 120, hatHeight, 60);

//brim of hat SHADOW
fill(darkDarkBlue);
rectMode(CENTER);
rect(150+rightShadow, 190+downShadow, 150, 30, 15);

//head SHADOW
fill(darkDarkBlue);
ellipse(150+rightShadow, 250+downShadow, 150, 150);

//hat wrap SHADOW
fill(darkDarkBlue);
rect(150+rightShadow, 160+downShadow, 120, 30);

//noooose SHADOW
fill(darkDarkBlue);
rectMode(CORNER);
rect(190+rightShadow, 230+downShadow, noseyLiars, 30, 15);



//shirt
fill(yellow);
rectMode(CENTER);
rect(150, 390, 150, 200, 75);

//collar
fill(white);
ellipse(150, 320, 160, 50);

//hat top
fill(yellow);
rectMode(CENTER);
rect(150, 145, 120, hatHeight, 60);

//head
fill(blue);
ellipse(150, 250, 150, 150);

//eyeball
fill(white);
ellipse(140, 240, eyeWidth, eyeHeight);

//brim of hat
fill(yellow);
rectMode(CENTER);
rect(150, 190, 150, 30, 15);

//hat wrap
fill(blue);
rect(150, 160, 120, 30);

//bow CENTER
fill(blue);
ellipse(160, 355, 40);
//bow right
ellipse(195, 355, 40, 60);
//bow right
ellipse(125, 355, 40, 60);

//mouth
fill(red);
rectMode(CORNER);
rect(170, 270, 30, mouthAgape, 15);

//noooose
fill(r, g, b);
rectMode(CORNER);
rect(190, 230, noseyLiars, 30, 15);





}

function mousePressed() {
    eyeHeight = random(30, 70);
    eyeWidth = random(15, 30);
    noseyLiars = random(50, 500);
    mouthAgape = random(30,90);
    hatHeight = random(120, 300);
    r = random(200, 255);
    g = random(100, 255);
    b = random(100, 255);

}

Creating this interactive image was lots of fun.  I wanted to have a concept that made sense with the aim of the assignment, so I settled on a wooden boy as a subject. I also wanted to explore how facial expressions change with different sized facial features. I would like to further explore how features can be changed in ways other than through clicking that can add more depth and complexity to the image.