Category: Project-01-Face

Kai Zhang-Project-01-Face

kaiz1-project01

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

function setup() {
    createCanvas(600, 740);
    angleMode(DEGREES);
    background(80);
    text("Kai Zhang | Carnegie Mellon University", 10, 15);
}

function draw() {
    scale(0.75);
    fill(255);

    strokeWeight(5);
    stroke(180);
    point(20, 300); 
    point(40, 300);
    point(60, 300);
    point(80, 300);
    point(100, 300);
    point(120, 300);
    point(140, 300);
    point(160, 300);
    point(180, 300);
    point(200, 300);
    point(220, 300);
    point(240, 300);
    point(260, 300);
    point(280, 300);
    point(300, 300);


    strokeWeight(0);

    rect(0, 20, 800, 5);
    rect(0, 40, 800, 5);
    rect(0, 60, 800, 5);
    rect(0, 80, 800, 5);
    rect(0, 100, 800, 5);
    rect(0, 120, 800, 5);
    rect(0, 140, 800, 5);
    rect(0, 160, 800, 5);
    rect(0, 180, 800, 5);
    rect(0, 200, 800, 5);
    rect(0, 220, 800, 5);
    rect(0, 240, 800, 5);
    rect(0, 260, 800, 5);
    rect(0, 280, 800, 5);
    

    beginShape();
    curveVertex(800, 0);
    curveVertex(800, 0);
    curveVertex(350, 0);
    curveVertex(220, 50);
    curveVertex(193, 115);
    curveVertex(223, 177);
    curveVertex(272, 200);
    curveVertex(236, 259);
    curveVertex(223, 353);
    curveVertex(243, 436);
    //eyes

    curveVertex(183, 539);
    curveVertex(140, 606);
    curveVertex(197, 642);
    curveVertex(254, 652);
    //nose

    curveVertex(240, 717);
    curveVertex(287, 752);
    curveVertex(279, 780);
    curveVertex(285, 807);
    //mouse

    curveVertex(334, 825);
    curveVertex(359, 935);
    curveVertex(436, 950);
    curveVertex(640, 850);
    curveVertex(700, 830);
    curveVertex(740, 1000);
    curveVertex(800, 1000);
    curveVertex(800, 1000);
    //chin

    endShape();


    push()
    fill(78, 84, 205);
    stroke(78, 84, 205);
    translate(250, 460);
    rotate(-8);
    ellipse(0, 0, 60, 210);
    
    strokeWeight(10);
    line(0, 0, 500, 0);

    fill(255);
    strokeWeight(0);
    ellipse(500, 25, 100);

    
    translate(0, 40);
    fill(255);
    strokeWeight(2);
    stroke(160);
    arc(500, 150, 20, 20, 0, 270)
    fill(160);
    triangle(500, 150, 510,190, 490, 180);
    pop()


    noFill()
    stroke(0)
    strokeWeight(3)
    quad(20, 20, 780, 20, 780, 980, 20, 980)
    quad(30, 30, 740, 60, 700, 900, 60, 940)
    quad(40, 40, 700, 100, 620, 820, 100, 900)
}

When I tried to create the portrait of myself, instead of clustering a bunch of simple geometries for it, I was rather fascinated by the ability of Java Script that makes it possible to use curves as an visual representation. As the first step, I used the curve commend to outline the contour of my face from the side. Then I used several other primatives, including rectangles, quads, arc, dots, ellipses, triangles, words, etc., for the decoration of the imagery, so it looks even like a magazine.

Mimi Jiao Face Project

not sketch

function setup() {
    createCanvas(500, 650);
    background(255,225,0);
}

