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

Project-01-Face

This is what I look like when I wonder when covid-19 will end.

//Jiaqi  Self-Portrait
function setup() {
    createCanvas(500, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	scale(0.3);
	background(224,164,151);
	fill(96,76,63);
	noStroke();
	//me
	//hair 
	ellipse(700,800,710,840);
	rect(200,750,840,850);

	//shadow
	fill(57,39,21);
	ellipse(657,820,498,588);
	rect(320,820,588,762);
	fill(244,211,158);
	ellipse(540,1538,172);
	rect(454,1292,172,352);
	fill(216,175,142);
	ellipse(556,1296,204,142);

	//face
	fill(244,211,158);
	ellipse(626,1021,650,650);

	//shirt
	fill(0,105,52);
	quad(255,1516,817,1516,951,1699,155,1699,);
	fill(216,175,142);
	rect(404,993,478,223);

	//mask string
	noFill();
	stroke(46,167,224);
	strokeWeight(12);
	ellipse(362,1069,247,183);
	noLoop();
	noStroke();

	//ear
	fill(244,211,158);
	ellipse(271,1048,121,226);
	ellipse(540,1518,172);

	//mask
	fill(175,198,235);
	rect(422,960,550,236);

	//eyes
	fill(0);
	ellipse(510,897,32,75);
	ellipse(833,898,32,75);

	//eyelash
	stroke(0);
	strokeWeight(3);
	line(486,875,505,870);
	line(858,877,834,874);
	noFill();

	//eyebrows
	stroke(96,76,63);
	strokeWeight(5);
	arc(500,804,80,50,PI,TWO_PI);
	arc(830,780,80,50,0,PI);
	noStroke();
	
	//bird
	fill(248,235,224);
	ellipse(915,422,190,157);
	ellipse(965,353,88);
	triangle(758,438,839,380,849,480);
	fill(0);
	ellipse(943,352,10);
	ellipse(1002,352,10);
	fill(224,164,151);
	triangle(965,353,987,353,976,372);

	




}

Project 01 – My Self-Portrait

My (abstract) self portrait.

myselfportrait

function setup() {
    createCanvas(600, 600);
    background(229, 204, 205) //muted pink
}

function draw() {
    fill(150, 72, 75) //mauve
    strokeWeight(0)
    ellipse (365,330,400,475) //face shape
    noFill();
    strokeWeight(5)
    stroke(207, 230, 145); // neon green line
    bezier(150, 0, 10, 80, 120, 60, 0, 120); // hair
    bezier(250, 0, 10, 80, 120, 60, 0, 220);
    strokeWeight(2);
    bezier(200,250,250,300,300,250,300,250); //eye
    line(210,260,200,270); //eyelashes
    line(230, 270, 225, 285);
    line (250, 272, 250, 290);
    arc(350,450,50,30,PI,0); // left top lip
    arc(400,450,50,30,PI,0); // right top lip
    arc(375,450,100,40,0,PI,CHORD); // bottom lip
    bezier(175,200,375,175,375,250,365,350); // brow bone 
    bezier(365,350,330,360,370,400,390,365); // nose
    bezier(150,150,150,550,280,500,390,540); // jawline
}

Project 01-Self Portrait

This is what I look like in the winter

sketch

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

function draw() {
	fill(94, 137, 230);
    circle(300,60,70);//binnie tail
	fill(94, 137, 230 );
    ellipse(300,150,170,200);//binne
    fill(238, 226, 201);
    rect(255, 330, 85, 95);//neck
	fill(238, 226, 201); 
	circle(300,250,200);//face
	fill(0,0,0)
	rect(230,190,50,10);//left eyebrow
	fill(0,0,0)
	rect(325,190,50,10);//right eyebrow
	fill(0, 0, 0);
	circle(256,224,30);//left eye
	fill(0, 0, 0);
	circle(347,222,30);//right eye
	fill(232, 206, 149);
    triangle(275, 275, 303, 220, 331, 275)//nose
    fill(238, 118, 214 );
    ellipse(300, 315, 65, 55);//mouth
    fill(245, 129, 75 );
    ellipse(300,500,350,250);//body
   


    
    
 

}

Project 01- Self portrait

this is what I look like in the morning

sketch

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

function draw() {
	background(184,238,147);
	fill(0);
	rect(67,98,69,77);
	ellipse(101,100,69,64);
	fill(226,197,159);
	rect(82,130,39,42);
	fill(255,132,132);
	ellipse((width/2),195,157,71);
	fill(240,207,161);
	ellipse(101,120,55,64);
	fill(240,207,161);
	noStroke();
	ellipse(101,105,58,51);
	fill(0);
	rect(109,102,14,3);
	rect(81,102,14,3);
	fill(255,160,159);
	ellipse(102,123,10,7);
	strokeWeight(1);
	fill(250);
	ellipse(116,111,12,8);
	ellipse(89,111,12,8);
	fill(0);
	ellipse(116,111,5,7);
	ellipse(89,111,5,7);
	fill(255,0,0);
	arc(102,135,14,8,0,PI);
}

Project 01 – Self Portrait

this is my portrait

portrait_wordpressupload

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

function draw() {
  background(255,95,148);
  fill(255,255,255);
  noStroke();
  ellipse(138,115,116);
  ellipse(379,211,171);
  fill(62,255,57);
  ellipse(139,125,50);
  ellipse(402,187,60);
  triangle(222,193,149,214,219,380);
  fill(255,210,21);
  rect(92,400,287,123);
  stroke(232,0,95);
  strokeWeight(5);
  line(95,32,170,32);
  line(324,100,424,100);
  arc(545,307,90,90,PI+QUARTER_PI ,QUARTER_PI );
}

Project 01 – Self Portrait

my smile~

smile-portrait

//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-01

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

function draw() {

	//face
	noStroke();
	fill(241, 196, 163);
	ellipse(302, 266, 179, 257);

	//neck
	noStroke();
	fill(241, 196, 163);
	rect(272, 340, 70, 83);

	//mole
	noStroke();
	fill(39, 45, 44);
	ellipse(237, 227, 3, 3);

	//eyebrow 1
	noStroke();
	fill(39, 45, 44);
	beginShape();
	curveVertex(278, 232);
	curveVertex(278, 221);
	curveVertex(265, 217);
	curveVertex(251, 213);
	curveVertex(238, 211);
	curveVertex(230, 216);
	curveVertex(222, 227);
	curveVertex(233, 223);
	curveVertex(245, 220);
	curveVertex(256, 223);
	curveVertex(268, 228);
	curveVertex(278, 232);
	endShape();

	//eyebrow 2
	noStroke();
	fill(32, 45, 44);
	beginShape();
	curveVertex(305, 222);
	curveVertex(306, 231);
	curveVertex(319, 230);
	curveVertex(334, 229);
	curveVertex(349, 227);
	curveVertex(362, 227);
	curveVertex(370, 231);
	curveVertex(378, 235);
	curveVertex(375, 229);
	curveVertex(366, 222);
	curveVertex(356, 218);
	curveVertex(340, 218);
	curveVertex(327, 219);
	curveVertex(314, 221);
	curveVertex(305, 222);
	endShape();

	//eyes & eyelashes
	stroke(32, 45, 44);
	strokeWeight(4);
	noFill();
	arc(250, 250, 35, 20, TWO_PI, PI, OPEN);
	arc(340, 250, 45, 20, TWO_PI, PI, OPEN);


	//teeth
	noStroke();
	fill(255, 255, 255);
	beginShape();
	curveVertex(261, 331);
	curveVertex(268, 342);
	curveVertex(279, 350);
	curveVertex(291, 355);
	curveVertex(307, 355);
	curveVertex(318, 351);
	curveVertex(329, 346);
	curveVertex(341, 335);
	curveVertex(332, 336);
	curveVertex(318, 339);
	curveVertex(300, 341);
	curveVertex(286, 339);
	curveVertex(273, 336);
	curveVertex(261, 331);
	endShape();


	//upper lip
	noStroke();
	fill(170, 109, 98);
	beginShape();
	curveVertex(258, 328);
	curveVertex(262, 340);
	curveVertex(268, 351);
	curveVertex(275, 359);
	curveVertex(286, 366);
	curveVertex(303, 366);
	curveVertex(317, 361);
	curveVertex(330, 351);
	curveVertex(338, 344);
	curveVertex(343, 335);
	curveVertex(333, 341);
	curveVertex(320, 348);
	curveVertex(307, 352);
	curveVertex(294, 353);
	curveVertex(282, 349);
    curveVertex(271, 342);
    curveVertex(264, 335);
    curveVertex(258, 328);
    endShape();

    //bottom lip
    noStroke();
    fill(170, 109, 98);
    beginShape();
    curveVertex(258, 328);
    curveVertex(267, 334);
    curveVertex(278, 338);
    curveVertex(294, 341);
    curveVertex(308, 340);
    curveVertex(323, 339);
    curveVertex(334, 337);
    curveVertex(343, 335);
    curveVertex(338, 334);
    curveVertex(328, 336);
    curveVertex(316, 336);
    curveVertex(303, 335);
    curveVertex(293, 336);
    curveVertex(286, 334);
    curveVertex(274, 333);
    curveVertex(265, 331);
    curveVertex(258, 328);
    endShape();


	//hair
	noStroke();
	fill(39, 45, 44);
	beginShape();
	curveVertex(272, 101);
	curveVertex(226, 134);
	curveVertex(194, 187);
	curveVertex(180, 257);
	curveVertex(172, 306);
	curveVertex(158, 345);
	curveVertex(150, 391);
	curveVertex(168, 440);
	curveVertex(198, 508);
	curveVertex(218, 541);
	curveVertex(206, 585);
	curveVertex(247, 570);
	curveVertex(280, 541);
	curveVertex(288, 504);
	curveVertex(307, 464);
	curveVertex(288, 413);
	curveVertex(255, 375);
	curveVertex(234, 345);
	curveVertex(214, 292);
	curveVertex(214, 249);
	curveVertex(230, 195);
	curveVertex(263, 153);
	curveVertex(315, 138);
	curveVertex(360, 167);
	curveVertex(385, 226);
	curveVertex(389, 288);
	curveVertex(377, 337);
	curveVertex(356, 371);
	curveVertex(368, 421);
	curveVertex(411, 421);
	curveVertex(458, 405);
	curveVertex(419, 391);
	curveVertex(439, 349);
	curveVertex(434, 300);
	curveVertex(423, 253);
	curveVertex(426, 203);
	curveVertex(407, 157);
	curveVertex(372, 113);
	curveVertex(319, 97);
	curveVertex(272, 101);
	endShape();
}

Project 1: Self-Portrait.

I did this before we went over “width/2” and “height/2”, so trying to guess and predict individual points was very tedious and difficult!

my-portrait

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

function draw() {
    background('#F2857D');
    fill('#ED5145');
    noStroke();
    circle(width/2,height/2,190);
    noFill();
    stroke('#FDE74C');
    strokeWeight(15);
    circle(width/2, height/2,250);
    fill('#D4A25B');
    stroke('#D4A25B');
    strokeWeight(1);
    quad(172,225,129,225,123,130,178,130);

    fill('#163905');
    stroke('#163905');
    quad(172,220,129,220,50,250,250,250);
    rect(48,251,204,100);

    fill('#33830B');
    stroke('#33830B');
    quad(173,210,150,220,155,230,184,224);
    quad(127,210,150,220,145,230,116,224);

    fill('#F1C280');
    stroke('#F1C280');
    ellipse(150,129,87,84);
    quad(167,195,134,195,111,148,189,148);

    fill('#C28146');
    circle(150,147,20);

    fill('#CB6618');
    stroke('#CB6618');
    triangle(148,172,145,166,138,172);
    triangle(152,172,155,166,162,172);
    circle(150,168,10);

    fill('#F1C280');
    stroke('#F1C280');
    circle(150,135,35);
    ellipse(150,164,8);

    fill('#C28146');
    stroke('#C28146');
    quad(145,180,143,177,157,177,155,180);
    ellipse(150,180,10,6);

    fill('#FDF6ED');
    stroke('#FDF6ED');
    ellipse(133,142,23,8);
    ellipse(167,142,23,8);
    quad(145,142,121,142,119,132,146,132);
    quad(179,142,155,142,154,132,181,132);

    fill(40);
    stroke(40);
    ellipse(132,131,28,4);
    ellipse(168,131,28,4);

    fill('#FDF6ED');
    stroke('#FDF6ED');
    ellipse(132,134,25,4);
    ellipse(168,134,25,4);

    fill(40);
    stroke(40);
    quad(97,83,188,89,190,110,105,110);
    rect(104,107,8,35);
    rect(186,107,8,35);
    triangle(105,143,112,143,113,153);
    triangle(186,143,194,143,188,153)
}

Project 01 – Self-Portrait

My default pose:)

