Category: SectionC

Blog 01

Neri Oxman – architect, artist, professor – focuses on work that
combines design, biology, computing, and materials engineering.
Of her many projects, all pushing the boundaries of biology and
art, I have always been particularly fascinated by
Silk Pavilions I and II – a series of silkworm spun installations
that, beyond their visual impact, explore sustainable methods of
spinning, weaving, and making silk without the use of cocoons.
Silk Pavilion I, designed by her research team
(and 6500 live silkworms) was constructed over a period of
three weeks, all with the help of a robotic loom-like jig and
a CNC machine to make the 26 polygonal panels as a base structure
for the silkworms to begin laying their silk upon. Her Silk Pavilions,
along with the rest of her work, point to a future of
interdisciplinary and interspecies work that aims to solve
sustainability challenges – like some of the techniques used to
make silk that requires silkworms to be boiled.

Silk Pavilion I: https://oxman.com/projects/silk-pavilion-i
Silk Pavilion II: https://oxman.com/projects/silk-pavilion-ii

Project 01

Here is my self portrait.

function setup() {
    createCanvas(500, 500);
    background(252, 181, 104); // background orange
}

function draw() {
	// ornament
	strokeWeight(3);
	stroke(255);
	fill(116, 203, 200); //teal stripe
	rect(225, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(79, 141, 241); // blue stripe
	rect(135, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 190, 214); // pink stripe
	rect(45, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(192, 226, 148); // green stripe
	rect(315, 0, 45, 500);
	strokeWeight(3);
	stroke(255);
	fill(255, 246, 140); // yellow stripe
	rect(405, 0, 45, 500);

	// hair
	noStroke();
	fill(40, 24, 15); // hair color
	ellipse(250, 250, 380, 420);
	noStroke();
	fill(40, 24, 15);
	rect(60, 250, 380, 300);
	noStroke();
	fill(40, 24, 15);
	triangle(20, 500, 90, 405, 90, 500);
	noStroke();
	fill(40, 24, 15);
	triangle(480, 500, 410, 405, 410, 500);

	// ears
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(100, 260, 60, 80);
	strokeWeight(5);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	ellipse(400, 260, 60, 80);

	// neck
	strokeWeight(5);
	stroke(247, 150, 107); // shadow color edge
	fill(244, 218, 188); // shadow color
	rect(185, 415, 125, 100);

	// face
	strokeWeight(5);
	stroke(247, 150, 107); // skin color edge
	fill(255, 237, 213); // skin color
	ellipse(250, 250, 300, 365);

	// eyes
	strokeWeight(3);
	stroke(0, 34, 68); // eye color edge
	fill(238, 239, 248); // eye color
	ellipse(190, 230, 75, 55);
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(238, 239, 248); 
	ellipse(310, 230, 75, 55);

	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1); // iris color
	circle(190, 225, 45);
	strokeWeight(3);
	stroke(0, 34, 68);
	fill(91, 32, 1);
	circle(310, 225, 45);

	noStroke();
	fill(0); // pupil color
	circle(310, 225, 15);
	noStroke();
	fill(0);
	circle(190, 225, 15);

	strokeWeight(10);
	stroke(255); // reflection color
	point(195, 220);
	strokeWeight(10);
	stroke(255);
	point(315, 220);

	strokeWeight(7);
	stroke(0, 34, 68); // eyelash color
	line(190, 205, 190, 185);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(310, 205, 310, 185);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(172, 210, 172, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(328, 210, 328, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(208, 210, 208, 190);
	strokeWeight(7);
	stroke(0, 34, 68);
	line(292, 210, 292, 190);

	// glasses
	strokeWeight(6);
	stroke(82, 76, 69); // glasses color
	noFill();
	ellipse(175, 225, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	noFill();
	ellipse(325, 225, 123, 100);
	strokeWeight(6);
	stroke(82, 76, 69);
	line(237, 225, 263, 225);

	// bangs
	noStroke();
	fill(40, 24, 15); // bang color
	square(200, 60, 100, 15);
	noStroke();
	fill(40, 24, 15);
	square(129, 80, 80, 15);
	noStroke();
	fill(40, 24, 15);
	square(290, 80, 80, 15);
	noStroke();
	fill(40, 24, 15);
	rect(155, 70, 190, 60);

	// eyebrows
	noStroke();
	fill(0); // eyebrow color
	triangle(205, 180, 205, 160, 140, 180);
	noStroke();
	fill(0);
	triangle(295, 180, 295, 160, 360, 180);

	//nose
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(230, 306, 24);
	strokeWeight(4);
	stroke(247, 150, 107);
	fill(244, 218, 188);
	circle(270, 306, 24);

	strokeWeight(5);
	stroke(247, 150, 107);
	fill(255, 237, 213);
	circle(250, 307, 27);

	noStroke();
	fill(255, 237, 213);
	ellipse(250, 298, 30, 40);

	// mouth
	strokeWeight(8);
	stroke(229, 162, 153); // lip color
	fill(255); // teeth color
	arc(250, 340, 155, 100, 0, HALF_PI)
	strokeWeight(8);
	stroke(229, 162, 153);
	fill(255);
	arc(250, 340, 155, 100, HALF_PI, PI);
	strokeWeight(8);
	stroke(229, 162, 153);
	line(175, 340, 325, 340);

	// earrings
	strokeWeight(3);
	stroke(224, 135, 73); // earrings edge color
	fill(232, 190, 64); // earrings color
	rect(80, 290, 25, 60, 20);
	strokeWeight(3);
	stroke(224, 135, 73);
	fill(232, 190, 64);
	rect(395, 290, 25, 60, 20);

	strokeWeight(4);
	stroke(255); // earrings reflection color
	fill(255);
	rect(88, 300, 2, 32, 10);
	strokeWeight(4);
	stroke(255);
	fill(255);
	rect(403, 300, 2, 32, 10);

}

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);
  

}

LO: Kinetic Sculpture

Work title: Circe [Kinetic Wind Sculpture in Stainless Steel]

Designer: Anthony Howe

Video Link: https://www.howeart.net/circe

I am really fascinated by this project because Howe has endowed a new form of sculpture that is not a static artwork. The patterning of these sculptures also reminds me of parametric architecture, which is often created by Grasshopper (a 3D modeling program). Using specialized software that can program each component of the sculpture, Howe is able to generate the motion of steel plates through the wind. Then, the wind will allow the statue to perform based on its pre-designed structure. I believe that one of the artist’s responsibilities is to let the work speak for themselves, whether through interaction with nature or through computational control by us. Regarding the software, I suppose the author created his own scripts because every work in this series is unique in its form and motion, as well as the “wind” determinator, in this case, will require real-time data to implement the design in real life. 

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 01 – Click on it!!

here is my portrait!

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

function draw() {
    background(177,204,250); //blue
    strokeWeight(2);
    stroke(124,90,21); //hair color
    fill(164,114,34); //hair color
    rect(195,200,410,400);
    strokeWeight(3);
    stroke(210,180,140); //face outline color
    fill(255,228,196); //peach
    rect(300,450,200,300); //neck
    ellipse(400,300,400,500); //face
    stroke(124,90,21); //brow color
    strokeWeight(15);
    line(425,210,500,200) // eyebrow
    line(375,210,300,200) // eyebrow
    line(260,220,300,200) // eyebrow
    stroke(205,133,63); //nose color
    strokeWeight(4);
    line(410,270,412,380); //nose
    strokeWeight(4);
    line(390,270,388,380); //nose
    ellipse (386,380,15); //nostril
    ellipse (414,380,15); //nostril
    ellipse (400,384,25); //nose
    strokeWeight(0);
    fill(255,229,204);
    ellipse(400,370,20,30); //nose errase
    strokeWeight(0);
    fill(255,229,204);
    ellipse(400,378,35,10); //nose errase
    fill(255,255,255);
    stroke(0);
    strokeWeight(2);
    ellipse(330,260,70,40); //eye
    fill(255,255,255);
    stroke(0);
    ellipse(470,260,70,40); //eye
    fill(50,102,0); //green
    strokeWeight(0);
    circle(330,260,35);
    fill(50,102,0); //green
    strokeWeight(0);
    circle(470,260,35);
    strokeWeight(15);
    stroke(0);
    point(330,260); //pupil
    point(470,260); //pupil
    strokeWeight(0);
    stroke(240,120,120); //pink mouth
    strokeWeight(10); 
    noFill()
    arc(400,440,90,50, 0,
    PI); //mouth
    fill(255,192,203); //pink cheek
    strokeWeight(0);
    ellipse(300,350,120,80); //cheek
    fill(255,192,203); //pink cheek
    strokeWeight(0);
    ellipse(500,350,120,80); //cheek
    strokeWeight(2);
    stroke(124,90,21);
    fill(164,124,14);
    arc(430,280,400,500, 180, 0,
    PI); //hair right
    arc(380,290,400,500, 16, 175,
    PI); //HAIR LEFT
    strokeWeight(0);
    if (mouseIsPressed) {
        fill(255,228,196); //eye patch 
        ellipse(470,260,73,43); //eye patch
        strokeWeight(2);
        stroke(0);
        ellipse(470,260,70,40); //eye
        strokeWeight(0);
        fill(255,228,196); //eye patch
        rect(430,230,80,30); //eye patch
        strokeWeight(2);
        line(475,280,478,290); //eyelashes
        line(490,278,493,287);
        line(502,270,508,280);
        line(505,262,517,269);
        strokeWeight(0);
        fill(255,228,196); //mouthpatch
        ellipse(400,440,100,80);
        stroke(240,120,120); //pink mouth
        strokeWeight(10); 
        fill(255)
        arc(400,440,100,80, 0,
        PI); 
        line(350,440,450,440); //mouth   

    }

    }

Blog – 01

One of the computational projects that inspired me was the animation in Pixar’s Brave. Specifically, the animation of Merida’s hair. Pixar spent three years developing the software, called Taz, that was needed to properly animate her hair. The movie production took four years. Taz made sure the interactions between the strands of hair were accurate and that each coil maintained its bounce and shape. It was also used to give Merida’s hair the realistic volume and movement that curly hair would have. Additionally, they used another software to imitate the way curly hair reacts to light.

Before Merida, animations mainly had straight hair since the technology for curly/wavy hair hadn’t been developed. Both Disney and Pixar have been wanting to animate characters with curly hair. For example, Ariel in “The Little Mermaid” was originally supposed to have wavy hair. Even Tiana in “Princess and the Frog” alludes to having curly hair with small face-framing pieces, however, her hair is tied back for most of the movie so it can’t be properly seen. Growing up with wavy/curly hair and seeing my favorite characters have straight shiny hair, impacted how I saw my hair and as a result made me wish my hair was also straight. With this technology, animators had the ability to create characters with diverse hair, which leads to more representation. We are starting to see this now, with characters in more recent films such as “Encanto”.

Project – 01

This is my project

sketch
function setup() {
    createCanvas(600, 792);
    background(255);
}

function draw() {
    noStroke();
    fill(60, 20, 54);                //purple1 
        beginShape();
            vertex(237.91, 189.02);
            vertex(353.36, 180.34);
            vertex(374.09, 500.85);
            vertex(353.36, 573.62);
            vertex(310.47, 655.23);
            vertex(216.51, 626.64);
            vertex(156.26, 571.49);
            vertex(134.81, 519.4);
            vertex(119.49, 417.79);
        endShape(CLOSE);
    fill(76, 28, 90);                //purple2
        beginShape();
            vertex(353.36, 180.34);
            vertex(342.26, 420.62);
            vertex(317.23, 379.83);
            vertex(311.58, 386.17);
            vertex(322.24, 406.59);
            vertex(328.48, 398.95);
            vertex(376.85, 511.23);
            vertex(353.36, 581.7);
            vertex(310.47, 655.23);
            vertex(163.4, 554.13);
            vertex(134.81, 440.77);
            vertex(156.26, 427.49);
            vertex(163.4, 386.64);
            vertex(182.81, 401.96);
            vertex(235.91, 415.23);
            vertex(218.55, 378.47);
            vertex(219.57, 359.06);
            vertex(195.06, 342.72);
            vertex(202.21, 305.96);
            vertex(234.89, 262.04);
            vertex(234.89, 233.45);
            vertex(256.34, 196.68);
            vertex(306, 196.68);
        endShape(CLOSE);
    fill(126, 53, 79);                 //purple3
        beginShape();
            vertex(355.53, 181.45);
            vertex(256.13, 212.85);
            vertex(217.06, 330.81);
            vertex(237.91, 337.7);
            vertex(232.38, 376.77);
            vertex(256.13, 425.79);
            vertex(189.49, 416.6);
            vertex(161.15, 464.85);
            vertex(225.49, 532.26);
            vertex(227.79, 543.74);
            vertex(208.64, 556.77);
            vertex(237.91, 583.57);
            vertex(256.13, 579.32);
            vertex(242.85, 533.02);
            vertex(264, 534.55);
            vertex(285.23, 521.79);
            vertex(306, 527.66);
            vertex(299.87, 494.72);
            vertex(318.17, 465.62);
            vertex(335.79, 457.96);
            vertex(335.79, 479.4);
            vertex(323.36, 474.64);
            vertex(309.57, 495.57);
            vertex(332.47, 499.57);
            vertex(345.49, 491.4);
            vertex(366.17, 509.53);
            vertex(355.53, 521.79);
            vertex(318.6, 526.72);
            vertex(327.79, 540.34);
            vertex(314.34, 546.81);
            vertex(336.3, 597.53);
            vertex(284.21, 609.11);
            vertex(296.13, 641.79);
            vertex(329.15, 670.38);
            vertex(386.34, 661.19);
            vertex(455.86, 508.05);
            vertex(334.51, 368.6);
            vertex(339.87, 419);
            vertex(321.49, 429.87);
            vertex(308.51, 369.62);
            vertex(333.23, 369.36);
        endShape(CLOSE);

    fill(78, 34, 6);                     //brown1
        beginShape();
            vertex(180.04, 365.83);
            vertex(197.91, 346.81);
            vertex(233.49, 335.4);
            vertex(308.21, 353.79);
            vertex(304.64, 362.3);
            vertex(224.98, 359.4);
            vertex(195.02, 369.62);
            vertex(180.04, 365.83);
        endShape(CLOSE);
        beginShape();
            vertex(388.04, 399.14);
            vertex(404.04, 352.51);
            vertex(474.85, 324.51);
            vertex(474.85, 381.36);
            vertex(470.6, 392.47);
            vertex(480.98, 416.54);
            vertex(478, 494.72);
            vertex(457.83, 526.38);
            vertex(447.23, 575.4);
            vertex(410.24, 623.47);
            vertex(251.36, 540); 
            vertex(283.53, 548.51);
            vertex(419.84, 539.28); 
        endShape(CLOSE);
        beginShape();
            vertex(168.16, 588.76);
            vertex(211.7, 623.47);
            vertex(314.34, 656.48); 
            vertex(326.55, 668.27);
            vertex(342.77, 668.76);
            vertex(373.06, 792); 
            vertex(145.06, 792); 
        endShape(CLOSE); 



    fill(130, 69, 20); 
        beginShape();
            vertex(237.91, 335.4);
            vertex(252.04, 335.4);
            vertex(322.68, 353.45);
            vertex(333.23, 365.83);
            vertex(287.28, 365.79); 
            vertex(285.57, 373.19);
            vertex(310.77, 387.23);
            vertex(306, 393.62);
            vertex(279.11, 373.19);
            vertex(257.15, 373.19);
            vertex(252.04, 356.37);
            vertex(306, 362.09);
            vertex(308.21, 353.79);
        endShape(CLOSE)
        beginShape();
            vertex(275.15, 376.77);
            vertex(314.34, 401.02);
            vertex(314.34, 408.43);
            vertex(292.64, 391.06);
            vertex(270.94, 380.85);
        endShape(CLOSE);
        beginShape();
            vertex(266.17, 387.83);
            vertex(278.51, 387.4);
            vertex(294.51, 399.14);
            vertex(292.64, 402.81);
            vertex(265.74, 402.81);
            vertex(269.4, 396.04);
        endShape(CLOSE);
        beginShape();
            vertex(252.04, 410.98);
            vertex(294.94, 405.36);
            vertex(314.34, 410.98);
            vertex(308.72, 419.35);
            vertex(279.11, 427.73);
            vertex(272.47, 414.04);
        endShape(CLOSE);
        beginShape();
            vertex(373.06, 365.79);
            vertex(415.83, 319.06);
            vertex(473.15, 332.34);
            vertex(470.6, 337.45);
            vertex(438.09, 339.49);
            vertex(408.47, 353.79);
            vertex(460.89, 345.62);
            vertex(474.15, 356.37);
            vertex(461.91, 374.55);
        endShape(CLOSE);
        triangle(386.34, 374.28, 388.63, 400.13, 411.33, 372.22);
        beginShape();
            vertex(421.19, 373.19);
            vertex(440.47, 373.19);
            vertex(447.23, 379.83);
            vertex(421.19, 378.04);
        endShape(CLOSE);
        beginShape();
            vertex(422.85, 384.81);
            vertex(421.19, 392.47);
            vertex(424.89, 400.13);
            vertex(412.38, 406.58);
            vertex(413.4, 414.04);
            vertex(404.04, 416.54);
            vertex(399.62, 408.43);
            vertex(392.47, 406.58);
            vertex(404.04, 541.45);
            vertex(420.81, 539.15);
            vertex(403.19, 562.99);
            vertex(392.98, 548.85);
            vertex(356.72, 552.94);
            vertex(361.32, 559.83);
            vertex(351.28, 561.36);
            vertex(344.21, 568.26);
            vertex(312.81, 565.7);
            vertex(312.81, 573.45);
            vertex(324.81, 576.43);
            vertex(342.77, 596.85);
            vertex(355.53, 600.26);
            vertex(356.72, 660.5);
            vertex(321.49, 666.3);
            vertex(327.79, 670.38);
            vertex(384.3, 664.26);
            vertex(402, 643.83);
            vertex(421.19, 578.32);
            vertex(440.47, 558.72);
            vertex(452.38, 526.38);
            vertex(473.15, 489.96);
            vertex(478, 416.54);
            vertex(442.38, 400.13);
            vertex(447.23, 390.17);
            vertex(439.06, 384.81); 
        endShape(CLOSE);
    fill(183, 95, 53);        //orange 
        beginShape();
            vertex(237.91, 324.51);
            vertex(259.79, 225.45);
            vertex(352.98, 189.02);
            vertex(461.91, 259.49);
            vertex(473.15, 289.45);
            vertex(473.15, 327.91);
            vertex(404.04, 349.19);
            vertex(392.81, 359.4);
            vertex(422.85, 359.4);
            vertex(460.55, 349.19);
            vertex(460.21, 369.36);
            vertex(386.68, 380);
            vertex(401.97, 422.55);
            vertex(429.57, 417.11);
            vertex(420.38, 410.3);
            vertex(440.81, 406.21);
            vertex(444.55, 415.74);
            vertex(461.91, 413.02);
            vertex(470.6, 424.6);
            vertex(470.6, 485.19);
            vertex(452.38, 513.45);
            vertex(430.94, 506.64);
            vertex(427.87, 523.66);
            vertex(404.04, 547.83);
            vertex(351.28, 552.94);
            vertex(337.32, 544.77);
            vertex(345.83, 529.11);
            vertex(362.85, 526.38);
            vertex(375.11, 513.11);
            vertex(351.28, 493.02);
            vertex(348.55, 469.53);
            vertex(354.34, 456.94);
            vertex(356.72, 435.49);
            vertex(347.53, 414.72);
            vertex(322.68, 353.45);
        endShape(CLOSE);
        beginShape();
            vertex(339.87, 572.17);
            vertex(389.4, 563.49);
            vertex(391.28, 570.13);
            vertex(376.13, 591.06);
            vertex(359.79, 595.15);
            vertex(341.57, 583.23);
        endShape(CLOSE);
        beginShape(); 
            vertex(299.87, 625.45);
            vertex(351.28, 613.19);
            vertex(377.15, 595.83);
            vertex(408.47, 556.34);
            vertex(416.64, 551.23);
            vertex(408.81, 617.62);
            vertex(399.96, 645.53);
            vertex(351.28, 661.19);
            vertex(306, 643.49);
        endShape(CLOSE);
        beginShape();
            vertex(197.91, 425.79);
            vertex(299.87, 425.79);
            vertex(314.34, 437.02);
            vertex(288.3, 504.43);
            vertex(254.6, 521.79);
            vertex(215.79, 502.38);
            vertex(200.98, 469.19);
        endShape(CLOSE);
        quad(259.96, 362.09, 275.15, 366.3, 275.15, 369.49, 259.96, 369.49);
    fill(227, 122, 43);
        beginShape();
            vertex(284.21, 218.47);
            vertex(328.13, 205.7);
            vertex(361.32, 201.62);
            vertex(462.94, 265.45);
            vertex(470.6, 326.72);
            vertex(392.47, 350.72);
            vertex(374.6, 396);
            vertex(392.47, 505.96);
            vertex(374.09, 509.53);
            vertex(358.77, 496.77); 
            vertex(351.62, 480.43);
            vertex(361.83, 468.17);
            vertex(361.83, 436.51);
            vertex(352.64, 418.13);
            vertex(335.79, 354.3);
            vertex(252.04, 319.06);
            vertex(264, 258.3);
        endShape(CLOSE);
        beginShape();
            vertex(375.11, 399.14);
            vertex(384.98, 399.14);
            vertex(394.17, 418.81);
            vertex(411.19, 426.98);
            vertex(456.13, 419.15);
            vertex(465.32, 431.4);
            vertex(463.62, 486.21);
            vertex(442.17, 503.91);
            vertex(416.3, 496.77);
            vertex(419.36, 517.19);
            vertex(406.09, 544.09);
            vertex(355.02, 551.23);
            vertex(342.77, 540.68);
            vertex(355.02, 532.51);
            vertex(361.32, 546.47);
            vertex(369.66, 523.66);
            vertex(407.45, 504.6);
            vertex(372.38, 409.62);
        endShape(CLOSE);
        circle(252.34, 472.46, 81.9);
        beginShape()
            vertex(401.66, 565.7);
            vertex(411.36, 565.7);
            vertex(404.04, 583.57);
            vertex(406.26, 623.91);
            vertex(390.94, 649.96);
            vertex(335.28,649.96);
            vertex(321.49, 628);
            vertex(370, 617.79);
            vertex(385.83, 602.47);
            vertex(384.3, 592.26);
        endShape(CLOSE);
        beginShape()
            vertex(422.85, 364);
            vertex(435.62, 358.13);
            vertex(437.91, 349.19);
            vertex(455.79, 349.19);
            vertex(461.91, 359.91);
            vertex(446.85,369.62);
        endShape(CLOSE); 
        triangle(351.28, 581.19, 374.09, 565.7, 384.3, 576.77);
    fill(251, 151, 55);
        beginShape();
            vertex(306, 220);
            vertex(364.38, 215.91);
            vertex(443.53, 253.19);
            vertex(463.45, 284.84);
            vertex(466, 322.64);
            vertex(406.77, 342.55);
            vertex(377.66, 359.4);
            vertex(374.47, 388.51);
            vertex(373.06, 417.79);
            vertex(399.62, 483.83);
            vertex(392.47, 500.85);
            vertex(382.26, 507.66);
            vertex(361.83, 488.6);
            vertex(369.66, 467.15);
            vertex(364.89, 427.32);
            vertex(351.62, 396);
            vertex(346.51, 354.81);
            vertex(290.34, 319.06);
            vertex(306, 297.62);
            vertex(295.45, 264.94);
        endShape(CLOSE);
        beginShape();
            vertex(379.17, 415.48);
            vertex(410.6, 430.38);
            vertex(425.4, 430.38);
            vertex(443.53, 419.91);
            vertex(460.89, 426.81);
            vertex(460.89, 475.32);
            vertex(454.51, 492.17);
            vertex(435.36, 494.21);
            vertex(411.36, 476.09);
            vertex(411.11, 516.68);
            vertex(402.94, 532.77);
            vertex(370.77, 545.28);
            vertex(370.77, 527.15);
            vertex(393.74, 509.79);
            vertex(403.19, 487.06);
        endShape(CLOSE);
        beginShape();
            vertex(331.7, 632.6);
            vertex(382.77, 620.34);
            vertex(392.98, 628.51);
            vertex(386.34, 643.83);
            vertex(356.21, 643.83);
        endShape(CLOSE);
        circle(256.55, 469.11, 60.78);

    fill(254, 187, 79);    //yellow 
        beginShape();
            vertex(356.72, 373.19);
            vertex(373.06, 379.3);
            vertex(373.06, 414.04);
            vertex(364.89, 414.04);
            vertex(356.72, 396);
        endShape(CLOSE);
        beginShape();
            vertex(374.98, 420.62);
            vertex(425.15, 438.55);
            vertex(450.68, 430.38);
            vertex(457.83, 448.77);
            vertex(453.74, 478.38);
            vertex(443.53, 482.47);
            vertex(411.87, 467.15);
            vertex(392.47, 472.97);
        endShape(CLOSE)
        beginShape();
            vertex(373.06, 433.45);
            vertex(399.62, 491.66);
            vertex(392.47, 500.85);
            vertex(375.11, 487.57);
            vertex(377.15, 476.34);
        endShape(CLOSE);
        beginShape(); 
            vertex(272.47, 391.06);
            vertex(287.28, 393.62);
            vertex(287.28, 400);
            vertex(270.94, 401.02);
        endShape(CLOSE);
        quad(424.89, 387.23, 440.47, 387.23, 440.47, 398.21, 424.89, 398.21);
        ellipse(392.47, 284.83, 95.34, 105.14);

    fill(21, 6, 1);                       //black hair 
        beginShape();
            vertex(90.17, 131.15);
            vertex(171.91, 65.79);
            vertex(333.23, 54.55);
            vertex(442.38, 120.94);
            vertex(507.36, 254.21);
            vertex(528, 792);
            vertex(321.49, 792);
            vertex(343.77, 668.76);
            vertex(384.3, 664.26);
            vertex(402, 643.83);
            vertex(409.83, 623.4);
            vertex(447.23, 575.4);
            vertex(457.83, 526.38);
            vertex(478, 494.72);
            vertex(480.98, 416.54);
            vertex(470.6, 392.47);
            vertex(474.85, 381.36);
            vertex(473.15, 289.45);
            vertex(457.83, 262.24);
            vertex(352.98, 189.02);
            vertex(240.81, 215.91);
            vertex(223.96, 280.26);
            vertex(169.57, 319.06);
            vertex(161.32, 346.81);
            vertex(181.74, 388.85);
            vertex(151.79, 352.51);
            vertex(149.4, 425.79);
            vertex(138.15, 381.74);
            vertex(123.29, 410.44);
            vertex(141.34, 535.26);
            vertex(156.26, 571.49);
            vertex(211.7, 620.34);
            vertex(248.47, 792);
            vertex(0, 792);
            vertex(0, 455.91);
        endShape(CLOSE);
    fill(40, 20, 16);                          //brown2
        beginShape();
            vertex(146.85, 147.49);
            vertex(154.86, 80.66);
            vertex(173.75, 65.92);
            vertex(274.94, 58.66);
            vertex(294.51, 85.7);
            vertex(265.32, 77.02);
            vertex(244.13, 93.87);
            vertex(194.68, 119.91);
            vertex(186.68, 114.3);
            vertex(146.85, 147.49);
        endShape(CLOSE);
        beginShape();
            vertex(251.36, 115.83);
            vertex(314.34, 101.02);
            vertex(361.32, 172.51);
            vertex(355.53, 182.21);
            vertex(327.11, 190.67);
            vertex(290.34, 189.02);
            vertex(310.77, 167.91);
            vertex(252.04, 155.66);
            vertex(285.57, 136.77);
        endShape(CLOSE);
    fill(56, 17, 4);
        beginShape();
            vertex(150.94, 147.49);
            vertex(150.94, 95.4);
            vertex(180.04, 62.21);
            vertex(252.04, 56.09);
            vertex(247.45, 73.96);
            vertex(230.09, 64.77);
            vertex(202, 98.47);
            vertex(180.04, 89.79);
        endShape(CLOSE);
        beginShape();
            vertex(327.11, 180.17);
            vertex(356.72, 171.49);
            vertex(322, 114.81);
            vertex(317.91, 137.28);
            vertex(337.31, 159.23);
            vertex(327.11, 180.17);
        endShape(CLOSE);













            



        



}

Project 01

This is my project

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

function draw() {
    
    background(random(0,75),random(0,75),random(0,75));

    strokeWeight(0);
    fill(random(210,255),random(210,255),random(210,255),75);
    rect(0,0,100,200)

    strokeWeight(0);
    fill(255);
    rect(50,80,100,55); //hair back

    strokeWeight(0);
    fill(255);
    quad(60,160,140,160,75,50,125,50);   //hair back

    strokeWeight(0);
    fill(255);
    quad(55,145,145,145,60,70,140,70);   //hair back

    strokeWeight(0);
    fill(random(50,100),random(50,100),random(50,100));
    triangle(100,165,175,200,25,200);    //shoulders

    strokeWeight(0);
    fill(random(100,200),random(100,200),random(100,200));
    ellipse(100,100,90,125);    //head

    strokeWeight(0);
    strokeWeight(0);
    rect(85,100,30,77); //neck

    strokeWeight(0);
    strokeWeight(0);
    triangle(100,185,115,177,85,177);    //more neck

    fill(random(210,255),random(210,255),random(210,255),75); //face shading
    beginShape();
    vertex(100,100);
    vertex(110,120);
    vertex(100,160);
    vertex(145,160);
    vertex(145,37.5);
    vertex(100,37.5);
    endShape();

    stroke(100,0,50);
    fill(20,0,20);
    triangle(75,80,95,110,60,120);   //right eye

    fill(random(210,255),random(210,255),random(210,255));
    circle(77,100,15);    //right pupil

    circle(120,100,30); //left eye

    stroke(random(0,50),random(0,50),random(0,50));
    strokeWeight(5);
    line(110,100,130,100);  //left pupil

    stroke(255);
    strokeWeight(3);
    fill(0);
    arc(100,140,50,20,15.7,PI+PI,PIE);  //mouth

    strokeWeight(0); 
    fill(255);
    square(55,38,45); //hair front

    strokeWeight(0); 
    fill(255);
    arc(100,38,50,20,10.5,PI,PIE) //hair front

    strokeWeight(0); 
    fill(255);
    beginShape();
    vertex(100,38);
    bezierVertex(100,38,100,100,150,60)
    bezierVertex(100,20,120,70,150,50)
    endShape();     //hair front

     noloop()


}