Category: Project-01-Face

project 01

sketch
function setup() {
    createCanvas(450, 550);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
    background(245,245,220);
    fill(100);
    noStroke();
    triangle(width/2, 400, width,550, 0, 550 );
    if(mouseX > 400){
                //body
       
        background(200,200, random(0,200));
        fill(random(100,200),random(30,150), random(100,255));
        triangle(width/2, 400, width-random(20,50),550, 0, 550-random(20,50) );
        fill(225,200,255);
        strokeWeight(1);
        stroke(100);
        ellipse(width/2 +10, 270, 350, 470);
        fill(255);
        strokeWeight(random(1,10));
        stroke(200,190,255);
        ellipse(125-random(0,10),200,40,130);
        ellipse(325-random(0,20),200,170,60);
        fill(random(0,10),random(20,70),random(10,20));
        circle(125,200,55);
        fill(random(0,10),random(20,70),random(10,20));
        circle(350,200,80);
        strokeWeight(2);
        fill(random(0,255),random(100,200),random(100,200));
        circle(125,200,random(10,40));
        fill(random(100,200),random(0,200),random(100,200));
        circle(350,200,random(30,60));
        strokeWeight(3);
        stroke(200,200,100);
        fill(0);
        //nose
        line(width/2-random(0,7),220-random(0,5), width/2 -20,350 );
        line(width/2 -20,350, 300,300-random(0,7) );
        triangle(width/2 -20,350, width/2 -15, 315, width/2 -7, 350);
        //mouth + teeth
        stroke(60);
        fill(255,30,100);
        arc(width/2,400,100,100,0,PI);
        fill(250);
        rect(width/2-20-random(0,5),400,15,25);
        square(width/2-10-random(0,5),400,20);
        rect(width/2-random(0,5),400,20,30);
        square(width/2+10-random(0,5),400,20);
        square(width/2+20-random(0,5),400,20);
        // hair

    } else {
        //face
        fill(225,200,183);
        strokeWeight(1);
        stroke(100);
        ellipse(width/2 +10, 270, 350, 470);
        //eyes
        fill(250);
        strokeWeight(2);
        stroke(3);
        ellipse(150,210,70, mouseX+40);
        ellipse(340,210,70,mouseX+40);
        fill(78,53,36);
        circle(150,210,30);
        fill(78,53,36);
        circle(340,210,30);
        //nose
        strokeWeight(1);
        fill(225,184,153);
        ellipse(width/2+10, 280, 12, 100);
        ellipse(width/2+10, 324,40,25);
        fill(0);
        circle(width/2,326, 7);
        circle(width/2 + 15,326, 7);
        // mouth
        strokeWeight(10);
        stroke(255,10,30);
        ellipse(width/2, 400, mouseX+20, 95);
        //hair
        strokeWeight(10);
        stroke(0);
        line(width/2 -110,100,mouseX-110,mouseY);
        line(width/2 -90,100, mouseX-90,mouseY);
        line(width/2 -70,100, mouseX-70,mouseY);
        line(width/2 -50,100, mouseX-50,mouseY);
        line(width/2 -30,100, mouseX-30,mouseY);
        line(width/2 -10,100, mouseX-10,mouseY);
        line(width/2 +10,100, mouseX+10,mouseY);
        line(width/2 +30,100, mouseX+30,mouseY);
        line(width/2 +50,100, mouseX+50,mouseY);
        line(width/2 +70,100, mouseX+70,mouseY);
        line(width/2 +90,100, mouseX+90,mouseY);
        line(width/2 +110,100, mouseX+90,mouseY);

        line(width/2 -100,80,mouseX-110,mouseY);
        line(width/2 -80,80, mouseX-90,mouseY);
        line(width/2 -60,80, mouseX-70,mouseY);
        line(width/2 -40,80, mouseX-50,mouseY);
        line(width/2 -20,80, mouseX-30,mouseY);
        line(width/2 ,80, mouseX-10,mouseY);
        line(width/2 +20,80, mouseX+10,mouseY);
        line(width/2 +40,80, mouseX+30,mouseY);
        line(width/2 +60,80, mouseX+50,mouseY);
        line(width/2 +80,80, mouseX+70,mouseY);
        line(width/2 +100,80, mouseX+90,mouseY);
        line(width/2 +120,80, mouseX+90,mouseY);

        line(width/2 -90,60, mouseX-90,mouseY);
        line(width/2 -70,60, mouseX-70,mouseY);
        line(width/2 -50,60, mouseX-50,mouseY);
        line(width/2 -30,60, mouseX-30,mouseY);
        line(width/2 -10,60, mouseX-10,mouseY);
        line(width/2 +10,60, mouseX+10,mouseY);
        line(width/2 +30,60, mouseX+30,mouseY);
        line(width/2 +50,60, mouseX+50,mouseY);
        line(width/2 +70,60, mouseX+70,mouseY);
        line(width/2 +90,60, mouseX+90,mouseY);
        
    }




}

