SectionB – Page 29 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 01 – Self Portrait

function setup() {
    createCanvas(500, 1000);
    background(100);
}

function draw(){
//ears
circle(90,490,50);
circle(408,490,50);

//long hair 
fill(34,25,8);
rect(106,350,288,600);

//colored shirt 
fill(0,204,204); 
rect(70,800,370,200); 

//arm lines on shirt 
line(150,920,150,1000);
line(360,920,360,1000);

//neck
fill(242,194,153);
triangle(200,830,250,700,300,830);

//face shape 
fill(242,194,153);
ellipse(250,500,325,500);

//hair - front bangs 
fill(34,25,8);
arc(250,390,300,280,311,0);
noStroke(); 
fill(242,194,153);
triangle(230,400,250,360,270,400);
stroke(0,0,0);
strokeWeight(3); 

//bigger circles for eyes
fill(43,27,9); 
circle(175, 470, 60);
fill(43,27,9); 
circle(325,470,60); 

//nose 
fill(188,159,176); 
triangle(220,550,250,500,280,550)

//mini circles for pupils 
fill(255,255,255); 
circle(185, 476, 30);
fill(255,255,255); 
circle(315,476,30); 

//eyebrows 
fill(65,53,19);
rect(140,405,70,20);
fill(65,53,19); 
rect(295, 405,70,20); 

//mouth 
fill(242,194,153);
arc(255,650,120,70,0,90);

stroke(0,0,0);
strokeWeight(3); 
}

Project 01: Self Portrait

My face.

portrait001.js

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

function draw() {background(255);
	stroke(255,0,0)
 stroke(255,0,0)
 rect(8,8,354,379)
  line(220,120,230,118)
  line(230,118,235,120)
  line(235,120,242,124)
  line(242,124,240,126)
  line(240,126,234,124)
  line(234,124,226,123)
  line(226,123,222,124)
  fill(255)
  ellipse(222,130,10,12)
  
  line(220,120,210,125)
  line(210,125,205,110)
  line(205,110,202,120)
  line(202,120,201,122)
  line(201,122,200,130)
  line(200,130,205,140)
  line(205,140, 210,150)
  line(210,150,215, 155)


  line(227,176,222, 180)
  line(222,180,218,183)
  line(218,183,212,175)
  line(212,175,213,174)
  line(213,174,217,175)
  line(217,175,217,180)
  line(217,180,215,183)
  line(215,155,225,165)
  line(225,165,227,175)
  
  line(215,183,210,186)
  line(210,186,208,194)
  line(208,194,211,200)
  line(211,201,208,204)
  line(208,204,202,199)
  line(202,199,200,200)
  line(200,200,192,202)
  line(192,202,182,206)
  line(182,206,175,209)
  line(175,209,170,213)
  line(170,213,169,213)
  line(169,213,172,215)
  line(172,215,176,218)
  line(176,218,180,217)
  line(180,217,184,216)
  line(184,216,192,215)
  line(192,215,198,212)
  line(198,212,200,212)
  line(200,212,205,216)
  line(205,216,206,218)
  line(206,218,210,214)
  line(210,214,213,213)
  line(213,213,217,216)
  line(217,216,223,214)
  line(223,214,228,217)
  line(228,217,226,220)
  line(226,220,223,223)
  line(223,223,217,226)
  line(217,226,210,231)
  line(210,231,207,232)
  line(207,232,197,229)
  line(197,229,190,228)
  line(190,228,182,225)
  line(182,225,180,228)
  line(180,228,188,234)
  
  line(188,234,198,236)
  line(198,236,204,242)
  line(204,242,204,246)
  line(204,246,200,249)
  line(200,249,197,249)
  line(197,249,195,249)
  line(195,249,192,251)
  line(192,251,190,255)
  line(190,255,190,259)
  line(190,259,187,262)
  line(187,262,184,264)
  line(184,264,181,262)
  line(181,262,179,262)
  line(179,262,165,256)
  line(165,256,160,252)
  line(160,252,146,242)
  line(146,242,136,236)
  noFill()
  arc(136,285,60,100,300,PI/8.0) 
  
  
  
  
 
  
  line(228,217,230,215)
  line(230,215,230,213)
  line(230,213,225,207)
  line(225,207,217,203)




  stroke(0,0,255)
  rect(12,12,354,379)
  line(224,124,234,122)
  line(234,122,239,124)
  line(239,124,246,128)
  line(246,128,244,130)
  line(244,130,238,128)
  line(238,128,230,127)
  line(230,127,226,128)
  fill(255)
  ellipse(226,134,10,12)
  
  line(224,124,214,129)
  line(214,129,209,114)
  line(209,114,206,124)
  line(206,124,205,126)
  line(205,126,204,134)
  line(204,134,209,144)
  line(209,144, 214,154)
  line(214,154,219, 159)


  line(231,180,226, 184)
  line(226,184,222,187)
  line(222,187,216,179)
  line(216,179,217,178)
  line(217,178,221,179)
  line(221,179,221,184)
  line(221,184,219,187)
  line(219,159,229,169)
  line(229,169,231,179)
  
  line(219,187,214,190)
  line(214,190,212,198)
  line(212,198,215,204)
  line(215,205,212,208)
  line(212,208,206,203)
  line(206,203,204,204)
  line(204,204,196,206)
  line(196,206,186,210)
  line(186,210,179,213)
  line(179,213,174,217)
  line(174,217,173,217)
  line(173,217,176,219)
  line(176,219,180,222)
  line(180,222,184,221)
  line(184,221,188,220)
  line(188,220,196,219)
  line(196,219,202,216)
  line(202,216,204,216)
  line(204,216,209,220)
  line(209,220,210,222)
  line(210,222,214,218)
  line(214,218,217,217)
  line(217,217,221,220)
  line(221,220,227,218)
  line(227,218,232,221)
  line(232,221,230,224)
  line(230,224,227,227)
  line(227,227,221,230)
  line(221,230,214,235)
  line(214,235,211,236)
  line(211,236,201,233)
  line(201,233,194,232)
  line(194,232,186,229)
  line(186,229,184,232)
 
  
  line(232,221,234,219)
  line(234,219,234,217)
  line(234,217,229,211)
  line(229,211,221,207)
  
  line(184,232,192,238) 
  line(192,238,202,240)
  line(202,240,208,246)
  line(208,246,208,250)
  line(208,250,204,253)
  line(204,253,201,253)
  line(201,253,199,253)
  line(199,253,196,255)
  line(196,255,194,259)
  line(194,259,194,263)
  line(194,263,191,266)
  line(191,266,188,268)
  line(188,268,185,266)
  line(185,266,183,263)
  line(183,263,169,260)
  line(169,260,164,256)
  line(164,256,150,246)
  line(150,246,140,240)
  noFill()
  arc(140,289,60,100,300,PI/8.0) 
  
  
}

