Category: Section A

Project 01-Face

sketch

function setup() {
    createCanvas(600, 600);
    background(114,160,193);
}

function draw() {
	//arm1
	noStroke();
	fill(255,165,0);
	rect(width/2+5,height/2+75,70,100,25,40,5,5);
	fill(247,204,160);
	rect(width/2+35,height/2+175,30,200);
	//body
	noStroke();
	fill(255,165,0);
	ellipse(width/2-30,height,195,550);
	rect(width/2,height/2,60,500);
	//head
	noStroke();
	fill(247,204,160);
	arc(width/2,height/2,215,225,0,PI);
	//filler
	fill(114,160,193);
	noStroke();
	rect(width*5/8-5,height/2,75,90);
	//face filler
	fill(247,204,160);
	arc(width/2+5,height/2+12,200,200,0,270);
	//hair
	fill(150,86,3);
	noStroke();
	arc(width/4+65,height/2-20,50,200,0,PI,CHORD);
	//ear
	fill(247,204,160);
	ellipse(width/4+70,height/2+20,30,40);
	//hair
	fill(150,86,3);
	arc(width/4+85,height/2-20,30,140,0,PI,CHORD);
	arc(width/4+105,height/2-20,20,100,0,PI,CHORD);
	//eyes
	fill(255,255,255);
	stroke(0,0,0);
	strokeWeight(1);
	ellipse(width/2,height/2+25,8,8);
	ellipse(width/2+45,height/2+25,8,8);
	//arm2
	noStroke();
	fill(255,165,0);
	rect(width/4+50,height/2+80,65,110,70,70,5,5);
	fill(247,204,160);
	rect(width/4+70,height/2+190,35,200);
	//mouth
	noFill();
	stroke(0,0,0);
	strokeWeight(2);
	curve(width/2+5,height/2+60,width/2+10,height/2+40,width/2+40,height/2+40,width/2+50,height/2+50)
	//eyebrows
	noFill();
	stroke(0,0,0);
	strokeWeight(4);
	line(width/2+41,height/2+8,width/2+51,height/2+8);
	line(width/2-5,height/2+8,width/2+5,height/2+8);
	//#nocap
	noStroke();
	fill(43,43,43);
	arc(width/2-5,height/2-20,220,200,PI,TWO_PI);
	fill(35,35,35);
	rect(width/2-120,height/2-40,230,30,5,5,5,5);

}

For my first project, I wanted to create as accurate of a drawing of myself, at least with what I knew about javascript. I often find myself not having a very bright expression, but I’ve come to accept that this is who I am. I am this.

Katherine Hua – Project01- Face

khua-project01

function setup() {
    createCanvas(600,600);
    background(237, 176, 176);
}

function draw() {
    noStroke();
    //background
    fill(209, 52, 126);
    rect(25, 25, 550, 550);
    fill(246, 192, 66);
    rect(50, 50, 500, 500);
    fill(237, 176, 176);
    rect(75, 75, 450, 450);
    fill(209, 52, 126);
    rect(100, 100, 400, 400);
    //hair
    fill(30, 22, 18);
    ellipse(300,250, 450, 450);
    rect(75, 250, 450, 500);
    //body
    fill(247, 197, 82);
    ellipse(325, 700, 375, 500);
    //face shape
    fill(251, 227, 167);
    quad(150, 300, 400, 150, 500, 250, 250, 400);
    arc(325, 300, 350, 400, 0, PI, CHORD);
    rect(400, 250, 100, 50);
    //hairline
    ellipse(337.5, 200, 170, 150);
    quad(260, 170, 150, 300, 250, 350, 300, 300);
    ellipse(405, 200, 100, 100);
    quad(450, 180, 500, 250, 450, 300, 400, 290);
    //eyes
    //undereye
    fill(236, 198, 179);
    ellipse(260, 310, 40, 50);
    ellipse(420, 310, 40, 50);
    fill(251, 227, 167);
    ellipse(265, 305, 50, 50);
    ellipse(425, 305, 50, 50);
    //white part
    fill(255, 255, 255);
    ellipse(265, 300, 40, 50);
    ellipse(425, 300, 40, 50);
    //pupil
    fill(40, 24, 23);
    ellipse(270, 295, 25, 35);
    ellipse(430, 295, 25, 35);
    fill(255, 255, 255)
    ellipse(260, 300, 10, 10);
    ellipse(420, 300, 10, 10);
    //eyelash
    fill(40, 24, 23);
    ellipse(285, 275, 15, 15);
    ellipse(445, 275, 15, 15);
    fill(251, 227, 167);
    ellipse(282, 270, 18, 15);
    ellipse(442, 270, 18, 15);
    fill(40, 24, 23);
    ellipse(265, 280, 50, 10);
    ellipse(425, 280, 50, 10);
    //eyebrows
    ellipse(265, 250, 50, 10);
    ellipse(425, 250, 50, 10);
    //mouth
    fill(240, 178, 151);
    ellipse(325, 415, 80, 80);
    fill(251, 227, 167);
    ellipse(330, 380, 80, 50);
    //nose
    fill(240, 178, 151);
    ellipse(365, 360, 30, 40);
    fill(251, 227, 167);
    ellipse(361, 363, 27, 32);
}