project 1: my self portrait

self portrait (minecraft inspired :D)
function setup() {
    createCanvas(500, 400);
}

function draw() {
    //skin (all fills are shades of beige)
    background(217, 193, 174);
    noStroke();
    fill(217, 198, 182);
    ellipse(250, 250, 500, 594);
    fill(230, 210, 193);
    ellipse(250,250, 472, 547);
    fill(245, 219, 198);
    ellipse(250, 250, 446, 492);
    fill(255, 233, 214);
    ellipse(250, 250, 428, 466);
    //nose
    fill(207, 188, 173);
    circle(226, 356, 38);
    circle(266, 356, 38);
    fill(255, 233, 214);
    ellipse(246, 354, 74, 61);
    //freckles
    fill(120, 105, 80);
    circle(415, 339, 3);
    circle(367, 366, 3);
    circle(357, 335, 3);
    circle(302, 324, 3);
    circle(261, 341, 3);
    circle(234, 384, 3);
    circle(232, 295, 3);
    circle(177, 327, 3);
    circle(155, 355, 3);
    circle(114, 327, 3);
    circle(93, 366, 3);
    circle(51, 288, 3);
    circle(357, 226, 3);
    //right eye
    fill(77, 69, 65); //dark grey
    rect(351, 246, 63, 29);
    ellipse(351, 275, 126, 59);
    fill(235, 226, 219); //off white
    rect(347, 250, 63, 29);
    ellipse(347, 279, 126, 59);
    fill(110, 115, 93); //various shades of green-brown
    circle(356, 277, 54);
    fill(92, 87, 58);
    circle(356, 277, 48);
    fill(59, 55, 37);
    circle(356, 277, 34);
    fill(222, 216, 189);
    circle(351, 269, 12);
    //left eye
    fill(77, 69, 65); //dark grey
    rect(83, 246, 63, 29);
    ellipse(146, 275, 126, 59);
    fill(235, 226, 219); //off white
    rect(87, 250, 63, 29);
    ellipse(150, 279, 126, 59);
    fill(110, 115, 93); //various shades of green-brown
    circle(151, 277, 54);
    fill(92, 87, 58);
    circle(151, 277, 48);
    fill(59, 55, 37);
    circle(151, 277, 34);
    fill(222, 216, 189);
    circle(146, 269, 12);
    //right eyebrow
    fill(56, 41, 28); //dark brown
    rect(281, 217, 52, 8);
    rect(307, 203, 64, 14);
    rect(353, 218, 63, 3);
    rect(286, 210, 21, 7);
    fill(82, 60, 41); //mid brown
    rect(401, 221, 21, 4);
    rect(371, 209, 36, 9);
    //left eyebrow
    rect(77, 221, 21, 4);
    rect(83, 218, 63, 3);
    fill(56, 41, 28); //dark brown
    rect(92, 210, 36, 8);
    rect(128, 206, 64, 12);
    rect(166, 218, 52, 7);
    rect(192, 212, 21,6);
    //hair layer 1 - light brown
    fill(102, 79, 59);
    rect(0, 187, 24, 180);
    rect(17, 99, 44, 99);
    rect(71, 35, 54, 133);
    rect(195, 63, 36, 102);
    rect(270, 39, 63, 61);
    rect(405, 100, 42, 47);
    rect(434, 147, 38, 87);
    rect(486, 252, 14, 91);
    //hair layer 2 - mid brown
    fill(82, 60, 41);
    rect(0, 187, 17, 99);
    rect(0, 99, 53, 88);
    rect(17, 55, 56, 44);
    rect(73, 99, 36, 66);
    rect(73, 40, 48, 59);
    rect(0, 0, 500, 46);
    rect(147, 39, 56, 24);
    rect(203, 39, 23, 120);
    rect(226, 87, 44, 44);
    rect(225, 39, 83, 48);
    rect(333, 39, 87, 63);
    rect(333, 101, 46, 62);
    rect(419, 38, 81, 105);
    rect(447, 143, 53, 83);
    rect(472, 224, 28, 28);
    //hair layer 3 - dark brown
    fill(56, 41, 28);
    rect(0, 55, 17, 101);
    rect(0, 0, 73, 59);
    rect(73, 0, 362, 28);
    rect(213, 24, 49, 28);
    rect(435, 0, 65, 103);
    rect(472, 103, 28, 71);
}

