Uncategorized – Page 15 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project: Variable Faces

The challenging part of this project was figuring out how much to constrain the random function for the various elements that are generated.

sketch Download

var eyeSize = 10;
var foreheadWidth = 200;
var foreheadHeight = 100;
var cheekWidth = 300;
var cheekHeight = 120;
var chinWidth = 30;
var chinHeight = 30;
var mouthWidth = 120;
var mouthHeight = 3;
var hairColor = 0;
var earSize = 57;
var fill = 67;
var noseWidth = 20;
var noseHeight = 15;
var eyebrowAngle = 0; //shifts eyebrow up and down to create expressions

function setup() {
    createCanvas(480, 640);
    background(67);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	noFill();
	stroke(random(0,255),random(0,255),random(0,255));
	strokeWeight(1);
	circle(random(0,480),random(0,640),random(40,500)); //hypnotic background generator
	circle(random(0,480),random(0,640),random(40,500)); //repetition to increase speed of generator
	var foreheadY = height/2 - (cheekHeight/2);
	var chinY = height/2 + (cheekHeight/2);
	noStroke();
	fill(255,223,64);
	beginShape(); // yellow 
	    vertex(width/2, chinY + 10);
	    curveVertex(width/2 + 150, chinY + 40);
	    curveVertex(width/2 + 220, height);
	    vertex(width/2, height);
	endShape(CLOSE);
	fill(161,156,35,100);
	beginShape(); // yellow cloak shaodw 
	    vertex(width/2, chinY + 15);
	    curveVertex(width/2 + 148, chinY + 43);
	    curveVertex(width/2 + 218, height);
	    vertex(width/2, height);
	endShape(CLOSE);
    fill(207,165,93); 
	beginShape(); //body
	    vertex((width/2-chinWidth/2) -10,height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        curveVertex(width - 100, height/2 + (cheekHeight/2) - (chinHeight/2) + cheekHeight*.75);
        vertex(width - 50, height);
    endShape(CLOSE);
	fill(225,204,115);
	ellipse(width/2 - foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //left ear
	ellipse(width/2 + foreheadWidth/2,foreheadY + 20,earSize*1.5,earSize); //right ear
	fill(hairColor);
    circle(width/2, foreheadY,foreheadWidth + 25); //hair
	fill(207,165,93);
	rect((width/2-chinWidth/2) -10, height/2 + (cheekHeight/2) - (chinHeight/2), chinWidth + 20, cheekHeight*.75); //neck
	fill(225,204,115);
    ellipse(width/2, foreheadY, foreheadWidth, foreheadHeight); //forehead
    ellipse(width/2, height/2, cheekWidth, cheekHeight); //cheeks
    fill(179,30,90,100);
    circle(width/2 - (cheekWidth/4 + 10), height/2, cheekWidth/8); //left rosy cheek
    circle(width/2 + (cheekWidth/4+ 10), height/2, cheekWidth/8); //right rosy cheek
    var eyeposLX = (width/2 - foreheadWidth/4);
    var eyeposRX = (width/2 + foreheadWidth/4);
    var eyeposY = (height/2 - foreheadHeight/2);
    fill(0);
    circle(eyeposLX,eyeposY,eyeSize); //left eye
    circle(eyeposRX,eyeposY,eyeSize); //right eye
    fill(200,60,20);
    beginShape(); //monk robe
        vertex(0,height);
        curveVertex(width*.25,height*.6875);
        curveVertex(width/2, chinY + 20);
        vertex(width - 50, height - 20);
        vertex(width - 40, height);
    endShape(CLOSE);
    fill(105,40,30,150);
    triangle(0,height, width*.25, height*.6875, width*.25 + -70, height); //red cloak shadow
    triangle(width*.25 + 40,(height*.6875) +30, width*.25 + 20, height, width*.25 - 20, height); //red cloak shadow
    triangle(width*.25 + 70, height, width*.25 + 80,(height*.6875) + 25, width*.25 + 170, height);
    triangle(width*.25 + 230, height, width*.25 + 195, height - 100, width*.25 + 300, height); 
    fill(225,204,115);
    ellipse(width/2, height/2 + (cheekHeight/2), chinWidth, chinHeight); //chin
    fill(0);
    ellipse(width/2,height/2 + cheekHeight/4 ,mouthWidth,mouthHeight); //mouth
    fill(135,108,61);
    beginShape(); //nose
        vertex(width/2 - noseWidth, height/2 - 10);
        curveVertex(width/2, height/2);
        vertex(width/2 + noseWidth, height/2 - 10);
        curveVertex(width/2, height/2 + noseHeight);
    endShape(CLOSE);
    stroke(0);
    noFill();
    strokeWeight(5);
    line(eyeposLX - 10, eyeposY - 15, eyeposLX + 20, (eyeposY - 15) + eyebrowAngle); //left eyebrow
    line(eyeposRX - 20, (eyeposY - 15) + eyebrowAngle, eyeposRX + 10, eyeposY - 15); //right eyebrow
}

function mousePressed() {
	cheekWidth = random(200, 325);
	cheekHeight = random(120,200);
	foreheadWidth = random(150, (cheekWidth - 100));
	foreheadHeight = random(80, (cheekHeight/2));
	chinWidth = random(30,80);
	chinHeight = random(30,70);
	mouthHeight = random(1,30);
	mouthWidth = random (40, cheekWidth/2);
	background(random(0,255),random(0,255),random(0,255));
	hairColor = random(0,250);
	earSize = random(40, 70);
	noseWidth = random(10,30);
	noseWidth = random(10,40);
	eyebrowAngle = random(-10,20);
	eyeSize = random(10,20);
}

LO 2 – Generative Art; Bone Chair

At its surface, generative art doesn’t mean much to me. As a design-oriented person, I appreciate beautiful things, yet they are most meaningful to me when they are rooted in some practical function. However, I have found an example of generative art that provides enough practical use to satisfy me – Joris Laarman’s ‘Bone Chair’.

This chair is a piece of furniture resulting from a specially designed computer algorithm, used to structure supports in a way that mimics the natural growth of bones and trees. Starting with a chunk of material and virtually applied forces, the algorithm slowly removes material where it is not structurally significant, leaving behind only the most essential material for the given position of the furniture. As you might imagine, the final product feels machine-made in its precision and finish. However, this sculpting technique effectively captures the innate beauty of natural, irregular structures while simultaneously ensuring comfort and strong support. This algorithm draws me to the world of algorithmic art, since it shows me how digitally crafted art does not have to feel unnatural or impractical – if anything, it can streamline the integration of biomimicry into common objects around us in unexpected ways. And that, I find very exciting.

Project 02: Variable Faces

sketch

var bodyWidth = 270;
var bodyHeight = 340;
var eyeWidth = 11;
var eyeHeight = 12;
var mouthWidth = 20;
var mouthHeight = 10;
var armLY = 290
var armRY = 280
var legLX = 250
var legRX = 350
var backgroundR = 243;
var backgroundG = 127;
var backgroundB = 135;


function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //left arm
    stroke(169, 124, 80);
    line(width/2-200, armRY, width/2, height/2);
    //right arm
    stroke(169, 124, 80);
    line(width/2, height/2+20, width/2+200, armLY);

    //left leg
    stroke(169, 124, 80);
    line(legLX, height/2+200, width/2, height/2);
    //right leg
    stroke(169, 124, 80);
    line(width/2, height/2, legRX, height/2+200);

    //body shape back
    fill(134, 197, 74);
    stroke(30, 69, 37);
    strokeWeight(15);
    ellipse(width/2, height/2, bodyWidth, bodyHeight);
    //body shape front
    noStroke()
    fill(201, 221, 101)
    ellipse(width/2, height/2, bodyWidth-30, bodyHeight-30);

    //seed
    fill(169, 124, 80);
    circle(width/2, height/2+50, 150);

    //eyes
    fill(0)
    var eyeLX = width/2 - bodyWidth*0.15;
    var eyeRX = width/2 + bodyWidth*0.15;
    ellipse(eyeLX, height/2.45, eyeWidth, eyeHeight); //left eye
    ellipse(eyeRX, height/2.45, eyeWidth, eyeHeight); //right eye
    
    //mouth
    var mouthY = height/2 - bodyHeight*0.13
    if (eyeWidth > eyeHeight) {
        arc(width/2, mouthY, mouthWidth, mouthHeight, PI, 2*PI);
    }
    else {
        fill(247, 165, 170)
        arc(width/2, mouthY, mouthWidth, mouthHeight, 2*PI, PI);
    }
}
function mousePressed() {
    bodyWidth = random(220, 345);
    bodyHeight = random(300, 370);
    eyeWidth = random(7, 20);
    eyeHeight = random(6, 20);
    mouthWidth = random(20, 30);
    mouthHeight = random(10, 50);
    armLY = random(280, 360);
    armRY = random(210, 320);
    legLX = random(220, 270);
    legRX = random(320, 370);
    backgroundR = random(180, 270);
    backgroundG = random(130, 200);
    backgroundB = random(135, 160);
}

The process of coding this avocado was really fun. I enjoyed seeing the different features come together at the end and all the combinations that it created. Here is my sketch in illustrator:

Looking Outwards 02 – Generative Art

One of the pieces of generative art that I found most interesting was a series
by Paul Prudence entitled “Daub”. I really like these prints because they are made from a semi-automatic painting function, yet the result seems almost infinitely complex; not just in the potential complexity of the program, but in the individual images themselves. Prudence also shows that the program is flexible enough to generate a variety of silhouettes in the series by changing the way the silhouette is formed on the print “Oriol”. These were made using footage of Ferrofluids, which would not be completely obvious at first thought but certainly seems a good starting point to create shapes like these. This work is a bit different than many of the other visual generative works that Prudence has done, as this one is almost fractal-like, while many of his other works are much cleaner and often generative videos instead of prints.

https://www.transphormetic.com/Daub

Looking Outwards 2 – Generative Art

Drawing Water
By David Wicks, 2011

http://sansumbrella.com/works/2011/drawing-water/

“Drawing Water is a constructed landscape shaped by the relationship between where water falls and where it is consumed within the United States.” It is an interactive, animated map that uses data to map the amount of rainfall and where it fell to where it is consumed. So the more water a city uses, the stronger its pull.

What I admire about this project is how it is not only informative, but also beautiful to look at. It uses data collected to tell a story of the urban pull in the United States, and how much water travels from where it is fallen to where it is consumed, especially in the West Coast. I have always admired data visualization.

As for how the algorithm is generated, it reminds me of a code I used on an architecture project called a flow script, which uses length and frequency of lines to map the flow of a surface, using longer lines to indicate steeper topography. However, it is different in this sense, it takes the data of each location point and it moves towards where it is consumed, and the length is based on the amount of rainfall. Then as rainfall moves further, it becomes desaturated, turning from blue to black.

I think the creator’s artistic sensibilities are manifested in the algorithm based on the colors they used, line thicknesses, and shapes. There are variables in how many lines, and how thin the lines are. Wicks was able to use many thin lines that were of soft colors to make it almost seem like a watercolor painting. The artist makes it feel very sensible and soft.

LookingOutwards-2

A generative or computational design that caught my attention as I was searching through work is a piece called, “Colourfield” by Jon McCormack. It’s a piece of evolving colors palettes that shift throughout time. It builds off of old compositions to develop a new range of complimentary colors. The intelligent algorithm also takes into consideration time, where a blend of colors that could be better slowly merges to something different and you can settle into ones that work well. I’m unaware of exactly how this was constructed but I can assume that McCormack developed code that understood what color codes work with others based on intensity, quantity, and negative space. The gradual change also creates a slight movement on your screen that holds your attention in learning what’s to come. As a Communication Designer, I appreciate Jon McCormack’s thinking in developing a digital piece that works with its environment. Color is something that’s underappreciated, and this makes you realize the subtitles and beauty it creates when it works together.

Colourfield

Project 02: Variable Face

The main challenges in constructing my face were primarily around the placement of each element and how to control their heights so pieces didn’t overlap in ugly ways or stick out, but also to keep the overall identity of the face. I wanted each face to seem a little larger than life, while generating a completely new and cartoonish, albeit simple, face every time. I wanted simple elements based off of the original code, but that used that basic template given to us to create really weird and outrageous faces.

cowboyedit

var eyeSize = 20;     ////how large the outside eyes get
var faceWidth = 100;   ////width of face
var faceHeight = 150;  ////height of face
var glasses = 40      ////size of glasses lens
var hatWidth = 125    ////width of the brim
var hatHeight = 35    ////height of the brim
var hatX = 25        ////position of the top corner of the rectangular portion of the hat
var hatTall = 150    ////length of the rectangular portion of the hat
var bandannaSize = 80 ///width of the bandanna 
var bandannaY = 380   ///bottom corner of the bandanna
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    var hatSize = hatX * 2   ////determines width of the hat based on distance from the center
    var eyeLX = width / 2 - faceWidth * 0.25;  ////size of left eye
    var eyeRX = width / 2 + faceWidth * 0.25;  ////size of right eye
    var noseLength = 40    ////furthest position of nose
    var noseX1 = (width / 2, height / 2) - (.35 * faceWidth)   ////first x of nose triangle
    var noseY1 = height / 2 + faceHeight / 10   ////first y of nose triangle
    var noseX2 = (width / 2, height / 2) + (.75 * faceWidth)  ////2nd x of nose triangle
    var noseY2 = height / 2 + faceHeight / 10    ////2nd y of nose triangle
    var noseX3 = faceWidth / 2   ////x position of noise point
    var noseY3 = (height / 2) + noseLength ////height of nose point
    var bandanna1 = (width / 2) - bandannaSize  ////right x of bandanna, based on distance from center
    var bandanna2 = (width / 2) + bandannaSize   ///left x of bandanna, based on distance from center
    var bandannaLength = 400    ////y of bandanna point
    rect((width / 2) - hatX, 4, hatSize, hatTall) ////rectangle of hat
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); ////face
    triangle(noseX1, noseY1, noseX2, noseY2, noseX3, noseY3)   ////nose
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);  /////left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);  /////right eye
        if (faceWidth > 200) {   ////condition for glasses when face is wide
            line(eyeRX, height / 2, eyeLX, height / 2)
            ellipse(eyeRX, height / 2, glasses)
            ellipse(eyeLX, height / 2, glasses)
        } else {    ////otherwise pupils of eyes
            ellipse(eyeRX, height / 2, 4)
            ellipse(eyeLX, height / 2, 4)
         }    
    ellipse(width / 2, (height / 2) - ((faceHeight / 2) * .85), hatWidth, hatHeight);   /////hat brim
    triangle(bandanna1, bandannaY , bandanna2, bandannaY, width / 2, bandannaLength)    ////bandanna

       noLoop()


 
}

    

 
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.
    redraw()
    faceWidth = random(75, 280);
    faceHeight = random(75, 280);
    eyeSize = random(10, 30);
    glasses = random(40, 65)
    hatWidth = random(120, 240)
    hatHeight = random(40, 80)
    hatX = random(10, 40)
    hatTall = random(160, 280)
    bandannaSize = random(100, 300)
    bandannaY = random(260, 300)
    bandannaLength = random(400, 550)
}

