Category: Project Week 1

Project-01-Face

self portrait

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Faces Project 1
*/

function setup() {
    createCanvas(600, 600);
    background(239, 216, 219);
}

function draw() {

	fill(0);
	beginShape();
	curveVertex(200,100);
	curveVertex(300, 90);
	curveVertex(400, 100);
	endShape();

	fill(226, 195, 180);
	noStroke();
    ellipse(300, 260, 250, 300);//face

    fill(226, 195, 180);
    noStroke();
    rect(270, 350, 60, 140);//neck

fill(255, 255, 255);
    ellipse(356, 238, 40, 40);//right eye 
    fill(255, 255, 255);
    ellipse(256, 238, 40, 40);//left eye

    noFill();
    stroke(42, 21, 0);
    strokeWeight(3);
    arc(229, 200, 90, 1, 0, HALF_PI);//left eyebrow

    noFill();
    stroke(42, 21, 0);
    strokeWeight(3);
    arc(333, 200, 90, 1, 0, HALF_PI);//right eyebrow

    noFill();
    stroke(25, 18, 8);
    strokeWeight(6);
    arc(300, 280, 260, 358, 84.88, 201, HALF_PI);//hair outline

    noFill();
    strokeWeight(6);
    arc(300, 300, 260, 358, 84.88, 201, HALF_PI);//hair outline

    noFill();
    strokeWeight(6);
    arc(300, 290, 260, 358, 84.88, 201, HALF_PI);//hair outline

    noFill();
    strokeWeight(6);
    arc(300, 295, 260, 358, 84.88, 201, HALF_PI);//hair outline    

    noFill();
    strokeWeight(6);
    arc(300, 285, 260, 358, 84.88, 201, HALF_PI);//hair outline

    noFill();
    strokeWeight(3);
    arc(356, 238, 44, 45, 380, 50, HALF_PI);//right eye liner

    noFill();
    strokeWeight(3);
    arc(256, 238, 44, 45, 380, 50, HALF_PI);//left eye liner

    noStroke();

    fill(0);
    ellipse(266, 239, 20, 20);//right eye pupil

    fill(0);
    ellipse(366, 239, 20, 20);//left eye pupil

    fill(285, 285, 285);
    ellipse(266, 239, 5, 5);//right eye pupil light

    fill(285, 285, 285);
    ellipse(366, 239, 5, 5);//left eye pupil light

noStroke();
    fill(230, 160, 138);
    ellipse(300, 300, 40, 20);//nose

    fill(245, 173, 199);
    ellipse(242, 296, 50, 40);//left cheek

    fill(245, 173, 199);
    ellipse(362, 296, 50, 40);//right cheek

    fill(226, 195, 180);
    ellipse(174, 280, 24, 60);//left ear

    fill(230, 180, 128);
    ellipse(174, 280, 14, 40);//left inner ear

    fill(285);
    ellipse(174, 300, 14, 14);//left earring

    fill(226, 195, 180);
    ellipse(425, 280, 24, 60);//right ear

    fill(230, 180, 128);
    ellipse(425, 280, 14, 40);//right inner ear

    fill(285);
    ellipse(425, 300, 14, 14);//right earring

    fill(25, 18, 8);
    ellipse(300, 70, 80, 80);//hair bun

    fill(285)
    stroke(241, 95, 140);
    strokeWeight(4);
    arc(300, 340, 70, 70, 0, PI, CHORD);//teeth

	}

To create this image, I used simple graphic elements such as ellipses, rectangles, and arcs. The earrings were just some extra (yet very simple) bedazzling.

This project helped me learn some of the most basic elements of sketching using p5.js, and I hope to use this as a starting point to be able to create more complex sketches throughout this course.

Self Portrait-sehenry-01

While completing this project, I wanted to grasp the features of myself that I believe make me stand out. I have a high top fade that shows a lot of my hair and I have big lips, so I wanted to make my mouth large. I wanted to add an ear into my portrait but I had a very hard time making it look realistic so I just accepted that half a circle would do for now! When I post this picture to my blog, some of the lines on my eyes and my nose become thicker than what they were originally and I don’t know why but I still think the picture looks good for one of the first projects!

-Seth Henry
Section B
Assignment-Self Portrait

sketch




//Seth Henry

//Section B (Tuesdays 10:30)

//sehenry@andrew.cmu.edu

//Assignment-01







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

