Code a portrait using JS

This is my first time coding, and I am so excited and never thought that I could draw a picture with code. I want to create a portray of my professor Dan Shiffman.

At first, I made a quick sketch use pen and marker pen.

IMG_3285

Then I took a photo and put it into Adobe Illustrator and made a lattice in order to make it easier when I need to calculate the coordinate in the later work.

QQ截图20150907134307

Firstly I created the glasses, I was trying to make a same one but I…haha! Not the same style, but it is similar, right?

QQ截图20150907154208

After creating the glasses, I got a little familiar with the code drawing, and I tried to create the whole face.

4]ZR}ZHILOS2}{@]93J68{Q

This is what I got!

Finally, I filled the glasses with some color to make it looks like a 3D glasses.

O$P$MO)8E3@4~9}J(~{LBQG

Below is my code:

function setup() {
createCanvas(1000,1000);
// background(‘white’);
background(249,217,231);
}
function draw() {
//glassfill(0,0,0);
rect(470,430,75,25);stroke(‘black’);
fill(0,0,0);
rect(300,390,200,150,15,40,100,70);
rect(530,390,200,150,40,15,70,100);
quad(720, 393, 755, 400, 755, 425, 720, 425);
rect(720,410,30,30,5,10,10,5);
quad(275, 400, 310, 390, 310, 425, 275, 425);
rect(280,410,30,30,5,10,5,10);
fill(94,196,185);
rect(315,400,170,130,15,40,80,70);
fill(241,97,33);
rect(545,400,170,130,40,15,70,80);
fill(255,255,255);//eyebrow
stroke(‘black’);
strokeWeight(30);
curve(357, 505, 357, 370, 460, 370, 460, 515);
curve(567, 445, 567, 370, 670, 370, 670, 515);

 //eyes

noFill();
stroke(0, 0, 0);
//left
strokeWeight(5);
curve(350, 655, 365, 455, 455, 455, 450, 585);
strokeWeight(2);
curve(350, 340, 375, 460, 445, 460, 450, 375);

  //eyebowl
fill(0);
ellipse(410, 465, 43, 43);
fill(255);
strokeWeight(1);
quad(415, 446, 425, 456, 425, 461, 417, 456);
//remove extra eyebowl
noFill();
stroke(94,196,185);
strokeWeight(20);
curve(350, 352, 375, 472, 445, 472, 450, 382);
//eyelid
stroke(‘black’);
strokeWeight(3);
curve(365, 565, 367, 439, 455, 455, 450, 635);
//eyecircle
strokeWeight(1);
curve(435, 430, 455, 460, 375, 490, 0, 405);
//right
stroke(‘black’);
strokeWeight(5);
curve(550, 605, 565, 455, 655, 455, 650, 625);
strokeWeight(2);
curve(550, 435, 565, 462, 645, 462, 650, 370);
//eyebowl
fill(0);
ellipse(610, 465, 43, 43);
fill(255);
strokeWeight(1);
quad(615, 446, 625, 456, 625, 456, 617, 456);
//remove extra eyebowl
noFill();
stroke(241,97,33);
strokeWeight(20);
curve(550, 352, 575, 472, 645, 472, 650, 382);
//eyelid
stroke(‘black’);
strokeWeight(3);
curve(550, 675, 565, 455, 655, 438, 650, 535);
//eyecircle
strokeWeight(1);
curve(600, 410, 565, 470, 640, 490, 800, 405);
//nose
noFill();
stroke(‘black’);
strokeWeight(2);
curve(530,180,500,463,460,550,460,550);
curve(490,550,460,550,470,580,600,581);
fill(‘black’);
curve(575,580,470,578,500,580,550,810);
curve(460,565,470,578,500,580,510,570);
noFill();
curve(552,210,532,463,567,550,567,550);
curve(517,540,567,550,557,580,430,581);
fill(‘black’);
curve(610,590,527,580,557,578,570,750);
curve(510,560,527,580,557,578,565,560);

//mouth

// lip below
stroke(‘black’);
fill(‘white’);
triangle(395, 655, 631, 655, 510, 1020);
strokeWeight(2);
fill(‘black’);
triangle(410, 655, 615, 655, 510, 950);

 //teeth
stroke(‘black’);
fill(‘white’);
strokeWeight(1);
rect(415, 655, 15, 15, 2, 1, 1, 5);
rect(430, 655, 25, 25, 2, 1, 5, 10);
rect(455, 655, 25, 35, 2, 1, 3, 7);
rect(480, 655, 30, 38, 2, 1, 3, 3);
rect(510, 655, 30, 38, 2, 1, 6, 3);
rect(540, 655, 25, 35, 2, 1, 10, 4);
rect(565, 655, 20, 25, 2, 1, 10, 3);
rect(585, 655, 20, 20, 2, 1, 10, 2);
rect(605, 655, 7,12, 2, 1, 5, 2);
stroke(‘white’);
rect(415, 700, 15, 15, 2, 1, 1, 5);
rect(430, 710, 15, 15, 2, 10, 1, 1);
rect(435, 726, 15, 15, 2, 9, 1, 1);
rect(440, 742, 20, 15, 2, 7, 1, 1);
rect(447, 759, 25, 35, 2, 25, 1, 1);
rect(475, 776, 25, 30, 10, 5, 1, 1);
rect(503, 776, 25, 30, 6, 4, 1, 1);
rect(530, 776, 25, 30, 10, 5, 1, 1);
rect(558, 762, 15, 30, 7, 1, 5, 1);
rect(595, 700, 15, 15, 4, 1, 1, 5);
rect(585, 710, 15, 15, 6, 10, 1, 1);
rect(575, 726, 15, 15, 7, 9, 1, 1);
rect(565, 742, 20, 17, 9, 7, 10, 1);stroke(‘black’);
strokeWeight(2);
line(410, 655, 460, 805);
line(614, 655, 564, 805);
// upper lip
stroke(‘black’);
fill(‘white’);
curve(200, 855, 395, 655, 525, 655, 600, 700);
curve(306, 755, 506, 655, 631, 655, 716, 800);
strokeWeight(4);
curve(-150, 450, 395, 655, 631, 655, 880, 600);
//mouth corner
curve(360, 600, 395, 655, 418, 655, 440, 600);
fill(‘white’);
stroke(‘white’);
rect(410, 655,10,3);//lip below arc
noFill();
stroke(‘black’);
strokeWeight(2);
curve(445, 650, 445, 800, 580, 800, 580, 650);
//remove extra
strokeWeight(50);
stroke(249,217,231);
curve(445, 675, 435, 825, 590, 825, 580, 675);
fill(249,217,231);
rect(430,850,130,200);stroke(‘white’);
strokeWeight(20);
noFill();
curve(445, 640, 448, 789, 576, 789, 580, 639);

strokeWeight(2);
stroke(‘black’);
curve(445, 624, 449, 778, 570, 780, 580, 624);

}
URL to the project:

http://sabrinaaa.com/Sabrina_1%20week%20assignment/

2 Responses

Leave a Reply