function draw() {
	/*noFill();
	stroke(0);
	curve(200,0,200,0,400,180,342,300);
	*/

	//hair
	fill(255,0,0);
	noStroke();
	rect(100,300,300,400);
	fill(255,0,0);
	rect(350,265,50,400);
	

	//neck
	noStroke();
	fill(255,78,78);
	rect(210,400,80,100);
	fill(0,0,255);
	ellipse(250,420,120,120);
	fill(255,0,0);
	rect(130,400,80,100);
	fill(255,0,0);
	rect(290,400,80,100);

	

	//face
	noStroke();
	//fill(255,0,0);
	fill(255,78,78);
	ellipse(250,300,300,300);


	//turtleneck
	fill(0,0,255);
	rect(200,490,100,30);
	fill(0,0,255);
	quad(200,520,300,520,450,620,50,620);
	fill(0,0,255);
	rect(50,620,400,100);


	//bangs
	fill(255,0,0);
	//curve(5, 26, 5, 26, 200, 240, 200, 240);
	
	arc(398, 180, 450, 190, HALF_PI, PI, CHORD);
	arc(250, 275, 300, 280,PI+QUARTER_PI,TWO_PI,CHORD);
	arc(250, 275, 300, 280,PI+QUARTER_PI,TWO_PI,CHORD);
	rect(350,265,50,280);
	arc(170, 300, 140, 280,PI,PI+HALF_PI,CHORD);
	//arc(140, 250, 40, 230,TWO_PI,TWO_PI+PI+HALF_PI,CHORD);
	rect(100,290,50,240);
	/*fill(0);
	stroke(20);
	point(180,200);
	point(150,290);
	point(100,290);
	point(155,170);
	*/
	quad(180,200,150,290,100,290,155,170);
	rect(155,179,25,25);

	//eyebrows
	fill(0);
	stroke(30);
	point(165,290);
	point(179,280);
	point(225,288);
	point(275,288);
	point(321,280);
	point(335,290);
	noFill();
	stroke(0,0,255);
	strokeJoin(ROUND);
	strokeWeight(10);
	beginShape();
	vertex(165, 290);
	vertex(179, 280);
	vertex(225,288);
	endShape();
	beginShape();
	vertex(275,288);
	vertex(321,280);
	vertex(335,290);
	endShape();

	//eyes
	point(184,310);
	fill(0,0,255);
	ellipse(195,315,45,20);
	noStroke();
	fill(255,255,0);
	ellipse(195,319,50,23);
	fill(0,0,255);
	ellipse(199,317,25,25);

	stroke(0,0,255);
	fill(0,0,255);
	ellipse(306,315,45,20);
	noStroke();
	fill(255,255,0);
	ellipse(306,319,50,23);
	fill(0,0,255);
	ellipse(310,317,25,25);

	//nose
	noStroke();
	fill(255,0,0);
	triangle(250,325,240,375,270,375);

	//mouth
	noFill();
	stroke(255,0,0);
	arc(255,395,70,10,0,PI,OPEN);

}

Lately neon and saturated bright colors have appealed to me a lot, so I used my current favorite colors to create a self portrait.

Vicky Zhou Project_01

sketch

