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

Looking Outwards-02

One generative art project I admire is “Traffic Simulation” created by Robert Higgins. His simulation mimics various traffic lights with a multitude of oncoming traffic. What draws my attention to this simulation is his ability to make the interactions (speed, stopping, pausing) of the cars seem very human-like. They do not act simultaneously and in sync, which would not mimic the reality of traffic. The algorithm in this work first laid out its foundation with simple lines and curves fo map out the road on an XZ plane. As the program develops, there must be various statements in the program to determine the car’s behavior depending on the color of the light. The cars are covered in sensors and multiple variables are considered such as aggressiveness. You can see the artist’s creativity throughout this project in his ability to recreate human-like traffic interactions, as well as his choice of color and sleek design.

Traffic Simulation | Robert Hodgin | Jan. 2020

Traffic

Dillenberger, Hansmeyer, And the Parametric Grotto

https://www.archdaily.com/868540/this-mysterious-3d-printed-grotto-challenges-boundaries-of-computational-geometry-and-human-perception

Digital Grotesque II, by Dillenberger & Hansmeyer. Commissioned by the Centre Pompidou

Dillenberger & Hansmeyer’s 3D printer grotto is a perfect representation of that possibilities that computation and digital fabrication can bring to architecture. Inhumanly complex and detailed, its Gaudi-esque surface was generated using algorithms and built in sandstone using 3D printers. It leaves the limitations of the human ability to craft and even to design in the dust, relying purely on the now super-human abilities of our machines.

Works such as this one inevitably force people like me to ask hard questions about what design is worth. These algorithms and machines designed and built an object much more complex than I ever could, even given another thirty years to master design and a team of master stonemasons to work with. If this is what can be done with machines alone, what in what space are people like me left to work?

-Robert

Project-02-Variable-Face

For this project I modeled the face from the aliens in Toy Story. I think they have relatively simple features that were easier to abstract. I found a cartoon collector toy version of them which served as a much better basis for the actual shapes.

sketch Download


function setup() {
    createCanvas(600, 600);
    background(220);
    noLoop();
}