function draw() {
	background(121, 202, 237);
	fill(50);
    rect(120, 30, 260, 220);

    fill(232, 83, 37);
	ellipse(250, 600, 530, 420);
	fill(212, 178, 144);
	 triangle(172, 400, 250, 450, 328, 400);
 	fill(212, 178, 144); 
	ellipse(250, 250, 300, 350);
	fill(255, 255, 255);
	ellipse(200, 200, 40, 40);
	fill(255, 255, 255);
	ellipse(300, 200, 40, 40);
	line(240, 215, 225, 230);
	line(225, 230, 250, 230);
	line(240, 215, 240, 200);

	fill(122, 81, 4);
	ellipse(200, 200, 20, 20); 
	
	fill(122, 81, 4);
	ellipse(300, 200, 20, 20); 
	strokeWeight(10);
	point(200, 200);
	fill(240, 113, 185);
	strokeWeight(10);
	point(300, 200);
	fill(50, 30, 30);
	line(180, 140, 230, 140);
	line(300, 160, 350, 160);
	fill(212, 178, 144); 

	strokeWeight(2);
	arc(365, 250, 80, 60, 5, 1.142, PI+QUARTER_PI, CHORD);
	fill(255, 255, 255);
	strokeWeight(5);
	arc(220, 300, 140, 140, 0, PI, CHORD);
	strokeWeight(5);
	line(215, 400, 215, 420);
	line(230, 405, 230, 425);
	line(245, 410, 245, 430);
	strokeWeight(2);
	line(160, 330, 280, 330);
	strokeWeight(2);
	line(190, 300, 190, 360);
	line(220, 300, 220, 370);
	line(250, 300, 250, 360);
	line(160, 280, 210, 280);
	line(230, 280, 280, 280);

	}

Soyunk – project 01 – face

sketch

//Soyun Kim
//Section D
//soyunk@andrew.cmu.edu
//Assignment-01

function setup() { 
   createCanvas(600,600);
   background(52,32,12);
}

function draw() {
    fill(206,178,92);
    strokeWeight(5);
    stroke(206,178,92);
    rect(190,500,220,100);
   
    fill(229,198,103);
    strokeWeight(5);
    stroke(229,198,103);
    ellipse(300,300,370,500);
    
    ellipse(110,315,55,105); //ear
    ellipse(488,315,55,105);
    fill(206,178,92);
    ellipse(110,308,30,50);
    ellipse(488,308,30,50);
   
    fill(52,32,12);
    quad(130,250,160,230,240,230,260,250);
    quad(335,250,355,230,440,230,465,250);
   
    fill('white');
    ellipse(195,285,90,42);
    ellipse(400,285,90,42);
   
    fill('black');
    ellipse(195,285,20,20);
    ellipse(400,285,20,20);

    fill(206,178,92);
    noStroke();
    triangle(276,363,302,258,329,363);
    ellipse(285,364,34,34);
    ellipse(318,364,34,34);

    fill(237,21,86);
    noStroke();
    triangle(230,430,287,412,311,430);
    triangle(295,430,319,412,376,430);
    quad(270,470,230,430,303,445,303,470);  
    quad(303,470,303,445,376,430,340,470);   

    fill(52,32,12);
    arc(43,47,596,370,0,HALF_PI); 
    arc(490,53,320,366,HALF_PI,PI);  

    


}

I wanted my background to be my hair and give a contrast to my round face and depict the lips and eyebrows pretty similar to my own. The main thing I struggled with the most was the process of creating the arcs to make my hair line.

SiminLi-PROJECT-01-FACE

Simin-portrait
I started out with a sketch on my notebook and used 16 elements in my drawing. I wanted to make the hairline more natural but noticed the arc function only allowed a few combinations.

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Assignment-01
    function setup() {
    createCanvas(600, 600);
  background(231,168,147);
    text("This is Simin.", 430, 590);
}

function draw()    {
	 
	 noStroke();
	 fill(229,183,147	)	; //1
	ellipse(300,300,300,300);

	fill(0)	; //2
	arc(300,300,300,300,PI+QUARTER_PI,TWO_PI,OPEN);

	fill(0)	; //3
    arc(300,300,300,300,PI+HALF_PI,QUARTER_PI,OPEN);

	fill(0)	; //4
	triangle(390,180,425,102,480,180);

	fill(219,9,59	)	; //5
	triangle(390,180,360,180,375,206);
	triangle(390,180,420,180,405,154);

	fill(0)	; //6
	arc(230,260,60,60,PI,TWO_PI,CHORD);

	noStroke();
	fill(252,253,255)	; //7
	ellipse(230,260,43,43);

	fill(0)	; //8
	arc(230,260,25,25,QUARTER_PI,TWO_PI,PIE);

    noStroke();
	fill(229,183,147)	; //9
	quad(150,300,120,360,180,380,200,300);

    strokeWeight(15.0);
    stroke(177,31,31);
	fill(228,95,136	)	; //10
	ellipse(200,390,30,50);
    
    strokeWeight(4.0);
    stroke(0);
	fill(249,191,149)	; //11
	arc(320,300,50,50,PI+HALF_PI,HALF_PI,OPEN);

    strokeWeight(6.0);
    stroke(0);
	fill(60,158,222	)	; //10
	ellipse(320,325,11,11);
    
    strokeWeight(3.0);
    stroke(0);
    line(406,404,402,420);
    line(406,404,408,420);
    line(406,404,413,419);
    line(406,404,418,418);
	 noLoop();
}