Doing this project made me look at my face in terms of the shapes that make it up. I first sketched out my self character on paper, and then looked for what shapes could create this drawing.

Ean Grady-Looking Outwards-01

https://www.wired.com/2014/07/a-clever-device-that-turns-polluted-air-into-art/

This is a slightly older project I remember reading about a couple of years ago. Dmitry Morozov lives in Moscow and uses air pollution to make glitch art. Morozov created a small portable blue-tooth device, with an attached fake nose, that ‘sniffs’ out air pollution and transforms air data from vehicular gasses into the various shapes and colour that make up his glitch art. In creating the technology, Morozov used various sensors that detected certain gaseous elements in the environment and unified them with a ‘nose’, so to my knowledge, the artist used “off-the-shelf” commercial software. Each image that is produced from the device can be essentially viewed as an artistic grading system for air quality. It would be interesting to see how the artwork produced today using the device would compare to that of 10 years or so in the future.

I found this piece of technological art particularly inspiring because it shows that there is no end to the possibilities that come through the arrangement of art and computational technology. If someone can transform air pollution into visually appealing art using technology, I wonder what other ‘regular’ things that exist out in the world can be used to make art.

The video below shows Morozov’s device in-action.

Ean Grady-Project-01-Face

sketch

function setup() {
    createCanvas(500, 500)
    background(0, 0, 0)
    noStroke ();

    //background
    fill (120, 200, 400)
    rect(25, 25, 450, 450)
    fill (100, 100, 200)
    rect(50, 50, 400, 400)
    fill (120, 120, 200)
    rect (75, 75, 350, 350)
    fill (10, 200, 140)
    rect (100, 100, 300, 300)
    fill (20, 120, 240)
    rect (125, 125, 250, 250)

    //hair pt.1
    fill (0, 0, 0)
    ellipse (250, 170, 200, 200)

    //legs
    fill (80, 10, 100)
    ellipse (180, 400, 100, 250)
    ellipse (320, 400, 100, 250)

    //body
    fill (100, 10, 100)
    ellipse (250, 300, 250, 250)
    fill (150, 20, 50)
    ellipse (250, 300, 200, 200)
    fill (50, 50, 100)
    ellipse (250, 300, 150, 150)
    fill (0, 0, 0)
    ellipse (250, 300, 100, 100)

    //head
    fill (255, 228, 196)
    ellipse(250, 200, 200, 200)

    //eyes
    fill (255, 255, 255)
    ellipse (200, 200, 60, 50)
    ellipse (300, 200, 60, 50)
    fill (250, 128, 114)
    ellipse (200, 200, 40, 40)
    ellipse (300, 200, 40, 40)
    fill (0, 0, 0)
    ellipse (300, 200, 25, 25)
    ellipse (200, 200, 25, 25)

    //hair
    arc(260, 100, 50, 60, 0, HALF_PI);
    arc(240, 100, 50, 60, 0, HALF_PI);
    arc(220, 100, 50, 60, 0, HALF_PI);
    arc(200, 100, 50, 60, 0, HALF_PI);
    arc(180, 100, 50, 60, 0, HALF_PI);

    //mouth
    fill (250, 128, 114)
    ellipse (200, 280, 80, 60)
    fill (0, 0, 0)
    ellipse (200, 280, 70, 40)

    //nose
    fill (222, 184, 135)
    triangle (220, 250, 240, 210, 340, 260)

    //eyebrows
    fill (0, 0, 0)
    rect (175, 150, 50, 20)
    rect (275, 150, 50, 20)
}

