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

Project 1 : Self Portrait

//Aadya Bhartia
//Section A
//Project 1 
function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(40,200,200);
		if(mouseIsPressed){ //Background chnages colour if mouse is pressed 
			background(220,20,60);
		}
	//hair background 
    stroke(200,200,120);
    fill(0);
    ellipse(width/2,height/2.3,350,400);  
    //neck
    noStroke(); 
    fill(224,175,120);//fill tan colour 
    rect(252,350,90,80);   
    //face 
    noStroke(); 
    fill(236,180,120);//fill tan colour 
    ellipse(width/2,height/2.5,250,300);
    //hair fringe
    fill(0);
    arc(240,90,180,130,220,40);
    arc(342,93,180,130,120,60);
    ellipse(400,220,55,240);
    //eyes
    fill(0);
    ellipse(250,240,20); // black
    fill(0);
    ellipse(355,240,20); // black
    fill(255);
    ellipse(245,240,4); //white
    fill(255);
    ellipse(350,240,4); //white
    //cheeks
    fill(250,154,120,120); // chnaging opacity in 4th parameter
    ellipse(250,275,40,10);
    fill(250,154,120,120);
    ellipse(355,275,40,10);
    //nose
    noStroke(); 
    fill(185,130,70); 
    ellipse(305,285,40,17); 
    fill(236,180,120);
    ellipse(305,283,43,15);  
    //lips
    noStroke(); 
    fill(140,60,50); 
    ellipse(300,325,70,30); 
    fill(236,180,120);
    ellipse(300,317,76,17); 
    //glasses
    stroke(200,110,120);
    strokeWeight(3);
    noFill();
    ellipse(250,240,60); 
    ellipse(355,240,60); 
    arc(302,248,47,40,PI,TWO_PI);
    //earrings 
    fill(160,50,73);
    noStroke();
    ellipse(182,282,28);
    triangle(180,295,170,315,190,315);
    triangle(180,310,170,325,190,325);
    fill(150);
    ellipse(175,284,8); //white
}

Project-01 Face

NW Face Sketch Download

function setup() {
	/*
	Nicholas Wong
	Section A
	*/
	
    createCanvas(600, 600);
    text("p5.js vers 0.9.0 test.", 10, 15);

    //White Background
    background(255);

}

function draw() {

	scale(0.4)

	//Face Base Shape
	noStroke();
	fill(250, 215, 172);
	beginShape();
	vertex(459,657);
	vertex(499,816);
	vertex(566,899);
	vertex(623,960);
	vertex(749,960);
	vertex(837,871);
	vertex(884,789);
	vertex(914,688);
	vertex(949,533);
	vertex(933,346);
	vertex(890,278);
	vertex(784,252);
	vertex(659,242);
	vertex(561,261);
	vertex(469,336);
	vertex(459,657);
	endShape();


	//Chin Shading
	noStroke();
	fill(250, 205, 175);
	beginShape();
	vertex(635,837);
	vertex(722,839);
	vertex(737,962);
	vertex(629,963);
	vertex(614,922);
	endShape();

	//Face Shading
	noStroke();
	fill(245, 200, 172)
	beginShape();
	vertex(469,200);
	vertex(445,606);
	vertex(499,811);
	vertex(626,960);
	vertex(686,960);
	vertex(672,852);
	vertex(610,795);
	vertex(510,527);
	vertex(538,429);
	endShape();


	//Left Eye
	noStroke();
	fill(250)
	beginShape();
	vertex(537,510);
	vertex(581,505);
	vertex(617,541);
	vertex(555,544);
	vertex(514,525);
	endShape();

	//Left eye Shading
	noStroke();
	fill(245, 195, 162);
	beginShape();
	vertex(532,451);
	vertex(602,458);
	vertex(641,516);
	vertex(634,550);
	vertex(572,506);
	vertex(533,506);
	vertex(515,508);
	endShape();

	//Right Eye
	noStroke();
	fill(250);
	beginShape();
	vertex(757,538);
	vertex(779,509);
	vertex(835,505);
	vertex(858,519);
	vertex(820,543);
	endShape();

	//Right Eye Shading
	noStroke();
	fill(245, 195, 165);
	beginShape();
	vertex(731,523);
	vertex(763,476);
	vertex(856,460);
	vertex(882,517);
	vertex(821,503);
	vertex(779,511);
	vertex(744,556);
	endShape();

	//Brows
	fill(200, 175, 175);
	quad(751,466,796,443,855,440,877,460);
	quad(507,438,579,437,611,461,496,454);

	//Nose Shading
	noStroke();
	fill(245, 200, 162);
	beginShape();
	vertex(669,573);
	vertex(613,688);
	vertex(617,713);
	vertex(638,694);
	vertex(684,689);
	vertex(674,623);
	endShape();

	//Under Nose Shading
	fill(248, 205, 170);
	quad(643,722,615,789,669,769,674,717);


	//Nostrils
	noStroke();
	fill(230,150,150);
	triangle(643,695,662,707,641,707); //Left
	triangle(715,708,739,706,728,698); //Right

	
	//Mouth
	noStroke();
	fill(250,200,182); 
	beginShape();
	605,792,664,784,690,793,719,787,780,793,739,828,693,832,654,827
	vertex(605,792);
	vertex(664,784);
	vertex(690,788);
	vertex(719,784);
	vertex(780,793);
	vertex(739,828);
	vertex(693,832);
	vertex(654,827);
	endShape();


	//Hair
	noStroke();
	fill(30,25,30)
	beginShape();
	vertex(445,644);
	vertex(364,521);
	vertex(349,402);
	vertex(393,263);
	vertex(447,201);
	vertex(563,81);
	vertex(717,45);
	vertex(793,52);
	vertex(890,107);
	vertex(935,160);
	vertex(950,226);
	vertex(950,272);
	vertex(960,308);
	vertex(970,401);
	vertex(950,478);
	vertex(945,550);
	vertex(942,584);
	vertex(926,603);
	vertex(936,451);
	vertex(925,344);
	vertex(889,278);
	vertex(778,266);
	vertex(698,261);
	vertex(599,262);
	vertex(535,292);
	vertex(464,365);
	endShape();

	//Hair Shading
	noStroke();
	fill(25,15,15)
	beginShape();
	vertex(448,607);
	vertex(461,378);
	vertex(557,286);
	vertex(651,254);
	vertex(782,260);
	vertex(920,288);
	vertex(870,189);
	vertex(764,120);
	vertex(679,126);
	vertex(593,162);
	vertex(509,205);
	vertex(426,279);
	vertex(401,409);
	endShape();


	noloop();





}