Self-Portrait

function setup() {
    createCanvas(600,600);
    background(155, 154, 255, 255)
}

function draw() {
    //backhair
    fill(0);
    noStroke();
    rect(257, 362, 149, 237, 0, 105, 0, 0);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(260, 358, 151, 242, 0, 106, 0, 0);

    //shirt
    fill(255, 64, 34);
    noStroke();
    rect(96, 419, 292, 181, 0, 81, 0, 0);

    fill(244, 64, 34);
    noStroke();
    rect(438, 528, 83, 72, 0, 20, 0, 0);

    //neck
    fill(255,216,195);
    noStroke();
    rect(170,274,92,181);

    fill(255,216,195);
    noStroke();
    rect( 151, 419, 156, 81, 0, 0, 55, 0);

    //face
    strokeWeight(2);
    stroke(0);
    fill(255, 247, 227);
    rect(195, 222.5, 120, 170, 0, 0, 0, 400);

    fill(255, 247, 227);
    noStroke();
    ellipse(278, 223, 258);

        //coverface
        fill(155, 154, 255, 255);
        noStroke();
        rect(369, 162, 47, 160);

        //chin
        noStroke();
        fill(255, 247, 227);
        ellipse (312, 366.5, 52);


    //black long hair
    noStroke();
    fill(0);
    rect(86, 208, 112, 135);

    noStroke();
    fill(0);
    rect(29, 327, 169, 273, 106, 0, 0, 0);

    //blonde long hair
    fill(255, 242, 165);
    noStroke();
    rect(161, 208, 38, 399, 0, 0, 0, 37);

    noFill();
    stroke(255, 242, 165);
    strokeWeight(2);
    rect(157, 212, 42, 400, 0, 0, 0, 41)

    //eyes
        //white
        noStroke();
        fill(255);
        rect(245, 235, 29, 20, 0, 0, 0, 15);

        noStroke();
        fill(255);
        rect(356, 237, 13, 13, 0, 0, 0, 8);

        //pupil
        noStroke();
        fill(0);
        ellipse(275, 243, 26);

        noStroke();
        fill(0);
        ellipse(369, 243, 16);

        //eyeliner
        stroke(0);
        strokeWeight(3);
        line(248, 229, 273, 232);

        stroke(0);
        strokeWeight(3);
        line(369, 237, 387, 235);

        //eyebrow
        stroke(0);
        strokeWeight(3);
        line(220, 191, 289, 215);

        stroke(0);
        strokeWeight(2);
        line(326, 200, 390, 200);
        

    //nose
    noStroke();
    fill(0);
    ellipse(310, 300, 5);

    stroke(0);
    strokeWeight(2);
    noFill();
    arc(335, 297, 12, 12, 7*PI/4, PI/4);

    strokeWeight(2);
    line(326, 294, 326, 200);

    //lips
    noStroke();
    fill(255, 216, 195);
    ellipse(333, 345, 27);

    noStroke();
    fill(255, 151, 135);
    arc(333, 338, 47, 47, PI, 2*PI);

    noStroke();
    fill(255, 247, 227);
    ellipse(333, 315, 23);

    //cheek
    noStroke();
    fill(255, 151, 135, 120);
    ellipse(198, 311, 106);

    noStroke();
    fill(255, 151, 135, 120);
    ellipse(369, 280, 44);

    //bangs
        //right
        noStroke();
        fill(255, 242, 165);
        rect(311, 78, 91, 104, 0, 70, 0, 70);

        noStroke();
        fill(0);
        rect(311, 74, 91, 104, 0, 70, 0, 70);

        //left
        noStroke();
        fill(255, 242, 165);
        rect(86, 54, 253, 163, 142, 0, 146, 0);

        noStroke();
        fill(0);
        rect(86, 35, 260, 167, 145, 0, 150, 0);

    //hand
        //pointer
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(437, 405, 458, 486);

        //middle
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(496, 405, 471, 486);


    fill(255, 215, 195);
    noStroke();
    rect(438, 474, 83, 82, 23, 0, 36, 0);

        //4thfinger
        fill(255, 247, 227);
        noStroke();
        rect(487, 467, 20, 61, 10);

        //pinkie
        fill(255, 247, 227);
        noStroke();
        rect(504, 470, 20, 47, 10);

        //thumb
        noFill();
        stroke(255, 247, 227);
        strokeWeight(20);
        line(471, 486, 471, 540);

    fill(255, 247, 227);
    noStroke();
    rect(438, 496, 50, 59, 0, 46, 0, 0);

noLoop();

}

