Self Portrait in p5.js!

Computational Media

To start off, I’ll say I’m pretty proud of myself to pull off a sketch like this after just learning p5.js. Its not really accurate (I could work on that) but at least its not ugly.

I decided on this photo of my face as a guide:

“Cheese! ..not”

As an attempt to extract coordinates, I imported the image onto Photoshop and marked the points, lines, ellipses and arcs (symbolised by T formations since all I needed were the centre, height and width)

Boo

I used the rulers on Photoshop and my cursor

To map coordinates on a drawing. Wonder why the result still wasn’t very ~accurate~

 

 

 

 

 

 

 

I picked colours on Photoshop as well, and noted their RGB

For more colours later, I just found the best Google extension ever

After this I started coding, and many coordinate errors (I was sleepy) and frustrations later (see Exhibit A), after almost reaching the end point, I reached a Eureka moment and coded the following line:

print(“X=”,mouseX,” Y=”,mouseY);  //you idiot

And suddenly the task became a lot easier.

Exhibit A

My Code:

https://gist.github.com/amena91/4bc1786f9b0bddee46ea47e5345f4337

function setup() {
createCanvas(800, 690);
}

function draw() {
background(0); //change to black

//HELP W/ COORDINATES, shouldv’e done this way sooner!
print(“X=”,mouseX,” Y=”,mouseY);

//DANCING STARS
fill(255);
noStroke();
ellipse(random()*800,random()*800,3,3);
ellipse(random()*800,random()*800,5,5);
ellipse(random()*800,random()*800,1,1);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,5,5);
ellipse(random()*800,random()*800,3,3);
ellipse(random()*800,random()*800,10,10);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,7,7);
ellipse(random()*800,random()*800,6,6);
ellipse(random()*800,random()*800,3,3);
ellipse(random()*800,random()*800,1.5,1.5);
ellipse(random()*800,random()*800,8,8);
ellipse(random()*800,random()*800,13,13);
ellipse(random()*800,random()*800,10,10);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,12,12);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,2,2);
ellipse(random()*800,random()*800,5,5);
ellipse(random()*800,random()*800,5,5);

//Hair Head and Back Hair
fill(58, 31, 1);
arc(380,200,400,270,PI,0);
beginShape();
vertex(181,194);
vertex(163,463);
vertex(135,646);
vertex(130,666);
vertex(669,682);
vertex(613,424);
vertex(580,193);
endShape(CLOSE);

//Neck
fill(197,139,117);
beginShape();
vertex(298,540);
vertex(303,571);
vertex(260,310);
vertex(303,609);
vertex(284,671);
vertex(486,689);
vertex(472,660);
vertex(455,624);
vertex(455,589);
vertex(467,540);
endShape(CLOSE);

//Face Shape
fill(238,187,166);
arc(385,330,300,340,PI,0);
quad(237,390,259,478,495,487,528,382);
arc(380,480,215,203, 0,PI);
quad(534,330, 532,432, 239,432, 238,315);
beginShape(); //just smoothing edges
vertex(256,468);
vertex(296,538);
vertex(323,472);
endShape(CLOSE);
beginShape();
vertex(476,521);
vertex(497,479);
vertex(445,478);
endShape(CLOSE);

//Eyes
fill(255);
ellipse(305,348,54,31);
ellipse(449,348,54,31);
fill(0);
ellipse(305,348,30,30);
ellipse(449,348,30,30);
noFill();
strokeWeight(7); //damn you, my love for eyeliner!
stroke(0);
arc(305,348,54,34,PI,0);
arc(449,348,54,34,PI,0);
fill(0);
triangle(275,350,276,345,265,345); //and it has to be winged too..
triangle(480,350,489,345,481,345);
strokeWeight(1);
stroke(0);

//Eyebrows
noStroke();
fill(58, 31, 1);
beginShape();
vertex(395,312);
vertex(462,292);
vertex(502,310);
vertex(510,325);
vertex(502,318);
vertex(472,310);
vertex(400,330);
endShape(CLOSE);
beginShape();
vertex(350,310);
vertex(349,322);
vertex(260,310);
vertex(240,315);
vertex(250,310);
vertex(280,295);
endShape(CLOSE);

//Lips
fill(205,120,115);
arc(375,500,87,36 ,0,PI);
fill(169,92,84);
beginShape();
vertex(335,500);
vertex(360,490);
vertex(375,495);
vertex(390,490);
vertex(425,505);
endShape(CLOSE);

//Nose
noFill();
strokeWeight(1);
stroke(0);
arc(380,440,40,15,0,PI);
fill(0);
ellipse(360,444,3,3);
ellipse(400,444,3,3);
noFill();
arc(360,441,14,15,PI/2,3*PI/2);
arc(400,441,14,15,3*PI/2,PI/2);

//Front Hair
fill(79, 48, 12);
beginShape();
vertex(397,156);
vertex(357,160);
vertex(310,179);
vertex(271,213);
vertex(245,249);
vertex(211,326);
vertex(199,348);
vertex(260,671);
vertex(177,670);
vertex(187,283);
vertex(215,209);
vertex(260,154);
vertex(340,120);
vertex(397,133);
endShape(CLOSE);

//Glasses
noFill();
strokeWeight(3);
stroke(0);
arc(375,325,324,10,PI,0);
//line(205,318,534,318);
arc(375,360,40,8,PI,0);
line(355,362,318,321);
line(397,359,435,321);
line(213,325,232,381);
line(357,361,351,381);
line(397,361,401,381);
line(539,325,529,381);
arc(291.5,381,120,100,0,PI);
arc(465,381,125,100,0,PI);
line(233,380,200,346);
line(200,346,316,322);
line(437,320,548,340);
line(548,340,529,381);

//Earrings
noStroke();
fill(100);
ellipse(235,435,26,30);
ellipse(532,420,26,30);

//Choker
noFill();
strokeWeight(30);
stroke(0);
arc(376,618,155,20,0,PI);

}

Check it out:

And Voila!

Leave a Reply

Your email address will not be published. Required fields are marked *