Month: September 2017

sketch

//Isabelle Vincent
//15-104 E
//ifv@andrew.cmu.edu
//Project-01-Face
function setup() {
    createCanvas(600, 600);
    background(76,143,193);
}
function draw() {
//Back of hair Oval
    fill(245,120,44);
    stroke(245,120,44);
    ellipseMode(CENTER);
    ellipse(300,150,430,250);
//Back of hair rectangle
    fill(245,120,44);
    stroke(245,120,44);
    rect(85,150,430,500);
//Main Head Ellipse
    fill(255, 229, 204);
    stroke(255, 229, 204);
    ellipseMode(CENTER);
    ellipse(300,280,330,430);
//Chin Defining Quad left
    fill(245,120,44);
    stroke(245,120,44);
    quad(135,420,300,495,135,495,125,420);
//Chin defining Quad Right
    fill(245,120,44);
    stroke(245,120,44);
    quad(465,420,475,420,475,495,300,495);
//Forehead Hair Right
    fill(245,120,44);
    stroke(245,120,44);
    quad(320,45,465,150,465,270,300,63,);
//Forehead Hair Left
    fill(245,120,44);
    stroke(245,120,44);
    quad(125,150,280,45,300,63,125,270);
//Nose Line Left
    fill(255,210,153);
    stroke(255,204,153);
    strokeWeight(6);
    line(283,240,283,320);
//Nose Line Right
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(317,240,317,320);
//Nostril left
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(290,335,270,330);
//Nostril Right
    fill(255,204,153);
    stroke(255,210,153);
    strokeWeight(6);
    line(310,335,330,330);
//Eye Left
    fill(253,251,244);
    stroke(255,210,153);
    strokeWeight(6);
    ellipseMode(CORNER);
    ellipse(173,240,90,40);
//Eye Right
    fill(253,251,244);
    stroke(255,210,153);
    strokeWeight(6);
    ellipseMode(CORNER);
    ellipse(337,240,90,40);
//Iris Left
    fill(76,143,193);
    stroke(76,127,193);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(218,260,33,33);
//Iris Right
    fill(76,143,193);
    stroke(76,127,193);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(382,260,33,33);
//Eyebrow Left
    fill(245,120,44);
    stroke(245,120,44);
    strokeWeight(6);
    line(173,215,263,215);
//Eyebrow Right
    fill(245,120,44);
    stroke(245,120,44);
    strokeWeight(6);
    line(337,215,427,215);
//Lips Ellipse
    fill(255,180,143);
    stroke(235,139,91);
    strokeWeight(6);
    ellipseMode(CENTER);
    ellipse(300,390,74,30);
//Mouth Middle line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(263,390,337,390);
//Mouth Left line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(263,390,218,360);
//Mouth Right Line
    fill(235,139,91);
    stroke(235,139,91);
    strokeWeight(6);
    line(337,390,382,360);
//Freckles Left Side
    fill(194,96,47);
    stroke(194,96,47);
    strokeWeight(6);
//Freckles
    fill(194,96,47);
    stroke(194,96,47);
    strokeWeight(6);
    point(185,300);
    point(410,300);
    point(356,300);
    point(242,300);
    point(213.5,313);
    point(383,313);

}

I started this project by planning out which shapes would overlap in which order by sketching a rough sequential draft in my sketchbook. I used the center point of my main hair ellipse as an anchor for the rest of my shapes so when needed i could calculate the required points to make certain elements symmetrical. I am happy with my final product because it bears resemblance to me and has its own style.

project01_self portrait