Project 1: My Self Portrait

This is my project

sketch
var g = 15;
var b = 255;

function setup() {
  createCanvas(600, 700);
}

function draw() {
  // background
  g = map (mouseX, 0, 600, 0, 255);
  b = map (mouseX, 0, 600, 255, 0);
  background(0, g, b);
  
  //Hat
  noStroke();
  fill(100, 200, 230);
  circle(280, 200, 280);
    
  
  //Body
  strokeWeight(6);
  stroke(255, 255, 255);
  line(550, 300, 500, 300);
  line(500, 300, 460, 470);
  stroke(240, 224, 64);
  circle(550, 300, 20)
  
  stroke(255, 255, 255);
  strokeWeight(10);
  line(275, 424, 200, 600);
  line(200, 600, 155, 650);
  line(155, 650, 100, 700);
  line(100, 700, 460, 700);
  line(460, 700, 400, 550);
  line(400, 550, 510, 550);
  line(460, 470, 410, 470);
  line(410, 470, 350, 418);
  strokeWeight(12);
  line(510, 550, 460, 470);

  
  //Head
  stroke(255, 255, 255);
  strokeWeight(2);
  fill(255,242,230);
  circle(300, 300, 250);

  
  //Hair
  noFill();
  stroke(255, 255, 255);
  strokeWeight(10);
  fill(0, 0, 0);
  bezier(280, 170, 50, 200, 150, 50, 90, 600 );
  bezier (280, 170, 460, 330, 500, 200, 400, 100);
  strokeWeight(5);
  triangle(280, 170, 200, 350, 320, 200);
  
  
  //Eyebrow
  noFill();
  stroke(82, 71, 71);
  strokeWeight(3);
  bezier(350, 280, 360, 260, 400, 250, 415, 280)
  
  
  //Eye
  noStroke();
  fill(82, 71, 71);
  circle(383, 295, 50);
  fill(255, 255, 255);
  circle(380, 285, 20);
  circle(390, 305, 10);
  stroke(0, 0, 0);
  strokeWeight(1);
  bezier(361, 287, 350, 278, 347, 288, 340, 280);
  
  
  //Mouth
  noFill();
  stroke(0, 0, 0);
  strokeWeight(3);
  bezier(353, 350, 355, 360, 385, 365, 400, 353);
  noFill();
  stroke(245, 0, 0);
  //bezier(360, 353, 355, 355, 385, 360, 390, 355);
  
  
  //Face detail
  noStroke();
  fill(255, 204, 204);
  circle(300, 330, 55);
  stroke(94, 62, 34);
  strokeWeight(2);
  line(300, 330, 298, 335);
  line(310, 330, 307, 335);
  
  //Ear
  noFill();
  stroke(0, 0, 0);
  strokeWeight(4);
  bezier(240, 310, 170, 370, 245, 380, 230, 400);
  strokeWeight(2);
  bezier(240, 320, 230, 340, 220, 330, 240, 360);
  //Earring
  fill(240, 224, 64);
  strokeWeight(1);
  triangle(230, 400, 200, 430, 250, 430);
  fill(255, 255, 255);
  circle(230, 400, 20);
  
  //Dress
  stroke(0, 0, 0);
  rect(305, 600, 30, 40);
  rect(305, 530, 30, 40);
  rect(305, 460, 30, 40);
  fill(255, 0, 0);
  rect(313, 607, 15, 20);
  rect(313, 537, 15, 20);
  rect(313, 467, 15, 20);

  //Name
  stroke(240, 224, 64);
  strokeWeight(3);
  line (540, 645, 570, 645);
  stroke(255, 255, 255)
  strokeWeight(3)
  line (510, 700, 510, 660);
  line (510, 660, 490, 630);
  line (510, 660, 530, 630);
  line (540, 700, 540, 630);
  line (540, 630, 570, 630);
  line (540, 660, 570, 660);
  

}