Project: Self Portrait

selfportrait

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

function draw() {
    //background ceiling
    fill(255, 164, 83);
    noStroke();
    quad(0,0,114,70,250,71,250,0)

    //background back wall
    fill(255, 139, 35);
    noStroke();
    rect(114,70,249,248);

    //background front wall
    fill(255, 177, 108);
    noStroke();
    quad(1,0,115,69,116,249,0,221)

    //ponytail
    fill(35, 25, 15);
    noStroke();
    beginShape();
    vertex(186,86);
    vertex(197,87);
    vertex(206,99);
    vertex(209,121);
    vertex(204,145);
    vertex(199,165);
    vertex(192,185);
    vertex(192,205);
    vertex(207,226);
    vertex(192,221);
    vertex(174,212);
    vertex(165,201);
    vertex(159,186);
    endShape();

    //right shoulder
    fill(163, 103, 146);
    noStroke();
    beginShape();
    vertex(163,188);
    vertex(189,204);
    vertex(212,215);
    vertex(229,219);
    vertex(250,226);
    vertex(250,250);
    vertex(157,250);
    vertex(165,208);
    endShape();

    //left shoulder
     fill(153, 98, 138);
    noStroke();
    beginShape();
    vertex(72,191);
    vertex(112,249);
    vertex(0,249);
    vertex(0,222);
    vertex(21,213);
    vertex(45,204);
    endShape();

    //ear
	fill(227, 180, 156);
    noStroke();
    beginShape();
    vertex(174,119);
    vertex(189,114);
    vertex(199,119);
    vertex(197,136);
    vertex(194,150);
    vertex(186,165);
    vertex(176,175);
    vertex(164,174);
    vertex(174,146);
    vertex(175,131);
    endShape();

    //ear shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(180,123);
    vertex(189,121);
    vertex(194,125);
    vertex(193,134);
    vertex(188,144);
    vertex(183,156);
    vertex(175,158);
    vertex(184,144);
    vertex(185,133);
    endShape();

    //neck
    fill(227, 180, 156);
    noStroke();
    beginShape();
    vertex(159,176);
    vertex(133,194);
    vertex(93,204);
    vertex(71,194);
    vertex(97,227);
    vertex(102,250);
    vertex(158,250);
    vertex(171,224);
    vertex(174,202);
    vertex(163,190);
    endShape();
    
    //face
	fill(235, 186, 161);
    noStroke();
    beginShape();
    vertex(102,29);
    vertex(74,45);
    vertex(66,63);
    vertex(61,84);
    vertex(55,101);
    vertex(49,121);
    vertex(48,141);
    vertex(55,160);
    vertex(62,176);
    vertex(69,193);
    vertex(73,209);
    vertex(87,217);
    vertex(107,217);
    vertex(135,204);
    vertex(155,189);
    vertex(171,164);
    vertex(176,138);
    vertex(179,116);
    vertex(184,90);
    vertex(182,68);
    vertex(170,50);
    vertex(139,34);
    vertex(123,28);
    endShape();
    
    //nose shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(91,96);
    vertex(93,107);
    vertex(90,121);
    vertex(86,135);
    vertex(80,140);
    vertex(74,144);
    vertex(74,151);
    vertex(80,156);
    vertex(72,170);
    vertex(64,146);
    vertex(80,125);
    vertex(85,109);
    vertex(76,88);
    endShape();

    //nostril shadow
    fill(170, 122, 90);
    noStroke();
    beginShape();
    vertex(80,155);
    vertex(87,152);
    vertex(90,158);
    vertex(97,161);
    vertex(106,156);
    vertex(113,160);
    vertex(91,172);
    vertex(72,170);
    endShape();

    //right cheek shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(122,145);
    vertex(122,153);
    vertex(118,159);
    vertex(112,159);
    vertex(134,179);
    endShape();

    //left eyelash
    fill(0);
    noStroke();
    beginShape();
    vertex(55,108);
    vertex(65,103);
    vertex(74,103);
    vertex(82,106);
    vertex(88,115);
    endShape();

    //lips
    fill(227, 149, 147);
    noStroke();
    beginShape();
    vertex(71,171);
    vertex(82,169);
    vertex(90,170);
    vertex(93,172);
    vertex(100,171);
    vertex(109,171);
    vertex(127,178);
    vertex(116,183);
    vertex(101,187);
    vertex(89,187);
    vertex(77,179);
    endShape();

    //top lip
    fill(214, 124, 122);
    noStroke();
    beginShape();
    vertex(71,171);
    vertex(82,169);
    vertex(90,170);
    vertex(93,172);
    vertex(100,171);
    vertex(109,171);
    vertex(126,177);
    vertex(117,179);
    vertex(102,179);
    vertex(90,178);
    vertex(81,176);
    endShape();

    //nose highlight
    fill(242, 198, 169);
    noStroke();
    circle(92, 150, 22);

    //right cheek highlight
    fill(242, 198, 169);
    noStroke();
    beginShape();
    vertex(162,115);
    vertex(150,130);
    vertex(141,136);
    vertex(133,142);
    vertex(144,160);
    vertex(152,184);
    vertex(165,157);
    vertex(165,131);
    endShape();

    //left cheek highlight
    fill(242, 198, 169);
    noStroke();
    beginShape();
    vertex(83,123);
    vertex(65,119);
    vertex(56,114);
    vertex(55,128);
    vertex(65,150);
    vertex(74,136);
    endShape();

    //left eye
    fill(255, 243, 235);
    noStroke();
    beginShape();
    vertex(58,110);
    vertex(67,107);
    vertex(75,108);
    vertex(88,117);
    vertex(79,118);
    vertex(69,115);
    endShape();

    //left iris
    fill(59, 43, 24);
    circle(71,111,12);

    //left pupil
    fill(0);
    circle(71,111,6);

    //right eyelash
    fill(0);
    noStroke();
    beginShape();
    vertex(106,118);
    vertex(116,112);
    vertex(130,111);
    vertex(141,117);
    vertex(145,123);
    vertex(128,123);
    endShape();

    //right eye
    fill(255, 243, 235);
    noStroke();
    beginShape();
    vertex(110,119);
    vertex(122,115);
    vertex(130,116);
    vertex(141,121);
    vertex(132,122);
    vertex(117,122);
    endShape();

    //right iris
    fill(59, 43, 24);
    circle(127,119,12);

    //right pupil
    fill(0);
    circle(127,119,6);

    //left highlight
    fill(255)
    circle(69,109,2)

    //right highlight
    fill(255)
    circle(125,117,2)

    //hair
    fill(45, 33, 18);
    noStroke();
    beginShape();
    vertex(153,40);
    vertex(168,43);
    vertex(181,52);
    vertex(185,64);
    vertex(188,76);
    vertex(187,87);
    vertex(183,104);
    vertex(180,119);
    vertex(175,130);
    vertex(167,128);
    vertex(161,109);
    vertex(154,96);
    vertex(147,86);
    vertex(147,72);
    endShape();

    //bang shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(58,80);
    vertex(55,94);
    vertex(94,95);
    vertex(104,80);
    vertex(110,95);
    vertex(146,102);
    vertex(161,118);
    vertex(161,95);
    vertex(97,64);
    endShape();

    //bangs
    fill(59, 43, 24);
    noStroke();
    beginShape();
    vertex(110,25);
    vertex(95,20);
    vertex(71,29);
    vertex(55,59);
    vertex(58,84);
    vertex(87,91);
    vertex(102,70);
    vertex(106,84);
    vertex(115,95);
    vertex(159,108);
    vertex(161,68);
    vertex(156,46);
    vertex(146,27);
    vertex(136,21);   
    endShape();

    //left eyebrow
    fill(45, 33, 18);
    noStroke();
    beginShape();
    vertex(55,89);
    vertex(75,88);  
    vertex(91,96);
    vertex(89,103);
    vertex(73,94);  
    vertex(55,92);
    vertex(55,89);    
    endShape();

    //right eyebrow
    fill(45, 33, 18);
    noStroke();
    beginShape();
    vertex(110,100);
    vertex(128,99);
    vertex(144,102);
    vertex(154,110);
    vertex(158,115);
    vertex(135,106);
    vertex(109,106);
    endShape();

    //bright cheek highlight
    fill(255, 225, 197);
    noStroke();
    triangle(153,124,133,138,146,158)

    //left cheek blush
    fill(226, 159, 158);
    noStroke();
    circle(64,131,20);

    //right cheek blush
    fill(226, 159, 158);
    noStroke();
    circle(135,142,25);

    //right lens
    fill(255, 255, 255, 60);
    stroke(10);
    strokeWeight(2);
    circle(125,128,45)

    //left lens
    fill(255, 255, 255, 60);
    stroke(10);
    strokeWeight(2);
    circle(68,118,40)

    //nose piece
    arc(96, 118, 18, 8, 0, PI, PI + QUARTER_PI);

    //frame
    line(146,121,187,113);

    //bright nose highlight
    fill(255, 225, 197);
    noStroke();
    circle(100,149,10)

    //lip highlight
    fill(247, 200, 206);
    noStroke();
    ellipse(104, 180, 8, 3)



}

