Project-01-Face – Page 6 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 1 – Self Portrait

Here’s my self portrait

function setup() {
    createCanvas(700, 900);
    background(151, 210, 165);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    fill(54, 36, 28); //hair
    noStroke();
    ellipse(350, 400, 600);
    square(50, 400, 600);
    fill(203, 175, 125); //neck+ears
    rect(200, 450, 300, 700);
    quad(75, 470, 70, 480, 110, 600, 350, 500);
    quad(624, 470, 629, 480, 589, 600, 350, 500);
    fill(219, 190, 140); //skin
    ellipse(350, 450, 500);
    quad(100, 450, 350, 450, 350, 850, 140, 750);
    quad(600, 450, 350, 450, 350, 850, 560, 750);
    fill(54, 36, 28); //eyebrows
    quad(300, 400, 200, 385, 150, 410, 300, 425);
    quad(399, 400, 499, 385, 549, 410, 399, 425);
    stroke(54, 36, 28); //lashes
    strokeWeight(3);
    noFill();
    arc(225, 475, 95, 60, PI, TWO_PI);
    arc(474, 475, 95, 60, PI, TWO_PI);
    noStroke();
    fill(54, 36, 28); //pupils
    ellipse(225, 462, 20, 35);
    ellipse(474, 462, 20, 35);
    fill(205, 156, 127); //nose
    quad(350, 500, 300, 625, 350, 650, 400, 625);
    noFill();
    stroke(85, 4, 4); //lips
    strokeWeight(5);
    arc(350, 690, 150, 40, 0, PI);
}

Project 1 – Self Portrait

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

function draw() {
	background(42, 49, 36);    //green

	fill(29, 22, 16);    //dark brown
	noStroke();
	quad(120, 600, 480, 600, 470, 216, 130, 216);
	circle(300, 216, 340);

	fill(171, 113, 88);    //tan
	noStroke();
	circle(300, 215, 266);
	quad(177, 345, 423, 345, 433, 215, 167, 215);
	circle(300, 330, 248);
	quad(172, 260, 142, 279, 161, 343, 200, 342);
	quad(427, 260, 400, 341, 438, 343, 457, 279);
	
	fill(29, 22, 16);    //dark brown
	noStroke();
	quad(202, 195, 205, 210, 267, 215, 266, 200);
	quad(202, 195, 205, 210, 180, 224, 189, 208);
	quad(394, 209, 397, 194, 333, 199, 332, 214);
	quad(394, 209, 397, 194, 410, 207, 419, 223);
	circle(263, 390, 5);
	ellipse(282, 322, 8, 4);
	ellipse(316, 322, 8, 4);

	fill(255, 255, 255);    //white
	stroke(0);
	strokeWeight(3);
	circle(230, 256, 95);
	circle(370, 256, 95);
	line(278, 256, 322, 256);

	fill(218, 131, 110);    //pink
	noStroke();
	quad(300, 364, 344, 366, 315, 350, 300, 354);
	quad(300, 364, 256, 366, 285, 350, 300, 354);
	quad(256, 366, 344, 366, 330, 383, 270, 383);

}

Project 1 – Self Portrait

//Rouann Self-portrait
function setup() {
    createCanvas(600, 600);
    background(255, 211, 216);
    text("I AM A LAZY PIGGY UNICORN", 10, 15);
}

function draw() {
	fill(255);
	noStroke();
	quad(291, 398, 440, 333, 526, 600, 221, 600);	//body1
	ellipse(298, 300, 450, 319);	//head2
	fill(253, 245, 206);
	triangle(230, 30, 250, 210, 360, 200);	//horn3
	stroke(0);
	strokeWeight(3);
	noFill();
	arc(270, 280, 99, 30, 0, PI);	//sleepyeye4
	noStroke();
	fill(255, 66, 133);
	ellipse(350, 340, 89, 33);	//blush5
	stroke(255, 150, 157);
	strokeWeight(6);
	line(290, 330, 280, 350);
	line(310, 325, 300, 345);
	line(330, 320, 320, 340);
	line(350, 315, 340, 335);
	line(370, 310, 360, 330);	//blush678910
	noStroke();
	fill(255, 169, 179);
	circle(170, 405, 53);	//mouth11
	fill(187, 218, 236);
	rect(323, 120, 110, 51, 53);
	rect(380, 160, 110, 49, 33);
	rect(420, 190, 110, 53, 33);
	rect(460, 230, 110, 50, 33);
	rect(470, 270, 110, 53, 33);
	rect(460, 310, 110, 53, 33);
	rect(440, 350, 110, 53, 33);
	rect(420, 390, 110, 53, 33);	//hair12
	stroke(253, 245, 206);
	strokeWeight(29);
	point(366, 120);
	point(443, 167);
	point(433, 210);
	point(500, 230);
	point(543, 280);
	point(480, 320);
	point(500, 350);
	point(550, 390);
	point(447, 440);	//dressing
	

}