function draw() {
    var antennas = random(3);
    var eyes = random(3);
    var mouth = random(4);
    var background = random(6);

    if (background < 1) {
      var backgroundColor = "#BF2D22"
    } else if (background > 1 & background < 2) {
      var backgroundColor = "#730B03"
    } else if (background > 2 && background < 3) {
      var backgroundColor = "#40211F"
    } else if (background > 3 && background < 4) {
      var backgroundColor = "#CA6861"
    } else if (background > 4 && background < 5) {
      var backgroundColor = "#400F0B"
    } else {
      var backgroundColor = "#8C2119"
    }
//background
    fill(backgroundColor);
    noStroke();
    rect(0,0,width,height);

//head
    fill(179,209,25);           //green
    rect(75,175,450,350,90);

  //ears
    beginShape();
    curveVertex(75,275);
    curveVertex(75,275);
    curveVertex(55,250);
    curveVertex(35,230);
    curveVertex(28,233);
    curveVertex(25,240);
    curveVertex(25,240);
    curveVertex(30,350);
    curveVertex(30,350);
    curveVertex(28,360);
    curveVertex(31,373);
    curveVertex(38,380);
    curveVertex(55,375);
    curveVertex(65,370);
    curveVertex(75,365);
    curveVertex(75,365);
    endShape();

    beginShape();
    curveVertex(600-75,275);
    curveVertex(600-75,275);
    curveVertex(600-55,250);
    curveVertex(600-35,230);
    curveVertex(600-28,233);
    curveVertex(600-25,240);
    curveVertex(600-25,240);
    curveVertex(600-30,350);
    curveVertex(600-30,350);
    curveVertex(600-28,360);
    curveVertex(600-31,373);
    curveVertex(600-38,380);
    curveVertex(600-55,375);
    curveVertex(600-65,370);
    curveVertex(600-75,365);
    curveVertex(600-75,365);
    endShape();

    stroke(0,0,0,60);       //transparent black
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(75,285);
    curveVertex(75,285);
    curveVertex(35,240);
    curveVertex(45,360);
    curveVertex(45,360);
    endShape();

    beginShape();
    curveVertex(600-75,285);
    curveVertex(600-75,285);
    curveVertex(600-35,240);
    curveVertex(600-45,360);
    curveVertex(600-45,360);
    endShape();

//collar
    stroke(126,77,152);       //purple
    strokeWeight(40);
    line(155,530,455,530);

//shirt
    noStroke();
    fill(6,149,209);          //blue
    beginShape();
    curveVertex(0,599);
    curveVertex(0,599);
    curveVertex(25,555);
    curveVertex(155,530);
    curveVertex(155,530);
    curveVertex(455,530);
    curveVertex(455,530);
    curveVertex(574,555);
    curveVertex(599,599);
    curveVertex(599,599);
    endShape();

//antennas
    if (antennas < 1) {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      circle(300,75,60);
    } else if (antennas > 1 & antennas < 2){
      fill(179,209,25);
      beginShape();
      curveVertex(270-50,175);
      curveVertex(270-50,175);
      curveVertex(285-50,125);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(315-50,125);
      curveVertex(330-50,175);
      curveVertex(330-50,175);
      endShape();

      beginShape();
      curveVertex(270+50,175);
      curveVertex(270+50,175);
      curveVertex(285+50,125);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(315+50,125);
      curveVertex(330+50,175);
      curveVertex(330+50,175);
      endShape();

      circle(300+50,75,60);

      circle(300-50,75,60);
    } else {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      beginShape();
      curveVertex(270+80,175);
      curveVertex(270+80,175);
      curveVertex(285+80,125);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(315+80,125);
      curveVertex(330+80,175);
      curveVertex(330+80,175);
      endShape();

      beginShape();
      curveVertex(270-80,175);
      curveVertex(270-80,175);
      curveVertex(285-80,125);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(315-80,125);
      curveVertex(330-80,175);
      curveVertex(330-80,175);
      endShape();

      circle(300,75,60);

      circle(300+80,75,60);

      circle(300-80,75,60);
    }

//eyes
    if (eyes < 1) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);
    } else if (eyes > 1 & eyes < 2) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300-60,275,90);
      fill(0);
      circle(300-60,275,40);

      fill(255,255,255);
      circle(300+60,275,90);
      fill(0);
      circle(300+60,275,40);
    } else {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);

      fill(255,255,255);
      circle(300+110,275,90);
      fill(0);
      circle(300+110,275,40);

      fill(255,255,255);
      circle(300-110,275,90);
      fill(0);
      circle(300-110,275,40);
    }

//smile
    var mouthH = random(400,450);
    var mouthW = random(100,150);

    noFill();
    stroke(0);
    strokeWeight(10);

    beginShape();
    curveVertex((width/2)+mouthW,400);
    curveVertex((width/2)+mouthW,400);
    curveVertex(300,mouthH);
    curveVertex((width/2)-mouthW,400);
    curveVertex((width/2)-mouthW,400);
    endShape();
  }

function mouseClicked() {
    loop();
    noLoop();
    clear();
    background(220);
    //allowing user to click to loop another random face
  }

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

Project – 02: Variable Faces

My week could be described with this emoji: 🤡, so I decided to lock myself in my apartment to code this as a coping mechanism.

I thought it was interesting that clowns are interpreted very differently depending on their context and appearance. I decided to take advantage of this project to demonstrate the unsettling feeling they give me. I was surprised to see that the incremental changes in color and size of the clown’s features actually increased the cursed factor significantly.

clown!

//global variables
var eyewhite = 42;
var eyeshadow = 60;
var pupil = 20;
var faceWidth = 315;
var faceHeight = 315;
var nose = 63;
var cheek = 58;
var eyebrow = 50;
var shoulderWidth = 480;
var mouthType = 1
//shirtcolor
var shirtR = 0;
var shirtG = 192;
var shirtB = 184;
//red default color
var r  = 255;
var g = 5;
var b = 37;
//eyeshadowcolor
var shadowR = 97;
var shadowG = 116;
var shadowB = 255;

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