Another code post

This is a project I worked on.

sketch Download

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

function draw() {
	background(204);
	ellipse(50, 50, 80, 80);
}

Project 01: Self-Portrait

project-01-selfPortrait

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

function draw() {
    //background
    fill(244, 203, 195);
    noStroke();
    rect(0, 0, 400, 400);

    //shirt (bottom)
    fill(0);
    rect(100, 380, 200, 20);

    //arms
    fill(214, 179, 161);
    beginShape();
    vertex(108, 320);
    vertex(108, 360);
    vertex(85, 390);
    vertex(250, 410);
    vertex(240, 435);
    vertex(55, 410);
    vertex(50, 395);
    endShape(); //left

    fill(214, 179, 161);
    beginShape();
    vertex(300, 320);
    vertex(300, 360);
    vertex(300, 390);
    vertex(150, 410);
    vertex(155, 435);
    vertex(310, 410);
    vertex(320, 395);
    endShape(); //right
    
    //shirt (top)
    fill(0);
    rect(100, 280, 200, 100, 80, 80, 0, 0);


    //neck
    fill(214, 179, 161);
    rect(180, 220, 40, 80, 20);

    //hair
    fill(51, 26, 16);
    rect(120, 95, 160, 140, 80, 80, 0, 0);

    //face
    fill(214, 179, 161);
    ellipse(200, 180, 130, 150);    //background for face
    fill(193, 154, 138);
    ellipse(200, 230, 40, 10);  //mouth
    fill(51, 26, 16)
    rect(157, 165, 30, 3);
    rect(213, 165, 30, 3);  //eyebrows
    fill(255);
    rect(162, 175, 25, 8, 10);
    rect(213, 175, 25, 8, 10);  //eyes
    if (mouseX <= 200) {
        noStroke();
        fill(51, 26, 16);
        ellipse(165, 180, 6, 6);
        ellipse(215, 180, 6, 6);
    }
        else if (mouseX >= 200) {
            noStroke();
            fill(51, 26, 16);
            ellipse(185, 180, 6, 6);
            ellipse(235, 180, 6, 6);    //pupils
    }

    fill(193, 154, 138);
    quad(192, 205, 197, 180, 203, 180, 208, 205);
    ellipse(200, 205, 16, 10);
    ellipse(192, 203, 8, 8);
    ellipse(208, 203, 8, 8);    //nose
    stroke(255);
    strokeWeight(1);
    line(208, 203, 208, 208);   //nosering
    fill(51, 26, 16);
    noStroke();
    ellipse(225, 220, 2, 2);    //mole
    fill(214, 179, 161);
    ellipse(142, 195, 30, 30);
    ellipse(258, 195, 30, 30);  //ears

    //bangs
    noStroke();
    fill(51, 26, 16);
    arc(200, 155, 110, 120, PI, TWO_PI);


    //earrings
    stroke(255);
    strokeWeight(1);
    noFill();
    ellipse(140, 230, 30, 50);
    ellipse(260, 230, 30, 50);

}