Project – Self Portrait

This is what I look like. (Not exactly, I messed up lol)

function setup() {
    createCanvas(500, 500);
    background(236, 170, 86);
    //orange/yellow background color    
}

function draw() {
	//ocean part
    fill(80, 114, 174);
    stroke(80, 114, 174);
    rect(0, 200, 500, 300);
    //here comes the sun
    fill(236, 144, 68);
    stroke(236, 144, 68);
    arc(400, 197, 150, 150, PI, 0,CHORD);
    //lines for waves
    stroke(118, 151, 197);
    strokeWeight(3);
    line(30, 230, 140, 230);
    line(280, 210, 140, 210);
    line(300, 225, 450, 225);
    line(60, 315, 240, 315);
    line(175, 280, 390, 280);
    line(250, 350, 450, 350);
    line(0, 400, 220, 400);
    line(340, 410, 500, 410);
    line(100, 440, 400, 440);

    // sand foreground
    fill(215, 188, 143);
    stroke(215,188,143);
    rect(0, 400, 500, 100);
    //hair
    fill(60, 37, 27);
    stroke(60, 37, 27);
    circle(250, 280, 230);
    //strands of hair now
    rect(135, 280, 230, 220);

   //now starting face
    fill(210, 150, 114);
    stroke(210, 150, 114);
    ellipse(250, 300, 170, 200);
    //neck
    rect(220, 380, 60, 60);
    //shoulders
    circle(180, 470, 60);
    circle(320, 470, 60);
    rect(180, 440.2, 145, 180);
    rect(150, 470, 200, 180);
   
    //shirt
    fill(95, 75, 114);
    stroke(95, 75, 114);
    rect(185, 480, 135, 20);
    rect(196, 440.2, 10, 50);
    rect(300, 440.2, 10, 50);

    //eyes
    fill(255);
    stroke(0);
    strokeWeight(1.5);
    arc(213, 292, 40, 20, PI, 0);
    arc(213, 292, 40, 15, 0, PI);
    arc(285, 292, 40, 20, PI, 0);
    arc(285, 292, 40, 15, 0, PI);

    //pupil
    fill(35, 21, 18);
    circle(213, 292, 15);
    circle(285, 292, 15);


    //nose
    noFill();
    strokeWeight(2);
    arc(250, 320, 25, 15, 0, PI);

    //smile
    stroke(208, 98, 122);
    strokeWeight(4);
    fill(208, 98, 122);
    arc(250, 355, 70, 23, 0, PI);
    stroke(0);
    strokeWeight(1);
    

    //eyebrows
    strokeWeight(4);

    arc(210, 270, 45, 5, PI, 0);
    arc(288, 270, 48, 5, PI, 0);
    

}

Project 1 – Self Portrait

This is what I look like in the morning.

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 1 : Self Portrait

Week 1

sketch-self portrait Download

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

