Month: September 2018

ardenw project 02 variable face

sketch.js

/* Arden Wolf
Section B
ardenw@andrew.cmu.edu
Project-02 
*/


var num= (1);

function setup() {
    createCanvas(350, 350);
    
    
}

function draw() {
    if(num==1){
    //angry face
        background(66);
        fill (255,0,0);
        noStroke();
        ellipse(200, 200,300, 200);

        //eyes
        fill(255);
        stroke(152,8,8);
        strokeWeight(5);
        rect (100,200, 60,10);// left eye
        rect (240,200,60,10);//right eye

        //pupils
        fill(0);
        noStroke();
        rect (100,200, 10,10);
        rect (240,200,10,10);

        //hilight
        fill(255);
        noStroke();
        rect (100,200, 3,3);
        rect (240,200,3,3);


        //eyebrows
        fill(152,8,8);
        noStroke();
        rect (100,190, 60,10);
        rect (240,190,60,10);

        //mouth
        rect (170,250,60,10);
        fill(0);
        rect (180,251,40,6);

        //ears
        fill(152,8,8);
        noStroke();
        triangle(100,100,100,150,150,120);
        triangle(300,100,300,150,250,120);


    } else if (num==2){
    //sad face
        noStroke();
         background(84,108,254);
         fill (102,185,248);
         ellipse(200, 150,200, 180);

         //eyes
         fill(200);
         stroke (84,108,254);
         strokeWeight (4);
        ellipse (160,150, 40,20);// left eye
        ellipse (240,150,40,20);//right eye

        fill (0); //pupil
        ellipse (160,150, 20,20);
        ellipse (240,150,20,20);

        fill(255); //hilight
        noStroke();
        ellipse(165,145, 10,5);
        ellipse (245,145,10,5);

        //mouth
        fill(84,108,254);
        ellipse(200, 200,50, 30);

        fill (102,185,248);
        ellipse(200, 210,50, 30);


    }else {
    //happy face
        background(255,138,23);
        fill (255,240,0); 
        ellipse(150, 150,200, 150);

          //eyes
         fill(255);
        ellipse (100,150, 40,20);// left eye
        ellipse (200,150,40,20);//right eye

        fill (0); //pupil
        ellipse (100,150, 20,20);
        ellipse (200,150,20,20);

        fill(255); //hilight
        noStroke();
        ellipse(105,145, 10,5);
        ellipse (205,145,10,5);

        //mouth
        fill(255,138,23);
        ellipse(150, 190,50, 30);

        fill (255,240,0);
        ellipse(150, 180,50, 30);

    }

}

function mousePressed() {
   
num = num+1;
if (num==4)
{
    num=1;
}


}

For this assignment I decided to represent three emotions: Angry, Sad and Happy. I used if else statements and the variable num for function mouseIsPressed to change the faces and the background color to represent each emotion.

susiel-Looking Outwards-02

Formation from Kyuha Shim on Vimeo.

Formation is a project done by one of the CMU School of Design’s professor, Kyuha Shim. I came across this project during his studio last semester and was one of the reasons that helped me decide to take 104. Formation is a 2016 project commissioned by Alliance Graphique Internationale (AGI) for the Special Project Exhibition during AGI conference in Seoul.  It seems like there is a canvas with a grided background. Within this frame, there is a class for circles which contains the circle objects. These objects are what specify the random color, size and position for the circles. Perhaps there is an array system that informs how many circles are on the canvas. There could be a statement that indicates a change when a certain amount of time passes, with one change, it impacts the movement of the other circles. I appreciate this project not only for its visuals, but also because it is a generative system with a larger responsive system. It visually hows multitudinous transitions and scaling of visual/graphic elements.

Katherine Hua – LookingOutwards – 02

Parag K. Mital is an audiovisual computational artist and researcher. He creates his artwork through the building of artificial intelligence algorithms. I am captivated by the way Mital has explored deep learning, machine learning, film, eye-tracking, EEG, and fMRI recordings to generate his artistic productions.  In his work “In the Style of Klee,” he utilizes these generative model processes and constructs an audiovisual perception of what looks like a video from the view from a car window as the car is driving through the streets. In this piece of work, it can be seen that it is inspired by the art style of Paul Klee. I admire how the Mital is able to bring what looks like a painting with Paul Klee’s style to life. He demonstrates the complexity yet simplicity of traditional fine art styles and brings it together with modern experimental generative art, giving his audience a unique film experience through traditional art and generative augmented computational science.