Project 1: Portrait

Portrait!

sketch – portrait Download

//Thomas Chen
// 15-104 section A

function setup() {
    createCanvas(600,600);
    background(255, 230, 250);
}

function draw() {
        noStroke();
        //noFill
        rectMode(CENTER);
        //hoodie
        fill(190, 209, 230)
        ellipse(291,387,198,173);
        //body
        rect(296,615,353,399,100);   
        //hat 
        fill(177,230,215);
        ellipse(311,267,144,133);
        fill(190, 230, 218)
        beginShape()
        curveVertex(268,273);
        curveVertex(323,238);
        curveVertex(373,233);
        curveVertex(404,244);
        curveVertex(404,250);
        curveVertex(383,243);
        curveVertex(326,251);
        endShape(CLOSE);
        fill(132, 171, 160)
        beginShape()
        curveVertex(404,250);
        curveVertex(383,243);
        curveVertex(326,251);
        curveVertex(268,273);
        curveVertex(327,258);
        curveVertex(404,258);
        endShape(CLOSE);
        //shadow
        beginShape();
        curveVertex(242,312);
        curveVertex(374,358);
        curveVertex(379,399);
        curveVertex(305,461);
        curveVertex(226,334);
        endShape(CLOSE);
        //face
        fill(232,199,155);
        beginShape();
        curveVertex(383,258);
        curveVertex(383,344);
        curveVertex(356,392);
        curveVertex(334,399);
        curveVertex(306,392);
        curveVertex(267,344);
        curveVertex(267,334);
        curveVertex(244,322);
        curveVertex(238,293);
        curveVertex(253,288);
        curveVertex(267,300);
        curveVertex(268,273);
        curveVertex(327,258);
        endShape(CLOSE);
        //neck
        quad(267,344,343,396,305,461,267,403);
        //lines
        strokeWeight(3);
        stroke(124, 139, 156);
        beginShape(LINES)
        vertex(199,420);
        vertex(226,441);
        vertex(226,441);
        vertex(254,461);
        vertex(254,461);
        vertex(287,503);
        endShape();
        line(200,555,200,600);
        line(400,555,400,600);
        stroke(196, 168, 130);
        line(350,306,350,340);
        line(350,340,340,338);
}

Project 1-My Self Portrait

rachell-portrait

//Rachel Lu
//15-104 A

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

function draw() {

	background('#fed176');
	
	//hair back
	fill(0);
	rect(140, 350, 335, 127);

	//head
	fill('#fcdac3');
	noStroke();
	ellipse(width/2, height/2, 300, 275);

	//nose
	fill('#f89a63');
	ellipse(300, 350, 20, 10);

	//nosering
	stroke(150);
	strokeWeight(2);
	line(307, 351, 307, 354);

	//cheeks
	fill('#e4848c');
	noStroke();
	ellipse(225, 370, 30, 15);
	ellipse(375, 370, 30, 15);

	//glasses
	noFill();
	stroke(0);
	strokeWeight(4);
	ellipse(225, 320, 100);
	ellipse(375, 320, 100);
	arc(300, 320, 50, 15, PI, TWO_PI);

	//eyes
	arc(225, 330, 20, 10, PI, TWO_PI);
	arc(375, 330, 20, 10, PI, TWO_PI);

	//mouth
	arc(300, 380, 20, 10, 0, PI);

	//hair
	strokeWeight(50);
	arc(285, 460, 305, 600, PI, PI+HALF_PI);
	arc(315, 460, 305, 600, PI+HALF_PI, TWO_PI);

	//ears
	fill('#fcdac3');
	noStroke();
	ellipse(160, 325, 40);
	ellipse(440, 325, 40);

	//earrings
	stroke(150);
	strokeWeight(2);
	ellipse(160, 355, 3, 30);
	ellipse(440, 355, 3, 30);

	//glasses
	noFill();
	stroke(0);
	strokeWeight(4);
	ellipse(225, 320, 100);
	ellipse(375, 320, 100);
	arc(300, 320, 50, 15, PI, TWO_PI);

}

