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.
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.
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:
I then created a Blob class which would construct itself out of a user defined number of triangular polygons:
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):
When I ran it, instead of blobby masses of triangles which I expected, I instead got shapes very similar looking to neurons:
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.
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);
}
Made in processing, so screenshot:
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);