function draw() {
}

For this project, my main goal was to make a visually ‘popping’ piece by experimenting with colour and shape placement. I really enjoyed coding the piece because it was both an interesting creative exercise and very beneficial in helping me become more comfortable with p5.js.

Looking Outwards-01

Playful Geometries showcases music and art in an immersive environment.

Playful Geometries is an interactive animated 3D scene projected onto a white table. The constantly changing scenery created through fun geometric shapes and configurations is synced up with the music that is played in the room in which the installment is located. The user interacts with the art in the room by playing with the music, creating different images as they do so. On the walls of the room are images that simultaneously show the inside of the cube that is shown on the white table. In this way, the exhibit is entirely immersive and draws the user into changing the scenery through their own fingers.

The designers of the exhibit were aiming to have fun with the project as well as with the result, but also to push the boundaries of the cheap computers that they were using to create this project. Their goal was to ultimately create something with many cheap computers that would go beyond the scope of something an expensive computer would be able to create.

 

Original Source:https://devart.withgoogle.com/#/project/17120531

Anthony Ra – Project01 – Face

sketch

/* Anthony Ra
Section A
ahra@andrew.cmu.edu
project_01 */


var r, g, b;

function setup() {
    createCanvas(600, 600);
    background(0);
    r = random(255);
    g = random(255);
    b = random(255);


}


