Variable Face

I liked uncovering the associations across each variable and being able to articulate those connections in writing to make illustrations. I learned the value of arranging my code and adding required comments for specific lines to help me remember important information when I was making two figures on one canvas.

Ideation
sketch
var eyeSize = 40;
var faceWidth = 100;
var faceHeight = 150;
var diam = 40;
var lipw = 40;
var liph = 25;
var lipr = 50;
var on = false;
var r = 102;  // values of gray
var g = 102;  
var b = 102;
var eyeType = 2

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

}

function draw() {
    background(204, 229, 255);

    fill(0, 0, 0);
    stroke(0, 0, 0);
    ellipse((width/2), (height/2), 200, 250); // hair 

    fill(0, 0, 0);
    stroke(0, 0, 0);
    rect((width/2.9), (height/2.6), 150, 200); // hair
    
    if (on == true) { // stating the color change in the hair
    fill(r, g, b );
    stroke(r, g, b);
    ellipse((width/2), (height/2), 200, 250);
    rect((width/2.9), (height/2.6), 150, 210); 
  } else {
    fill(255-r, 255-g, 255-b);
    stroke(255-r, 255-g, 255-b);
    ellipse((width/2), (height/2), 200, 250);
    rect((width/2.9), (height/2.6), 150, 210);
  }

    fill (215, 180, 146);
    stroke(215, 180, 146);
    ellipse(width/2, height/2, faceWidth, faceHeight); // variable faces


    stroke (195, 43, 79);
    strokeWeight(1);
    fill(195, 43, 79);
    arc((width/2) - 5, (height/2)+40, lipw, liph, lipr, PI + QUARTER_PI); // different mouth expressions

    stroke(0, 0, 0);
    line((width/2)-35, (height/2)-35, (width/2)-10, (height/2)-35);
    line((width/2) + 35, (height/2)-35, (width/2)+ 10, (height/2)-35);// static eyebrows

    
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    
    fill (0,0,0);
    stroke (0, 0, 0);
    ellipse(eyeLX, height / 2, diam, diam);
    ellipse(eyeRX, height / 2, diam, diam);

    if(eyeType > 1 & eyeType < 2) { //altering between two eye types 
        fill(0, 0, 0);

    } else {
        fill(255, 255, 255);
    }
    ellipse((width/2)-(faceWidth/4), height/2, 40, 30);
    ellipse((width/2)+(faceWidth/4), height/2, 40, 30);
     
    if(eyeType > 1 & eyeType < 2) { 
     fill(255, 255, 255);
    } else {
        fill(0, 0, 0);
    }
    ellipse((width/2)-(faceWidth/4), (height/2)+7, 20, 10);
    ellipse((width/2)+(faceWidth/4), (height/2)+7, 20, 10);

}

function mousePressed() {
    faceWidth = random(50, 150);
    faceHeight = random(150, 250);
    lipw = random (20, 50);
    liph = random (10, 30);
    lipr = random (40, 60);
    eyeType = random(0,2);

 
 if (on == false) { // color flip using boolean 
    on = true;
  } else {
    on = false;
  }
  
}

Leave a Reply