function draw() {
  background(107,116,145);
  
  //hair
  fill(132, 117, 82);
  noStroke();
  beginShape();
  curveVertex(width/2-140,290);
  curveVertex(width/2-130,230);
  curveVertex(width/2-120,350);
  curveVertex(width/2-130,550);
  curveVertex(width/2+130,550);
  curveVertex(width/2+120,350);
  curveVertex(width/2+140,250);
  endShape(CLOSE);
  
  //main body
  fill(247, 194, 150);
  noStroke();
  beginShape();
  vertex(width/2-35, 390);
  vertex(width/2-35, 430);
  vertex(150, 470);
  vertex(100, 550);
  vertex(100, 650);
  vertex(550, 650);
  vertex(550, 550);
  vertex(500, 470);
  vertex(width/2+35, 430);
  vertex(width/2+35, 390);
  endShape(CLOSE);
  
  //face
  fill(247, 194, 150);
  noStroke();
  ellipse(width/2,240,250,320)
  //ears
  ellipse(width/2-110,320,20,40)
  ellipse(width/2+110,320,20,40)
  
  
 //hats
  fill(0);
  noStroke();
  beginShape();
  curveVertex(width/2-200,300);
  curveVertex(width/2-200,320);
  curveVertex(width/2-100,100);
  curveVertex(width/2,50);
  curveVertex(width/2+100,100);
  curveVertex(width/2+200,320);
  curveVertex(width/2+200,300);
  endShape();
  
  
  //lips
  fill(190,111,82);
  noStroke();
  beginShape();
  curveVertex(width/2-35,350);
  curveVertex(width/2-30,360);
  curveVertex(width/2,370);
  curveVertex(width/2+30,360);
  curveVertex(width/2+35,350);
  endShape();
  
  beginShape();
  curveVertex(width/2-35,370);
  curveVertex(width/2-30,360);
  curveVertex(width/2,355);
  curveVertex(width/2+30,360);
  curveVertex(width/2+35,370);
  endShape();
  
  //nose
  fill(239, 217, 192);
  noStroke();
  beginShape();
  vertex(width/2-8, 320);
  vertex(width/2-10, 335);
  vertex(width/2+10, 335);
  vertex(width/2+8, 320);
  endShape(CLOSE);
  noLoop();
  
  fill(239, 217, 192);
  noStroke();
  beginShape();
  curveVertex(width/2-10, 335);
  curveVertex(width/2-10, 335);
  curveVertex(width/2, 340);
  curveVertex(width/2+10, 335);
  curveVertex(width/2+10, 335);
  endShape();
  
  //garment with transparency
  fill(150,190);
  stroke(220);
  strokeWeight(3);
  beginShape();
  curveVertex(width/2-45,405);
  curveVertex(width/2-35,425);
  curveVertex(width/2-57,435);
  curveVertex(150, 460);
  curveVertex(100, 550);
  curveVertex(120, 650);
  curveVertex(520, 650);
  curveVertex(550, 550);
  curveVertex(500, 460);
  curveVertex(width/2+57,435);
  curveVertex(width/2+35,425);
  curveVertex(width/2+45,405);
  endShape(CLOSE);

  //garment on top layer
  fill(250);
  noStroke();
  beginShape();
  vertex(width/2,610)
  vertex(width/2-50,430)
  vertex(width/2-170,430)
  vertex(width/2-180,470)
  vertex(width/2-180,650)
  vertex(width/2+180,650)
  vertex(width/2+180,470)
  vertex(width/2+170,430)
  vertex(width/2+50,430)
  endShape();
  
  //accessories*line
  stroke(2);
  strokeWeight(1);
  strokeCap(SQUARE);
  line(width/2-110,330,width/2-110,385);
  line(width/2+110,330,width/2+110,385);
  noLoop();
  
  fill(249,239,80);//the spherical structure
  ellipse(width/2-110,385,50,50);
  ellipse(width/2+110,385,50,50);
  
  
  }

Project 1: My Self Portrait

This is my project.

sketch_selfportrait-SL

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

function draw() {
    background(247, 221, 235)
    noStroke()

    // hair
    fill(38, 23, 8)
    ellipse(400, 450, 500, 650)

    // face
    fill(235, 190, 143)
    ellipse(400, 420, 300, 400)

    // ears
    circle(250, 400, 50)
    circle(550, 400, 50)

    // neck
    rect(358, 600, 90, 300)

    // nose
    stroke(255, 222, 179)
    strokeWeight(4)
    triangle(382, 475, 400, 420, 418, 475)

    // ear holes
    noStroke()
    fill(0, 0, 0)   
    circle(245, 400, 12, 12) 
    circle(555, 400, 12, 12)

    // earrings
    fill(175, 23, 104)   
    circle(246, 420, 5, 5) 
    circle(554, 420, 5, 5)

    // eyebrows
    noFill()
    stroke(38, 23, 8)
    arc(330, 377, 80, 70, (5 * PI) / 4, (7 * PI) / 4)
    arc(470, 377, 80, 70, (5 * PI) / 4, (7 * PI) / 4)

    // bangs
    fill(38, 23, 8) 
    arc(270, 230, 240, 250, -.18, HALF_PI + QUARTER_PI, OPEN)
    arc(480, 240, 200, 180, QUARTER_PI, -2.5, OPEN)

    // mouth
    fill(255, 255, 255)
    stroke(255, 0, 0)
    strokeWeight(6)
    arc(400, 510, 75, 75, 0, PI, CHORD)
    stroke(0)
    strokeWeight(1.5)
    line(370.2, 526.5, 429.8, 526.5)
	
    // eyes (outer)
    arc(330, 385, 48, 48, PI, 0, CHORD)
    arc(470, 385, 48, 48, PI, 0, CHORD)

    // upper body    
    fill(102, 0, 51)
    square(250, 660, 300)

    //eyeballs
    fill(75, 45, 14)
    circle(330, 373, 20, 20)
    circle(470, 373, 20, 20)
    noStroke()
    fill(0, 0, 0)
    circle(330, 373, 8.5, 8.5)
    circle(470, 373, 8.5, 8.5)
    fill(255, 255, 255)
    circle(333, 375, 4, 4)
    circle(473, 375, 4, 4)
}

Project 1 : Self Portrait

sketch Download

//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: 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);
}