/*Vicky Zhou
Section E
vzhou@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background(247, 204, 70, 90);
}

function draw() {

	noStroke();

	//hair
	fill(33, 3, 3);
	ellipse(300, 320, 340, 305);
	ellipse(300, 165, 100, 100);

	//face
	fill(238, 204, 175);
	ellipse(300, 330, 275, 275);

	//shoulders
	fill(171, 121, 59);
	rect(100, 500, 390, 290, 90, 90, 0, 0);

	//cheeks
	fill(228, 158, 104);
	ellipse(210, 390, 60, 60);
	fill(228, 158, 104);
	ellipse(390, 390, 60, 60);

	//mouth
	fill(211, 96, 78);
	ellipse(305, 420, 90, 30);
	fill(238, 204, 175);
	ellipse(305, 405, 70, 25);

	//ears
	fill(238, 204, 175);
	ellipse(165, 350, 50, 65);
	fill(238, 204, 175);
	ellipse(435, 350, 50, 65);

	//nose
	fill(204, 180, 149);
	rect(285, 380, 40, 15, 20);

	//bangs
	fill(33, 3, 3);
	arc(300, 240, 220, 110, HALF_PI + QUARTER_PI, TWO_PI + QUARTER_PI);

	//eyebrows
	fill(111, 97, 80);
	rotate(radians(340));
	ellipse(120, 370, 60, 25);
	fill(111, 97, 80);
	rotate(radians(40));
	ellipse(445, 160, 60, 25);

	//eyes
	fill (255, 255, 255);
	ellipse(350, 250, 30, 30);
	fill(255, 255, 255);
	ellipse(460, 210, 30, 30);
	fill(34, 4, 4);
	ellipse(350, 250, 19, 19);
	fill(34, 4, 4)
	ellipse(460, 210, 19, 19);



	

}

John Legelis p5.js Self Portrait

JJ-Face-Project

function setup() {
    createCanvas(600, 600);
    background(70,150,0);
}


function draw() {   
    ellipseMode(CENTER);
    noStroke();
    //face ellipse
    fill(198,156,109);
    ellipse(300,300,360,480);

    //cover bottom half of face in green
    fill(70,150,0);
    quad(120,400, 120,600, 480,600, 480,400);

    //jaw trapazoid
    fill(198,156,109);
    quad(136,400, 464,400, 360,520, 240,520);

    //ears left the right
    ellipse(110,300, 40,120);
    ellipse(490,300, 40,120);

    //eye whites left then right
    fill(255,255,255);
    arc(210,300, 70,50, PI, 0, OPEN);
    arc(390,300, 70,50, PI, 0, OPEN);

    //irises left then right
    fill(0,118,163);
    ellipse(210,288,24,24);
    ellipse(390,288,24,24);

    //pupils left then rigt
    fill(0,0,0);
    ellipse(210,288,12,12);
    ellipse(390,288,12,12);

    //lips
    fill(212,62,92)
    beginShape();
    vertex(290,450);
    vertex(300,455);
    vertex(310,450);
    vertex(345,460);
    vertex(315,470);
    vertex(285,470);
    vertex(255,460);


    endShape(CLOSE);

    //nosebridge lines left then right
    stroke(0);
    strokeWeight(1)
    line(290,300,288,400);
    line(310,300,312,400);
    //nose bubbles
    noFill()
    ellipse(285,412,24,24);
    ellipse(315,412,24,24);
    ellipse(300,416,15,15);
    //blockthecircles
    fill(198,156,109);
    noStroke();
    beginShape();
    vertex(288,400);
    vertex(312,400);
    vertex(312,420);
    vertex(288,420);
    endShape(CLOSE);

    //eyebrows left then right
    fill(208,181,55);
    rectMode(CORNERS);
    rect(245,270,175,255);
    rect(355,270,425,255);

    //hair
    beginShape()
    vertex(120,200);
    vertex(130,100);
    vertex(160,60);
    vertex(400,60);
    vertex(420,120);
    vertex(430,70);
    vertex(440,120);
    vertex(455,80);
    vertex(454,120);
    vertex(470,200);
    endShape(CLOSE);
}

As I created this portrait, I felt my intuition increasing with p5.js.  The p5.js.org website was very helpful for discovering new tools that would help with novel shapes. The hair was especially difficult to create.

 

Rebecca Kim-Project 01-Face

rebecca-portrait

/* Rebecca Kim
Section C
rykim@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background(250,220,220);

    // text("p5.js vers 0.7.1 test.", 10, 15);
}

function draw() {


	//hair
	strokeWeight(0);
	fill(20,40,20)
	rect(210,150,180,280,90,90,10,10);
	//hairline
	fill(180,145,110);
	rect(298,150,3,20);


	//neck
	fill(220,180,140);
	rect(282,320,35,70,0,0,50,50);
	//neckshadow
	fill(210,160,95);
	ellipse(300,340,37,40);


	//ears
	fill(220,180,140);
	ellipse(220,270,20,30);
	fill(200,160,120);
	ellipse(220,270,15,23);
	fill(220,180,140);
	ellipse(380,270,20,30);
	fill(200,160,120);
	ellipse(380,270,15,23);

	//earrings
	noFill(0);
	strokeWeight(1);
	ellipse(380,302,38,38);
	stroke(151);

	strokeWeight(1);
	ellipse(220,302,38,38);

	//head
	strokeWeight(0);
	fill(220,180,140);
	rect(220,170,160,180,120,120,100,100);


	//right brow
	fill(89,69,44);
	ellipse(330,230,60,20);
	fill(220,180,140);
	ellipse(330,240,60,20);
	rect(300,220,10,20);
	rect(300,231,20,10);
	fill(220,180,140);
	ellipse(340,238,60,20);

	//left brow
	strokeWeight(0);
	fill(89,69,44);
	ellipse(270,230,60,20);
	fill(220,180,140);
	ellipse(330,240,60,20);
	rect(290,220,20,20);
	rect(280,231,20,10);
	fill(220,180,140);
	ellipse(262,238,60,20);


//nose
	strokeWeight(0);
	fill(180,145,110);
	ellipse(300,280,10,5);
	fill(230,190,160);
	ellipse(300,278,8,3);

//eyes
	//fill(0);
	//ellipse(268,253,40,8);
	//fill(220,180,140);
	//ellipse(268,248,50,8);




}

My distinguishing features are my defined (but drawn on) eyebrows and small, upturned nose, so I focused purely on those. My hoop earrings, which I often wear, are also characteristic to me.

Christine Chen-Project-01-Face

Christine Chen-Project-01-Face

/* 
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-01-Face
*/

