mstropka-Project02-Variable-Face

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project 02


//defining variables for points that define the shape of the face
var point1x = 405
var point1y = 75
var point2x = 405
var point2y = 565
var point3x = 75
var point3y = 565
var point4x = 75
var point4y = 75

//variables for colors
var r = 255
var g = 255
var b = 255

//colors for eyes
var r1 = 225
var g1 = 225
var b1 = 225

var eyesize = 20
var mouthsize = 2



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

}

function draw() {
  background(250);

//outside of face is drawn with a closed curveVertex shape
  strokeWeight(5);
  fill(r, g, b);
  beginShape();
  curveVertex(point1x, point1y);
  curveVertex(point1x, point1y);
  curveVertex(point2x, point2y);
  curveVertex(point3x, point3y);
  curveVertex(point4x, point4y);
  endShape(CLOSE);

//location of right and left eyes is driven by the points that control the outside of the face
//so that they always are drawn inside the shape of the head
  strokeWeight(2);
  fill(r1, g1, b1);
  ellipse(point1x - 40, point1y + 40, eyesize, eyesize);

  strokeWeight(2);
  fill(r1, g1, b1);
  ellipse(point4x + 40, point4y + 40, eyesize, eyesize);

//the mouth shape is made by dividing and multiplying the variables of the head shape
//to make a similar shape, but smaller
  beginShape();
  curveVertex(point1x/2, point1y*2);
  curveVertex(point1x/2, point1y*2);
  curveVertex(point2x/2, point2y/2);
  curveVertex(point3x*2, point3y/2);
  curveVertex(point4x*2, point4y*2);
  endShape(CLOSE);
  
//bags under eyes
  noFill();
  arc(point1x - 40, point1y + 40, 50, 50, 0, HALF_PI);
  arc(point4x + 40, point4y + 40, 50, 50, 0, HALF_PI);

}

function mousePressed() {

// when mouse is pressed, the points that define the face shape move
// within a range such that the outline will always take up most of the canvas
  point1x = random(205,405);
  point1y = random(75, 150);
  point2x = random(205,405);
  point2y = random(365,565);
  point3x = random(75, 150);
  point3y = random(365,565);
  point4x = random(75,150);
  point4y = random(75,150);

//when mouse is clicked, a random rgb value is assigned to colors
  r = random(0,255);
  g = random(0,255);
  b = random(0,255);

  r1 = random(0,255);
  g1 = random(0,255);
  b1 = random(0,255);
}

I tried to make a program that would randomly generate almost every aspect of the face, but also have all of the faces look similar enough that they could be related. My method for this was to create a shape using curveVertex points that would change every time the mouse is clicked and have all of the other features in the face defined by these points. I also added bags under the eyes to give the faces a little more character. One thing I couldn’t figure out was keeping the features from touching each other or going off of the face