function draw() {
    background(255, 160, 59);
    var centerX = width / 2;
    var centerY = height / 2;

//body
    //shoulders
        noStroke();
        fill (shirtR, shirtG, shirtB);
        rect(0, 480, shoulderWidth, 165, 90, 90, 0, 0);

    //bottomneck
        noStroke();
        fill (255, 237, 219);
        ellipse (centerX, 486, 144, 82);

    //neck
        noStroke();
        fill (255, 237, 219);
        rect (168, 419, 144, 66);

    //buttons
        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 557, 27, 27);

        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 592, 27, 27);

        noStroke();
        fill (255, 250, 116);
        ellipse (centerX, 626, 27, 27);

//face
    noStroke(); 
    fill(255, 245, 227);
    ellipse ( centerX, centerY, faceWidth, faceHeight);

    //cheeks
        noStroke();
        fill(255, 51, 86, 100);
        ellipse (140, centerY, cheek, cheek);

        noStroke();
        fill(255, 51, 86, 100);
        ellipse (333, centerY, cheek, cheek);

    //nose
        noStroke();
        fill (r - 18, g, b); //darker red
        ellipse (centerX, 320, nose, nose);

    //eye
    var eyeLX = 185;
    var eyeRX = 291;
    var eyeY = 271;

        //eyeshadow
            noStroke();
            fill (shadowR, shadowG, shadowB);
            ellipse (eyeLX, eyeY, eyeshadow);

            noStroke();
            fill (shadowR, shadowG, shadowB);
            ellipse (eyeRX, eyeY, eyeshadow);

        //eyewhite
            noStroke ();
            fill (255);
            ellipse (eyeLX, eyeY, eyewhite);

            noStroke ();
            fill (255);
            ellipse (eyeRX, eyeY, eyewhite);

        //pupil
            noStroke ();
            fill (0);
            ellipse (eyeLX, eyeY, pupil, pupil);

            noStroke ();
            fill (0);
            ellipse (eyeRX, eyeY, pupil, pupil);

    //mouth
    var mouthLX = 170;
    var mouthRX = 310;
    var smileY = 352;
    var neutralY = 374;
    var frownY = 400;

    //draw three different mouth expressions
    if (mouthType ==1){
        //smile
            noFill();//lips
            stroke(r, g, b);
            strokeWeight(36);
            beginShape ();
            curveVertex( mouthLX, smileY)
            curveVertex( mouthLX, smileY)
            curveVertex( 195, 377)
            curveVertex (centerX, 393)
            curveVertex( width - 195, 377)
            curveVertex( mouthRX, smileY)
            curveVertex( mouthRX, smileY)
            endShape();

            noFill();//teeth
            stroke(255);
            strokeWeight(11);
            beginShape ();
            curveVertex( mouthLX, smileY)
            curveVertex( mouthLX, smileY)
            curveVertex( 195, 377)
            curveVertex (centerX, 393)
            curveVertex( width - 195, 377)
            curveVertex( mouthRX, smileY)
            curveVertex( mouthRX, smileY)
            endShape();

    } else if (mouthType ==2){
        //neutral
            noFill();//lips
            stroke(r,g,b);
            strokeWeight (36);
            line (mouthLX, neutralY, mouthRX, neutralY);

            noFill();//teeth
            stroke(255);
            strokeWeight (11);
            line (mouthLX, neutralY, mouthRX, neutralY);

    } else if (mouthType ==3){
        //frown
            noFill();//lips
            stroke(r, g, b);
            strokeWeight(36);
            beginShape ();
            curveVertex( mouthLX, frownY)
            curveVertex( mouthLX, frownY)
            curveVertex( 195, 370)
            curveVertex( centerX, 359)
            curveVertex( width - 195, 370)
            curveVertex( mouthRX, frownY)
            curveVertex( mouthRX, frownY)
            endShape();

            noFill();//teeth
            stroke(255);
            strokeWeight(11);
            beginShape ();
            curveVertex( mouthLX, frownY)
            curveVertex( mouthLX, frownY)
            curveVertex( 195, 370)
            curveVertex( centerX, 359)
            curveVertex( width - 195, 370)
            curveVertex( mouthRX, frownY)
            curveVertex( mouthRX, frownY)
            endShape();
    }
    //hair
        //left
        noStroke();
        fill(r,g,b);
        ellipse (83, 260, 42);
        ellipse (91, 230, 42);
        ellipse (57, 209, 42);
        ellipse (77, 203, 42);
        ellipse (68, 167, 42);
        ellipse (52, 147, 42);
        ellipse (56, 209, 42);
        ellipse (47, 182, 42);
        ellipse (67, 235, 60);
        ellipse (98, 198, 50);
        ellipse (57, 125, 29);

        //right
        noStroke();
        fill(r,g,b);
        ellipse (width- 83, 260, 42);
        ellipse (width- 91, 230, 42);
        ellipse (width- 57, 209, 42);
        ellipse (width- 77, 203, 42);
        ellipse (width- 68, 167, 42);
        ellipse (width- 52, 147, 42);
        ellipse (width- 56, 209, 42);
        ellipse (width- 47, 182, 42);
        ellipse (width- 67, 235, 60);
        ellipse (width- 98, 198, 50);
        ellipse (width- 57, 125, 29);
}