function setup() {
    createCanvas(600, 500);
    background(172, 199, 250);
    noStroke();
    smooth();

    //dark brown hair
    var b=color(73, 48, 33); 
    fill(b);
    ellipse(300, 250, 350, 410);

    //neck
    var n=color(241, 192, 156);
    fill(n);
    rect (250, 260, 100, 100);

    //ears
    fill(n);
    ellipse(185, 220, 40, 60);
    ellipse(415, 220, 40, 60);

    //face
    var f=color(253, 211, 181); 
    fill(f);
    ellipse(300, 200, 240, 250);

    //bangs
    fill(b);
    triangle(370, 70, 220, 90, 130, 250);
    ellipse(270, 80, 110, 20);
    triangle(300, 70, 390, 90, 450, 250);

    //brows
    fill(b);
    ellipse(245, 190, 40, 20);
    ellipse(345, 190, 40, 20);
    fill(f);
    ellipse(245, 195, 40, 20);
    ellipse(345, 195, 40, 20);

    //blush
    fill(254, 158, 158);
    ellipse(230, 260, 45, 45);
    ellipse(370, 260, 45, 45);

    //eyes
    fill(40, 40, 40);
    ellipse(255, 220, 20, 20);
    ellipse(345, 220, 20, 20);

    //pupil
    fill(255, 255, 255);
    ellipse(260, 220, 5, 5);
    ellipse(350, 220, 5, 5);

    //nose
    fill(n);
    ellipse(300, 230, 20, 30);

    //lips
    fill(253, 125, 125);
    ellipse(300, 280, 50, 40);
    ellipseMode(CENTER);
    fill(f);
    ellipse(300, 265, 60, 20);

    //shirt
    rectMode(CENTER);
    fill(199, 88, 88);
    rect(300, 480, 220, 270, 60);

    //flower petals
    fill(255, 204, 67);
    ellipse(232, 150, 20, 20); //bottom right petal
    ellipse(215, 150, 20, 20); //bottom left
    ellipse(223.5, 125, 20, 20); //top center
    ellipse(208, 134, 20, 20); //top left
    ellipse(239, 134, 20, 20); //top right

    //flower center
    fill(227, 67, 67);
    ellipse(224, 140, 20, 20); 
    //
}

This is my very first project for this class. Throughout the process of creating the self portrait, I experimented with utilizing various simple geometric shapes to resemble face features. While I haven’t started learning about writing the codes for more complex shapes that may perhaps show some particular feature better, I realized that I could create more complex shapes by layering simpler shapes together! Overall, I enjoyed creating this piece as it fascinates me how codes can be used to control colors and shapes to create aesthetic images!

Victoria Reiter Project-01-Face

sketch