Project 1 – Self Portrait

This is my code.

Portrait Project Download

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

function draw() {
	background(100);
	fill(163, 116, 96);
	noStroke();
	ellipse(300, 400, 320, 450 );
	fill(111, 84, 54)
	quad(151, 230, 227, 100, 480, 90, 400, 230)
	noFill();
	stroke(0);
	strokeWeight(3)
	arc(187, 363, 189, 189, PI + HALF_PI + QUARTER_PI, TWO_PI + QUARTER_PI);
	arc(415, 363, 189, 189, HALF_PI + QUARTER_PI, PI + HALF_PI);
	arc(265, 450, 50, 50, HALF_PI, PI + QUARTER_PI);
	arc(335, 450, 50, 50, PI + HALF_PI + QUARTER_PI, TWO_PI + HALF_PI);
	fill(0);
	noStroke();
	ellipse(209, 363, 60, 48)
	fill(100);
	noStroke();
	arc(200, 400, 320, 450, PI, PI + HALF_PI);
	fill(163, 116, 96);
	noStroke();
	arc(100, 400, 125, 350, PI, PI + HALF_PI);
	fill(0);
	circle(390, 363, 60);
	fill(34, 70, 144)
	ellipse(380, 363, 15, 35);
	ellipse(198, 363, 15, 35);
	fill(157, 78, 74)
	quad(230, 500, 335, 485, 330, 515, 225, 510)
	quad(230, 510, 335, 510, 330, 525, 225, 520)
	fill(0)
	triangle(240, 510, 325, 498, 330, 510)
}