Project 1: My Self Portrait

My most challenging part of the post is my nose and the background, because I tried to draw curves.

jiayiheadDownload
function setup() {
    createCanvas(480, 650);
    background(250,248,242);
}

function draw() {
    stroke(0) //Background
    strokeWeight(2);
    fill(255);
    rect(0,410,31,109);
    stroke(0); 
    strokeWeight(2);
    fill(255);
    rect(0,420,20,93);
    line(62,26,480,18);
    line(61,26,40,404);
    line(0,0,61,26);
    line(0,233,48.5,233.5);
    line(0,245,48,246);
    fill(65,65,65);
    arc(240, 500, 480,68, 0, 0);
    stroke(0); //Background
    strokeWeight(0);      //shirts
    fill(65,65,65);
    rect(0,500,490,200);
    fill(250);
    quad(240, 630, 275, 630, 275, 650, 240, 650);
    fill(250);
    quad(240-50, 630+10, 275-50, 630, 275-50, 650, 240-50, 650);
    fill(250);
    quad(240+50, 630, 275+50, 630+10, 275+50, 650, 240+50, 650);
    strokeWeight(10)
    fill(65,65,65)
    ellipse(190-10, 500-40, 320, 200);
    strokeWeight(10)
    fill(65,65,65)
    ellipse(190, 500, 320, 200);
    strokeWeight(5)
    fill(65,65,65)
    ellipse(190, 500, 256, 160);
    strokeWeight(2)
    x=-40
    y=75
    triangle(190+x, 500+y,210+x,519+y, 185+x, 520+y);
    triangle(190+x, 505+y,205+x,514+y, 190+x, 515+y);
    x=+50 
    y=70
    triangle(190+x, 500+y,210+x,519+y, 185+x, 520+y);
    triangle(190+x, 505+y,205+x,514+y, 190+x, 515+y); //Shirt Ends
    stroke(0); 
    strokeWeight(5);      
    fill(255,204,153);
    rect(150,480,110,60);//head
    fill(255,204,153)
    ellipse(80,230,30,50)
    ellipse(370,230,30,50)
    fill(255,204,153);
    ellipse(225,280,300,480)
    fill(0)
    triangle(100, 140, 100, 50,180, 50);
    triangle(350, 140,350,50,270,50);
    rect(150,35,150,50)
    triangle(125, 185, 200, 190,150, 180);
    triangle(300, 185, 225, 190,275, 180)
    fill(250,245,255)
    ellipse(155,225 , 75, 25);
    ellipse(270, 225, 75, 25);
    fill(0)
    circle(155,225 , 25);
    circle(270, 225, 25);
    line(190,220,140,210)
    line(280,210,230,220)
    line(230,300,245,350)
    line(200,300,190,350)
    fill(255,204,153)
    bezier(190,350, 180,380 , 205, 350, 205, 350);
    x=20
    bezier(190+x,350, 200+x,380 , 205+x, 350, 205+x, 350);
    x=40
    bezier(190+x,350, 200+x,380 , 205+x, 350, 205+x, 350);
    fill(0)
    circle(205, 357, 13);
    circle(227, 357, 13);
    fill(233,34,74)
    ellipse(225, 450, 75, 25);
    y=-15
    x=-5
    bezier(225+x,460+y,240+x,435+y+10 ,240+x, 435+y+10,265+x, 460+y);
    y=-15
    x=-35
    bezier(225+x,460+y,240+x,435+y+10 ,240+x, 435+y+10,265+x, 460+y);
    line(225-35,450,265-5,450)
    fill(0)
    circle(130,170,3)
    //head
    noLoop()           
}

Project 1: Self Portrait

This is my self portrait. The most challenging part of this project is locating the shapes and lines on my canvas. The most difficult shape to code was the arc.

sketch
function setup() {
    createCanvas(500,300);
    background(120,120,150);
    text("Hi. I'm Jen :)", 10, 15);
}