function setup() {
    createCanvas(500, 500);
    background(220);
    background('hsl(155, 84%, 86%)');
    text("~V's Self-Portrait~", 10, 15);
    var a;
	noStroke();
	a = color('hsl(25, 100%, 86%)');
	fill(a); 
	ellipse(250, 285, 270, 290); 
	ellipse(385,260,50,70);
	ellipse(115,260,50,70);
	var b;
	noStroke();
	b = color('hsl(14, 78%, 76%)');
	fill(b); 
	ellipse(390,265,30,50);
	ellipse(110,265,30,50);
	triangle(255,331,240,350,220,325);
	var c;
	noStroke();
	c = color('hsl(14, 78%, 85%)');
	fill(c); 
	ellipse(185,335,60,25);
	ellipse(315,335,60,25);
	var d;
	noStroke();
	d = color('hsl(62, 100%, 76%)');
	fill(d); 
	quad(145,175,190,175,165,265,125,230);
	quad(180,175,215,175,245,260,230,245);
	quad(260,175,305,175,315,255,285,235);
	quad(315,175,355,175,370,220,335,245);
	var e;
	noStroke();
	e = color('hsl(232, 27%, 43%)');
	fill(e); 
	ellipse(250, 190, 300, 75); 
	ellipse(210,140,110,150);
	ellipse(292,140,110,150);
	var f;
	noStroke();
	f = color('hsl(232, 27%, 27%)');
	fill(f); 
	rect(155,152.5,192,30);
	var g;
	stroke('hsl(223, 60%, 50%)');
	g = color('hsl(0, 100%, 100%)');
	fill(g);
	ellipse(200,285,80,80);
	ellipse(305,285,80,80);
	stroke('hsl(0, 0%, 0%)');
	arc(250,360,110,70,0,PI,CHORD);
	var h;
	noStroke();
	h = color('hsl(166, 41%, 40%)');
	fill(h);
	ellipse(200,272,55,55);
	ellipse(305,272,55,55);
	var i;
	noStroke();
	i = color('hsl(1, 0%, 0%)');
	fill(i);
	ellipse(200,260,30,30);
	ellipse(305,260,30,30);
	var j;
	noStroke();
	j = color('hsl(29, 51%, 40%)');
	fill(j);
	ellipse(283,335,10,10);
}

Well, perhaps this is not the most technically-stunning or impressive thing in the universe, but I have to say throughout this project I kept audibly gasping at myself over the very fact that I was actually producing…anything. Literally four days ago I could not even fathom how it was physically possible to make numbers into pretty shapes, so the basic-ness of this project aside /I/ at least am thoroughly impressed with it! It is cute and allowed me to play around with various tools, such as figuring out a good way to choose colors! (I found a website you can kind of test colors out with then take the ‘coordinates'[?] for them and put them into your code here.) I started by drawing a very geometric picture, and writing a quick step-by-step of how I would order and overlap the shapes to get the end product. And I kind of just played around while I was at it!

Self Portrait: Jaclyn Saik

For my self portrait, I wanted to play with the simple shape tools I understood in this program to create shadows, so that I could block out more of the details on my face in an interesting way (as opposed to outlining them with the stoke). When creating this, I learned that the program runs a lot like a physical canvas in the sense that everything is layered on top of each other. It reminds me of painting, since objects/shapes that I want in front of everything else come last in the code and I have to direct which color each one is, even if that color has been used previously in the artwork.

Self Portrait work

function setup() {
    createCanvas(620, 620);
    background(86, 116, 159);
    //text("p5.min.js vers 0.7.1 test.", 10, 15);
}

function draw() {
    //colors 
    s = color(253, 217, 147)
    l = color(255, 242, 216)
    d = color(233, 180, 90)
    g = color(98, 187, 70)

    fill(s);
    noStroke();
    ellipse(443, 251, 724, 785)
    
    fill(l)
    rect(336, -70, 352, 697)
    triangle(244, 425, 336, 207, 336, 425)
   
    fill(s);
    triangle(336, 425, 344, 380, 391, 425)

    fill(d);
    triangle(224, 314, 260, 341, 285, 292)

    //eye-01
    fill(d)
    ellipse(196, 256, 168, 98)
    fill(255)
    ellipse(205, 251, 168, 98)
    fill(g)
    ellipse(239, 244, 73, 73)

    //eye-02
    fill(d)
    ellipse(473, 256, 168, 98)
    fill(255)
    ellipse(482, 251, 168, 98)
    fill(0, 0, 114)
    ellipse(529, 244, 40, 40)

    //eyelids
    fill(s)
    rect(121, 184, 193, 46)
    fill(l)
    rect(391, 184, 193, 46)


    //eyebrow
    fill(s);
    triangle(336, 204, 467, 158, 596, 195)

    //lips
    fill(137, 183, 226)
    triangle(262, 499, 336, 466, 336, 500)
    fill(182, 215, 241)
    triangle(336, 466, 336, 500, 438, 500)
    fill(86, 116, 159)
    triangle(262, 499, 336, 543, 336, 500)
    fill(114, 155, 204)
    triangle(336, 500, 336, 543, 438, 500)



}

Project1 – Alexander Chen

sketch

//Alexander Chen
//Section A
//alchen1@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(400, 400);
    background(73, 153, 173);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
	createCanvas(400, 400);
	background(128, 127, 128);

	//background design
	stroke(255);
	strokeWeight(5);
	if(mouseIsPressed){
		fill(102, 193, 224);
	} else {
		fill(233, 210, 218);
	}
	rect(30, 30, 340, 340);

	//head + neck
	noStroke();
	fill(231, 175, 132);
	ellipse(200, 260, 100, 120);
	fill(231, 175, 132);
	rect(190,310, 20, 30);	
	
	//shirt
	fill(53, 0, 5);
	rect(130, 340, 140, 60, 30, 30, 0 ,0);
	fill(255, 255, 255);
	triangle(200, 340, 180, 340, 190, 330);
	fill(255, 255, 255);
	triangle(200, 340, 220, 340, 210, 330);
	
	//buttons on shirt
	fill(255, 255, 255);
	ellipse(200, 350, 5, 5);
	fill(255, 255, 255);
	ellipse(200, 370, 5, 5);
	fill(255, 255, 255);
	ellipse(200, 390, 5, 5);
	
	//eyes + glasses
	fill(0, 0, 0);
	ellipse(170, 260, 20, 20);
	fill(231, 175, 132);
	ellipse(170, 260, 15, 15);
	fill(0, 0, 0);
	ellipse(210, 260, 20, 20);
	fill(231, 175, 132);
	ellipse(210, 260, 15, 15);
	fill(0, 0, 0);
	rect(180, 258, 20, 3);
	stroke(0);
	strokeWeight(2);
	noFill();
	arc(170, 260, 8, 8, PI, 0);
	stroke(0);
	strokeWeight(2);
	arc(210, 260, 8, 8, PI, 0);

	//mouth
	noStroke();
	fill(193, 52, 27);
	arc(190, 290, 15, 15, 2*PI, (3/4)*PI, OPEN);

	//hair
	fill(0, 0, 0);
	arc(200, 220, 80, 40, PI, 0, CHORD);
	fill(0, 0, 0);
	ellipse(235, 235, 20, 40);
	fill(0, 0, 0);
	ellipse(238, 245, 20, 40);
	fill(0, 0, 0);
	ellipse(240, 245, 20, 40);
	fill(0, 0, 0);
	ellipse(242, 255, 20, 40);

}

