Category: Assignment-03-Face

P5.JS Face

My sketch converts an image to ellipses, but purposefully reads the pixels of the jpeg file incorrectly. It’s kind of hard to see the face, but it’s in there somewhere.

Face

function setup() {
  createCanvas(480, 480);
  loadImage('http://i.imgur.com/3nPAzRl.jpg', spooky);
}

function spooky(img) {
  img.loadPixels();
  noStroke();
  
  for(var p = 0; p < 480*620; p+=70) {
    fill(
      img.pixels[p*3],
      img.pixels[p*4+1],
      img.pixels[p*1+4]
    );
    ellipse(p%480,
         p/480*1.3, 
         img.pixels[p*3]*1,
         50);
  }
}

Assignment 3 : Behind My Face

So I decided to create a sort of generative machine which would churn out random shapes that I could then find my own face in. I wanted to do this in 3D, since one has many more degrees of freedom when creating complex shapes within 3 dimensional space. I brought in a Viewer class that I had created for previous projects which allows me to move around a 3D environment using WASD and the mouse:

viewer class

I then created a Blob class which would construct itself out of a user defined number of triangular polygons:

blob class

Next, I inserted one such Blob into a P3D rendered Processing environment, with a camera controlled using a Viewer class (also way too many libraries imported):

main window

When I ran it, instead of blobby masses of triangles which I expected, I instead got shapes very similar looking to neurons:

mi face 1

mi face 2

Since, using a more inclusive definition of ‘face’ which I myself have created right now in this very moment, the face includes what is behind the face, this still qualifies as a face, and a self portrait as well.

 

Hizal’s Wii Mii Face

Screen Shot 2014-09-10 at 4.36.50 PM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
void setup() {
  size(300, 400);
}
 