Project: Self-Portrait

This project was challenging because it was difficult to figure out the coordinates of points for the shapes so that they would be placed and sized properly.

portrait



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

function draw() {
	background(255,215,54);
    //Head construction
    noFill(); 62
    stroke(0);
    strokeWeight(0);
    circle(300,250,282);
    line(159,256,441,256); //eyebrow line
    line(159,403,441,403); //nose line
    line(159,477,441,477); //mouth line
    line(159,250,159,450); //left side
    line(441,250,441,450); //right side
    line(230,552,370,552); //jaw line
    line(159,450,230,552); //left jaw
    line(441,450,370,552); //right jaw
    line(230,552,230,109); //left construction line
    line(370,552,370,109); //right construction line
    //flats
    fill(153,102,51);
    noStroke();
    circle(300,250,282);
    quad(159,256,159,450,441,450,441,256);
    quad(159,450,441,450,370,552,230,552);
    
    //shadows
    fill(84,26,14,200);
    triangle(230,552,159,380,159,450); //left jaw shadow
    triangle(441,380,441,450,370,552); //right jaw shadow
    ellipse(231,289,106,66); //left eye socket shadow
    ellipse(359,289,106,66); //right eye socket shadow
    triangle(284,289,270,370,255,380); //left nose plane
    triangle(306,289,330,370,345,380); //right nose plane
    triangle(270,390,300,403,300,393); //bottom nose shadow
    triangle(300,403,300,393,330,390);
    quad(205,450,210,490,300,477,300,438); //lip shadow
    quad(300,477,385,490,390,450,370,445);
    triangle(230,552,370,552,300,530); //chin shadow
    quad(159,370,159,305,200,365,200,400); //left cheekbone shadow
    quad(441,370,441,305,400,365,400,400); //right cheekbone shadow
    quad(159,265,165,170,200,100,200,238); //forehead shadow left
    quad(441,265,435,170,400,100,400,238); //forehead shadow right


    
    //facial features
    noFill();
    stroke(84,26,14,230);
    strokeWeight(5);
    curve(270,370,270,370,255,380,270,390); //left nose
    curve(255,380,255,380,270,390,270,390);
    curve(270,390,270,390,300,403,330,390); //middle of nose
    curveVertex(300,403);
    curve(300,403,300,403,330,390,330,390);
    curve(330,390,330,390,345,380,330,370); //right nose
    curve(345,380,345,380,330,370,330,370);
    noStroke();
    fill(153,51,51,205);
    beginShape(); //lower lip
        curveVertex(230,445);
        curveVertex(265,470);
        curveVertex(300,477);
        curveVertex(335,470);
        curveVertex(370,445);
        curveVertex(300,410);
    endShape(CLOSE);
    fill(102,102,102);
    ellipse(231,289,50,27); //left eyeball
    ellipse(359,289,50,27); //right eyeball
    fill(255,150);
    ellipse(231,289,50,27); //left eyeball
    ellipse(359,289,50,27); //right eyeball
    fill(36,24,15);
    circle(231,289,27); //left iris
    circle(359,289,27); //right iris
    fill(0);
    circle(231,289,10); //left pupil
    circle(359,289,10); //right pupil
    noFill();
    stroke(84,26,14);
    strokeWeight(5);
    curve(190,289,190,289,231,276,270,285); //eyelid line left
    curveVertex(231,276);
    curve(231,276,231,276,270,285,270,285);
    curve(318,285,318,285,359,276,398,285); //eyelid line right
    curve(359,276);
    curve(359,276,359,276,398,285,398,285);


       //hair
    noStroke();
    fill(0);
    beginShape(); //head hair
        curveVertex(165,325);
        curveVertex(173,200);
        vertex(175,200);
        curveVertex(179,190);
        curveVertex(185,185);
        curveVertex(215,175);
        vertex(265,180);
        vertex(270,182);
        vertex(320,190);
        curveVertex(345,175);
        vertex(430,200);
        vertex(430,310);
        vertex(443,325);
        curveVertex(450,185);
        curveVertex(447,50);
        vertex(445,35);
        vertex(400,45);
        vertex(350,50);
        curveVertex(300,20);
        curveVertex(250,40);
        curveVertex(225,35);
        curveVertex(215,37);
        curveVertex(200,35);
        curveVertex(200,50);
        curveVertex(190,60);
        curveVertex(190,70);
        curveVertex(175,85);
        curveVertex(170,90);
        curveVertex(160,150)
        curveVertex(165,170);
        vertex(150,300);
    endShape(CLOSE);
    beginShape(); //left eyebrow
        vertex(175,260);
        curveVertex(200,246);
        vertex(270,260);
        vertex(270,250);
        curveVertex(235,234);
        curveVertex(200,236);
        curveVertex(190,240);
    endShape(CLOSE);
    beginShape(); //right eyebrow
        vertex(312,260);
        vertex(312,250);
        curveVertex(347,234);
        curveVertex(382,236);
        curveVertex(392,240);
        vertex(407,260);
        curveVertex(382,246);
    endShape(CLOSE);
    beginShape(); //beard
        vertex(159,450);
        curveVertex(190,520);
        curveVertex(220,555);
        curveVertex(300,590); //beard center point
        curveVertex(381,555);
        curveVertex(410,520);
        vertex(441,450);
        curveVertex(380,530);
        curveVertex(350,537);
        curveVertex(300,540);
        curveVertex(250,537);
        curveVertex(220,530);
    endShape(CLOSE);
    quad(210,413,300,406,300,438,205,450); //mustache left
    quad(300,406,300,438,390,450,385,413); //mustache right
        

        



}