After sketching out different poses, I went into Illustrator to create my self-portrait so I could reference the dimensions and color codes of my shapes without as much guess-and-check. Translating the shapes into p5.js still took longer than expected, but it was pretty gratifying to see myself slowly building up a finished painting. Along the way, I realized that I was unable to replicate some rounded rectangles from Illustrator because p5.js does not recognize a radius as large as Illustrator does. This was frustrating but I came to enjoy the limitations of the program and my final result. I also wasn’t able to figure out how to rotate an object, so I ended up making my fingers out of strokes with a heavy stroke-weight– it worked!

LO1-My Inspiration

The project I want to discuss is the 9/11 museum designed by Local Projects, an experience design studio. The 9/11 museum is designed to be a museum of collective memories with a plurality of views. Visitors can record their reflection on 9/11 and the curators will integrate visitor responses into the exhibit. By the end of the exhibit, visitors may write a note of hope and remembrance, and these notes will be projected temporarily onto a space near the beam, then stored in the museum’s permanent digital archive.

an audio tapestry from the testimonies of 417 people

I like this project because it changes the role of the visitors from passive receivers to active contributors in how the tragedy will be remembered. Conventionally, museums provide a singular and authoritative narrative, and all the work of collecting evidence and making analysis will be finished beforehand. However, because 9/11 is still influencing some of us in the present, incorporating ongoing stories from the public successfully addresses the unsettled nature of the subject. The rawness and variety of expressions send a clear message: the past is still present.

video records of visitor’s reflection on 9/11

I am not sure exactly how many people are involved in the developing phase of the project, but I learned that the team is multidisciplinary and they usually put a different interdisciplinary team on each phase of a new project because the main focus shifts as they move on. Speaking about the technical aspect, I am not sure what softwares are used but the project involves a powerful database that frequently updates the most recent articles related to 9/11 and store newly introduced notes and video record. As for the inspiration, Jake Barton, the founder of Local Projects says that he was influenced by Anna Deavere Smith’s Twilight: Los Angeles, 1992. He commented, “It was really an exercise in empathy, in trying to find the humanity of everyone involved.” I believe that this project points to a future where the museum is no longer a static, official, and definite place but a continuously evolving cluster of stories and memories from everyone and everywhere. I imagine the dynamic between the visitors, the installation, and the designers will change interestingly.

Category: SectionC

Project-01-Face

Project 01 – My Self-Portrait

Project 01-Self Portrait

PROJECT01 – Self Portrait

Project 01- Self portrait

Project 01 – Self Portrait

Project 01 – Self Portrait

Project 1: Self-Portrait.

Project 01 – Self-Portrait

LO1-My Inspiration