function mousePressed() {
eyewhite = random (30, 60);
eyeshadow = random( 55, 70);
pupil = random (15, 30);
faceWidth = random(300, 330);
faceHeight = random(315, 380);
nose = random(45, 90);
cheek = random(55, 90);
mouthType = int(random(1,4));
//shirtcolor
shirtR = random(0, 255);
shirtG = random(0, 255);
shirtB = random(0, 255);
//eyeshadowcolor
shadowR = random(0, 255);
shadowG = random(0, 255);
}

PROJECT 01- SELF PORTRAIT

JUNE_MYFACE

function setup() {
    createCanvas(500, 400);
    background(100);
 }


function draw() {

//hair
	fill(0);
	quad(155,155,140,350,350,370,330,155,);

//face
	noStroke();
	fill(215,203,124);
	quad(155,150,330,160,300,300,180,290);
	triangle(180,289,300,299,250,330);

//ears
	fill(185,174,99);
	quad(145,200,165,195,170,230,150,230);
	quad(320,190,313,220,330,225,340,195);

//glasses
	stroke(5);
    fill(100,112,145);
	arc(200,200,50,60,0,PI+QUARTER_PI,CHORD);
	arc(270,200,50,60,0,PI,CHORD);
	line(220,205,250,210);
	line(150,210,180,200);
	line(285,210,330,200);

//nose
	noStroke();
	fill(207,190,75);
	triangle(230,220,220,250,245,255);
	fill(187,171,66);
	ellipse(225,245,5,3);
	ellipse(240,250,5,3);

//lips
	fill(145,101,120);
	triangle(200,280,230,270,250,285);
	triangle(230,285,280,280,260,265);
	fill(129,93,109);
	triangle(200,280,280,280,240,295);

//bucket hat
	fill(65,68,173);
	quad(155,170,180,100,300,100,330,170);
	quad(120,170,360,170,340,150,140,150);

//label
	fill(215,203,124);
	noStroke();
    textSize(10);
    text("JUNE LEE / SECTION C",360,25);
}

I found it challenging to work with a new coding language, however this allowed me to think about analog methods such as painting to organize my code.

PROJECT 02- VARIABLE FACE

JUNE_VARIABLEFACE

var face=1;
var backColor=1;
var glasses=1;
var mouth=1;


function setup() {
    createCanvas(400,400);
    background(100);
 }