Self-Portrait

Portrait

function setup() {
    createCanvas(800,600);
    background(0);

}

function draw() {
    //reference grid
      stroke(80,80,80,10)
      line(0,100,799,100);
      line(0,200,799,200);
      line(0,300,799,300);
      line(0,400,799,400);
      line(0,500,799,500); // x grid lines
      line(200,0,200,599);
      line(400,0,400,599);
      line(600,0,600,599); // y grid lines
      noLoop();

    //background
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,150,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,250,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,350,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,450,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,550,50,50);

      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,150,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,250,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,350,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,450,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,550,50,50);

      fill(random(0,225),random(0,225),random(0,225));
          ellipse(300,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
          ellipse(500,50,50,50);

    //body
      fill(255,255,245);
      rect(200,430,400,300,90);
      fill(235,235,235);
      quad(275,430,370,470,350,410,280,420)
      quad(800-275,430,800-370,470,800-350,410,800-280,420)
      fill(20,20,20);
      line(290,510,290,599);
      line(510,510,510,599);
      textSize(15);
      text('15104',460,520);

    //headshape
      loop();
      fill(253, 211, 159);
      ellipse(400,300,270,300);
      stroke(0,0,0);
      strokeWeight(2);

    //nose
      stroke(0,0,0);
      strokeWeight(4)
      line(400,280,410,325);
      line(410,325,395,335);
      arc(390,335,10,5,PI,0);
      arc(400,335,7,3,PI,0);


    //mouth
      fill(0,0,0)
      noStroke();
      arc(390,380,60,35,0,PI);
      fill(255,255,255);
      arc(390,380,45,20,0,PI);

    //eyebrows
      fill(0,0,0)
      quad(315,280,370,270,360,260,325,268);
      quad(800-315,280,800-370,270,800-360,260,800-325,268);

    //eyes
      ellipse(340,280,30);
      ellipse(800-340,280,30);

    //glasses
      noFill();
      stroke(104,63,18);
      ellipse(340,280,80);
      ellipse(800-340,280,80);
      arc(400,290,40,15,PI,0)

    //hat
      fill(42,79,109);
      noStroke();
      arc(400,260,260,220,PI,0);
      fill(34,29,59,100);
      rect(273,230,255,30);
      fill(34,29,59);
      ellipse(400,150,20,20);

}

