Category: Project-02-Variable-Face

sketch

var faceWidth = 225;
var faceHeight = 225;
var faceType = 1;
var earSize = 50;
var earType = 1;
var earStroke = 10;
var faceR = 225;
var faceG = 184;
var faceB = 153;
var eyeSize = 30;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
var eyeStroke = 1;
var mouthSize = 40;
var mouthType = 1;
var types = [1,2,3]; // faces, ears, and mouths have 3 different versions which will get randomly chosen
 
function setup() {
    createCanvas(480, 640);
    rectMode(CENTER);
}
 
function draw() {
    background(255-faceR, 255-faceG, 255-faceB); //background color is inverse color of face
    fill(faceR, faceG, faceB);


    //Ear types
    strokeWeight(earStroke);
    stroke(faceR - 10, faceG - 10, faceB - 30);
    if(earType == 2){
	ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
	ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
    }
    if(earType == 3){
	triangle(width/2 - faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 - faceWidth/2, height/2 - faceHeight/2 - earSize/2);
	triangle(width/2 + faceWidth/4, height/2 - faceHeight/5,
		 width/2, height/2 - faceHeight/3,
		 width/2 + faceWidth/2, height/2 - faceHeight/2 - earSize/2);
    }

    
    //Face types
    strokeWeight(5);
    if(faceType == 1){
	ellipse(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 2){
	rect(width/2, height/2, faceWidth, faceHeight);
    }
    if(faceType == 3){
	triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
		 width/2 + faceWidth/2, height/2 - faceHeight/2,
		 width/2, height/2 + faceHeight/2);
    }

    //Eye Sockets
    strokeWeight(0);
    fill(faceR - 30, faceG - 30, faceB - 50);
    ellipse(width/2 - faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    ellipse(width/2 + faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
    
    //Eyes will follow mouse (kinda)
    strokeWeight(eyeStroke);
    stroke(eyeR/5, eyeG/5, eyeB/3);
    fill(eyeR, eyeG, eyeB);
    var eyeXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/15, width/2 - faceWidth/6 + eyeSize/15);
    var eyeY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/15, height/2 - faceHeight/6 + eyeSize/15);
    var eyeXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/15, width/2 + faceWidth/6 + eyeSize/15);
    ellipse(eyeXL, eyeY, eyeSize, eyeSize);
    ellipse(eyeXR, eyeY, eyeSize, eyeSize);

    //Pupils will follow mouse (kinda)
    fill(0);
    strokeWeight(0);
    var pupilXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/4, width/2 - faceWidth/6 + eyeSize/4);
    var pupilY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/4, height/2 - faceHeight/6 + eyeSize/4);
    var pupilXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/4, width/2 + faceWidth/6 + eyeSize/4);
    ellipse(pupilXL, pupilY, eyeSize/2, eyeSize/2);
    ellipse(pupilXR, pupilY, eyeSize/2, eyeSize/2);
    
    //Mouth
    fill(eyeR/3, eyeG/5, eyeB/5);
    if(mouthType == 1){
	strokeWeight(mouthSize/10);
	line(width/2 - mouthSize/2, height/2 + faceHeight/6, width/2 + mouthSize/2, height/2 + faceHeight/6);
    }
    if(mouthType == 2){
	strokeWeight(mouthSize/5);
	point(width/2, height/2 + faceHeight/6);
    }

}
 
function mousePressed() {
    faceWidth = random(150, 300);
    faceHeight = random(150, 300);
    faceType = random(types);
    
    earSize = random(75, 125);
    earType = random(types);
    earStroke = random(5, 20);
    //Skin colors are setup so as to mostly resemble realistic skin tones
    faceR = random(70,255);
    faceG = random(faceR/4, faceR);
    faceB = random(faceR/4, faceG);
    
    eyeSize = random(20, 35);
    eyeR = random(0, 255);
    eyeB = random(0, 255);
    eyeG = random(0, 255);
    eyeStroke = random(1, 4);
    
    mouthSize = random(30, 60);
    mouthType = random(types);
    }

I really wanted to focus on creating different types of features rather than just adjusting the same feature by changing variables, and so I found out about using arrays from which the program makes a selection to decide which version of a feature to use, if any.  I wanted to make it even more interactive, so I tried to make the eyes follow the mouse (it kinda worked, but I know there’s a different way to do it that I’ll probably try later).

project-02-variable

//Meredith Newman
//Section A
//mjnewman@andrew.cmu.edu
//Project-02-Variable Face

//snout components
var nostril = 50;
var snoutWidth = 200;
var snoutHeight = 150;

//eye components
var eyeSize = 50;
var white = 70;
var eyeDist = 300;

//ear components
var earX = 90;
var earY = 35;