This is a self portrait, roughly drawing inspiration from Animal Crossing avatars. The features I found defining of me are my glasses and piercings, so I had to include those.

My Project 1

This is an example of the project I designed last week.

mirieproject1

//Mirie Kim
//Class Section: A

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

function draw() {
	background(119, 220, 158);

	//hair
	fill(70, 21, 27);
	noStroke();
	ellipse(150,148,176,200);
	rect(62,148,176,140);

	//ears
	noStroke();
	fill(255, 209, 178);
	circle(70,163,25);
	circle(235,163,25);
	fill(243, 190, 176 );
	circle(70,163,12);
	circle(235,163,12);

	//head
	fill(255, 209, 178); 
	noStroke();
	ellipse(150,148,165,175);

	//bangs
	fill(70, 21, 27);
	stroke(70, 21, 27);
	line(63,145,200,75);
	line(170,90,237,145);
	triangle(80,100,145,60,100,70);
	quad(65,145,75,100,150,50,200,75);
	quad(170,90,235,145,220,90,200,70);
	noStroke();
	triangle(130,100,115,132,175,90);

	//eyes
	fill(255);
	stroke(0);
	strokeWeight(3);
	ellipse(115,155,45); 
	ellipse(185,155,45);

	//pupils
	noStroke();
	fill(70, 21, 27);
	ellipse(115,147,26);
	ellipse(185,147,26);
	fill(255);
	ellipse(120,142,10,10);
	ellipse(190,142,10,10);
	fill(0);
	ellipse(115,147,8); 
	ellipse(185,147,8);

	//eyelashes
	stroke(0);
	strokeWeight(2.5);
	line(87,159,92,159);
	line(86,154,92,155);
	line(86,149,92,151);
	line(209,159,214,159);
	line(214,154,208,155);
	line(214,149,208,151);

	//smile
	noStroke();
	fill(245, 127, 141);
	ellipse(150,195,30,50);

	fill(255, 209, 178);
	rect(90,160,130,27);
	
	//nose
	fill(245, 175, 127); 
	triangle(150,155,145,174,155,174); 
	
	//cheeks
	fill(245, 177, 187);
	ellipse(100,177,40,15);
	ellipse(200,177,40,15);
	
	//glasses
	noFill();
	stroke(0);
	strokeWeight(3);
	ellipse(113,150,60,57); 
	ellipse(187,150,60,57);	
	line(217,150,237,145);
	line(83,150, 63,145);
	line(143,157,157,157);



}

Project 1: Self Portrait

portrait

function setup() {
    createCanvas(800, 800);
    background(132);
}

function draw() {
    ellipse(width / 2 , height / 2, 360, 640);
    fill(225, 0, 132,);
    triangle(width / 2, height / 2, width / 2, 332, 464, height / 2);
    noLoop();
    ellipse(width / 2, 520, 200, 20);
    line(300, 520, 500, 520);
    fill(236, 236, 236);
    ellipse(320, 280, 64, 64);
    noLoop();
    fill(120, 72, 26);
    ellipse(320, 280, 28, 28);
    noLoop();
    line(448, 280, 512, 280);
    fill(252, 112, 148);
    ellipse(random(260, 540), random (420, 640), random(8, 16), random(8, 16))
    ellipse(random(260, 540), random (420, 640), random(8, 16), random(8, 16))
    ellipse(random(260, 540), random (420, 640), random(8, 16), random(8, 16))
    ellipse(random(260, 540), random (420, 640), random(8, 16), random(8, 16))
    ellipse(random(260, 540), random (420, 640), random(8, 16), random(8, 16))
    noLoop();
    fill(165, 42, 42);
    triangle(516, 52, 372, 164, 612, 436);
    rect(280, 64, 240, 128)
    noLoop();

}

One of the hardest parts of my project was getting the correct color and boundaries for the small pink ellipses. I wanted to exaggerate the issues with my complexion and really make the whole thing a little over the top and getting the random placement of the ellipses was difficult as they would appear on my other shapes or not exactly where I wanted them so it looked natural.

PROJECT-01 (FACE)

SELF PORTRAIT

function setup() {
    smooth();
    createCanvas(1400, 1000);
    background(232, 232, 228);
}