Project 1- Self Portrait

portrait

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

function draw() {

//hair
    background(252, 225, 152);
    fill(56, 39, 35);
    rect(140, 60, 320, 540, 130, 130, 70, 70);

//head
	fill(240, 208, 180);
	noStroke();
    rect(175, 100, 250, 300, 100, 180, 100, 100);
    rect(265, 370, 70, 120, 30);
    rect(170, 461, 260, 96, 30);
    ellipse(431, 300, 24, 47);
    noFill();

//eyebrows
    stroke(74, 50, 34);
    strokeWeight(8);
    line(290, 200, 340, 200);
    line(180, 200, 225, 200);
    noStroke();

//nose
    stroke(236, 193, 156);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(240, 268);
    curveVertex(240, 268);
    curveVertex(231, 280);
    curveVertex(229, 293);
    curveVertex(235, 301);
    curveVertex(235, 301);
    endShape();
    noStroke();

//moles
    fill(74, 20, 0);
    ellipse(307, 362, 2, 2);
    ellipse(347, 278, 5, 5);
    ellipse(212, 286, 3, 3);

//eyes
    fill(255);
    noStroke();
    ellipse(310, 236, 36, 21);
    ellipse(204, 236, 36, 21);
    stroke(0);
    strokeWeight(4);
    noFill();
    beginShape();
    curveVertex(292, 231);
    curveVertex(292, 231);
    curveVertex(309, 223);
    curveVertex(328, 230);
    curveVertex(340, 233);
    curveVertex(351, 226);
    curveVertex(351, 226);
    endShape();
    beginShape();
    curveVertex(223, 231);
    curveVertex(223, 231);
    curveVertex(208, 223);
    curveVertex(188, 230);
    curveVertex(188, 230);
    endShape();
    fill(0);
    ellipse(310, 235, 18, 18);
    ellipse(206, 235, 18, 18);
    noStroke();

//shirt
    fill(240, 208, 180);
    noStroke();
    rect(415, 529, 55, 200);
    rect(130, 529, 55, 200);
    fill(255);
    noStroke();
    beginShape();
    curveVertex(413, 550);
    curveVertex(413, 550);
    curveVertex(416, 517);
    curveVertex(421, 494);
    curveVertex(427, 476);
    curveVertex(441, 477);
    curveVertex(456, 487);
    curveVertex(467, 500);
    curveVertex(474, 516);
    curveVertex(475, 530);
    curveVertex(464, 537);
    curveVertex(451, 545);
    curveVertex(432, 552);
    curveVertex(432, 552);
    endShape();
    beginShape();
    curveVertex(185, 550);
    curveVertex(185, 550);
    curveVertex(182, 516);
    curveVertex(178, 493);
    curveVertex(172, 476);
    curveVertex(157, 477);
    curveVertex(140, 487);
    curveVertex(132, 500);
    curveVertex(125, 516);
    curveVertex(124, 529);
    curveVertex(135, 537);
    curveVertex(148, 545);
    curveVertex(167, 551);
    curveVertex(167, 551);
    endShape();
    rect(180, 550, 240, 100);

//hair 2 
    stroke(232, 222, 218);
    strokeWeight(30);
    line(189, 155, 189, 570);
    line(372, 130, 372, 570);
    noFill();
    beginShape();
    curveVertex(295, 104);
    curveVertex(295, 104);
    curveVertex(336, 103);
    curveVertex(364, 114);
    curveVertex(374, 142);
    curveVertex(374, 142);
    endShape();
    beginShape();
    curveVertex(189, 159);
    curveVertex(189, 159);
    curveVertex(196, 133);
    curveVertex(222, 112);
    curveVertex(248, 107);
    curveVertex(270, 106);
    curveVertex(270, 106);
    endShape();
    noStroke();
    fill(56, 39, 35);
    rect(386, 100, 39, 485, 60);

//earring
    noFill();
    stroke(233, 233, 233);
    strokeWeight(4);
    ellipse(431, 377, 61, 123);
    noStroke();

//mouth
    noStroke();
    fill(240, 190, 180);
    beginShape();
    curveVertex(217, 335);
    curveVertex(217, 335);
    curveVertex(221, 328);
    curveVertex(228, 324);
    curveVertex(235, 323);
    curveVertex(243, 324);
    curveVertex(250, 326);
    curveVertex(255, 330);
    curveVertex(258, 335);
    curveVertex(253, 340);
    curveVertex(245, 341);
    curveVertex(238, 342);
    curveVertex(230, 341);
    curveVertex(224, 339);
    curveVertex(224, 339);
    endShape();
    stroke(212, 113, 139);
    strokeWeight(3);
    line(220, 333, 255, 333);
    noStroke();
    



}

