hdw – Project 2 – Variable Face

sketch

var picker = 1
var types = [1, 2, 3, 4, 5];
var backgroundR = 255
var backgroundG = 255
var backgroundB = 255

function setup() {
    createCanvas(500, 500);
    angleMode(DEGREES);
}

function draw(){
    background(255);
    fill(backgroundR-30,backgroundG-30,backgroundB,100);
    noStroke();
    rect(0,0,height,width);

  var head = width * 2/5;
  var eyes = width * 1/10;
  var lips = width * 1/30;

  //shadow
  noStroke();
  fill(backgroundR+10,backgroundG+10,backgroundB+10);
  ellipse(width*.4,height*.6,head,head);


  if(picker == 1){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    arc(width*3/5,height*.5,eyes,eyes,0,180);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5,height*.6,lips,lips);
    ellipse(width*.5,height*.6+lips,lips,lips);
    }

  if (picker == 2){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,340,160);
    arc(width*3/5,height*.5,eyes,eyes,340,160);
    //lips
    noStroke();
    fill(255,0,0);
    ellipse(width*.5+5,height*.6+1+10,.7*lips,.7*lips);
    ellipse(width*.5,height*.6+lips*.7*.5+lips*.5+10,lips,lips);
    }

  if (picker == 3){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,20,200);
    arc(width*3/5,height*.5,eyes,eyes,20,200);
    //lips
    stroke(250,0,0);
    arc(width*.5-5,height*.6+10,lips,lips,210,60);
    }

  if (picker == 4){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    arc(width*2/5,height*.5,eyes,eyes,180,0);
    arc(width*3/5,height*.5,eyes,eyes,180,0);
    //lips
    noFill();
    stroke(255,0,0);
    strokeWeight(10);
    arc(width*.5,height*.6,2*lips,2*lips,0,180);
    //ellipse(width*.5,height*.6+lips,lips,lips);
  }

  if(picker == 5){
    //head
    fill(255);
    stroke(0);
    strokeWeight(10);
    ellipse(width*.5,height*.5,head,head);
    //eyes
    ellipse(width*2/5,height*.5,eyes,eyes);
    ellipse(width*3/5,height*.5,eyes,eyes);
    //lips
    stroke(255,0,0);
    strokeWeight(10);
    noFill();
    ellipse(width*.5,height*.6+.5*lips,lips,lips);
    }

  //blush
  fill(255,backgroundG,backgroundB);
  noStroke();
  ellipse(width*2/5,height*.6, 2*lips, 2*lips);
  ellipse(width*3/5,height*.6, 2*lips, 2*lips);
}

function mousePressed(){
    picker = random(types);
    backgroundR = random(0,250);
    backgroundG = random(0,250);
    backgroundB = random(0,250);
}

Process:

Made some initial concept sketches. Used mmiller5’s project 02 as a reference for the use of variables and commands of the five fixed variable faces. Stella Han helped me figure out where to put the variables for var types and var picker, because I initially posted them in the draw function and not as a global variable. Soonho Kwon helped me figure out how to get the background and shadow opacity to behave. Initially the shadow didn’t show up because I had it set to a variable opacity in the same colors as the background. I reversed the opacity so that the background had less intensity and created a white filler first so the color would show.