void draw() {
  background(#ffffff);
  //SKIN
  fill(#fdeee2);
  noStroke();
  ellipse(150, 175, width, 350);
  //EYES
  strokeWeight(2);
  stroke(#fdddc3);
  fill(#ffffff);
  ellipse(90, 130, 70, 30);
  ellipse(200, 130, 70, 30);
  //eyeballs
  noStroke();
  fill(#5ebacf);
  ellipse(92, 130, 30, 30);
  ellipse(198, 130, 30, 30);
  //mouth
  fill(#5c5639);
  ellipse(150, 265, 125, 7);
  //nose
  fill(#fdddc3);
  quad(137, 150, 158, 150, 180, 230, 115, 230);
  //hair
  fill(#cfb774);
  beginShape();
  vertex(100, 0);
  vertex(200, 0);
  vertex(280, 60);
  vertex(310, 120);
  vertex(300, 180);
  vertex(270, 100);
  vertex(200, 40);
  vertex(100, 40);
  vertex(30, 100);
  vertex(0, 180);
  vertex(-10, 120);
  vertex(20, 60);
  endShape(CLOSE);
  //body
  fill(#395082);
  quad(100, 340, 200, 340, 250, 400, 60, 400);
}

Assignment-03-My Face

I wanted to create a scaling portrait which had a bunch of bold lines and randomly filled colors into the image to contrast a gray background, and so I did.

Snap 2014-09-10 at 15.58.55

Snap 2014-09-10 at 15.59.19

Snap 2014-09-10 at 15.59.40

The pink one is my favorite.

Here is my code:

Sel_port_code

Alex Face

AlexFace

function setup() {
  createCanvas(400,400)
  background(0)
}

function draw() {
  fill(250,220,200)
  ellipse(20,40,70,70)
  ellipse(40,80,70,70)
  ellipse(60,120,70,70)
  ellipse(100,140,70,70)
  ellipse(250,20,70,70)
  ellipse(350,85,70,70)
  ellipse(400,0,70,70)
  ellipse(270,140,70,70)
  ellipse(320,270,70,70)
  ellipse(10,380,70,70)
  
  fill(255)
  noStroke()
  ellipse(110,130,20,20)
  ellipse(280,130,20,20)
  ellipse(30,30,20,20)
  ellipse(50,70,20,20)
  ellipse(70,105,20,20)
  ellipse(260,10,20,20)
  ellipse(360,75,20,20)
  ellipse(410,0,20,20)
  ellipse(330,260,20,20)
  ellipse(20,370,20,20)
  
  stroke(200)
  strokeWeight(5)
  line(105,150,140,180)
  
  noStroke()
  beginShape();
    vertex(200,160)
    vertex(250,270)
    vertex(225,300)
    vertex(175,300)
    vertex(150,270)
  endShape(CLOSE)
  
   beginShape()
    vertex(330,340)
    vertex(400,360)
    vertex(400,400)
    vertex(360,400)
  endShape(CLOSE)
  
  fill(230,200,240)
  beginShape()
    vertex(200,160)
    vertex(225,270)
    vertex(175,270)
  endShape(CLOSE)
  
  beginShape()
    vertex(225,270)
    vertex(250,270)
    vertex(225,300)
  endShape(CLOSE)
  
   beginShape()
    vertex(175,270)
    vertex(175,300)
    vertex(150,270)
  endShape(CLOSE)
  
  beginShape()
    vertex(330,340)
    vertex(400,375)
    vertex(400,400)
    vertex(375,400)
  endShape(CLOSE)
  
  strokeWeight(30)
  stroke(150,0,0)
  line(120,380,300,320)
  
  strokeWeight(15)
  line(122,390,310,360)
  line(100,320,300,322)
  
  strokeWeight(5)
  line
  }

Face Drawing

GDBFace

function setup() {
  var w = 600; //originally 600
  var h = 700; //originally 700
  var a = 490; //originally 490
  var b = 240; //originally 240
  var c = 500; //originally 500
  var d = 370; //originally 370
  
  createCanvas(w, h);
  background(30,30,30);  
  
  stroke(250,0,0); //chin
  beginShape(POINTS)
  vertex(a,b);
  vertex(c,d); 
  vertex(a,c); 
  vertex(w-(2*(w-a)), h-(a/5));
  endShape();
  
  beginShape(POINTS) //mouth
  vertex(d,c);
  vertex(d-(b/10),c-(c-a)/2);
  vertex(d-2*(b/10),c);
  vertex(d-3*(b/10),c-(c-a)/2);
  vertex(d-4*(b/10),c);
  endShape();

  beginShape(POINTS) //right eyebrow
  vertex(345,295)
  vertex(350,300);
  vertex(430,290);
  vertex(460,300); 
  endShape();
  
  line(190,295, 290,300); //left eyebrow
  
  beginShape(POINTS) //right eyebrow
  vertex(305,448)
  vertex(320,450);
  vertex(335,448);
  endShape();
  
  stroke(250,250,250);
  
  beginShape(POINTS) //right eye
  //vertex(400,370)
  //vertex(355,340);  
  //vertex(360,340);
  //vertex(395,355);
  vertex(360,340);
  vertex(395,343);
  vertex(415,340); 
  endShape();
  line(390,315, 392,317)
  
  beginShape(POINTS) //left eye

  vertex(205,340);
  vertex(240,343);
  vertex(285,340); 
  endShape(); 
  line(250,315, 252,317);
  
  line(310,530, 330, 530);
}

function draw() {
  
}

It’s Matt

selfPortrait-mbk

function setup() {
  // put setup code here
  createCanvas(400,600);
}

function draw() {
  // put drawing code here
  background(140, 20, 20);
  var skinColor  = color(206, 179, 113);
  var skinShadowColor = color(147, 109, 72);
  fill(skinColor);
  stroke(skinShadowColor);
  strokeWeight(4);
  ellipse(196,267, 253, 298);
  
  noFill();
  beginShape();
  curveVertex(284,227);
  curveVertex(207,258);
  curveVertex(215,322);
  curveVertex(188,325);
  curveVertex(272,309);
  endShape(OPEN);
  
  drawEye(1, 226, 274);
  drawEye(-1, 179, 274);
  
  var hairColor = color(104, 70, 32);
  var hairOutline = color(57, 38, 17);
  stroke(hairOutline);
  fill(hairColor);
  beginShape();
  vertex(64,250);
  vertex(85,153);
  vertex(110,123);
  vertex(193,105);
  vertex(289,125);
  vertex(310,153);
  vertex(331,251);
  vertex(306,265);
  vertex(269,177);
  vertex(256,183);
  vertex(226,181);
  vertex(200,200);
  vertex(171,186);
  vertex(132,186);
  vertex(88,249);
  endShape(CLOSE);
  
  stroke(158,117,74);
  strokeWeight(3);
  line(191,357,230,348);
}

function drawEye(d, eyeX, eyeY)
{
  strokeWeight(8);
  stroke(104, 70, 32);
  noFill();
  beginShape();
  vertex(eyeX+d*-3, eyeY-25);
  vertex(eyeX+d*36,eyeY-34);
  vertex(eyeX+d*57,eyeY-30);
  endShape(OPEN);
  
  fill(229,226,245);
  stroke(109,90,66);
  strokeWeight(2);
  beginShape();
  vertex(eyeX + d*0,eyeY + 0);
  vertex(eyeX + d*16,eyeY + -10);
  vertex(eyeX + d*33,eyeY + -10);
  vertex(eyeX + d*46,eyeY + -5);
  vertex(eyeX + d*32,eyeY + 5);
  vertex(eyeX + d*20,eyeY + 6);
  endShape(CLOSE);
  
  fill(74,74,198);
  noStroke();
  ellipse(eyeX+(23*d), eyeY + -1, 14, 13);
  fill(0,0,0);
  ellipse(eyeX+(23*d), eyeY + -1, 4, 4);
}

Face

Made in processing, so screenshot:

self portrait

and the code:

 

 

size(500,700);
 
background(255,89,143);
noStroke();
 
fill(6,106,160);
ellipse(250,280, 372,400);
beginShape();
  vertex(72,228);
  vertex(37,312);
  vertex(107,285);
endShape(CLOSE);
beginShape();
  vertex(76,229);
  vertex(40,470);
  vertex(101,430);
  vertex(75,480);
  vertex(190,440);
endShape(CLOSE);
beginShape();
  vertex(314,430);
  vertex(394,488);
  vertex(380,426);
  vertex(464,479);
  vertex(437,277);
endShape(CLOSE);
 
fill(241,201,173);
rect(215,425, 75,130);
 
fill(244,220,189);
ellipse(250,300, 300,340);
 
 
stroke(0);
strokeWeight(8);
line(118,307, 149,320);
line(369,307, 344,320); 
 
stroke(4,73,111);
noFill();
curve(163,316, 166,235, 225,214, 220,289);
curve(282,289, 287,214, 346,235, 343,316);
 
stroke(245,154,141);
curve(250,270, 204,406, 286,406, 250,270);
 
stroke(255);
strokeWeight(5);
fill(0,162,232);
ellipse(180,320, 60,110);
ellipse(310,320, 60, 110);
 
noStroke();
fill(255);
ellipse(164,340, 20,40);
ellipse(295,340, 20,40);
 
fill(6,106,160);
beginShape();
  vertex(77,325);
  vertex(134,390);
  vertex(102,260);
  vertex(145,264);
  vertex(170,216);
  vertex(175,260);
  vertex(261,259);
  vertex(319,178);
  vertex(354,286);
  vertex(347,368);
  vertex(414,284);
  vertex(392,163);
  vertex(326,103);
  vertex(224,80);
  vertex(177,95);
  vertex(91,191);
endShape(CLOSE);
 
fill(255,201,14);
curve(87,900, 126,566, 370,566, 407,900);
beginShape();
  vertex(126,566);
  vertex(370,566);
  vertex(412,700);
  vertex(91,700);
endShape(CLOSE);