PROJECT 01 – SELF PORTRAIT

portrait

function setup() {
    createCanvas(700, 500);
    background(247, 208, 245);
    var purple = color(202, 163, 246);
    var blue = color(0, 128, 255);
    var green = color(153, 255, 153);
    var yellow = color(255, 255, 153);
    var orange = color(255, 204, 153);
    var red  =  color(255,  153, 153);
    fill(purple);
    noStroke();
    circle(350, 250, 800);
    fill(blue);
    circle(350, 250, 700);
    fill(green);
    circle(350, 250, 600);
    fill(yellow);
    circle(350, 250, 500);
    fill(orange);
    circle(350, 250, 400);
    fill(red);
    circle(350, 250, 300);

}

function draw() {
    var skin = color(252, 224, 158);
    var white = color(255);
    var black = color(0);
    var brown = color(184, 134, 11);
    var pink = color(255, 102, 255);
    var light_pink = color(255, 204, 204);
    var dark_brown = color(102, 51, 0);
    var red  =  color(255,  153, 153);
    var orange = color(255, 204, 153);
    var light_blue = color(102, 178, 255);
    var neon_yllow = color(255, 255, 51);

//SHAPES
    noFill();
    strokeWeight(15);
    stroke(neon_yllow);
    bezier(95, 120, 20, 120, 100, 200, 25, 190);
    stroke(pink);
/*line(95, 130, 20, 130);
  line(100, 210, 25, 200);*/
    bezier(95, 130, 20, 130, 100, 210, 25, 200);
    stroke(pink);
    bezier(550, 470, 630, 290, 600, 550, 650, 370);
    stroke(neon_yllow);
    bezier(550, 480, 630, 300, 600, 560, 650, 380);
    strokeWeight(1);
    stroke(black);
    fill(white);
    triangle(75, 80, 90, 150, 140, 100);
    fill(black);
    triangle(65, 80, 80, 150, 130, 100);
    fill(white);
    triangle(600, 400, 630, 330, 680, 380);
    fill(black);
    triangle(605, 395, 635, 325, 685, 375);



//hair
    noStroke();
    fill(dark_brown);
    ellipse(350, 360, 460, 700)


//clothes
    noStroke();
    fill(light_blue);
    rect(180, 400, 340, 400, 50);

//face
    fill(skin);
    noStroke();
    ellipse(350, 250, 350, 380);

//hair
    fill(dark_brown);
    arc(350, 170, 300, 230, PI, 0);
    strokeWeight(2);
    stroke(black);
    fill(red);
    circle(230, 100, 35);
    circle(215, 125, 35);

//cheeks
    noStroke();
    fill(light_pink, 150);
    circle(230, 300, 93);
    fill(light_pink, 150);
    circle(470, 300, 93);

//freckles
    //leftside
    stroke(brown);
    strokeWeight(3);
    point(230, 320);
    point(240, 328);
    point(225, 280);
    point(195, 325);
    point(200, 295);
    point(237, 284);
    point(260, 310);
    
   //rightside 
    point(475, 320);
    point(460, 319);
    point(488, 295);
    point(462, 298);
    point(482, 334);
    point(452, 283);
    point(430, 320);
    point(478, 264);
    point(500, 318);

//eyes    
    strokeWeight(3);
    stroke(black);
    fill(white);
    circle(280, 230, 100);
    fill(white);
    circle(420, 230, 100);
    strokeWeight(1);
    stroke(black);
    fill(brown);
    circle(280, 230, 25);
    fill(brown);
    circle(420, 230, 25);
    fill(black);
    circle(280, 230, 15);
    fill(black);
    circle(420, 230, 15);
    fill(white);
    ellipse(275, 233, 8, 5);
    fill(white);
    ellipse(415, 233, 8, 5);

//eyelashes
    strokeWeight(3);
    stroke(black);
    noFill();
    arc(230, 220, 50, 50, 0-3*PI/2, PI);
    arc(470, 220, 50, 50, 0, 0-3*PI/2);

//mouth&nose
    strokeWeight(2);
    stroke(black);
    fill(light_pink);
    arc(350, 360, 35, 20, 0, PI);
    noFill();
    arc(350, 290, 35, 35, PI+PI/4, 11*PI/6)




}