function draw() {

    // BG
    noStroke();
    let w = random(175, 1200);
    let l = random(150, 850);
    let r = random(200);
    let blue = [135, 206, 250];
    let yellow = [255, 219, 88];
    let red = [255, 64, 64];
    let cols = [blue, yellow, red]
    fill(random(cols));
    circle(w, l, r);

    // eye whites
    x = 825
    fill(255);
    rect(200, 250, 150, 200);
    rect(200+x, 250, 150, 200);
    bezier(200, 450, 200, 600, 350, 600, 350, 450);
    bezier(200+x, 450, 200+x, 600, 350+x, 600, 350+x, 450);
    // eyes
    noFill();
    stroke (0);
    strokeWeight (10);
    line(200, 250, 200, 450);
    line(350, 250, 350, 450);
    bezier(200, 250, 200, 100, 350, 100, 350, 250);
    bezier(200, 450, 200, 600, 350, 600, 350, 450);
    line(200+x, 250, 200+x, 450);
    line(350+x, 250, 350+x, 450);
    bezier(200+x, 250, 200+x, 100, 350+x, 100, 350+x, 250);
    bezier(200+x, 450, 200+x, 600, 350+x, 600, 350+x, 450);
    // eye colors
    stroke(0);
    fill(242, 246, 197);
    bezier(185, 575, 200, 525, 350, 525, 365, 575);
    bezier(185+x, 575, 200+x, 525, 350+x, 525, 365+x, 575);

    // pupil
    fill(0);
    ellipse(240, 325, 80, 110);
    ellipse(240, 410, 80, 110);
    ellipse(310+x, 325, 80, 110);
    ellipse(310+x, 410, 80, 110);

    // eyelid colors
    noStroke();
    fill(242, 246, 197);
    rect(195, 250, 160, 40);
    rect(195+x, 250, 160, 40);
    stroke(0);
    bezier(195, 250, 195, 100, 355, 100, 355, 250);
    bezier(195+x, 250, 195+x, 100, 355+x, 100, 355+x, 250);
    // eyelids
    stroke(0);
    line(195, 290, 355, 290);
    line(195, 250, 195, 290);
    line(355, 250, 355, 290);
    noFill();
    line(195+x, 290, 355+x, 290);
    line(195+x, 250, 195+x, 290);
    line(355+x, 250, 355+x, 290);

    // eyebrows
    fill(0);
    rect(125, 130, 300, 80, 40, 40, 40, 40);
    rect(125+x, 130, 300, 80, 40, 40, 40, 40);

    // nose
    fill(242, 246, 197);
    bezier(700, 525, 850, 505, 850, 630, 700, 610);

    // lip colors
    fill(255, 64, 64);
    noStroke();
    bezier(275, 700, 150, 700, 150, 850, 275, 850);
    bezier(275+x, 700, 400+x, 700, 400+x, 850, 275+x, 850);
    rect(275, 700, 825, 150);
    // mouth
    stroke(0);
    line(275, 700, 275+x, 700);
    line(275, 775, 275+x, 775);
    line(275, 850, 275+x, 850);
    noFill();
    bezier(275, 700, 150, 700, 150, 850, 275, 850);
    bezier(275+x, 700, 400+x, 700, 400+x, 850, 275+x, 850);


}

Project 1: Self Portrait

Project 1.

sketch

// Susie Kim
// Section A

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

function draw() {
	noStroke();
// background color through circles!
	fill(177,156,217);
	ellipse(random(0,600), random(0,600),random(0,100),random(0,100));
	ellipse(random(0,600), random(0,600),random(0,100),random(0,100));
	ellipse(random(0,600), random(0,600),random(0,100),random(0,100));
// hair
	fill(0);
	ellipse(300,400,250,350);
// body
	fill(128,0,128);
	ellipse(300,600,390,340);
// neck
	fill(236,188,180);
	rect(245,395,110,100,35);
// ears
	ellipse(210,360,35,45);
	ellipse(390,360,35,45);
// face
	ellipse(300,350,170,200);
// eyes
	fill(0);
	ellipse(260,340,15);
	ellipse(335,340,15);
//blush
	fill(255,127,156);
	ellipse(260,361,21,13);
	ellipse(335,361,21,13);
// nose
	fill(197,140,133);
	ellipse(300,360,20,10);
// mouth
	strokeWeight(5);
	stroke(0);
	line(290,380,310,380);
// eyebrows
	strokeWeight(3);
	line(250,320,270,320);
	line(325,320,345,320);

}