function draw() {

  fill(r, g, b, 127);
  ellipse(310, 270, 195, 195);

/* glasses */
  stroke(250);
  strokeWeight(23);
  ellipse(310, 270, 195, 195);
  ellipse(591, 270, 195, 195);
;
/* right line of face */
  stroke(250);
  strokeWeight(10);
  point(210, 271);
  point(206, 323);
  point(213, 399);
  point(228, 475);
  point(260, 550);
  point(295, 600);

  noFill();
  beginShape();
  curveVertex(210, 271);
  curveVertex(210, 271);
  curveVertex(206, 323);
  curveVertex(213, 399);
  curveVertex(228, 475);
  curveVertex(260, 550);
  curveVertex(295, 600);
  curveVertex(295, 600);
  endShape();

/* right ear */
  stroke(250);
  strokeWeight(10);
  point(210, 271);
  point(188, 275);
  point(178, 288);
  point(177, 307);
  point(181, 330);
  point(187, 357);
  point(199, 386);
  point(201, 393);
  point(195, 405);

  noFill();
  beginShape();
  curveVertex(210, 271);
  curveVertex(210, 271);
  curveVertex(188, 275);
  curveVertex(178, 288);
  curveVertex(177, 307);
  curveVertex(181, 330);
  curveVertex(187, 357);
  curveVertex(199, 386);
  curveVertex(201, 393);
  curveVertex(195, 405);
  curveVertex(195, 406);
  endShape();

/* right eyebrow */
  stroke(250);
  strokeWeight(15);
  point(277, 239);
  point(320, 229);
  point(360, 229);
  point(379, 237);
  point(387, 246);

  noFill();
  beginShape();
  curveVertex(277, 239);
  curveVertex(277, 239);
  curveVertex(320, 229);
  curveVertex(360, 229);
  curveVertex(379, 237);
  curveVertex(387, 246);
  curveVertex(387, 246);
  endShape();

/* left eyebrow */
  stroke(250);
  strokeWeight(15);
  point(520, 246);
  point(530, 235);
  point(545, 230);
  point(581, 229);
  point(600, 232);

  noFill();
  beginShape();
  curveVertex(520, 246);
  curveVertex(520, 246);
  curveVertex(530, 235);
  curveVertex(545, 230);
  curveVertex(581, 229);
  curveVertex(600, 232);
  curveVertex(600, 232);
  endShape();

/* right nose */
  stroke(250);
  strokeWeight(10);
  point(373, 399);
  point(367, 384);
  point(370, 370);
  point(373, 355);

  noFill();
  beginShape();
  curveVertex(373, 399);
  curveVertex(373, 399);
  curveVertex(367, 384);
  curveVertex(370, 370);
  curveVertex(373, 355);
  curveVertex(373, 355);
  endShape();

/* left nose */
  stroke(250);
  strokeWeight(10);
  point(519, 413);
  point(531, 402);
  point(534, 391);
  point(532, 374);
  point(527, 361);
  point(516, 346);
  point(507, 324);

  noFill();
  beginShape();
  curveVertex(519, 413);
  curveVertex(519, 413);
  curveVertex(531, 402);
  curveVertex(534, 391);
  curveVertex(532, 374);
  curveVertex(527, 361);
  curveVertex(516, 346);
  curveVertex(507, 324);
  curveVertex(507, 324);
  endShape();

/* under nose */
  stroke(250);
  strokeWeight(10);
  point(425, 386);
  point(434, 391);
  point(440, 399);
  point(444, 404);
  point(457, 405);
  point(465, 398);
  point(475, 390);

  noFill();
  beginShape();
  curveVertex(425, 386);
  curveVertex(425, 386);
  curveVertex(434, 391);
  curveVertex(440, 399);
  curveVertex(444, 404);
  curveVertex(457, 405);
  curveVertex(465, 398);
  curveVertex(475, 390);
  curveVertex(475, 390);
  endShape();

/* mouth side */
  stroke(250);
  strokeWeight(12);
  point(330, 471);
  point(323, 485);
  point(322, 497);
  point(325, 509);

  noFill();
  beginShape();
  curveVertex(330, 471);
  curveVertex(330, 471);
  curveVertex(323, 485);
  curveVertex(322, 497);
  curveVertex(325, 509);
  curveVertex(325, 509);
  endShape();

/* mouth */
  stroke(250);
  strokeWeight(12);
  point(330, 471);
  point(391, 483);
  point(436, 488);
  point(475, 493);
  point(512, 498);

  noFill();
  beginShape();
  curveVertex(330, 471);
  curveVertex(330, 471);
  curveVertex(391, 483);
  curveVertex(436, 488);
  curveVertex(475, 493);
  curveVertex(512, 498);
  curveVertex(512, 498);
  endShape();

/* right eyebrow */
  stroke(250);
  strokeWeight(19);
  point(255, 161);
  point(292, 144);
  point(317, 139);
  point(351, 142);
  point(379, 151);

  noFill();
  beginShape();
  curveVertex(255, 161);
  curveVertex(255, 161);
  curveVertex(292, 144);
  curveVertex(317, 139);
  curveVertex(351, 142);
  curveVertex(379, 151);
  curveVertex(379, 151);
  endShape();

/* left eyebrow */
  stroke(250);
  strokeWeight(19);
  point(523, 161);
  point(556, 146);
  point(582, 143);
  point(600, 146);

  noFill();
  beginShape();
  curveVertex(523, 161);
  curveVertex(523, 161);
  curveVertex(556, 146);
  curveVertex(582, 143);
  curveVertex(600, 146);
  curveVertex(600, 146);
  endShape();

/* leftist stroke of hair */
  stroke(250);
  strokeWeight(10);
  point(257, 65);
  point(234, 89);
  point(221, 110);
  point(211 ,133);
  point(209, 151);
  point(209, 171);
  point(214, 189);

  noFill();
  beginShape();
  curveVertex(257, 65);
  curveVertex(257, 65);
  curveVertex(234, 89);
  curveVertex(221, 110);
  curveVertex(211 ,133);
  curveVertex(209, 151);
  curveVertex(209, 171);
  curveVertex(214, 189);
  curveVertex(214, 189);
  endShape();

/* second leftest strand of hair */
  stroke(250);
  strokeWeight(10);
  point(231, 65);
  point(243, 39);
  point(265, 18);
  point(289, 6);
  point(322, 0);
  point(365, 10);
  point(392, 25);
  point(412, 41);
  point(427, 61);
  point(442, 100);
  point(447, 132);
  point(447, 165);

  noFill();
  beginShape();
  curveVertex(231, 65);
  curveVertex(231, 65);
  curveVertex(243, 39);
  curveVertex(265, 18);
  curveVertex(289, 6);
  curveVertex(322, 0);
  curveVertex(365, 10);
  curveVertex(392, 25);
  curveVertex(412, 41);
  curveVertex(427, 61);
  curveVertex(442, 100);
  curveVertex(447, 132);
  curveVertex(447, 165);
  curveVertex(447, 165);
  endShape();

/* second rightest strand of hair */
  stroke(250);
  strokeWeight(10);
  point(466, 0);
  point(480, 17);
  point(491, 36);
  point(500, 58);
  point(509, 88);
  point(513, 111);
  point(514, 130);

  noFill();
  beginShape();
  curveVertex(466, 0);
  curveVertex(466, 0);
  curveVertex(480, 17);
  curveVertex(491, 36);
  curveVertex(500, 58);
  curveVertex(509, 88);
  curveVertex(513, 111);
  curveVertex(514, 130);
  curveVertex(514, 130);
  endShape();

/* rightest strand of hair */
  stroke(250);
  strokeWeight(10);
  point(573, 0);
  point(580, 14);
  point(588, 41);
  point(593, 69);
  point(592, 91);
  point(591, 112);
  point(586, 138);

  noFill();
  beginShape();
  curveVertex(573, 0);
  curveVertex(573, 0);
  curveVertex(580, 14);
  curveVertex(588, 41);
  curveVertex(593, 69);
  curveVertex(592, 91);
  curveVertex(591, 112);
  curveVertex(586, 138);
  curveVertex(586, 138);
  endShape();

/* eye */
  stroke(250);
  strokeWeight(9);
  ellipse(345, 240, 42, 24);
  ellipse(566, 243, 42, 24);

  stroke(250);
  strokeWeight(7);
  ellipse(409, 386, 30, 15);
  ellipse(493, 393, 34, 16);


  /* middle of glasses */
    stroke(250);
    strokeWeight(23);
    point(406, 239);
    point(427, 226);
    point(452, 220);
    point(474, 223);
    point(498, 236);

    noFill();
    beginShape();
    curveVertex(406, 239);
    curveVertex(406, 239);
    curveVertex(427, 226);
    curveVertex(452, 220);
    curveVertex(474, 223);
    curveVertex(498, 236);
    curveVertex(498, 236);
    endShape();

}