function draw() {

//background
	if (backColor==1) {
		background(136,160,150);
	} else if (backColor==2) {
		background(53,61,47);
	} else {
		background(32,42,37);
	}


//face
	rectMode(CENTER);
	var facex=(width/2);
	var facey=(height/2);
	if (face==1) {
		noStroke();
		fill(255);
		rect(facex,facey,width/3,height/2.5);
	} else if (face==2) {
		noStroke();
		ellipse(facex,facey,width/3,height/2);
	} else {
		noStroke();
		rect(facex,facey,width/3.5,height/2.2,40);
	}

//glasses
	print(glasses);
	if (glasses==1) {
		stroke(5);
		strokeWeight(0);
   	 	fill(0);
		ellipse(facex-25,facey-30,30,30);
		ellipse(facex+25,facey-30,30,30);
		strokeWeight(2.5);
		stroke(0);
		line(facex-25,facey-30,facex+25,facey-30);
	} else if (glasses==2) {
		fill(0);
		stroke(0);
		strokeWeight(3);
		rect(facex-25,facey-30,30,25,10);
		rect(facex+25,facey-30,30,25,10);
		line(facex-25,facey-30,facex+25,facey-30);
	} else {
		stroke(0);
		strokeWeight(10);
		point(facex-25,facey-30);
		point(facex+25,facey-30);
	}

//nostrils
	stroke(0);
	strokeWeight(2+(1*face));
	point(facex-5,facey+10);
	point(facex+5,facey+10);

//mouth
	fill(129,93,109);
	noStroke();
	if (mouth==1) {
		rect(facex,facey+40,15,30,5);
	} else if (mouth==2) {
		ellipse(facex,facey+40,30,15);
	} else {
		ellipse(facex,facey+40,30,30);
	}

//hair strand
	noFill();
	stroke(100);
	strokeWeight(5);
	curve(facex,facey-70,facex,facey-70,facex+50,facey-(100-(5*glasses)),facex+50,facey-(120+(20*glasses)));

//label
	fill(255);
	noStroke();
    textSize(6);
    textAlign(CENTER);
    text("JUNE LEE / SECTION C",width/2,25);
}

function mousePressed() {
	face=(int(random(1,4)));
	backColor=(int(random(1,4)));
	glasses=(int(random(1,4)));
	mouth=(int(random(1,4)));
}

I enjoyed doing this project as I was able to explore different functions with the mousePressed() function on p5.js. By defining some variables, I was able to type code in relation to other measurements existing on the canvas.

Looking Outwards 02 – Generative Art

One of the books from the early series of ‘Curious George’

Behind the childhood animation, ‘Curious George’, there is an untold love story of the authors Hans and Margret Rey. In celebration of the 75th anniversary of ‘Curious George’, filmmaker Ema Ryan Yamazaki decided to put together a mixed-media documentary that tells the love story of the authors. When I was a little girl, I absolutely enjoyed reading the series and watching the TV show. Before reading this artile, I did not know that the animation was created by two German immigrants who were also a married couple as well. Children would think nothing more of the series of ‘Curious George’. However, as adults, I think it becomes very important to learn where the inspiration of the animation comes from.

As the filmmaker explained how ‘Curious George’ was a reflection of their life experiences and personalities, I was very fascinated by the connection. It is amazing how one can bring a story to life through a creative animation. However, the process of creating this animation as well as incorporating the same style of ‘Curious George’ is a load of work. Since the project itself consists of 15,000 hand-drawn drawings, Yamazaki had been trying to raise the funds so that more people can help. To this very day, it still amazes me how a set of drawings can be transformed into a motion picture. As a filmmaker, Yamazaki’s artistic sensibilities was able to develop the idea of presenting the story of Hans and Margret Rey through their own style. Choosing the same style that was used for ‘Curious George’ creates such a strong connection because it gives everyone a reminder of the animation.

LO2- GENERATIVE ART

Guto Requena- Samba Stool 2014

https://gutorequena.com/samba-stool

Generative design helps designers in going through a big number of possible combinations in a short amount of time. By allowing computers to run possibilities that are of parametric design and accuracy, the architect is able to devote the remaining time to design more thoroughly. This also creates multiple solutions for the same project that the architect might have been unable to think of or foresee.

I admire furniture design, in general. However, the Samba Stool allows music to become a mix of design with music. By analyzing classic samba songs through vocals, vass, treble, rhythm, etc, frequency curves were generated. Requena organizes these curves into an organic and smooth surface on a digital file.

Guto Requena’s generative design is then sculpted on a CNC machine to create a marble stool. Digital simulations and geometric manipulation allowed a variety of possibilities of shapes and designs in this process and has allowed a cultural and aesthetic manifestation of design.