I’ve always been inspired by teamLab Borderless, an immersive, interactive museum of colorful digital art installations in Tokyo. The museum is structured so that there are quite literally no borders between different art installations – each piece seamlessly blends and communicates with each other, creating a breathing, vibrant space that people can interact with. It became the most visited single-artist museum in the world, welcoming over 2.3 million people in its opening year alone.

Borderless is an impressive feat of audiovisual experiences, comprising of over 500 computers and 470 projectors in the museum alone. The museum was created by the art collective teamLab, an interdisciplinary, collaborative group of artists, animators, designers, architects, engineers, and programmers. Although there’s very little public information on how teamLab created Borderless, I think it’s safe to say that the collective used a mix of custom scripts and commercial software to bring the immersive space to life. It’s amazing to witness what they could accomplish only two years ago in this museum, and I’m excited to see how teamLab will build upon their success to enhance immersive, interactive experiences in the future.

Project 1 – My Self Portrait

portrait

//Flora Xia Section B
function setup() {
    createCanvas(200, 200);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(255,204,229)
    fill(255,153,204)//medpink
    noStroke()
    square(0,0,70)
    fill(255,102,178,150)
    rect(50,50,140,90)
    fill(255,153,199,200)
    triangle(100,100,10,150,50,170)
    //end of background
    //hair brown
    stroke(102,51,0)
    fill(102,51,0)
    ellipse(100,120,130,180)
    rect(38,140,125,80)
    //face shape
    noStroke()
    fill(222,184,135)
    ellipse(100,110, 105,140)
    //cheeks
    noStroke()
    fill(205,133,63,150)
    triangle(50,120,60,150,70,152)
    triangle(150,120,140,150,130,152)
    //nose
    fill(255,204,153, 150)
    circle(100,135,10)
    circle(105,137,5)
    circle(95,137,5)
    //nose bridge
    noFill()
    stroke(255,204,153,150)
    arc(95,120,5,35,4.71,1.57)
    //hair front
    stroke(255,250,204)
    fill(102,51,0)
    arc(136,45,75,120,1.75,3.1415)
    arc(65,45,75,120,0,1.5)
    noStroke()
    rect(78,35,45,10)
    triangle(100,30,50,150,55,60)
    triangle(90,35,150,150,140,55)
    rect(45,73,10,80)
    rect(142,73,14,80)
    //hair pin
    fill(143,188,143)
    circle(138,70,7)
    fill(255,215,0)
    circle(143,70,7)
    circle(140,65,7)
    circle(134,66,7)
    circle(134,72,7)
    circle(140,74,7)
    //eye
    stroke(0)
    fill(255,255,255,150)
    arc(75,110,20,7,3.1415,0)
    arc(125,110,20,7,3.1415,0)
    //pupils
	fill(102,51,0)
    stroke(0,0,0,150)
    circle(75,110,7)
    circle(125,110,7)
    fill(0,0,0,200)
    noStroke()
    circle(75,110,3)
    circle(125,110,3)
    fill(255)
    circle(74,109,1)
    circle(124,109,1)
    ellipse(126,111,2,1)
    ellipse(76,111,2,1)
    //lips
    noFill()
    stroke(255,0,0,50)
    arc(95,150,10,5,3.1415,0)
    arc(105,150,10,5,3.1415,0)
    arc(100,155,25,5, 0,3.1415)
    line(89,152,111,152)
    //overlay
    noStroke()
    fill(219,112,147,50)
    triangle(199,199,3,3,75,150)
    circle(150,50,100)
    quad(0,150,20,199,50,180,60,199)


}

flowers are cute

Category: SectionB

Project 01 – Self Portrait

Project 01: Self Portrait

Project: Self Portrait

Project 1 – Self Portrait

Project: Self-Portrait

Self-Portrait

Project 1- Self Portrait

PROJECT 01 – SELF PORTRAIT

LO – My Inspiration

Project 1 – My Self Portrait