“In the Style of Klee” by Parag K. Mital, 2015

 

Jenny Hu — Looking Outwards 02

The Silk Pavillion is a pavilion designed and produced by the Mediated Matter lab at MIT’s Media Lab. I’m overall extremely inspired by the project because it represents Neri Oxman’s “material ecology” philosophy so clearly. What if the things we had today could be co-produced by understanding and putting material properties first?

The project is inspired by the way silkworms can produce their own cacoon out of a single thread of silk. The pavilion algorithm is generated by adopting similar behaviors to produce the panels of the pavilion out of thread, while the silkworms (which are acting completely autonomous) provide secondary structural support. It’s interesting because not only is the manufacturing algorithm based on natural logic, but the silk worms are in some ways autonomous generative beings too.

More information about the project can be found at the Mediated Matter Lab. 

 

Sharon Yang Project 02 Variable Face

Project2_Variable_face

/*Sharon Yang
Section C
junginny
Project-02-B
*/

//variables for the cooridinates and the size of the facial features, 
//the face and the eyes; 
var eyeWidth = 68;
var eyeHeight = 52;
var faceWidth = 360;
var faceHeight = 320;
var faceX = 232
var faceY = 320

//variables for colors, for the hair and eyebrows 
var fillR = 50;
var fillG = 41;
var fillB = 46;
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(254,230,240);

    //hair behind the face, the color variables used for the hair color
    //to be randomized 
    fill(fillR,fillG,fillB);
    rect(50,254,360,354);

   //face
    noStroke();
    fill(253,227,204);
    ellipse(faceX, faceY, faceWidth, faceHeight);

    //eyes, setting variables for the X coordinates of the left and
    //the right eyes using the width of the canvas and the face for
    //the eye positions to suit the face shape as it changes
    var LeftEyeX = width*0.48-faceWidth*0.2;
    var RightEyeX = width*0.48+faceWidth*0.2;
    fill(0);
    ellipse(LeftEyeX, faceHeight, eyeWidth, eyeHeight);
    ellipse(RightEyeX, faceHeight, eyeWidth, eyeHeight);

    //pupils, setting variables for the X coordinates of the left and
    //the right pupils using the left and right X coordinate variables
    //to remain at an appropriate position within the eyes as the size
    //the size and the shape of the eyes change
    var LeftPupilX = LeftEyeX*1.14;
    var RightPupilX = RightEyeX*1.07;
    fill(255);
    ellipse(LeftPupilX, faceHeight, 12, 12);
    ellipse(RightPupilX, faceHeight, 12, 12);

    //hair and bangs, the Y coordinates have been determined by the
    //face height as it varies 
    noStroke();
    fill(fillR,fillG,fillB);
    arc(86,faceHeight*0.9,140,200,HALF_PI,PI+HALF_PI);
    arc(32,faceHeight*1.2,140,200,PI+HALF_PI,HALF_PI);
    arc(84,faceHeight*1.65,140,200,HALF_PI,PI+HALF_PI);
    arc(382,faceHeight*0.87,140,200,PI+HALF_PI,HALF_PI);
    arc(440,faceHeight*1.24,140,200,HALF_PI,PI+HALF_PI);
    arc(382,faceHeight*1.65,140,200,PI+HALF_PI,HALF_PI);
    arc(236,faceHeight*0.7,408,280,PI,PI+PI,OPEN);
    arc(40,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(90,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(130,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(170,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(220,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(280,faceHeight*0.59,190,200,0,QUARTER_PI);
    arc(320,faceHeight*0.59,190,200,0,QUARTER_PI);

    //nose, the X and Y coordinates as well as the size determined 
    //by the face size as it varies
    noStroke();
    stroke(223,197,168);
    strokeWeight(4);
    line(faceWidth*0.67,faceHeight*1.07,faceWidth*0.70,faceHeight*1.14);
    line(faceWidth*0.70,faceHeight*1.14,faceHeight*0.72,faceHeight*1.16);

    //brows, setting variables for the height of the brows - the distance
    //from the eyes
    var browHeight = 274

    noFill();
    //the color variables used to randomize the colors of the brows
    stroke(fillR, fillG, fillB);
    strokeWeight(9);
    beginShape();
    //the position of the brows determined by the position and the size of the 
    //eyes
    curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(LeftEyeX-15, browHeight);
    curveVertex(LeftEyeX+15, browHeight);
    curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
    curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
    endShape();

    noFill();
    stroke(fillR, fillG, fillB);
    strokeWeight(9);
    beginShape();
    curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
    curveVertex(RightEyeX-15, browHeight);
    curveVertex(RightEyeX+15, browHeight);
    curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
    curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
    endShape();
    
    //mouth, setting variables for the berzier point function
    //determining the position of the mouth in relative to the face
    //size, the edges of the mouth are assigned values for it to
    //be randomized and change in their positions
    noFill();
    stroke(237,34,93);
    strokeWeight(7);
    var x1 = 170,
    x2 = faceWidth*0.6,
    x3 = faceWidth*0.7,
    x4 = 300;
    var y1 = 410,
    y2 = faceHeight*1.35,
    y3 = faceHeight*1.37,
    y4 = 410;
    bezier(x1, y1, x2, y2, x3, y3, x4, y4);

    //ears, setting variable for the Y coordinate of the ears for
    //for the position of the earrings, the position of the ears 
    //determined by the face size
    var earY = faceHeight+20
    fill(253,227,204);
    noStroke();
    arc(faceX - faceWidth/3,earY,100,100,HALF_PI,PI+HALF_PI);
    arc(faceX + faceWidth/3,earY,100,100,PI+HALF_PI,HALF_PI);

    //earrings, the position determined by the position of the ears
    //which varies as the face size changes 
    fill(255);
    ellipse(faceX - faceWidth/3-20,earY+30,14,14);
    ellipse(faceX + faceWidth/3+20,earY+30,14,14);

    //neck
    noStroke();
    fill(253,227,204);
    rect(176,460,120,100);
    fill(253,227,204);
    ellipse(295,591,127,100);

    //shoulders
    fill(5,57,111);
    rect(46,520,400,200,80);

    //v-neck on the shirt
    fill(253,227,204);
    noStroke();
    triangle(230,600,176,520,296,520);
    stroke(255);
    strokeWeight(13);
    line(176,520,230,600);
    line(230,600,296,520);
}

//when the user presses the mouse
//the values of the variables are randomized and reassigned
//varying the size of the face and the eyes, and the positions
//of the brows, and the colors of the hair and the brows
function mousePressed() {
    faceWidth = random(340, 380);
    faceHeight = random(300,340);
    eyeWidth = random(60,80);
    eyeHeight = random(24,66);
    browArc = random(5, 50);
    browHeight = random(246,340);
    browHeight = constrain(browHeight,faceHeight*0.9+20,faceHeight+eyeHeight/2+10);
    x1 = random(100,180);
    y1 = random(380,600);
    x4 = random(270,340);
    y4 = random(380,600);
    fillR = random(20,80);
    fillG = random(10,70);
    fillB = random(16,76);
}

Creating an animation was fun yet quite complex requiring to use many variables and equations instead of the usual coordinates. It really helped me understand setting the variables as well as the random functions. I also had to learn other functions including the curve vertex and the berzier point as using ellipses and arcs limited creating certain motions.

Lingfan Jiang – Project 02- Variable Face

sketch

// Lingfan Jiang
// Section B
// lingfanj@andrew.cmu.edu
// Project-02-Variable-Face


var eyeWidth = 50;
var eyeHeight = 80;
var angle = 0;
var eyeSize = 1
var eyeBall = 50;
var eyeBrow = 75;
var eyeBrow2 = 65;


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

}

function draw(){
    background(255);
    translate(width/2,height/3);

    stroke(0);
    strokeWeight(8);
    //eyebrow on the left
    beginShape();
    curveVertex(-100, -50);
    curveVertex(-75, -eyeBrow);
    curveVertex(-50, -eyeBrow);
    curveVertex(-25, -50);
    endShape();

    //eyebrow on the right
    beginShape();
    curveVertex(100, -50);
    curveVertex(75, -eyeBrow-20);
    curveVertex(50, -eyeBrow2-30);
    curveVertex(25, -50);
    endShape();

    strokeWeight(2);
    angleMode(DEGREES);
    ellipseMode(CENTER);

    //left eye
    push();
    rotate(angle);
    fill(255);
    ellipse(-50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(-eyeBall,0,7,10);
    pop();

    //right eye
    push();
    scale(eyeSize);
    fill(255);
    ellipse(50,0,eyeWidth,eyeHeight);
    fill(0);
    ellipse(eyeBall,0,7,10);
    pop();

    // mouse (using eyebrow to draw the mouse)
    stroke(0);
    strokeWeight(3);
    scale(eyeSize);
    beginShape();
    curveVertex(-75, 1.5 * eyeBrow2);
    curveVertex(-25, 1.7 * eyeBrow);
    curveVertex(25, 1.7 * eyeBrow);
    curveVertex(75, 1.5 * eyeBrow2);
    endShape();

    //nose
    fill(0);
    ellipse (0,40,15,5);
    
}

function mousePressed(){
    eyeWidth = random(30,50);
    eyeHeight = random(50,80);
    angle = random(-45,0);
    eyeSize = random(0.5, 1.5);
    eyeBall = random(35,60)
    eyeBrow = random(25,85);
    eyeBrow2 = random(35,65);
}

In this project, I am inspired by those cartoon faces online. Therefore, I decided to go with this kind of style without the shape of face or color. One thing I found pretty interesting is that the random syntax in javascript is not completely random. Before starting this project, I assumed that I could use the same random variable to do different values on different objects. As it turns out, it is a bit different. In the end, I am satisfied with the final result, but it does have some problems when certain parts grow too big and intersect with other shapes.

 

reference: http://www.yim778.com/group/facial-expressions-pictures-cartoons/

John Legelis Project 02 Variable Face

Face

//John Legelis
//Section D 3:00-4:30
//jlegelis@andrew.cmu.edu
//Project-02 Variable Faces; Face Variables

function setup() {
    createCanvas(480, 640);
    background(0);
  
}
var centerX
centerX = 480/2

var centerY
centerY = 640/2


function mousePressed() {
    loop();
    noLoop();
}

function draw() {
    
    var BcolorR
    BcolorR = random(126,240)
    var BcolorG
    BcolorG = random(126,240)
    var BcolorB
    BcolorB = random(126,240)

    background(BcolorR,BcolorG,BcolorB);
    
    
    // randomize face dimensions
    var faceW;
    faceW = random(0+100,480-100);

    var faceH;
    faceH = random(0+50,640-50);

    var max_nose_gap
    max_nose_gap = faceW/7
    var max_eye_size
    max_eye_size = faceW/2 - (max_nose_gap)

    ellipseMode(CENTER);
    var FcolorR
    FcolorR = random(126,240)
    var FcolorG
    FcolorG = random(126,240)
    var FcolorB
    FcolorB = random(126,240)
    fill(FcolorR,FcolorG,FcolorB);
   
    //Draw Face
    ellipse(centerX, centerY, faceW, faceH);


    // randomize eye width in relation to face dimensions and not larger than largest possible
    var eyeW;
    eyeW = min((random(faceW / 6, faceW/2)),(max_eye_size));

    // randomize eye height in relation to face dimensions
    var eyeH;
    eyeH = random(faceH/5, faceH/9);

    // randomize eye placement within left side of place and not overlapping eye width with nose or edge of face
    var pY;
    pY = centerY;
    
    //calculate leftmost left pupil X value   
    var lpXmin
    lpXmin = centerX - faceW/2 + eyeW/2

    //calulate rightmost left pupil X value
    var lpXmax
    lpXmax = centerX - eyeW/2 - (max_nose_gap/2)

    var lpX;
    lpX = random(lpXmin, lpXmax)

    // draw left eye
    fill(255)
    ellipse(lpX, pY, eyeW, eyeH)

    // draw left pupil
    ellipseMode(CENTER);
    fill(0);
    ellipse(lpX, pY, eyeW/3, eyeH);

    //figure out coordinate of right pupil
    
    var centerX_to_lpX
    centerX_to_lpX = centerX - lpX

    var rpX
    rpX = centerX + centerX_to_lpX

    //draw right eye
    fill(255)
    ellipse(rpX, pY, eyeW, eyeH)

    //draw right pupil
    fill(0)
    ellipse(rpX, pY, eyeW/3, eyeH)





    //NOSE----------------------------------------------------------------------

    //nose bridge -----------

    // nose bridge top y
    var nbtY
    nbtY = centerY

    // random nose bottom y
    var nbY
    nbY = random(centerY+faceH/6, centerY+faceH/3)

    //random nose bridge width 
    var nbW
    nbW = min(max_nose_gap, faceW/10)
    print("noseWidth =" + nbW)

    //nose bridge left x
    var nblX
    nblX = centerX - nbW/2

    //nose bridge right x
    var nbrX
    nbrX = nblX + nbW

    //draw nose bridge rectangle
    fill(FcolorR,FcolorG,FcolorB)
    rectMode(CORNERS)
    rect(nblX,nbtY, nbrX,nbY)

    //nose bulb------------
    var bulbW
    bulbW = random(faceW/6,faceW/8)

    var bulbH
    bulbH = random(faceH/10, faceH/15)

    var bulbtX
    bulbtX = centerX - bulbW/2

    var bulbtY
    bulbtY = nbY - bulbH

    var bulbbX
    bulbbX = centerX + bulbW/2

    var bulbbY
    bulbbY = nbY

    rect(bulbtX, bulbtY, bulbbX, bulbbY)



//MOUTH------------------------------------------------------------------
    var mW
    mW = random(faceW/3, faceW/4)

    var mH
    mH = random(faceH/7, faceH/10)

    var mcX
    mcX = centerX

    var mcY
    mcY = ((nbY+ (centerY+faceH/2))/2)

    rectMode(CENTER)
    fill(FcolorR+40, FcolorG+40, FcolorB+40)
    rect(mcX, mcY, mW, mH)

    line(mcX-mW/2, mcY, mcX+mW/2, mcY)


    noLoop();

}

Drafting and Calculations in Sketchbook

This project demanded the use of variables because all of the facial variants were based on ratios involving the facial dimensions. These dimensions change with every click so the values for many dimensions of the face are derived from there.

Kai Zhang-Project-02-Variable-Face

kaiz1_Project02

//Kai Zhang
//Section B
//kaiz1@andrew.cmu.edu
//Project-02

//eyes
var eyeLW = 40;
var eyeLH = 20;
var eyeRW = 40;
var eyeRH = 20;
var eyeR = 10; //eye rotation
var eyeX = -50;

//eye background
var eyeBW = 70;
var eyeBH = 60;

//face
var faceW = 240;
var faceH = 220;

//knife
var knifeX = 0;
var knifeY = 0;
var knifeR = 0;

//overall Rotation
var rotateA = 0;


function setup() {
    createCanvas(480, 640);
    background(80);
    angleMode(DEGREES);
}


function draw() {
	background(80);
	strokeWeight(5);
	fill(255, 0, 0);
	translate(240, 320);

	rotate(rotateA);

	//knife
	push();
		fill(255);
		translate(knifeX, knifeY);
		rotate(knifeR);
		//knife edge
		beginShape();
			vertex(0, 0);
			vertex(0, 45);
			vertex(12, 45);
			vertex(12, 13);
		endShape(CLOSE);
		//knife handle
		fill(0);
		beginShape();
			vertex(-5, 45);
			vertex(17,45);
			vertex(17, 47);
			vertex(11, 47);
			vertex(11, 65);
			vertex(1, 65);
			vertex(1, 47);
			vertex(-5, 47);
		endShape(CLOSE);

	pop();

	//face
	ellipse(0, 0, faceW, faceH);
	line(0, -faceH/2, 0, faceH/2);

	//eye background
	push();
		fill(0);
		ellipse(eyeX - 3, -20, eyeBW, eyeBH);
		ellipse(-eyeX + 3, -20, eyeBW, eyeBH);
	pop();

	//eyes
	push();
		fill(255);
		translate(eyeX, -20);
		rotate(eyeR);
		ellipse(0, 0, eyeLW, eyeLH);
	pop();
	push();
		fill(255)
		translate(-eyeX, -20);
		rotate(-eyeR);
		ellipse(0, 0, eyeRW, eyeRH);
	pop();
}



function mousePressed() {
	eyeX = (-faceW/5);
	eyeLW = random(37, 45);
	eyeLH = random(10, 40);
	eyeRW = random(37, 45);
	eyeRH = random(10, 40);
	eyeR = random(-13, 13);
	eyeBH = random(55, 80);
	eyeBW = random(65, 80);

	faceW = random(210, 280);
	faceH = random(150, 280);

	knifeX = random(-180, 180);
	knifeY = random(-280, 280);
	knifeR = random(-180, 180);

	rotateA = random(-30, 30);
}

Deadpool is one of my favorite Marvel characters. He made possible two amazing featured films and hundreds of comic stories. The reason I chose him as the protagonist of my project 2 is he makes perfect leap from and to 3D and 2D world. The kartoon version of him comes with countless different proportions of facial features and expressions (especially the eyes), easily fits into the gridlines of the project. In the code of this project, I’ve set up to 14 different variables, composing the different eye shapes, eye shade shapes, face shapes, orientations, etc. I’ve also added an “eastern egg”, a small knife that floats across the canvas that occasionally hits the little deadpool’s haed. Luckily, because of his super power, he would be easily recovered from that. 🙂

Anthony Ra – Looking Outwards – 02

“Unreleased Thoughts – neurons fire, images form”

Instead of a specific installation or project, I decided to look at a singular artist’s collection of works. From his biography, Sergio Albiac plays with the “visual intersection between generative computer code and traditional media. I originally ran across his work while on Pinterest and part of what his work that is especially intriguing is his implementation of two things that I have much interest in – portraits and learning art through code.

Using voice and facial recognition to generate a portrait
2016 Internet Age Media Weekend

However, one of his works that stand out the most is “I am”. People sit in a visual portrait studio and, speaking to an audio application program interface, codes those words to create a portrait using those descriptions. It is the type of interactive artwork that does not involve the longevity of sitting through oil paintings or a couple nanoseconds of a flick of a film camera.

generated by sensors from cars

Part of what I really enjoy with his work is that it does not initially seem to have any generative-ness into it. Some of his work seems like oil paintings or watercolor, but upon further look, the ability to put computer programming and coding into a product that is convincingly realistic is something I definitely want to look into in the near future.

 

Catherine Coyle – Project 02 – Variable Faces

catherine faces

// Catherine Coyle
// Section C
// ccoyle@andrew.cmu.edu
// Project-02

var faceWidth = 300;
var faceHeight = 300;
var noseShape = 1;
var noseWidth = 50;
var noseHeight = 50;
var eyeSize = 50;
var eyeWidth = 100;
var eyeShape = 1;
// these are the coordinates of points on the mouth
var mouthY = 300;
var mouthMX = 320;
var mouthMY = 350;
var mouthLength=100
// skin color variables
var skinR = 250;
var skinG = 180;
var skinB = 140;
// pupils
var pupilSize = 30;
var pupilR = 0;
var pupilG = 0;
var pupilB = 0;
// other random features
var glasses = true;
var freckle = true;
var freckleX = 400;
var freckleY = 300;
var freckleSize = 5;
var blush = true;
var blushSize = 100;


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

function draw() {
	strokeWeight(0);
	background(239, 198, 198);
	// basic face
	fill(skinR,skinG,skinB);
	ellipse(width/2,height/2,faceWidth,faceHeight);
	// some random characteristics
	if (freckle == true) {
		fill(104, 54, 11);
		ellipse(freckleX, freckleY, freckleSize, freckleSize)
	}
	if (blush == true) {
		fill(skinR,skinG-50,skinB);
		ellipse((width/2)-(faceWidth/2)+blushSize/2,height/2,blushSize, blushSize);
		ellipse((width/2)+(faceWidth/2)-blushSize/2,height/2,blushSize, blushSize);
	}
	// eyes
	fill(255);
	if (eyeShape==1) {
		ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
		ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeSize,eyeSize);
	}
	else if (eyeShape==2) {
		rect((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
		rect((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)-(eyeSize/4),eyeSize,eyeSize/2);
	}
	else if (eyeShape==3) {
		triangle((width/2)-(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)-(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
		triangle((width/2)+(eyeWidth/2)-(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2)+(eyeSize/2),(height/2)-(faceHeight/4)+(eyeSize/2),(width/2)+(eyeWidth/2),(height/2)-(faceHeight/4)-(eyeSize*3/4));
	}
	// pupils
	fill(pupilR,pupilG,pupilB);
	ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
	ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),pupilSize,pupilSize);
	// nose
	fill(skinR-50,skinG-20,skinB-20);
	if (noseShape == 1) {
		ellipse(width/2,height/2,noseWidth,noseHeight);
	}
	else if (noseShape == 2) {
		rect((width/2)-noseWidth/2,(height/2)-noseHeight/2,noseWidth,noseHeight);
	}
	else if (noseShape==3) {
		triangle((width/2)-noseWidth/2, (height/2)+(noseHeight/2),(width/2)+noseWidth/2, (height/2)+(noseHeight/2), width/2,(height/2)-(noseHeight/2));
	}
	// mouth
	strokeWeight(5);
	noFill();
	beginShape();
	curveVertex((width/2)-(mouthLength/2),mouthY);
	curveVertex((width/2)-(mouthLength/2),mouthY);
	curveVertex(mouthMX,mouthMY);
	curveVertex((width/2)+(mouthLength/2),mouthY);
	curveVertex((width/2)+(mouthLength/2),mouthY);
	endShape();
	// if they have glasses theyre added here
	if (glasses == true) {
		noFill();
		strokeWeight(5);
		stroke(0);
		ellipse((width/2)-(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
		ellipse((width/2)+(eyeWidth/2),(height/2)-(faceHeight/4),eyeWidth*3/4,eyeWidth*3/4);
		line((width/2)-(eyeWidth/8),(height/2)-(faceHeight/4),(width/2)+(eyeWidth/8),(height/2)-(faceHeight/4))
	}
}

function mousePressed() {
	// randomizing all variables used for the face to make a new one!
	faceWidth=random(150,450);
	faceHeight=random(150,450);
	// randomizes the shape used for the nose
	// 1 means circle, 2 means rectangle, 3 means triangle
	noseShape = int(random(1,3.99));
	noseWidth = random(10,100);
	noseHeight = random(10,100);
	eyeWidth = random(20,faceWidth/2);
	eyeSize = random(20,eyeWidth/2);
	mouthLength = random(50,faceWidth*3/4);
	mouthY = (height/2)+faceHeight/4;
	mouthMY = random((height/2)+(noseHeight/2)+10, (height/2)+(faceHeight/2)-10);
	mouthMX = random((width/2)-(mouthLength/2)+10,(width/2)+(mouthLength/2)-10);
	skinR = random(183,255);
	skinG = random(120,skinR-60);
	skinB = skinG - random(30,60);
	pupilSize=random(5,eyeSize-10);
	pupilR = random(0,255);
	pupilG = random(0,255);
	pupilB = random(0,255);
	// eye shape works the same way as nose shape
	eyeShape = int(random(1,3.99));
	// randomizing extra features
	if (random(0,5) > 2) {
		glasses = false;
	}
	else {
		glasses = true;
	}
	if (random(0,10) > 6) {
		freckle = true;
		freckleX = (random(width/2, width/2 + faceWidth/2))*3/4;
		freckleY = (random(height/2, height/2 + faceHeight/2))*3/4;
		freckleSize = random(4,10);
	}
	else {
		freckle = false;
	}
	if (random(0,10) > 5) {
		blush = true;
		blushSize = random(50,faceWidth/2);
	}
	else {
		blush = false;
	}
}

 

I had a lot of fun with this project! I really wanted to emphasize the randomization so instead of creating a basic face set up and randomizing small parts, I decided to just create the face as if everything is randomly generated each time. Because of this, I didn’t make any sketches this time because it was impossible to predict anything about the faces. I wanted them all to be unrecognizable from one another. To help with this, I added variations to eye/nose shapes and also added additional features that aren’t on the face in every randomization. Initially I had wanted to add some kind of animation to this project but it ended up being to complicated with all the variability. Some of the faces end up being kind of funny/scary but I think it’s fun to click and see what the code can come up with!