Tag: Project-02-Variable-Face

Janet Peng Project 02 – Variable Face

jjpeng assignment 2

var faceWidth = 120;
var faceHeight = 100;
var earRotation = 20;
var eyeSize = 10;
var cheekSize = 10;
var r = 244;
var g = 235;
var b = 130;

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

function draw() {
	background (255, 255, 220);

	// face
	fill(r, g, b);
	stroke(r, g, b);
	ellipse(width / 2, height / 2, faceWidth, faceHeight);

	// right ear
	push();
	translate(width / 2 + faceWidth / 3, height / 2 - faceHeight / 2);
	rotate(radians(earRotation));
	fill(r, g, b);
	stroke(r, g, b);
	ellipse(0, 0, 20, 70)
	fill(60);
	stroke(60);
	arc(0, 0, 20, 70, PI + 1.2, 2 * PI - 1.2, OPEN)
	pop();

	// left ear
	push();
	translate(width / 2 - faceWidth / 3, height / 2 - faceHeight / 2);
	rotate(radians(-earRotation));
	fill(r, g, b);
	stroke(r, g, b);
	ellipse(0, 0, 20, 70)
	fill(60);
	stroke(60);
	arc(0, 0, 20, 70, PI + 1.2, 2 * PI - 1.2, OPEN)
	pop();

	// eyes
	fill(60);
	stroke(60);
	ellipse(width / 2 - faceWidth / 4, height / 2, eyeSize, eyeSize)
	ellipse(width / 2 + faceWidth / 4, height / 2, eyeSize, eyeSize)

	// nose
	fill(60);
	stroke(60);
	triangle(width / 2 - faceWidth / 35, height / 2 + faceHeight / 20,
			 width / 2 + faceWidth / 35, height / 2 + faceHeight / 20,
			 width / 2, height / 2 + faceHeight / 12,);

	// cheeks
	fill(247, 98, 52);
	stroke(247, 98, 52);
	ellipse(width / 2 - faceWidth / 2.8, height / 2 + faceHeight / 6, cheekSize, cheekSize)
	ellipse(width / 2 + faceWidth / 2.8, height / 2 + faceHeight / 6, cheekSize, cheekSize)

	// hat
	fill(58, 53, 50);
	stroke(58, 53, 50);
	arc(width / 2, height / 2 - faceHeight / 2.3, 45, 40, PI, 0);
	ellipse(width / 2, height / 2 - faceHeight / 1.6, 6, 4);
	fill(84, 79, 74);
	stroke(84, 79, 74);
	ellipse(width / 2, height / 2 - faceHeight / 2.3, 40, 10);
}

function mousePressed() {
    // on click variables are randomly reassigned
    faceWidth = random(100, 150);
    faceHeight = random(100, 120);
    earRotation = random (5, 60);
    eyeSize = random(5, 20);
    cheekSize = random(5, 20);
    r = random (230, 255);
    g = random (215, 235);
    b = random (110, 130);
}

Shariq Shah – Project 02 – Variable Faces

shariqs_VariableFaces-02

// Shariq M. Shah
// Section C
// shariqs@andrew.cmu.edu
// Assignment_01

//setting up variables

var eyeWidth = 20
var eyeHeight = 20
var eyePosL = 240
var eyePosR = 340
var mouthC = 80
var backColor = 200
var earPos = 280
var nosePos = 320
var faceWidth = 220

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

function draw() {
  background(230, backColor, 211);
  noStroke()

  fill(250, 200, 0)
  ellipse(300,600,600,300)

  strokeWeight(2)
  rect(220, 400, 150, 150, 15)

  //Face
  fill(200, 162, 132)
  rect(170, 180, 250, 250, 30, 100, 150, 150)

  fill(0,0,0)

  ellipse(300,180, faceWidth, 150)
  rect(150, 180, 300, 80,30)

  //Left Spec
  noFill()
  stroke(300)
  ellipse(240, 290, 60, 60)
  ellipse(240, 290, 55, 55)


  //Left Eye
  stroke(300)
  fill(300)
  ellipse(240, 290, eyeWidth, eyeHeight)
  fill(0)
  ellipse(eyePosL, 290, 15, 20)
  ellipse(eyePosL, 285, 2, 2)


  //Right Eye
  stroke(300)
  fill(300)
  ellipse(340, 290, eyeWidth, eyeHeight)
  fill(0)
  ellipse(eyePosR, 290, 15, 20)
  ellipse(eyePosR, 285, 2, 2)

  line(175, 180, 425, 180)

  //Right Spec
  noFill()
  stroke(300)
  ellipse(340, 290, 60, 60)
  ellipse(340, 290, 55, 55)

  line(310,290, 270, 290)
  line(310,285, 270, 285)

  line(210,285, 170, 280)
  line(210,290, 170, 280)


  line(370,285, 420, 280)
  line(370,290, 420, 280)

  //Nose
  noStroke()
  fill(240, 171, 142)
  triangle(290, 300, 290, nosePos, 310, 360)
  fill(214, 171, 139)
  triangle(290, 300, 290, nosePos, 270, 360)

//Mouth
	fill (300);

	ellipse (290, 382, mouthC, 42);
	fill (200, 162, 132);

	rect (220, 360, 120, 21);

  //Ears
  ellipse(425,earPos, 20, 80)
  ellipse(165,earPos, 20, 80)


  fill(300-backColor)



  //Logo
  bezier(105, 20, 10, 10, 90, 90, 15, 80)

  //Collar
  bezier(220, 460, 300, 650, 150, 650, 370, 460)
}



function mousePressed() {

    eyeWidth = random(15, 50);
    eyeHeight = random(20, 35);
    eyePosL = random(240, 250);
    eyePosR = random(340, 350);
    mouthC = random(30, 90);
    backColor = random(100, 200);
    earPos = random(300,310)
    nosePos = random(320, 360)
    faceWidth = random(220, 250)


}

In this exercise, I explored multiple ways to vary the way different shapes and colors that change as a result of the mousePressed() function. The result is a strange, expressive, and colorful face that alters itself randomly, with constraints, as a result of pressing on the image.