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!