//colors
var colorR = 232;
var colorG = 103;
var colorB = 183;


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(colorR, colorG, colorB);
    noStroke();

    //snout 
    fill(colorB, colorG, colorR);
    ellipse(width / 2, height * 0.60, snoutWidth,  snoutHeight);

    //nose holes
    var noseLX = width / 2 - snoutWidth * 0.25;
    var noseRX = width / 2 + snoutWidth * 0.25;
    fill(colorG, colorR, colorG);
    ellipse(noseLX, height * 0.60, nostril, nostril);
    ellipse(noseRX, height * 0.60, nostril, nostril);

    //whites behind eyes
    var eyeLX = width / 2 - eyeDist / 2;
    var eyeRX = width / 2 + eyeDist / 2;
    fill(255);
    ellipse(eyeLX, height * 0.30, white, white);
    ellipse(eyeRX, height * 0.30, white, white);

    //eyes
    var eyeLX = width / 2 - eyeDist / 2;
    var eyeRX = width / 2 + eyeDist / 2;
    fill(colorG, colorR, colorG);
    ellipse(eyeLX, height * 0.30, eyeSize, eyeSize);
    ellipse(eyeRX, height * 0.30, eyeSize, eyeSize);

    //ears
    fill(colorR - 30, colorG - 30, colorB - 30);
    //left
    triangle(earX, earY, earX + 60, earY + 40, earX - 20, earY + 80);
    //right
    triangle(earX + 460, earY, earX + 400, earY + 40, earX + 480, earY + 80);

    //oink text
    textSize(60);
    text("oink", 50, 450);
    fill(0, 102, 153);
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    colorR = random(1,255);
    colorG = random(1,255);
    colorB = random(1,255);
    eyeSize = random(30,50);
    eyeDist = random(250,300);
    earX = random(90,110)
    earY = random(25,35);
    snoutWidth = random(75, 150);
    snoutHeight = random(75, 100);
    nostril = random(10, 30);
}

 

For the project this week, I could definitely tell the prompts are becoming much more complicated. The random functions required a lot more trial and error than the previous assignments. But the recurrent theme across the two projects is that it’s hard to determine what to do creatively. I want it to be interesting enough for me to make as well as for people to use, but still keep in mind the constraints I have as a novice coder.

I chose to approach this project with the principle of gestalt in mind. I wanted to try to use as few elements as possible to suggest the face of a pig. I drew inspiration from some sketches Henri Matisse did that show the general visual of a face (below).

sketch

//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-02-Variable Faces


var facewidth = 150;
var faceheight = 170;
var eyesize = 10;
var a = 100;
var b = 45;
var c = 74;
//color rgb
var earwidth = 50;
var earheight = 40;
var hairx = 200;
var hairy = 400;
//hair
var line = 2;
//eyes stroke weight
var beardlengthx = 0;
var beardlengthy = 0;
var bright = 0;
//background brightness


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

function draw() {
	if (mouseIsPressed) {bright = 0;}
	background(bright);
	bright = bright + 1;
	//background

    noStroke();
    fill(a,b,c);
	quad(width/2,hairy,width/2+hairx,200,width/2+100,100,width/2-100,100);
	triangle(width/2-100,100,width/2-hairx,200,width/2,hairy);
	//hair

    fill(248,170,35);
    ellipse(width/2,height/2-20,facewidth,faceheight);
    //facefoundation

    arc(width/2-facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
    //ear

    fill(253,108,1);
    arc(width/2-facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);
    arc(width/2+facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);

    fill(a,b,c);
    ellipse(width/2-65,height/2+50,65,65);
    ellipse(width/2+65,height/2+50,65,65);
	//hair2
	
	noStroke();
	fill(253,108,1);
	rectMode(CORNER);
	fill(248,134,35);
	quad(width/2-33,height/2+50,width/2-15,height/2,width/2+15,height/2,width/2+33,height/2+50);
	fill(241,87,1);
	rect(width/2-15,height/2-105,30,155);
	//inside face

	noFill();
	strokeWeight(4);
	stroke(a,b,c);
	ellipse(width/2,height/2-20,facewidth,faceheight);
	//outerfaceline

	noFill();
	strokeWeight(2);
	stroke(b,a,c);
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2+30+beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2+70+beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2+80+beardlengthx,height/2+60+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+38+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+40+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+50+beardlengthy);
	endShape();
	beginShape();
	curveVertex(width/2,height/2+50);
	curveVertex(width/2,height/2+52);
	curveVertex(width/2-30-beardlengthx,height/2+48+beardlengthy);
	curveVertex(width/2-70-beardlengthx,height/2+50+beardlengthy);
	curveVertex(width/2-80-beardlengthx,height/2+60+beardlengthy);
	endShape();
	//beard

	noStroke();
	fill(253,108,1);
	arc(width/2,height/2+50,70,70,0,PI,CHORD);
	fill(a,b,c);
	arc(width/2,height/2+50,30,30,0,PI,CHORD);
	//nose

	strokeWeight(line);
	stroke(250);
    fill(0);
    ellipse(width/2-facewidth*0.25,height/2-20,eyesize,eyesize);
    ellipse(width/2+faceheight*0.25,height/2-20,eyesize,eyesize);
    //eyes

}
function mousePressed(){
    eyesize = random(0,20);
    earwidth = random(10,60);
    earheight = random(10,80);
    hairx = random(200,240);
    hairy = random(400,440);
    a = random(0,15);
    b = random(50,200);
    c = random(50,100);
    line = random(1,7);
    beardlengthx = random(0,30);
    beardlengthy = random(0,20);

}

For this assignment, I drew lion’s face with variables for eye size, ear size, hair style, hair color, and length of beard. Background also fades alway as soon as a person presses the mouse and it reappears for each mouse click, which I wanted to highlight each variable face of the lion. For this assignment I challenged to use curveVertex to depict the smooth curve for lion’s beard.