PROJECT-01-FACE

sketch

//Lydia Jin
//Section B
//jialuj@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500, 500);
    background(220);
   
}

function draw() {
	noStroke();
    //hair
    fill(118,70,18);
    rect(185,170,130,120);
    //body
    fill(25);
    triangle(130,500,250,260,370,500)
    //face
    fill(247,204,170);
    ellipse(250,180,120,180);
    //neck
    fill(247,204,170);
    rect(240,265,20,20);
    //hat
    fill(206,180,180);
    ellipse(250,160,300,20);
    ellipse(250,130,150,80);
    fill(0);
    rect(180,148,140,4.8);
    //eyes
    fill(31);
    ellipse(220,185,10,20);
    fill(31);
    ellipse(280,185,10,20);
    //nose
    fill(230,183,155);
    ellipse(250,210,10,30);
    //mouth
    fill(224,62,18);
    ellipse(252,250,15,10);
    //ears
    fill(247,204,170);
    ellipse(190,200,5,20);
    ellipse(310,200,5,20);
    //sun
    fill(255,239,0);
    ellipse(470,20,200,200);
}

The portrait of myself is quite simple and it shows me walking on a sunny day wearing a hat.

project-01-face

sketch
The focus of my portrait was the everchanging mood and facial expression of myself.

function setup() {
    createCanvas(360, 540);
}
	//Canvas created in portrait format

function draw() {
	background(213, 207, random(0,255));
	//random background color in yellow hue expressing everchanging environment.

	noStroke();
	fill(165, 170, 247);
	ellipse(180, 200, 200, 300);

	fill(0);
	beginShape();
	curveVertex(160, 524);
	curveVertex(160, 524);
	curveVertex(180, 360);
	curveVertex(300, 290);
	curveVertex(360, 180);
	curveVertex(360, 180);
	endShape();
	//Curvature rather expressing the soul than the body.

	fill(200, 100, 100);
	triangle(110, 140, 127, 160, 90, 156);
	rect(200, 155, 70, 20, 1, 10, 20, 30);

	fill(0);
	ellipse(110, 200, 20, 20);
	ellipse(250, 190, 25, 40);

	fill(150, 243, 99);
	triangle(170, 210, 175, 240, mouseX, mouseY);
	//nose symbolises one's ego, which is never concrete, changing by circumstances.

	strokeWeight(40)
	stroke(255, 180, 0);
	fill(100, 200, 10);
	arc(170, 310, 100, 80, 10, 50);
}

function mousePressed() {
	loop();
}

function mouseReleased() {
	noLoop();
}
	//the ability to start and stop the whim, expressed through stopping of loop.

kwburges-01-face

sketch-13.js

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

function draw() {
	background(51,0,51);
  //hair
  fill(30,0,0)
  ellipse(250,250,75,100)
  ellipse(215,280,25,50)
  ellipse(280,280,25,50)
  //body
  fill (0,0,153)
  ellipse(250,375,100,200)
  //face
  fill (255,178,102)
  ellipse (250,250,70,70)
  //eyes
  ellipse(240,250,10,10)
  ellipse(260,250,10,10)
  fill(0)
  ellipse(240,250,5,5)
  fill(0)
  ellipse(260,250,5,5)
  //mouth
  arc(250, 270, 10, 20, 0, PI+QUARTER_PI, OPEN)
  //balloons
  fill(245,0,0)
  ellipse(400,200,55,55)
  fill(30,40,200)
  ellipse(425,190,55,55)
  fill(255,0,127)
  ellipse(380,150,55,55)
  line(375,170,330,280)
  fill(255)
  ellipse(390,240,55,55)
  fill(255,128,0)
  ellipse(350,195,55,55)
  //arms
  rect(200,320,10,10)
  rect(290,320,10,10)
  rect(300,310,10,10)
  rect(310,300,10,10)
  rect(320,290,10,10)
  rect(330,280,10,10)
  rect(190,330,10,10)
  rect(180,340,10,10)
  rect(170,350,10,10)
  rect(160,360,10,10)
  rect(170,370,10,10)
  rect(180,380,10,10)
  rect(190,390,10,10)
  //balloon strings
  line(350,220,330,280)
  line(363,240,330,280)
  line(380,265,330,280)
  line(410,210,330,280)


}