function draw() {
    strokeWeight(0)
    fill(225,194,159); //1-beige
    ellipse(267,140,141,197);
    strokeWeight(0)
    fill(56,47,45); //2-brown
    ellipse(258,49,127,59);
    strokeWeight(0)
    fill(56,47,45); //3-brown
    ellipse(196,120,74,154)
    strokeWeight(0)
    fill(225,194,159); //5-beige
    rect(220,200,42,110);
    strokeWeight(0)
    fill(230,130,140); //6-shirt
    quad(201,252,201,300,306,300,290,252);
    strokeWeight(0)
    fill(56,47,45); //4-brown
    ellipse(196,241,43,135);
    strokeWeight(0)
    fill(230,144,151); //8-mouth
    ellipse(304,198,31,8);
    strokeWeight(0)
    fill(191,171,125); //7-nose
    triangle(301,136,307,164,295,164);
    strokeWeight(0)
    fill(255,255,255); //9-eye white
    arc(264,113,51,55,2.6,0.5,OPEN);
    strokeWeight(0)
    fill(0,0,0); //10-eyeball
    circle(275,113,35);
    strokeWeight(0)
    fill(255,255,255); //11-eye white
    arc(329,113,51,55,2.6,0.5,open);
    strokeWeight(0)
    fill(0,0,0); //12-eyeball
    circle(340,113,35);
    strokeWeight(0)
    fill(241,211,129); //13-hair tie
    ellipse(196,191,41,11);
    stroke(255,255,255); //highlight 1
    strokeWeight(5);
    point(330,110);
    stroke(255,255,255); //highlight 2
    strokeWeight(5);
    point(265,110);
    strokeWeight(2)
    fill(225,100,10); //13-hair tie middle
    square(192,186,11);
    stroke(255)
    strokeWeight(3)
    line(299,196,309,196)
    strokeWeight(1)
    stroke(100)
    line(301,136,307,164)
    strokeWeight(1)
    stroke(100)
    line(307,164,295,164)
}

Project 01

this is my project 1

sketch 

function setup() {
    createCanvas(350, 405);
    background(224, 179, 179);
    text("Xinran Yu, Section A");
}

function draw() {
    strokeWeight(0);

    //hair    
    if(mouseX < (width/2)) {
        fill(79, 62, 53); 
        ellipse(170, 190, 200, 200);
        rect(70, 200, 200, 250)
    } else if(mouseX > (width/2)) {
        fill(35, 35, 35);
        ellipse(170, 190, 200, 200);
    rect(70, 200, 200, 250);
    }  

    //ear
    fill(210, 159, 137);       
    ellipse(95, 220, 20, 40);
    ellipse(245, 220, 20, 40);
    fill(245, 208, 155);
    rect(91, 232, 5, 40);
    rect(245, 232, 5, 40);
    
    //neck
    fill(177, 156, 144);       
    triangle(135, 280, 205, 280, 170, 370);
    
    //face
    fill(240, 221, 210);       
    ellipse(170, 210, 150, 170);
    
    //eyes
    fill(0)                    
    ellipse(140, 200, 20, 30);
    ellipse(200, 200, 20, 30); 
    fill(255, 255, 255, 150);
    ellipse(136, 203, 10, 15);
    ellipse(196, 203, 10, 15);

    //clothes
    fill(85, 112, 142);        
    rect(95, 330, 150, 200);
    ellipse(95, 405, 159, 150);
    ellipse(255, 405, 150, 150);
    fill(122, 163, 208);
    triangle(95, 330, 245, 330, 170, 380);

    //eyebrows
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(125, 177);
    curveVertex(125, 177);
    curveVertex(135, 175);
    curveVertex(145, 175);
    curveVertex(153, 177);
    curveVertex(153, 177);
    endShape();
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(185, 177);
    curveVertex(185, 177);
    curveVertex(195, 175);
    curveVertex(205, 175);
    curveVertex(213, 177);
    curveVertex(213, 177);
    endShape();
       
    //nose
    strokeWeight(0);
    fill(210, 159, 137);       
    triangle(160, 225, 180, 225, 170, 250);

    //mouth
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(150, 260);
    curveVertex(150, 260);
    curveVertex(165, 270);
    curveVertex(175, 270);
    curveVertex(190, 260);
    curveVertex(190, 260);
    endShape();
}

anabelle’s project 01

this is my project

sketch
// anabelle lee < 3
// section c

function setup() {
    createCanvas(600, 600);
}