This experience was very eye opening for me. I have never written any code before and it was very evident that I had no idea what I was doing. However, after playing around with it and reading a lot on the p5.js I’ve managed to conjure up something that slightly resembles me. I even challenged myself to add in “if” commands with the background changing colors when the mouse is pressed down.

Curran Zhang-Project-01-Face

sketch

/*Curran Zhang
Section A
curranz@andrew.cmu.edu
project_01*/

function draw() {
	createCanvas(600,600)
	background('royalblue')
	
//Moon
	fill('gold');
	strokeWeight(0);
	ellipse(100,random(50,55),140,140);
	fill('royalblue');
	strokeWeight(0);
	ellipse(150,50,100,100);
//Face
	fill('NavajoWhite');
	strokeWeight(0);
	rect(150,100,300,390,100,100,125,125);
	fill('black');
	strokeWeight(0);
	rect(150,100,300,200,100,100,0,0);
	fill('NavajoWhite');
	strokeWeight(0);
	triangle(150,300,175,270,200,300);
	noStroke();
	fill('NavajoWhite');
	strokeWeight(0);
	triangle(200,300,225,270,250,300);
	fill('NavajoWhite');
	strokeWeight(0);
	triangle(250,300,275,270,300,300);
	fill('NavajoWhite');
	strokeWeight(0);
	triangle(300,300,325,270,350,300);
	fill('NavajoWhite');
	strokeWeight(0);
	triangle(350,300,375,270,400,300);
	fill('NavajoWhite');
	strokeWeight(0);
	triangle(400,300,425,270,450,300);
	fill('NavajoWhite');
	arc(150,315,55,75,HALF_PI,PI+HALF_PI);
	fill('SandyBrown');
	arc(150,315,27,37,HALF_PI,PI+HALF_PI);
	fill('NavajoWhite');
	arc(450,315,55,75,PI+HALF_PI,HALF_PI);
	fill('SandyBrown');
	arc(450,315,27,37,PI+HALF_PI,HALF_PI);
	fill('PaleVioletRed');
	strokeWeight(0);
	arc(300,430,90,45,0,PI);
// EYES
	fill('black');
	strokeWeight(0);
	ellipse(random(369,371),350,55,55);
	fill('gray');
	strokeWeight(0);
	ellipse(random(369,371),350,50,50);
	fill('black');
	ellipse(random(355,359),350,10,10);
	fill('black');
	ellipse(random(381,385),350,10,10);
	fill('black');
	ellipse(random(368,372),337,10,10);
	fill('black');
	ellipse(random(368,372),363,10,10);
	fill('black');
	ellipse(random(231,233),350,55,55);
	fill('gray');
	ellipse(random(231,233),350,50,50);
	fill('black');
	ellipse(random(215,219),350,10,10);
	fill('black');
	ellipse(random(241,245),350,10,10);
	fill('black');
	ellipse(random(228,232),337,10,10);
	fill('black');
	ellipse(random(228,232),363,10,10);
//Glasses
	strokeWeight(4);
	stroke(51);
	noFill();
	rect(330, 317, 80, 65,10);
	strokeWeight(4);
	stroke(51);
	noFill();
	rect(192, 317, 80, 65,10);
	line(272,330,330,330)
	stroke(4)
//Cup One
	fill('white');
	strokeWeight(1);
	rect(50,525,50,15);
	fill('white');
	strokeWeight(1);
	quad(55,540,95,540,90,600,60,600);
	fill('white');
	strokeWeight(1);
	quad(55,525,95,525,90,520,60,520);
//Cup Two
	fill('white');
	strokeWeight(1);
	rect(275,525,50,15);
	fill('white');
	strokeWeight(1);
	quad(280,540,320,540,315,600,285,600);
	fill('white');
	strokeWeight(1);
	quad(280,525,320,525,315,520,285,520);
//Cup Three
	fill('white');
	strokeWeight(1);
	rect(500,525,50,15);
	fill('white');
	strokeWeight(1);
	quad(505,540,545,540,540,600,510,600);
	fill('white');
	strokeWeight(1);
	quad(505,525,545,525,540,520,510,520);
//Steam One
	noFill();
	stroke('SaddleBrown');
	strokeWeight(2)
	bezier(75, 370, 55, 400, 90, 470, 75, 510);
	noFill();
	stroke('Sienna');
	strokeWeight(2)
	bezier(65, 370, 45, 400, 80, 470, 65, 510);
	noFill();
	stroke('Sienna');
	strokeWeight(2)
	bezier(85, 370, 65, 400, 100, 470, 85, 510);
//Steam Two
	noFill();
	stroke('SaddleBrown');
	strokeWeight(2)
	bezier(300, 370, 280, 400, 315, 470, 300, 510);
	noFill();
	stroke('Sienna');
	strokeWeight(2);
	bezier(290, 370, 270, 400, 305, 470, 290, 510);
	noFill();
	stroke('Sienna');
	strokeWeight(2);
	bezier(310, 370, 290, 400, 325, 470, 310, 510);
//Steam Three
	noFill();
	stroke('SaddleBrown');
	strokeWeight(2)
	bezier(525, 370, 505, 400, 540, 470, 525, 510);
	noFill();
	stroke('Sienna');
	strokeWeight(2)
	bezier(515, 370, 495, 400, 530, 470, 515, 510);
	noFill();
	stroke('Sienna');
	strokeWeight(2)
	bezier(535, 370, 515, 400, 550, 470, 535, 510);
//Text
	fill('black');
	textSize(32);
	noStroke(0);
	text('Can I Sleep Now???',random(248,258),50);
	}

This project started out with basic geometries of rectangles and ellipse. After incorporating different types of geometries, I decided to try adding some motions within geometry. Thus, I created some geometry that had varying x or y coordinates.