Project01-Face Sofia Syjuco

sketch

// Sofia Syjuco
// Section A, 9:30-10:20AM
// smsyjuco@andrew.cmu.edu
// Project01-Face

function setup() {
    createCanvas(600, 600);
    background (237,239,228);
}

function draw() {

    noStroke ();

    // hair back
    fill (46,29,6);
    ellipse (300, 340, 200, 300);

	// face
    fill (210,180,140);
    ellipse (300, 300, 160, 200);

    // hair front
    fill (46,29,6);
    ellipse (300, 248, 180, 100);

    // eyes
    fill (255,255,255);
    ellipse (260, 320, 40, 20);
    ellipse (340, 320, 40, 20);
    fill (46,29,6);
    ellipse (260, 320, 10, 10);
    ellipse (340, 320, 10, 10);

    // nose
    fill (231,133,111);
    ellipse (300, 340, 15, 20);

    //mouth
    fill (179,73,55);
    ellipse (300, 370, 27, 12);

    //neck
    fill (210,180,140);
    rect (285, 390, 30, 40);

    // shirt
    fill (0,0,0);
    rect (200, 430, 200, 100);


	}

I learned a lot about using different shapes in this project, and especially about placing them in the canvas. I ran into some difficulties embedding it, but I figured out that any fill colors that used strings ignored the strings, and used the color values of whatever was color filled before. I’m overall very pleased with the outcome, as it taught me a lot, and I think gave me a solid foundation for further works.

GarrettRauck-Project-1

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-01

///////////////////////////////////
// INIT VARIABLES
///////////////////////////////////
var canvasWidth = 500;
var canvasHeight = 600;

///////////////////////////////////
// RUN
///////////////////////////////////
function setup() {
	bg = loadImage("https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2016/09/background.jpg");
    createCanvas(canvasWidth, canvasHeight);
}

function draw() {
	// set background
	background(bg);
	// background(255);

	// set drawing modes
	rectMode(CENTER);
    ellipseMode(CENTER);
	noStroke();

	//// HAIR ////
	fill(54, 32, 9);
	ellipse(canvasWidth/2, canvasHeight/2-175, 300, 200);
	ellipse(canvasWidth/2+35, canvasHeight/2-200, 175,175);
	//// FACE MASSES ////
	fill(255, 239, 161);
	// Chin
    rect(canvasWidth/2, canvasHeight/2 + 125, 325, 265, 50);
    // Cheeks
    ellipse(canvasWidth/2-100, canvasHeight/2+25, 190, 190);
    ellipse(canvasWidth/2+100, canvasHeight/2+25, 190, 190);
    // Ears
    ellipse(canvasWidth/2-105, canvasHeight/2-120, 50, 65);
    ellipse(canvasWidth/2+105, canvasHeight/2-120, 50, 65);
    // Upper
    rect(canvasWidth/2, canvasHeight/2-75, 225, 200);
    // Forehead
    ellipse(canvasWidth/2, canvasHeight/2-175, 225, 100);

    //// FEATURES ////
    stroke(0);
    strokeWeight(1);
    noFill();
    // Mouth
    rect(canvasWidth/2, canvasHeight/2+50, 260, 20, 0, 0, 10, 10);
    // Chin
    arc(canvasWidth/2,canvasHeight/2+170, 100, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    // Nose
    rect(canvasWidth/2, canvasHeight/2+10, 45, 25, 0, 0, 10, 10);
    //Eyes
    arc(canvasWidth/2-50, canvasHeight/2-65, 60, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    arc(canvasWidth/2+50, canvasHeight/2-65, 60, 75, PI+QUARTER_PI, TWO_PI-QUARTER_PI);
    //Eyebrows
    fill(54, 32, 9);
    rect(canvasWidth/2-55, canvasHeight/2-150, 60, 15, 5);
    rect(canvasWidth/2+55, canvasHeight/2-150, 60, 15, 5);
    // Overlays
    noStroke();
    fill(255, 239, 161);
    rect(canvasWidth/2, canvasHeight/2+40, 280, 5);
    rect(canvasWidth/2, canvasHeight/2-5, 50, 10);

}

To create this image, I started by sketching an abstract face, thinking about primitive shapes as building blocks.

Sketch-01

I then drew a second sketch using the wireframes of all of the shapes to get an idea of shape centers and how they would need to overlap.

Sketch-02

The hardest part about writing the code was dealing with all of the different unique coordinates. I didn’t find a very elegant way of doing this — a lot of guess-and-check…