Project 2 – Variable Face(s)

I call this piece, “My Parents.” I thought it would be interesting to try to generate some sort of dialogue between two figures each with their own characteristics. It was difficult assigning locations to elements when they were dependent on other variables.

peachproject2
///Boy
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 10
var noseHeight = 5
var b = 40
var b2 = 170
var bodyL = 130
var bodyR = 200
var mouthA = 20
var mouthB = 10
var mouthC = 250
var mouthD = 250 


//Girl
var geyeSize = 20;
var gfaceWidth = 100;
var gfaceHeight = 150;
var gnoseWidth = 10
var gnoseHeight = 5
var mouthWidth = 10
var mouthHeight = 10
var bodyGL = 450
var bodyGR = 510
var g = 50
var g2 = 170

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
  background(180);
    fill(150)
    rect(0,height/3*2, width,height/3)

    
//boy
  noStroke()
    fill(b, b2, 253)
      triangle(width/4, height/2, bodyL, height/5*4, bodyR, height/5*4)
  //eyes
  ellipse(width / 4, height / 2, faceWidth,  faceHeight);
      var eyeLX = width / 4 - faceWidth * 0.25;
      var eyeRX = width / 4 + faceWidth * 0.25;
  fill(255)
      ellipse(eyeLX, height / 2, eyeSize, eyeSize);
      ellipse(eyeRX, height / 2, eyeSize, eyeSize);
  //eyebrows
  stroke(0)
    strokeWeight(3)
      line(eyeLX-6, height/2 - (faceHeight * 0.15), eyeLX + 6,height/2 - (faceHeight * 0.2))  
      line(eyeRX-6, height/2 - (faceHeight * 0.2), eyeRX + 6,height/2 - (faceHeight * 0.15)) 
  //mouth
  stroke(0)
    strokeWeight(3)
    noFill()
      curve (mouthD, mouthC, width/4+5, height/2 + mouthA, width/4+10, height/2+mouthB,mouthC,mouthD);
  //pupils 
  noStroke()
    fill(0)
      ellipse(eyeLX, height / 2, eyeSize * 0.25, eyeSize * 0.25);
      ellipse(eyeRX, height / 2, eyeSize*0.25, eyeSize*0.25);
  //nose
    fill(0)
      rect(width/4, height/2, noseWidth, noseHeight)
 
//girl  
  //body
    fill(220,g,g2)
      triangle(width/4*3, height/2, bodyGL, height/5*4, bodyGR, height/5*4)
  //head
    ellipse(width / 4 * 3, height / 2, gfaceWidth,  gfaceHeight);
  //eyes
      var geyeLX = width / 4 * 3- gfaceWidth * 0.25;
      var geyeRX = width / 4 *3 + gfaceWidth * 0.25;
    fill(255)
        ellipse(geyeLX, height / 2, geyeSize, geyeSize);
        ellipse(geyeRX, height / 2, geyeSize, geyeSize);
    fill(0)
        ellipse(geyeLX, height / 2, geyeSize * 0.25, geyeSize * 0.25);
        ellipse(geyeRX, height / 2, geyeSize*0.25, geyeSize*0.25);
    fill(0) 
  //nose
    ellipse(width/4*3-5, height/2, gnoseWidth, gnoseHeight)
  //eyebrows
    stroke(0)
      strokeWeight(3)
        line(geyeLX-6, height/2 - (faceHeight * 0.2), geyeLX + 6,height/2 - (faceHeight * 0.15))  
        line(geyeRX-6, height/2 - (faceHeight * 0.15), geyeRX + 6,height/2 - (faceHeight * 0.2)) 

  //mouth
    noStroke()
      ellipse(width/4*3-5, height/2 +(faceHeight*0.25), mouthWidth, mouthHeight)

  
}
 
function mousePressed() {
  
  faceHeight = random(100, 170);
  faceWidth = random(75,150)
  eyeSize = random(20, 40)
  noseWidth=random(5,20)
  noseHeight = random(3,10)
  
  gfaceHeight = random(100, 170);
  gfaceWidth = random(75,150)
  geyeSize = random(20, 40)
  gnoseWidth=random(5,20)
  gnoseHeight = random(3,10)
  
  mouthWidth = random (10,30)
  mouthHeight = random (8,30)
  
  b = random(10,200)
  b2 = random(150,225)
  
  g= random(5,140)
  g2 = random(100,150)
  
  bodyL = random (120,135)
  bodyR = random (195,210)
  
  mouthA = random(15,25)
  mouthB = random(15,25)
  mouthC = random(280,320)
  mouthD = random (280,320)
  
  bodyGL = random(430,450)
  bodyGR = random (500, 530)
}

Leave a Reply