Project-02-Variable-Face

michal-portrait-2

var sunColorR = 145;
var sunColorG = 13;
var sunColorB =  63;
var noseTip = 275;
var themeStatus = 2;
var hairAngle = 0;
var neckLength = 130;
var faceLength = 180;

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

function draw() {
	background(255, 87, 51);

	//spotlight = theme no. 1 for clicks
	if (themeStatus == 1) {

		//bottom light
		noStroke();
		fill(253, 248, 209);
		triangle(640, 480, 0, 480, 0, 400);
		triangle(640, 480, 0, 370, 0, 275);
		triangle(640, 480, 0, 200, 0, 100);

		//top light
		fill(253, 250, 228);
		triangle(640, 0, 0, 480, 0, 400);
		triangle(640, 0, 0, 370, 0, 275);
		triangle(640, 0, 0, 240, 0, 130);

	}

	//face
	fill(255, 195, 1);
	noStroke();
	rect(120, 130, 80, neckLength);
	stroke(225, 195, 15);
	strokeWeight(1)
	rect(160, 128, 100, faceLength, 50);

	//nose
	triangle(257, 216, 257, 246, noseTip, 246);

	//sunglasses
	stroke(90, 24, 70);
	strokeWeight(5);
	line(170, 200, 260, 200);
	fill(sunColorR, sunColorG, sunColorB);
	ellipse(230, 210, 37);

	//lips
	stroke(145, 13, 63);
	strokeWeight(1);
	fill(199, 0, 57);
	triangle(245, 270, 260, 270, 260, 260);
	triangle(245, 270, 260, 270, 260, 280);

	//hair
	noStroke();
	fill(145, 13, 63);
	triangle(100, 130, 270, 85, 270, 160);
	fill(125, 13, 63);
	triangle(100, 130, 150, 137, 100, 300);
	fill(105, 23, 63);
	rect(80, 130, 60, 230);
	fill(145, 23, 63);
	triangle(40 - hairAngle, 350 - hairAngle, 140 - hairAngle, 350, 120, 130);
	fill(135, 13, 63);
	triangle(150, 130, 180, 140, 130, 210);

	//music = theme no. 2 for clicks
	if (themeStatus == 2) {

		//headphones
		fill(90, 24, 70);
		ellipse(170, 215, 55);
		fill(199, 0, 57);
		ellipse(175, 210, 55);

		//headphone curve
		quad(195, 105, 235, 95, 190, 200, 160, 200);

		//note 1
		fill(0);
		ellipse(350, 210, 16);
		ellipse(400, 200, 16);
		stroke(0);
		strokeWeight(6);
		line(350, 160, 400, 150);
		line(353, 160, 353, 210);
		line(403, 150, 403, 200);

		//note 2
		fill(0);
		noStroke();
		ellipse(550, 110, 16);
		ellipse(600, 100, 16);
		stroke(0);
		strokeWeight(6);
		line(550, 50, 600, 40);
		line(553, 50, 553, 110);
		line(603, 100, 603, 40);

		//note 3
		noStroke();
		ellipse(470, 160, 16);
		stroke(0);
		strokeWeight(6);
		line(475, 160, 460, 120);
		line(460, 120, 470, 115);

	} 
	//party = theme no. 3 for clicks
	if  (themeStatus == 3) {

		//party hat
		fill(1, 192, 255);
		triangle(80, 140, 140, 20, 270, 85);
		fill(15, 118, 184);
		ellipse(140, 20, 35);

		//party whistle 
		stroke(15, 118, 184);
		strokeWeight(12);
		line(260, 270, 340, 250);
		noStroke();
		fill(15, 118, 184);
		ellipse(340, 240, 20);
		fill(1, 192, 255);
		ellipse(345, 242, 20);

	}

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    sunColorR = random(0, 255);
    sunColorG = random(0, 255);
    subColorB = random(0, 255);
    noseTip = random(275, 340);
    hairAngle = random(0, 90);
    neckLength = random(170, 400);
    faceLength = random(180, 220);
   	
   	//changing theme status
   	if (themeStatus == 1) {
   		themeStatus = 2;

   	} else if (themeStatus == 2) {
   		themeStatus = 3;

   	} else if (themeStatus == 3){
   		themeStatus = 1;

   	}
    
}

When working on this project, I thought it would be more interesting to take the self-portrait I already made and try and think of interesting ways in which it can be modified. I started by playing with some features by randomizing them, but it was also interesting to move around angles, as well as completely changing central elements of the portrait to create a new meaning.