Project-02-Variable Face

For this project, I tried to create variations of sizes, colors, and positions utilizing the original self portrait I created for our last deliverable. Different sizes, colors, shapes, and positions make changes to the mood of the portrait that was originally adorable.

sketch

// Stefanie Suk
// 15-104 Section D


var bgColorR = 208;
var bgColorG = 233;
var tiecolorR = 0;
var tiecolorG = 0;
var tiecolorB = 0;
var buttonD= 259;
var hatColorR = 32;
var hatColorG = 69;
var mouthposition = 345;
var eyeSize = 17;
var blushW = 30;
var blushH = 30;

function setup() {
    createCanvas(480, 640);
    // text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

	background(bgColorR, bgColorG, 255);
	noFill();

	// head and body
	noStroke();
	fill(255);
	ellipse(240, 680, 400, 600);     //body
	fill(240);
	ellipse(245, 332, 305, 250);     //shadow on face
	fill(255);
	ellipse(240, 300, 300, 300);     //main face ellipse
	ellipse(285, 350, 250, 200);     //cheek
	ellipse(140, 200, 120, 120);     //left ear
	ellipse(340, 205, 120, 120);     //right ear

	// eyes
	stroke(0);
	strokeWeight(eyeSize);
	point(205, 320);                 //left eye
	point(310, 320);                 //right eye

	// mouth
	strokeWeight(5);
	fill(255, 0, 0);
	arc(260, 345, 50, 50, 0, PI, CHORD);

	// necktie and button
	fill(tiecolorR, tiecolorG, tiecolorB);
	triangle(216, 465, 216, 503, 259, 484.5);   //left part of tie
	triangle(301, 465, 301, 503, 259, 484.5);   //right part of tie 
	fill(0);
	ellipse(buttonD, 510, 5, 5);                //top button
	ellipse(buttonD, 525, 5, 5);                //middle button
	ellipse(buttonD, 540, 5, 5);                //bottom button

	// blush
	noStroke();
	fill(249, 203, 203);
	ellipse(140, 350, blushW, blushH);          //left blush
	ellipse(360, 350, blushW, blushH);          //right blush

	// hat
	fill(hatColorR, hatColorG, 140);
	quad(204, 173, 220, 130, 264, 130, 283, 173);

}