function setup() {
    createCanvas(600, 600);
    background(248, 177, 149);

    var a = color(53, 92, 125); // Hair fill 
    fill(a);  
    noStroke();  
    rect(120, 320, 360, 300);  

    ellipseMode (RADIUS); // Face upper 
    fill (252, 235, 182);
    arc(300, 250, 190, 190, PI, 0);

    ellipseMode (RADIUS); // Face lower 
    fill (252, 235, 182);
    strokeWeight (0);
    arc(300, 250, 190, 250, 0, PI);

    ellipseMode (RADIUS); // Hair upper left 
    noFill ();
    stroke (53, 92, 125);
    strokeWeight (60);
    arc(280, 250, 190, 200, PI, -1.6);

    

    ellipseMode (RADIUS); // Hair upper right
    noFill ();
    stroke (53, 92, 125);
    strokeWeight (60);
    arc(310, 250, 190, 200, -HALF_PI, 0);

    line (90, 250, 90, 600);
    line (500, 250, 500, 600);

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    strokeWeight (2);
    stroke (240, 120, 24);
    ellipse(200, 250, 40, 27);  // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill(100);  // Set fill to gray
    strokeWeight (0);
    ellipse(200, 245, 40, 40);  // Draw gray ellipse using CENTER mode

    ellipseMode(RADIUS);  // Set ellipseMode to RADIUS
    fill(255);  // Set fill to white
    strokeWeight (2);
    stroke (240, 120, 24);
    ellipse(400, 250, 40, 27);  // Draw white ellipse using RADIUS mode

    ellipseMode(CENTER);  // Set ellipseMode to CENTER
    fill(100);  // Set fill to gray
    strokeWeight (0);
    ellipse(400, 245, 40, 40);  // Draw gray ellipse using CENTER mode
   
    noFill (); // Eyelash 
    strokeWeight (3);
    arc(150, 245, 20, 5, 0, PI);

    noFill (); // Eyelash 
    strokeWeight (3);
    arc(450, 245, 20, 5, 0, PI);

    noFill (); // Nose line 
    strokeWeight (2);
    stroke (240, 120, 24);
    arc(325, 270, 15, 100, HALF_PI, PI);

    noFill (); // Nose arc
    strokeWeight (2);
    arc(310, 340, 40, 22, 0, PI);

    noFill (); // Upper lip left 
    strokeWeight (2);
    stroke (240, 120, 24);
    arc(285, 400, 60, 22, -3.1, -0.3);

    noFill (); // Upper lip right 
    strokeWeight (2);
    arc(335, 400, 60, 22, -2.9, -0.2);

    noFill (); // Middle lip  
    strokeWeight (2);
    arc(308, 402, 110, 10, 0, PI);

    noFill (); // Lower lip  
    strokeWeight (2);
    arc(308, 406, 110, 45, 0, PI);

    noFill (); // Eyebrow left 
    strokeWeight (4);
    stroke (240, 120, 24);
    arc(200, 200, 85, 25, PI, -0.09);

    noFill (); // Eyebrow right
    strokeWeight (4);
    arc(400, 200, 85, 25, PI, -0.09);

    



}

Being completely unfamiliar and inexperienced with p5.js, I definitely struggled to produce a self-portrait that I was satisfied with. There were moments of frustration as it was difficult to achieve the geometric shapes I wanted, but through experimenting and familiarizing myself with the program I think I would be able to achieve a better outcome.

 

I first started off with hand sketch:

The hand sketch is then vectorized in Sketch with simple geometric shapes keeping in mind that this will be written with code.

The program is constructed proportions. Every variable is based on the width (w) and height (h) of the canvas. Half way through writing the program, I realized that it would be efficient to be able to visually see the proportions of the screens I am working with, so I quickly wrote a program.

Because the code is based of proportions rather than pixels, I can quickly mirror my facial features with 1-.xx. Just as I leave traces of sketch marks on my drawings, here I’ve chosen to leave the traces of code I’ve used to proportionally construct my drawing.

Supawat’s Portrait

// 
// Supawat Vitoorapakorn
// Svitoora@andrew.cmu.edu
// Section E
// 
// Self Portrait of Supawat Vitoorapakorn

// Global

    s = .65
    var w = 768*(600/768);
    var h = 1024*(650/768);

// Face Var
    var f_w = (424/768) *w;     //face width
    var f_h = (553/1024)*h;     //face height

// Neck Var
    var neck_w = .27;
    var neck_y = .75;
    var neck_h = .1;
    var neck_w2 = .365;

// V-neck Var
    var v_x1 = (w/2) - (neck_w/2)*w ;
    var v_x2 = (w/2) + (neck_w/2)*w;
    var v_x3 = (w/2);

    var v_yshift = 0;

    var v_y2 = .795*h; 
    var v_y1 = v_y2+((83/h)*h);
    var v_y3 = v_y1

// Color
    var SKIN = "#ffe4b2";
    var T_SHIRT = "#5C5C5C";
    var BLACK = (0,0,0);
    var SKIN_GLASS = "#ffe9c1";
    var RED = "#ed2024";
    var SHADOW = 255*.125;

