Category: Project-01-Face

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

}

My Portrait

I came into this project with no specific idea or image in my head, so I put in a random shape that turned out to look like a cat‘s head. To add a mouth I thought I would just duplicate the shape but with the bottom point skewed so as to create an “open” mouth. Recalling my past origami obsession, I noted it looked like it was a paper folding, and so I took that theme and ran with it.’

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

function draw() {
	background(128,222,250);
		fill(236,174,66);    //light blue
	rect(200,300,70,700);	//neck
	quad(100,200,300,600,600,100,400,100);	//vhin
		fill(246,111,255);    //pink
	quad(125,200,305,580,550,100);    //mouth
	line(400,100,300,600);    //mouth center line
		fill(236,174,66);    //orange
	quad(100,200,450,600,600,100,400,100);    //head
	triangle(100,200,250,150,200,50);	 //left ear
	triangle(600,100,500,100,520,30);    //right ear
		fill(255,255,255);    //white 
		strokeWeight(3)
	ellipse(300,300,100,100);    //left eye
	ellipse (525,300,65,100);	//right eye
	strokeWeight(1)
	line(400,100,450,600);    //head center line
		fill(6,165,1);    //green
		strokeWeight(10);
	ellipse(300,300,50,50);    //left eye pupil
	    fill(52,100,212);    //blue
	 ellipse (525,300,32.5,50);    //right eye pupil
	 	fill(236,174,66);
	 	strokeWeight(1);
	arc(300,300,100,100,0,PI);    //eyelid
	    fill(246,111,255);
	triangle(130,180,210,140,200,70);    //left inner ear
	triangle(582,92,515,87,525,45);    //right inner ear
	    fill(0,0,0);
	triangle(408,550,467,540,450,600);    //nose
		fill(226,226,226,200);    //light gray
		stroke(186,186,186);    //gray
		strokeWeight(5);
	circle(100,750,250);	//clouds
	circle(300,750,275);
	circle(450,750,230);
	circle(650,750,250);
		fill(0,0,0);	//white
		noLoop()
	

}

Project 01 – Goggle Portrait

An example of the project for 01.

aleks_project_01_copy
function setup() {
    createCanvas(200, 200);
    background(220);
}

function draw() {
    fill (145, 63, 153);
    strokeWeight (4);
    ellipse (70, 70, 80);
    fill (245, 66, 197);
    quad (24, 35, 86, 20, 90, 70, 20, 50);
    stroke (245, 66, 197)
    line (25, 35, 25, 140);
    line (25, 35, 27, 144);
    line (24, 35, 20, 140);
    line (25, 34, 20, 147);
    line (34, 34, 22, 145);
    stroke (0);
    fill (260);
    ellipse (60, 60, 25); //first eye
    fill (220);
    ellipse ( 90, 60, 35); //seccond eye
    fill (0);
    ellipse (60, 60, 5); //first eyeball
    fill (40);
    ellipse (90, 60, 15); //seccond eyeball
    fill (180, 240, 244);
    triangle (70, 70, 70, 80, 85, 80);
    stroke (180, 240, 244)
    line (50, 100, 80, 100);
    noLoop ();
}