function mousePressed() {
	// changes color of background
	bgColorR = random(50, 200);
	bgColorG = random(50, 200);
	// changes position of button
	buttonD = random(240, 280);
	// changes color of necktie
	tiecolorR = random(0, 255);
	tiecolorG = random(0, 255);
	tiecolorB = random(0, 255);
	// changes color of hat
	hatColorR = random(20, 230);
	hatColorG = random(20, 230);
	// changes eye size
	eyeSize = random(10, 30);
	// changes shape of blush on cheek
	blushW = random(30, 45);
	blushH = random(30, 45);
}

Variable-Face

VariableFaceNW Download


 /*
Nicholas Wong
Section A
*/

 //Variables
 var eyeSizeR = 50; //Right eye squint amount
 var eyeSizeL = 50; //Left eye squint amount
 var smile = false; //Smile Bool
 var lBrowHeight = 0; //Brow height modifier
 var rBrowHeight = 0; //Brow height modifier
 var browAngle = 0; // Brow Angle
  var nostrilSize = 0; //Nostril size modifier
 var circleShade = 230; //Outer Circle greyscale tone
 var bgColor = 'white' //Background of inner circle

function setup() {
	
    createCanvas(640, 480);
    text("p5.js vers 0.9.0 test.", 10, 15);

    //White Background (hah no it's black)
    background(0);

}

