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

Me in Space

function setup() {
    createCanvas(800, 640);
    background(0);
    angleMode(DEGREES);
}

function draw() {

    //draw stars
    strokeWeight(0);
    for (let i = 0; i < 100; i++) {
        fill(255, random(180, 200), 130, random(100,255))
        circle(random(0,800), random(0,640), random(5, 10)); 
        }
    
    //draw body
    strokeWeight(1);
    fill(230);
    beginShape();
        vertex(120, 640);
        bezierVertex(150, 550, 700, 500, 800, 560);
        vertex(800, 640);
        vertex(120, 640);
    endShape();
    
    //draw glass
    translate(450, 300);
    rotate(3);
    fill(62, 73, 76);
    ellipse(0, 0, 500-35, 550-35);
    
    //draw neck
    strokeWeight(0);
    fill(133, 130, 119);
    rotate(-3);
    rect(-80, 200, 150, 60);
    
    //draw ears
    rotate(-3);
    ellipse(-180, 25, 50, 90);
    rotate(9);
    ellipse(180, 25, 50, 90);
    
    //draw face
    fill(171, 164, 149);
    rotate(-3);
    ellipse(0, -30, 380, 500);

    //draw hair
    fill(0);
    arc(0, -30, 380, 500, 175, 365, CHORD);
    stroke(0);
    strokeWeight(0);
    fill(171, 164, 149);
    beginShape();
        curveVertex(-190, -10);
        curveVertex(-190, -10);
        curveVertex(-170, -50);
        curveVertex(-120, -100);
        curveVertex(-110, -150);
        curveVertex(-90, -150);
        curveVertex(90, -150);
        curveVertex(125, -140);
        curveVertex(140, -90);
        curveVertex(190, -10);
        curveVertex(190, -10);
    endShape();

    //draw eyebrow
    strokeWeight(5);
    bezier(-120, -40, -40, -40, -40, -30, -50, -80);
    line(30, -45, 110, -55);
    
    //draw eyes
    strokeWeight(0);
    fill(0);
    rect(-80, -40, 20, 20);
    ellipse(-70, -20, 20, 40);
    rect(50, -50, 20, 20);
    ellipse(60, -30, 20, 40);
    
    //draw nose
    strokeWeight(3);
    line(-20, 0, -30, 70);
    line(-30, 70, 10, 68);
    line(10, 68, 0, 0);
    
    //draw mouse
    noFill();
    bezier(-35, 110, -10, 170, 0, 190, 25, 110);

    //draw eyeglasses
    rotate(-3);
    strokeWeight(3);
    stroke(48, 62, 61);
    line(-30, -30, 20, -30);
    line(-130, -30, -190, -15);
    line(120, -30, 190, 0);
    fill(130, 149, 161, 135);
    strokeWeight(0);
    rect(-130, -55, 100, 70, 10);
    rect(20, -55, 100, 70, 10);
    rotate(-2);
    
    //draw detail
    strokeWeight(50);
    stroke(150);
    line(210, 260, 200, 350);
    line(-190, 280, -180, 350);
    
    //draw connection
    strokeWeight(30);
    stroke(62, 73, 76);
    bezier(-160, 260, -80, 340, 100, 340, 180, 240);
    
    //draw highlight
    stroke(255, 255, 255, 130);
    bezier(120, 10, 125, 10, 115, -60, 110, -60);

    //draw suit
    rotate(5);
    noFill();
    stroke(230);
    strokeWeight(70);
    ellipse(0, 0, 500, 550);

    noLoop();
}

Me in Space

I find uploading this most difficult.

Project 1: My Self Portrait

ty.sketch

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