// MAIN FUNCTION
function setup() {
    createCanvas(w,h);
    background(255);
    rectMode(CORNER);

// Backdrop
    fill(0);
    noStroke();
    noFill();
    strokeWeight(1);
    fill(216, 216, 216);
    rectMode(CORNERS);
    rect(w*.015, (.075)*h, w*(1-.015), h*.915);
    rectMode(CORNER);

// Neck
    noStroke();
    fill(SKIN);
    rectMode(CORNERS);
    rect(w*neck_w2, h*.7, w*(1-neck_w2),h*.8)
    rectMode(CORNER);
    
// Shirt
    fill(T_SHIRT);
    neck_size = .36;
    quad(   neck_size*w,      .795*h,
            (1-neck_size)*w,  .795*h,
            (1-.015)*w, .915*h,
            .015*w,     .915*h);

// V_Neck
    fill(SKIN)
    triangle(   v_x1, v_y2,         // left
                v_x3, v_y1,         // mid
                v_x2, v_y2);        // right

// Neck Shadow
    neck_shadowH = (143.9/h)*h;
    neck_y = h*.6175;

    var n_x1 = w*.5 + (neck_w*w)*.5;
    var n_x2 = w*.5 - (neck_w*w)*.5;
    var n_x3 = w*.5 + (neck_w*w)*.5;
    var n_x4 = w*.5 - (neck_w*w)*.5;

    var n_y1 = 0+neck_y;
    var n_y2 = 0+neck_y;
    var n_y3 = neck_shadowH+neck_y;
    var n_y4 = (neck_shadowH-(1/25)*h)+neck_y;

    fill(0,0,0,SHADOW)
    quad(   n_x1,n_y1,
            n_x2,n_y2,
            n_x4,n_y4,
            n_x3,n_y3
        );
      
// Face
    noStroke();
    fill(SKIN);
    ellipse(w*.5,h*.475,f_w,f_h);

// Hair
    fill(BLACK);
    h_y = h*.33
    h_h = -h*.175

    var h_x1 = w*.5 + (neck_w*w)*.9;        // Right Base
    var h_x2 = w*.5 - (neck_w*w)*.9;        // Left Base
    var h_x3 = w*.5 + (neck_w*w)*1.33;      // Right Tip
    var h_x4 = w*.5 - (neck_w*w)*.77;        // Left Tip

    var h_y1 = h_y;
    var h_y2 = h_y+20;
    var h_y3 = h_y+h_h;        // Right Tip
    var h_y4 = h_y+h_h*.9;     // Left Tip


    quad(   h_x1,h_y1,
            h_x2,h_y2,
            h_x4,h_y4,
            h_x3,h_y3
        );

// Facial Features
    // Facial Features Left
        var glass_size = .20;
        var nose_bridge = .13;
        var eye_size = .04;
        var eye_y = .51;
        var side = 1;       //1 for left; -1 for right

        // Glasses Bottom Shadow
        var shadow_yshift = .015;
        noStroke();
        rectMode(CORNERS);
        fill(0,0,0,SHADOW);
        rect(   .223*w,  side*((.485+shadow_yshift)*h),
                (1-.223)*w,          (eye_y+shadow_yshift)*h);

        // Glass Frame
        fill(SKIN_GLASS);
        strokeWeight(10);
        stroke(BLACK);
        strokeJoin(ROUND);
        arc(     w*(.5-nose_bridge), h*(.5),     //+nose bridge to flip
                 w*glass_size, w*glass_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);

        // Eyes Round
        fill(BLACK);
        noStroke();
        arc(     w*(.5-nose_bridge), h*(eye_y),     //+nose bridge to flip
                 w*eye_size, w*eye_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);

        // Eyes Line
        strokeWeight(5);
        stroke(BLACK);
        strokeCap(SQUARE);
        line(   (.5-nose_bridge-.05)*w,h*(eye_y-.001),
                (.5-nose_bridge+.05)*w,h*(eye_y-.001));

        // Glasses Side
        rectMode(CORNERS);
        strokeJoin(MITER);
        rect(   side*(.223*w),side*(.485*h),
                .27*w, eye_y*h);
        rectMode(CORNER);

        rectMode(CORNER);
        // Top Shadow
        strokeWeight(15);
        stroke(0,0,0,SHADOW);
        line(   (side*.28)*w, .48*h,
                (side*.46)*w, .48*h);

        // Eyebrow
        var e_x1 = (side*.27)*w;
        var e_y1 = .46*h;

        var e_x2 = (side*.335)*w;
        var e_y2 = .44*h;

        var e_x3 = (side*.45)*w;
        var e_y3 = .45*h;

        // strokeWeight(7.5);
        stroke(BLACK);
        line(   e_x1,   e_y1,
                e_x2, e_y2      );
        
        line(   e_x2-(3*side),e_y2,
                e_x3, e_y3          );
    // Facial Features Right
        var side = -1;       //1 for left; -1 for right

        // Glass Frame
        fill(SKIN_GLASS);
        strokeWeight(10);
        stroke(BLACK);
        strokeJoin(ROUND);
        arc(     w*(.5+nose_bridge), h*(.5),     //+nose bridge to flip
                 w*glass_size, w*glass_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);
        // Eyes Round
        fill(BLACK);
        noStroke();
        arc(     w*(.5+nose_bridge), h*(eye_y),     //+nose bridge to flip
                 w*eye_size, w*eye_size,
                 0-(1/15*PI), PI+(1/15*PI),
                 CHORD);

        // Eyes Line
        strokeWeight(5);
        stroke(BLACK);
        strokeCap(SQUARE);
        line(   (.5+nose_bridge-.05)*w,h*(eye_y-.001),
                (.5+nose_bridge+.05)*w,h*(eye_y-.001));

        // Glasses Side
        rectMode(CORNERS);
        strokeJoin(MITER);
        rect(   (1-.223)*w,.485*h,
                (1-.27)*w, eye_y*h);
        rectMode(CORNER);

        //Cast Shadow
        rectMode(CORNER);
        // Top Shadow
        strokeWeight(15);
        stroke(0,0,0,SHADOW);
        line(   (1-.28)*w, .48*h,
                (1-.46)*w, .48*h);

        // Eyebrow
        var e_x1 = (1-.27)*w;
        var e_y1 = .46*h;

        var e_x2 = (1-.335)*w;
        var e_y2 = .44*h;

        var e_x3 = (1-.45)*w;
        var e_y3 = .45*h;


        // strokeWeight(7.5);
        stroke(BLACK);
        line(   e_x1,   e_y1,
                e_x2, e_y2      );
        
        line(   e_x2-(3*side),e_y2,
                e_x3, e_y3          );
    // Facial Features Symetrical
        // Glasses Side
        var side = 1;
        noStroke();
        fill(BLACK);
        rectMode(CORNERS);
        strokeJoin(MITER);
        rect(   (.5-.03)*w,  (.485*h),
                (.5+.03)*w, eye_y*h);
        rectMode(CORNER);

        // Nose .
        var nose_y = .63;
        var nose_width = .025

        strokeWeight(7.5)
        stroke(BLACK);
        line(   (.5-nose_width)*w,  nose_y*h,
                (.5+nose_width)*w,  nose_y*h);

        // Mouth .
        var mouth_y = nose_y+.05;
        var mouth_width = .035*1.5

        strokeWeight(7.5)
        stroke(BLACK);
        line(   (.5-mouth_width)*w,  mouth_y*h,
                (.5+mouth_width)*w,  mouth_y*h);

        // Mouth Shadow
        var mouth_shadow_y = nose_y+.05+.02;
        var mouth_shadow_width = .035*.75

        strokeWeight(7.5)
        stroke(0,0,0,25);
        line(   (.5-mouth_shadow_width)*w,  mouth_shadow_y*h,
                (.5+mouth_shadow_width)*w,  mouth_shadow_y*h);

// Hair Side
    strokeWeight(0);
    noStroke();
    fill(0,0,0);
    quad    (w*.275, h*.34,
            w*.24,  h*.45,
            w*.215,  h*.47,
            w*.20,  h*.37);

    quad    (w*(1-.275), h*.32,
            w*(1-.24),  h*.45,
            w*(1-.215),  h*.47,
            w*(1-.2),  h*.35);
}
// Creates Mouse Guider
    function draw() {
        setup();
        noStroke();
        fill(255,240,0,255*.30);
        ellipse(mouseX, mouseY, 200, 200);
        var X = (mouseX/w).toFixed(3);
        var Y = (mouseY/h).toFixed(3);
        var XY = str("("+X+","+Y+")");
        fill(RED);
        textSize(24);
        strokeWeight(1);
        text(XY,mouseX,mouseY);
    }