function mousePressed() {
  var d = dist(mouseX, mouseY, 310, 270);
  if (d < 100) {
    r = random(255);
    g = random(255);
    b = random(255);
  }
}

I have done many self-portrait oil paintings in the past couple years where minute details and influx of different shades and hues were a priority. For this assignment, I decided to take a minimalistic approach to this and include simply the lines that define my face (glasses, brows, nose, hair, etc.). This also expresses my simple nature and laid-back attitude.

The coding was largely used by plotting point coordinates and connecting those points to create a curve. Then, I implemented a mousePressed function where the lens changes color with every click in order for me to see the world differently.

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.

Audrey Zheng – Looking Outwards – 01

I am writing my looking Outwards game about Night in the Woods. This game is one of the most moving game narratives I’ve ever experienced.

Those characters are the game’s biggest strength. They’re all damaged in different ways, but in very believable, understandable ways, ways we’re all damaged. But each of these anthropomorphized animals also have more heart, depth and decency than most games boast in their entire human cast.

There are central themes to this story: mental illness, friendship, and coming of age. I found it impressive that it was created by such a small team.

Jamie Dorst Project 01 Face


/*
Jamie Dorst
Section A
jdorst@andrew.cmu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background('#ADD8E6');
}

function draw() {

	noStroke();
	translate(-10, -30);
	
// hair
	fill('#271815');
	rectMode(CENTER);
	rect(300, 320, 250, 320, 100, 100, 20, 20);
	
// face
	fill('#EAC086');
	rectMode(CENTER);
	rect(300, 310, 200, 240, 100, 100, 120, 120);

// eyes
	fill('white');
	ellipseMode(CENTER);
	ellipse(255, 290, 40, 20);
	ellipse(345, 290, 40, 20);

	fill('#49311C');
	ellipse(255, 290, 20, 20);
	ellipse(345, 290, 20, 20);

	fill('black');
	ellipse(255, 290, 12, 12);
	ellipse(345, 290, 12, 12);

// eyebrows
	fill('#2D221F');
	rect(250, 270, 50, 7);

	rect(350, 270, 50, 7)

// nose
	noFill();
	stroke(51);
	strokeWeight(2);
	arc(300, 335, 22, 20, 0, PI);

// mouth
	strokeWeight(4);
	strokeCap(ROUND);
	stroke('#C4877A');
	arc(300, 370, 50, 25, 0, PI);

// more hair
	noStroke();
	fill('#271815');

	translate(250, -120);
	rotate(PI / 4.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 180);

	translate(576, -80);
	rotate(PI / 2.0);
	ellipseMode(CENTER);
	ellipse(250, 250, 70, 160);

}

I found this project sort of difficult at first just to visualize what I was going to be doing and the order the layers needed to be in, but once I got going I got the hang of it. The most difficult part was probably rotating the ellipses for my hair, I figured out a way to do it eventually, but I’m guessing there’s a better way than what I did.

Erin Fuller – Self Portrait


//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project-01

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

function draw() {
    background(157, 196, 191);
    background(157, 196, 191);
    background(157, 196, 191);


//hair background

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(210, 180, 100, 30);    

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(340, 180, 200, 120);    

    strokeWeight(0);
    fill(214, 101, 36);
    rect(160, 180, 280, 340);   

//ears

    strokeWeight(0);
    fill(252, 206, 146);
    ellipse(175, 285, 40, 65);

    strokeWeight(0);
    fill(252, 206, 146);
    ellipse(425, 285, 40, 65);

//face

    strokeWeight(0);
    fill(255, 217, 153);
    ellipse(300, 300, 230, 290);

// hair foreground

    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(210, 180, 100, 80);    
    
    strokeWeight(0);
    fill(214, 101, 36);
    ellipse(340, 180, 200, 80);  

//eyebrows

    strokeWeight(3); 
    stroke(168, 79, 28)   
    noFill();
    line(315, 240, 344, 230);
    line(344, 230, 365, 234);

    strokeWeight(3); 
    stroke(168, 79, 28)   
    noFill();
    line(285, 240, 256, 230);
    line(256, 230, 235, 234);

 //nose

    strokeWeight(2.5); 
    stroke(214, 177, 128)   
    noFill();
    line(300, 265, 315, 310);
    line(315, 310, 305, 315);

//smile

    strokeWeight(2.5); 
    stroke(204, 61, 94)   
    noFill();
    arc(300, 366, 85, 40, 0, PI);

//left eye

    strokeWeight(0);
    fill(249, 249, 249);
    ellipse(267, 265, 35, 20);

    strokeWeight(0);
    fill(77, 124, 69);
    ellipse(267, 265, 15, 15);

//right eye

    strokeWeight(0);
    fill(249, 249, 249);
    ellipse(343, 265, 35, 20);

    strokeWeight(0);
    fill(77, 124, 69);
    ellipse(343, 265, 15, 15);

//freckles

    strokeWeight(0);
    fill(186, 115, 80);
    ellipse(350, 300, 4, 4);
    ellipse(366, 300, 4, 4);
    ellipse(342, 313, 4, 4);
    ellipse(358, 313, 4, 4);
    ellipse(374, 313, 4, 4);

    strokeWeight(0);
    fill(186, 115, 80);
    ellipse(250, 300, 4, 4);
    ellipse(266, 300, 4, 4);
    ellipse(242, 313, 4, 4);
    ellipse(258, 313, 4, 4);
    ellipse(274, 313, 4, 4);


    noLoop();
}

I was originally very nervous for this class and the idea of coding, just because it seems too structured for me. However, I had a lot of fun with the project and had a lot of satisfaction when I made each new shape and of course when I finally completed the self-portrait.