function draw() {

//Circles
	fill(circleShade); //Fill outer circle with variable shade
	ellipse (width/2,height/2+30,500,500); //Outer Circle

	if (bgColor == 'white'){ //Make background circle white
		fill(255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else if (bgColor == 'green'){ //Make background circle green
		fill(255);
		fill(240,255,240);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else{ 	//Make background circle blue
		fill(230,230,255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}

// I originally made my face thing 2000x2000
	scale (0.4); //Scaling drawing to fit in canvas
	translate(115,170) //Moving drawing to roughly be in center

//Neck
	noStroke();
	fill(235,190,160);
	rect(547,860,290,160);
	fill(250,205,175);
	rect(730,860,108,160);

//Face Base Shape
	noStroke();
	fill(250, 215, 172);
	beginShape();
	vertex(459,657);
	vertex(499,816);
	vertex(566,899);
	vertex(623,960);
	vertex(749,960);
	vertex(837,871);
	vertex(884,789);
	vertex(914,688);
	vertex(949,533);
	vertex(933,346);
	vertex(890,278);
	vertex(784,252);
	vertex(659,242);
	vertex(561,261);
	vertex(469,336);
	vertex(459,657);
	endShape();


	//Chin Shading
	noStroke();
	fill(250, 205, 175);
	beginShape();
	vertex(635,837);
	vertex(722,839);
	vertex(737,962);
	vertex(629,963);
	vertex(614,922);
	endShape();

	//Face Shading
	noStroke();
	fill(245, 200, 172)
	beginShape();
	vertex(469,200);
	vertex(445,606);
	vertex(499,811);
	vertex(626,960);
	vertex(686,960);
	vertex(672,852);
	vertex(610,795);
	vertex(510,527);
	vertex(538,429);
	endShape();

	//Right Eye
	noStroke();
	fill(250);
	ellipse(570,522,100,eyeSizeR);

	//Left Eye
	noStroke();
	fill(250);
	ellipse(805,522,100,eyeSizeL);

	//Left eye Shading
	noStroke();
	fill(245, 195, 162);
	beginShape();
	vertex(532,451);
	vertex(602,458);
	vertex(641,516);
	vertex(634,550);
	vertex(572,506);
	vertex(533,506);
	vertex(515,508);
	endShape();


	//Right Eye Shading
	noStroke();
	fill(245, 195, 165);
	beginShape();
	vertex(731,523);
	vertex(763,476);
	vertex(856,460);
	vertex(882,517);
	vertex(821,503);
	vertex(779,511);
	vertex(744,556);
	endShape();

	//Brows
	fill(200, 175, 175);

	quad(751,466+rBrowHeight,796,443+rBrowHeight,855,440+rBrowHeight,877,460+rBrowHeight); //Brow height variable added to Y coordinates of quad

	quad(507,438+lBrowHeight,579,437+lBrowHeight,611,461+lBrowHeight,496,454+lBrowHeight); //Brow height variable added to Y coordinates of quad

	//Nose Shading
	noStroke();
	fill(245, 200, 162);
	beginShape();
	vertex(669,573);
	vertex(613,688);
	vertex(617,713);
	vertex(638,694);
	vertex(684,689);
	vertex(674,623);
	endShape();

	//Under Nose Shading
	fill(248, 205, 170);
	quad(643,722,615,789,669,769,674,717);


	//Nostrils
	noStroke();
	fill(230,150,150);
	triangle(643-nostrilSize,695-nostrilSize,662+nostrilSize,707+nostrilSize,641-nostrilSize,707+nostrilSize); //Left
	triangle(715-nostrilSize,708+nostrilSize,739+nostrilSize,706+nostrilSize,728+nostrilSize,698-nostrilSize); //Right

	
	//Mouth
	noStroke();
	fill(245,193,172);
	if (smile) //If smile variable is true, draw smile shape for mouth
	{
		beginShape();
		vertex(595,776);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(790,776);
		vertex(739,820);
		vertex(693,832);
		vertex(654,820);
		endShape();

	}
	else //If smile variable is false, draw normal mouth
	{
		beginShape();
		vertex(605,792);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(780,793);
		vertex(739,828);
		vertex(693,832);
		vertex(654,827);
		endShape();
	}


	//Hair
	noStroke();
	fill(30,25,30);
	beginShape();
	vertex(445,644);
	vertex(364,521);
	vertex(375,402);
	vertex(393,263);
	vertex(447,201);
	vertex(563,81);
	vertex(717,45);
	vertex(793,52);
	vertex(890,107);
	vertex(935,160);
	vertex(950,226);
	vertex(950,272);
	vertex(960,308);
	vertex(970,401);
	vertex(950,478);
	vertex(948,550);
	vertex(947,584);
	vertex(935,603);
	vertex(936,451);
	vertex(925,344);
	vertex(889,278);
	vertex(778,266);
	vertex(698,261);
	vertex(599,262);
	vertex(535,292);
	vertex(464,365);
	endShape();

	//Hair Shading
	noStroke();
	fill(25,15,15);
	beginShape();
	vertex(448,607);
	vertex(461,378);
	vertex(557,286);
	vertex(651,254);
	vertex(782,260);
	vertex(920,288);
	vertex(870,189);
	vertex(764,120);
	vertex(679,126);
	vertex(593,162);
	vertex(509,205);
	vertex(426,279);
	vertex(401,409);
	endShape();


}

function mousePressed(){
	eyeSizeL = random(10,50); // Controls squint for left eye
	eyeSizeR = random(10,50); // Controls squint for right eye
	smile = random([true,false]); // Bool for smile or no smile
	lBrowHeight = random(0, -30); // Amount to increase left brow height by
	rBrowHeight = random(0, -30); // Amount to increase right brow height by
	browAngle = random(0,30); // Angle to rotate brow
	nostrilSize = random(0,5); // Amount to increase nostril size
	circleShade = random(0,255); // Greyscale tone for the outer circle in the background
	bgColor = random(['green','blue','white']); // Choose color randomly for background

}

Project 2: Variable Face

This project shows variable faces of a girl.

sketch Download

/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*Project 02- Variable Faces; Face Variables
*
*/

var eyeSizeX = 40;
var eyeSizeY = 20;
var faceWidth = 150;
var faceHeight = 200;
var noseLength = 20;
var noseWidth = 10;
var browHeight = 170; //determines general brow height
var browExpression = 4; //determines brow arch
var leftMouth = 170; //determines the left edge of mouth
var rightMouth = 230; //determines the right edge of mouth
var mouthHeight = 250; //determines the height of the edges of the mouth
var mouthExpression = 260; //determines the expression of the mouth

function setup() {
    createCanvas(400, 400);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(2);


	//background changes color when mouse is on
    // left or right side of screen
	 if (mouseX < 0.5 * width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

    //hair
    point (width / 2, height * 0.2);
    point (width * 0.7, height * 0.3);
    point (width * 0.75, height / 2);
    point (width * 0.75, height * 0.8);
    point (width * 0.25, height * 0.8);
    point (width * 0.25, height / 2);
    point (width * 0.3, height * 0.3);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.7, height * 0.3);
    curveVertex(width * 0.75, height / 2);
    curveVertex(width * 0.75, height * 0.8);
    curveVertex(width * 0.25, height * 0.8);
    curveVertex(width * 0.25, height / 2);
    curveVertex(width * 0.3, height * 0.3);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    fill(227, 180, 171); //skin color
    ellipse((width / 2), (height / 2), faceWidth, faceHeight) //face shape

    point (width / 2, height * 0.2);
    point (width * 0.4, height * 0.35);
    point (width * 0.3, height * 0.4);
    point (width * 0.4, height * 0.25);

    point (width / 2, height * 0.2);
    point (width * 0.6, height * 0.35);
    point (width * 0.7, height * 0.4);
    point (width * 0.6, height * 0.25);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.4, height * 0.35);
    curveVertex(width * 0.3, height * 0.4);
    curveVertex(width * 0.4, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.6, height * 0.35);
    curveVertex(width * 0.7, height * 0.4);
    curveVertex(width * 0.6, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();
    //eyes
    fill(255, 255, 255); //whites of eyes
    var leftEyeX = width / 2 - faceWidth * 0.25; //placement of left eye
    var rightEyeX = width / 2 + faceWidth * 0.25; //placement of right eye
    var eyeIrisX = 20; //placement of iris
    ellipse(leftEyeX, height / 2, eyeSizeX, eyeSizeY);
    ellipse(rightEyeX, height  /2, eyeSizeX, eyeSizeY);
    fill(149, 85, 73); //light brown

    ellipse(leftEyeX, height / 2, eyeIrisX, eyeSizeY); //left Iris
    ellipse(rightEyeX, height / 2, eyeIrisX, eyeSizeY); //right Iris
    fill(0, 0, 0); //black
    ellipse (leftEyeX, height / 2, 10); //left pupil
    ellipse (rightEyeX, height / 2, 10); //right pupil

    //if the eyes are big enough, this program will add
    //an eye reflection to make the face seem more "cute"
    if (eyeSizeY > 20) {
        fill(255, 255, 255);
        ellipse((leftEyeX + 3), height / 2, 5);
        ellipse((rightEyeX + 3), height / 2, 5);
    }
	
    //nose
    noFill();
    beginShape();
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 + noseWidth, height / 2 + noseLength);
    curveVertex(width / 2, height / 2 + 25);
    curveVertex(width / 2 - 5, height / 2 + noseLength);
    endShape();

    //mouth
    fill(152, 41, 41);
    //mouth outline
    point(leftMouth, mouthHeight);
    point(rightMouth, mouthHeight);
    point(width / 2, mouthExpression);
    //mouth shape
    fill(255, 255, 255);
    beginShape();
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(rightMouth, mouthHeight);
    curveVertex(width / 2, mouthExpression);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    endShape();

    //adds blush if the face is grinning or not frowning
    if (mouthExpression > 260) {
        strokeWeight(0);
        fill(251, 195, 204);
        ellipse(leftMouth - 10, mouthHeight - 20, 15);
        ellipse(rightMouth + 10, mouthHeight - 20, 15);
        strokeWeight(2);
    }

    //eyebrows
    strokeWeight(5);
    var leftBrowFront = width / 2 - faceWidth * 0.15
    var rightBrowFront = width / 2 + faceWidth * 0.15

    //left brow outline
    point(leftBrowFront, browHeight);
    point(leftBrowFront - 20, browHeight - browExpression);
    point(leftBrowFront - 35, browHeight);

    //left brow shape
    noFill();
    beginShape();
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront - 20, browHeight - browExpression);
    curveVertex(leftBrowFront - 35, browHeight);
    curveVertex(leftBrowFront - 35, browHeight);
    endShape();

    //right brow outline
    point(rightBrowFront, browHeight);
    point(rightBrowFront + 20, browHeight - browExpression);
    point(rightBrowFront + 35, browHeight);
    
    //right brow shape
    noFill();
    beginShape();
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront + 20, browHeight - browExpression);
    curveVertex(rightBrowFront + 35, browHeight);
    curveVertex(rightBrowFront + 35, browHeight);
    endShape();
    strokeWeight(2);

}

function mousePressed() {
    faceWidth = random(130, 170);
    faceHeight = random(230, 160);
    eyeSizeX = random(35, 45);
    eyeSizeY = random(15, 25);
    noseLength = random (15, 25);
    noseWidth = random (5, 15);
    browHeight = random (160, 180);
    browExpression = random (0, 10);
    leftMouth = random (160, 180);
    rightMouth = random (220, 240);
    mouthHeight = random (240, 260);
    mouthExpression = random (230, 270);


}