SaveSave

SaveSave

SaveSave

gyueun_selfportrait

// GyuEun Park
// 15-104 E
// gyueunp@andrew.cmu.edu
// Project-01

function setup() {
	createCanvas(600, 600);
	background(93,129,182);
}

function draw() {
	// head
	fill(0);
	noStroke();
	ellipse(270,220.7,261,290);

	// right hair
	smooth(0);
	fill(0);
	quad(214,190,419,550,400.9,220,213,190);

	// left hair
	fill(0);
	quad(142,250,190,150,420,550,190,550);

	// face
	fill(255);
	noStroke();
	quad(175,300,210,150,330,396,230,396);
	fill(0);
	triangle(303,400,335,400,317,370);

	// eye
	fill(237,240,251);
	stroke(178,188,195);
	strokeWeight(0.6);
	arc(218,275,55,50,0,PI, CHORD);

	//eye details
	fill(108,125,140);
	arc(218,275,35,30,0,PI, CHORD);

	fill(0);
	strokeWeight(0.4);
	arc(218,275,17.5,15,0,PI, CHORD);

	fill(0);
	stroke(0);
	strokeWeight(3);
	line(186,272.5,245,274);

	//mouth
	fill(0);
	stroke(0);
	strokeWeight(2);
	line(254,346,275,346);

	//lip piercing
	fill(178,191,199);
	noStroke(0);
	ellipse(256,352,5,5);

	fill(255);
	noStroke(0);
	ellipse(255,351.4,2,2);
}

I created a simple self-portrait by using minimal details that accentuate my unique features. Although I went through a long trial-and-error process to find the most suitable shapes and angles, I enjoyed this project.