function draw() {
    //pink heart side
    background(255);

    if ((mouseX < 400 & mouseY > 300) ||
        (mouseX < 400 && mouseY < 300) ||
        (mouseX > 400 && mouseY < 300)) {
        
        // pink background
        fill(235, 192, 194);
        square(50, 50, 500);
        
        // back hair
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75); 
        rect(100, 250, 400, 220); 

        // face
        noStroke();
        fill(255, 238, 222);
        circle(300, 300, 300);

        // neck
        rect(260, 400, 80, 150);

        // ears
        circle(160, 300, 70);
        circle(440, 300, 70);

        // side bangs
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75);
        triangle(160, 250, 140, 400, 180, 400)
        triangle(440, 250, 420, 400, 460, 400)

        // top hair
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(300, 390, 450, 600, (7*PI/6), (11*PI/6), CHORD);

        // forehead
        noStroke()
        fill(255, 238, 222);
        triangle(300, 164, 245, 280, 360, 280);

        // front bangs
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(100, 150, 400, 400, 0, HALF_PI, CHORD);
        arc(527, 25, 500, 650, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // eyes
        stroke(92, 64, 51); 
        strokeWeight(5);
        noFill()
        arc(370, 320, 80, 45, radians(200), 0)
        arc(230, 320, 80, 45, radians(185), radians(340))

        // mouth
        happyMouth(300, 370, 120, 90);

        // cheeks
        fill(171, 95, 97);
        circle(200, 350, 25);
        circle(220, 350, 25);
        triangle(187, 354, 233, 354, 210, 380);

        circle(385, 350, 25);
        circle(405, 350, 25);
        triangle(372, 354, 418, 354, 395, 380);

        // shoulders
        fill(231, 208, 208);
        ellipse(300, 650, 420, 300);

        // heart follows mouse
        noStroke()
        fill(231, 84, 128);
        circle(mouseX - 12, mouseY, 30);
        circle(mouseX + 12, mouseY, 30);
        triangle(mouseX - 28, mouseY - 2, mouseX + 28, mouseY - 2, mouseX, mouseY + 45);

    // gray scale side
    } else {
        background(0);
        fill(150);
        square(400, 400, 50);

        //shoulders
        fill(20);
        rect(408, 440, 36, 10);

        //back hair
        fill(100); 
        stroke(80);
        rect(410, 420, 30, 20);

        // face
        fill(200);
        noStroke();
        circle(425, 425, 20); 

        //neck
        fill(200);  
        rect(423, 420, 5, 20);

        //ears
        circle(415, 425, 5);
        circle(435, 425, 5);

        //side hair
        fill(100);
        stroke(80);
        strokeWeight(1);
        triangle(415, 420, 412, 435, 418, 435);
        triangle(435, 420, 432, 435, 438, 435);

        //top hair
        arc(425, 433, 40, 50, (7*PI/6), (11*PI/6), CHORD);

        // front bangs
        arc(410, 410, 25, 35, 0, HALF_PI, CHORD);
        arc(440, 405, 30, 40, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // spotlight
        noStroke()
        fill(255, 150);
        circle(mouseX, mouseY, 200); 

    }
}

function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(255, 183, 210, 150);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 

}

Project 02

This is my self portrait

