ICM First Work

The first task is to create a portrait of my neighbor – JAMAL

I have to say that it takes me a lot of time to think about how to draw his hair.

ICMweek1-post

As a beginner of P5js, I get a lot of fun by drawing my classmate. I try to make this image simple and fun.

After focusing on my portrait for a few hours, it turns out to be kind of boring. So I try to find some functions to change this image and creating more fun. By using [function mouseMoved() ], I get to make some small change of the portrait.

JAMALLLL

Here is the result:

Week1-Assignment

 

Here is the code:

function setup() {

createCanvas(800,800);

//face

noStroke(),fill(148,101,75),ellipse(412,366,265,370);

//hair

noFill(),stroke(10),strokeWeight(5);

ellipse(400,180,28,18),ellipse(420,180,28,18),ellipse(440,180,28,18),ellipse(480,200,20,28);

ellipse(460,200,20,28),ellipse(440,200,20,28),ellipse(420,200,20,28),ellipse(400,200,20,28);

ellipse(380,200,20,28),ellipse(360,200,20,28),ellipse(330,210,28,28),ellipse(350,210,28,28);

ellipse(370,210,28,28),ellipse(390,210,28,28),ellipse(410,210,28,28),ellipse(430,210,28,28);

ellipse(450,210,28,28),ellipse(470,210,28,28),ellipse(490,210,28,28),ellipse(320,230,20,28);

ellipse(340,230,20,28),ellipse(360,230,20,28),ellipse(380,230,20,28),ellipse(400,230,20,28);

ellipse(420,230,20,28),ellipse(440,230,20,28),ellipse(460,230,20,28),ellipse(480,230,20,28);

ellipse(500,230,20,28),ellipse(300,250,20,28),ellipse(320,250,20,28),ellipse(290,270,20,28);

ellipse(310,270,20,28),ellipse(300,290,20,28);

//eyebrow

fill(50,32,23),noStroke();

ellipse(358,305,80,30),ellipse(486,307,68,24);

fill(148,101,75);

ellipse(358,320,90,30),ellipse(483,323,65,25);

//eye

fill(245),ellipse(361,342,70,17),ellipse(484,345,57,16);

fill(20),ellipse(365,342,16,17),ellipse(487,345,16,16);

fill(255),ellipse(368,344,5,5),ellipse(490,347,5,5);

//mouth

strokeWeight(3),noFill(),stroke(250);

curve(380,130,340,430,480,475,480,375);

//nose

stroke(5),curve(400,150,400,380,460,400,460,420);

//eye-curve

stroke(20),curve(340,390,330,335,395,337,380,400),curve(430,400,455,340,510,335,500,360);

d=630,e=675,r=0;

}

function draw() {

noFill(),stroke(5);

beginShape()

vertex(360,440+r),vertex(365,420+r),vertex(380,435+r),vertex(385,415+r);

vertex(400,430+r),vertex(405,410+r),vertex(420,425+r),vertex(425,405+r);

vertex(430,405+r),vertex(435,425+r),vertex(450,410+r),vertex(455,430+r);

vertex(470,415+r),vertex(475,435+r),vertex(490,420+r),vertex(495,440+r);

endShape();

fill(5);

beginShape();

vertex(340,520+r),vertex(350,540+r),vertex(360,525+r),vertex(370,545+r);

vertex(380,530+r),vertex(390,550+r),vertex(400,535+r),vertex(410,555+r);

vertex(420,535+r),vertex(430,555+r),vertex(440,535+r),vertex(450,550+r);

vertex(460,530+r),vertex(470,545+r),vertex(480,525+r),vertex(490,540+r);

vertex(500,510+r),vertex(450,530),vertex(400,530),endShape();

stroke(230,0,0),fill(230,0,0),curve(430,d,430,480,480,475,480,e);

}

function mouseMoved(){

d=d+1,e=e+1;

if (d>750) {

d=750,e=795;

}

r=r+0.1;

}

Leave a Reply

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