Project 02 – Variable Faces

For this project, I used Photoshop to draw out the animation character as well as getting the correct parameters for each shape. I was inspired by the physical features and stylistics of the Animal Crossing villagers. Therefore, I wanted to try creating my own character.

blue puffy

//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-02

function setup() {
    createCanvas(640, 480);
    background(251, 252, 212);
}

var eyeWidth = 50;
var eyeHeight = 67;
var pupilWidth = 27;
var pupilHeight = 27;
var pupilX = 342
var pupilY = 234
var faceWidth = 324;
var faceHeight = 230;
var cheekWidth = 44;
var cheekHeight = 21;
var noseWidth = 60;
var noseHeight = 34;
var mouthWidth = 18;
var mouthHeight = 13;
var hairWidth = 107;
var hairHeight = 88;

function draw() {
    
    //face
    noStroke();
    fill(203, 227, 217);
    ellipse(323, 281, faceWidth, faceHeight);

    //left cheek
    noStroke();
    fill(237, 205, 201);
    ellipse(207, 323, cheekWidth, cheekHeight);

    //right cheek
    noStroke();
    fill(237, 205, 201);
    ellipse(439, 323, cheekWidth, cheekHeight);

    //mouth
    noStroke();
    fill(1, 56, 72);
    ellipse(344, 364, mouthWidth, mouthHeight);

    //nose
    noStroke();
    fill(1, 56, 72);
    rect(294, 300, noseWidth, noseHeight);

    //left eye
    noStroke();
    fill(255);
    ellipse(243, 279, eyeWidth, eyeHeight);

    //right eye
    noStroke();
    fill(255);
    ellipse(403, 279, eyeWidth, eyeHeight);

    //yc = pupils (up & down)
    let topEye = 257;
    let bottomEye = 279;
    let mouse = mouseY;
    let yc = constrain(mouseY, bottomEye, topEye);

    //left pupil
    noStroke();
    fill(89, 57, 39);
    ellipse(243, yc, pupilWidth, pupilHeight);

    //right pupil 
    noStroke();
    fill(89, 57, 39);
    ellipse(403, yc, pupilWidth, pupilHeight);

    //hairA
    noStroke();
    fill(32, 69, 255);
    ellipse(154, 243, hairWidth, hairHeight);

    //hairB
    noStroke();
    fill(32, 69, 255);
    ellipse(216, 189, hairWidth, hairHeight);

    //hairC
    noStroke();
    fill(32, 69, 255);
    ellipse(311, 173, hairWidth, hairHeight);

    //hairD
    noStroke();
    fill(32, 69, 255);
    ellipse(403, 189, hairWidth, hairHeight);

    //hairE
    noStroke();
    fill(32, 69, 255);
    ellipse(486, 235, hairWidth, hairHeight);

    //hairF
    noStroke();
    fill(32, 69, 255);
    ellipse(154, 166, hairWidth, hairHeight);

    //hairG
    noStroke();
    fill(32, 69, 255);
    ellipse(247, 121, hairWidth, hairHeight);

    //hairH
    noStroke();
    fill(32, 69, 255);
    ellipse(311, 92, hairWidth, hairHeight);

    //hairI
    noStroke();
    fill(32, 69, 255);
    ellipse(444, 121, hairWidth, hairHeight);

    //hairJ
    noStroke();
    fill(32, 69, 255);
    ellipse(185, 111, hairWidth, hairHeight);

    //hairK
    noStroke();
    fill(32, 69, 255);
    ellipse(365, 121, hairWidth, hairHeight);

    //hairL
    noStroke();
    fill(32, 69, 255);
    ellipse(483, 166, hairWidth, hairHeight);
}


function mousePressed() {
	faceWidth = random(200, 400);
	faceHeight = random(100, 300);
	cheekWidth = random(44, 54);
	cheekHeight = random(54, 64);
	noseWidth = random(45, 85);
	noseHeight = random(24, 44);
	mouthWidth = random(8, 28);
	mouthHeight = random(3, 23);
	pupilWidth = random(17, 47);
	pupilHeight = random(47, 57);
	hairHeight = random(90, 200);
}