sketch
function setup() {
    createCanvas(400, 400);
    background(0);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //backgrond
    if(mouseX<width/2){
        background(186,197,62);
        stroke(112,106,41);
        fill(112,106,41);
    } else{
        background(200,170,161);
        stroke(167,118,94);
        fill(167,118,94);
    }
    
    //stars! left side
    quad(40,30,30,50,40,70,50,50);
    quad(65,55,55,75,65,95,75,75);
    quad(40,80,30,100,40,120,50,100);
    //stars! right side
    quad(350,340,340,360,350,380,360,360);
    quad(350,280,340,300,350,320,360,300);
    quad(320,305,310,325,320,345,330,325);
    
    //left face area
    stroke(158,193,210);
    fill(158,193,210);
    arc(150,130,150,150,15.3,17.8,HALF_PI); //top left area
    fill(158,193,210);
    rect(75,130,40,120);//left hair

    //right yellow area
    stroke(240,216,102);
    fill(240,216,102);
    arc(220,120,90,90,16.9,13.4,HALF_PI);
    fill(240,216,102);
    rect(235,120,30,130);//right hair

    //right dak blue area
    stroke(44,112,171);
    fill(44,112,171);
    arc(200,120,90,90,16.9,13.4,HALF_PI);
    fill(44,112,171);
    rect(215,120,30,130);//right hair

    //eye and noise
    stroke(240,216,102);
    fill(240,216,102);
    circle(125,140,60);
    stroke(240,216,102);
    fill(240,216,102);
    circle(200,140,60);
    stroke(158,193,210);
    fill(158,193,210);
    circle(200,140,55);
    stroke(194,227,245);
    fill(194,227,245);
    circle(200,140,40);
    stroke(0);
    fill(0);
    rect(163,170,5,15);
    rect(158,185,10,3);

    //horizontal lines  From top to the bottom
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,75,50,15);
    stroke(255);
    fill(255);
    rect(235,95,60,10);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,110,70,7);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,120,75,13);
    stroke(255);
    fill(255);
    rect(235,139,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,153,75,8);
    stroke(255);
    fill(255);
    rect(235,167,75,8);
    stroke(158,193,210);
    fill(158,193,210);
    rect(235,181,75,8);
    stroke(255);
    fill(255);
    rect(235,195,75,8);
    rect(235,209,75,8);

    //clothes
    stroke(240,216,102);
    fill(240,216,102);
    rect(140,230,50,20);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(110,270,90,270,60,390);
    stroke(240,216,10);
    fill(240,216,102);
    triangle(150,270,120,270,90,390);
    triangle(180,270,210,270,240,390);
    stroke(158,193,210);
    fill(158,193,210);
    triangle(220,270,235,270,270,390);

    //button
    stroke(44,112,171);
    fill(44,112,171);
    circle(165,300,20);
    circle(165,330,20);
    circle(165,360,20);
    
    //jaw
    stroke(255);
    fill(255);
    arc(165,170,130,130,7,2.4,HALF_PI); 

    
}

Project 1: My Self Portrait

The most interesting about the project is using simple elements to create a meaningful drawing.

sketch
//Elmy Chen Section D

function setup() {
    createCanvas(500, 500);
    background(220);
}

function draw() {
    fill (255,160,122);
    ellipse(250,250,350,410);

    fill(0,0,0);
    ellipse(150,200,40,40);
    ellipse(320,200,40,40);

    fill(255,0,0);
    triangle(220,400,280,400,250,420);

    fill(139,69,19);
    rect(50,45,90,400);
    rect(350,45,90,400);
    rect(140,45,110,100);
    rect(250,45,110,100);

}

project 1

this is my project

sketch

The most interesting part of this project was finding ways to creatively layer shapes to make new ones.

function setup() {
    createCanvas(200, 200);
    angleMode(DEGREES);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(195, 216, 212); //LIGHT MINT
    noStroke(); //apply to all bellow 
    fill(70, 45, 45); //DARK BROWN 
        rect(35, 50, 130, 130); //background hair 
    fill(100, 169, 150); //DARK MINT 
        ellipse(100, 200, 170, 150)//shirt
    fill(200, 162, 146); //MEDIUM FACE
        triangle(60, 125, 140, 125, 100, 175); //neck
        ellipse(50, 93, 45, 45); //ear left
        ellipse(150, 93, 45, 45); //right ear
    fill(225, 196, 183); //LIGHT FACE 
        ellipse(100, 90, 100, 120);//face
    fill(195, 216, 212); //forhead cover (hide top of head poking out of bangs)
        ellipse(100, 50, 100, 50)
    fill(130, 90, 70); //MEDIUM BROWN  
        ellipse(70, 64, 85, 55); //left hair Bang
        ellipse(130, 64, 85, 55); //right hair Bang
        ellipse(100, 130, 30, 5); //mouth
    fill(200, 162, 146); //MEDIUM FACE 
        ellipse(75, 106, 25, 25); //left eye
        ellipse(125, 106, 25, 25); //right eye
    fill(230, 130, 130); //PINK
        ellipse(100, 115, 15, 10); //nose?
    fill(195, 216, 212); //LIGHT MINT
        ellipse(75, 103, 20, 20); //left eye
        ellipse(125, 103, 20, 20); //right eye
    fill(70, 45, 45); //DARK BROWN
        ellipse(75, 102, 13, 13); //left eye
        ellipse(125, 102, 13, 13); //right eye
    //fill(225, 196, 183); //LIGHT FACE
        //rect(55, 92, 90, 7); //brow 
}