function draw() {
    fill(255,255,255)
    circle(width/2,height/2,150);
    circle(120,250,40)
    circle(180,250,40)
    fill(238,202,179)
    circle(150,260,10)
    fill(0)
    ellipse(123,250,8,8)
    ellipse(177,250,8,8)
    line(140,250,160,250)
    line(100,250,75,240)
    line(200,250,225,240)
    fill(255,192,203)
    ellipse(95,275,25,15)
    ellipse(205,275,25,15)
    noFill()
    bezier(150,190,110,180,145,260,75,240);
    bezier(150,190,190,180,155,260,225,240)
    ellipse(67,250,16,26)   //ear
    curve(58,235,68,245,68,255,58,265)
    curve(242,235,232,245,232,255,242,265)
    ellipse(233,250,16,26)
    bezier(67,237,85,130,215,130,233,237)
    bezier(140,280,145,288,155,288,160,280)
    bezier(67,263,60,288,56,290,40,320)
    line(40,320,143,337)
    bezier(233,263,240,288,244,290,260,320)
    line(260,320,157,337)
    line(143,325,143,337)
    line(157,325,157,337)
    fill(162,228,184)
    quad(143,337,120,355,180,355,157,337)
    fill(255)
    triangle(143,337,150,350,157,337)
    fill(185,38,54)
    square(146,171,8)
    quad(146,171,130,166,130,184,146,179)
    quad(154,171,170,166,170,184,154,179)
}

Project 1- My Self Portrait

sketch

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

function draw() {
    background(120);
    strokeCap(ROUND);
    scale(0.93);

    //DYNAMIC BACKGROUND
    noFill();
    noStroke();
    var c = width/2;
    var alt = true;

    if (mouseX >= c){
        alt = true;
        fill(244, 162, 97);             // orange
        triangle(0,0, c, c, 100, -50); 

        fill(38, 70, 83);               // dark blue
        triangle(400, -50, c,c, 600, -50);
        
        fill(42, 157, 143);             //teal
        triangle(-200, 300, c, c, -300, 400);
        triangle(650, 20, c,c, 650, 50);

        fill(233, 196, 106);            // yellow
        triangle(-400, 400, c, c, -600, 650);
        triangle(650, 200, c, c, 650, 340);

        fill(231, 111, 81);             // red
        triangle(100, 650, c, c, 350, 650);
        triangle(300, -50, c, c, 380, -50);

        fill(96, 108, 56);              // green
        triangle(650, 400, c, c, 650, 500);

    } else {
        alt = false;
        fill(40, 54, 24);             // dark green
        triangle(0,30, c, c, 0, 250); 

        fill(254, 250, 224);             // cream
        triangle(400, -50, c,c, 600, -50);
        
        fill(221, 161, 94);             //tan
        triangle(-200, 300, c, c, -300, 400);
        triangle(600, 0, c,c, 650, 0);

        fill(43, 45, 66);            // dark purple
        triangle(-400, 500, c, c, 0, 580);
        triangle(650, 200, c, c, 650, 340);

        fill(131, 197, 190);             // light blue
        triangle(0, 650, c, c, 80, 650);
        triangle(100, 0, c, c, 210, 0);

        fill(255, 221, 210);              // salmon
        triangle(650, 500, c, c, 650, 650);
    }

    //FACE 
    noStroke();
    fill(255, 255, 255);

    beginShape();
    vertex(147, 240);
    vertex(147, 290);
    vertex(153, 295);

    vertex(300, 300);
    vertex(195, 434);
    vertex(203, 460);
    vertex(208, 490);
    vertex(209, 510);
    vertex(208, 530);
    vertex(201, 570);
    vertex(181, 645);
    vertex(518, 645);
    vertex(645, 645);
    vertex(645, 540);
    vertex(550, 538);
    vertex(550, 497);
    vertex(500, 250);
    endShape();

    stroke(10);
    
    bezier(280, 519, 210, 500, 90, 310, 228, 163);
    bezier(228, 163, 287, 95, 390, 117, 422, 147);
    bezier(422, 147, 600, 320, 370, 540, 280, 519);
    noStroke();
    triangle(280, 519, 228, 163, 422, 147);

    //NOSE
    stroke(7);
    noFill();
    bezier(261, 339, 236, 321, 260, 315, 269, 295);
    bezier(269, 295, 275, 254, 278, 228, 267, 212);
    bezier(321, 338, 334, 320, 309, 310, 297, 282);
    bezier(324, 324, 312, 305, 289, 304, 297, 282);

    //MOUTH
    bezier(238, 396, 253, 369, 309, 374, 351, 400);
    bezier(238, 396, 260, 474, 331, 433, 351, 400);

    //HAIR
    stroke(10);
    fill(255);
    curve(-500, 1000, 291, 83, 550, 538, -200, 1003);
    curve(600, 600, 291, 83, 147, 290, 620, 250);
    //curve(1000,-700, 550, 497, 490, 645, 0, 0);
    bezier(291, 123, 460, 90, 380, 320, 500, 350);
    noFill();
    bezier(195, 434, 220, 500, 210, 550, 180, 645);
    curve(305, 105, 291, 123, 165, 297, 800, 193);
    
    noStroke();

    fill(255, 255, 255);
    triangle(291, 83, 220, 180, 291, 123);
    triangle(291, 83, 350, 115, 291, 122);

    //NECK
    stroke(7);
    bezier(255, 507, 290, 550, 260, 620, 247, 645);
    noFill();
    bezier(425, 442, 460, 530, 460, 540, 645, 540);
    
    //EYES
    fill(237, 189, 64, 200);
    noStroke();
    ellipseMode(CENTER);
    circle(353, 246, 23);
    ellipse(222, 251, 18, 20);

    stroke(8);
    noFill();
    bezier(331, 257, 347, 220, 391, 230, 409,  249);
    bezier(257, 256, 231, 228, 210, 241, 206, 261);


    //TEXT
    var s = 'Ceci n\'est pas un autoportrait.';
    var f = 'Is this a self portrait?'
    fill(0);
    if (alt){
        textSize(30);
        text(s, 150, 50);
    } else {
        textSize(20);
        fill(255);
        noStroke();
        text(f, 50, 50, 70);
    }

}

Project 1: My self-portrait

sketch

function setup(){
    createCanvas(500,300);
    background(221,236,240);
}

function draw(){
    noStroke();
    fill(125,158,166);
    ellipse(40,60,180,90);
    ellipse(450,200,180,90);
    stroke(23,20,49);
    strokeWeight(20);
    line(0,200,500,100);
    line(0,150,500,200);
    noStroke();
    fill(208,187,164);
    rect(230,180,40,40);//rectangle of the neck
    fill(131,142,189);
    triangle(100,240,230,200,270,240);
    triangle(400,240,270,200,230,240);
    rect(100,240,300,60);
    fill(235,210,173);
    ellipse(250,110,120,160);//head ellipse
    fill(210,152,138);
    beginShape();
    vertex(235,168);
    vertex(245,162);
    vertex(250,165);
    vertex(255,162);
    vertex(265,168);
    vertex(255,175);
    vertex(245,175);
    endShape();
    fill(113,96,79);
    beginShape();
    vertex(185,80);
    vertex(180,120);
    vertex(200,100);
    vertex(210,110);
    vertex(220,95);
    vertex(240,110);
    vertex(260,100);
    vertex(280,125);
    vertex(290,100);
    vertex(295,115);
    vertex(305,100);
    vertex(320,120);
    vertex(310,80);
    endShape();//hair
    fill(50);
    ellipse(250,70,200,40);
    fill(20);
    ellipse(250,60,120,20);
    rect(190,10,120,50);
    ellipse(250,10,120,20);
    fill(190);
    rect(180,110,140,35);
    fill(147,141,140);
    beginShape();
    vertex(300,110);
    vertex(305,110);
    vertex(298,145);
    vertex(290,145);
    endShape();
    beginShape();
    vertex(310,110);
    vertex(312,110);
    vertex(310,145);
    vertex(305,145);
    endShape();
    fill(255);
    beginShape();
    vertex(316,110);
    vertex(318,110);
    vertex(315,145);
    vertex(312,145);
    endShape();
    beginShape();
    vertex(185,110);
    vertex(190,110);
    vertex(187,145);
    vertex(183,145);
    endShape();
    stroke(0);
    strokeWeight(4);
    line(230,120,230,135); 
    line(270,120,270,135);
    noStroke();
    fill(235,210,173);
    triangle(250,140,240,145,260,145);   
    fill(220,227,146);
    ellipse(140,270,30);
    ellipse(290,260,20);
    fill(190,145,192);
    ellipse(220,250,20);
    fill(225,168,39);
    ellipse(350,280,30);
    fill(148,209,205);
    ellipse(300,220,15);



}

I found that creating an irregular shape is very challenging, and also I need to calculate a lot of the positions and locations.

Project 1 – Self Portrait

This is what I look like in the morning…

morning-portrait

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

This is what I look like in the morning.

morning-portrait

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

This is what I look like in the morning.

portrait

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