Category: Project Week 1

helen’s-face

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

function draw() {
    background(255);

    //hair
    fill(0);
    noStroke();
    //arc(250,250,200,260,150,360);
    ellipse(250,250,202,250,150);

    //right hair
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(399,265,100,190,100,180);
    arc(330,320,60,120,280,40);

    //face
    fill(255,232,200);
    noStroke();
    //ellipseMode(center)
    arc(250,250,200,210,180,360);
    arc(250,250,200,270,360,180);

    angleMode(DEGREES);

    //left hair cont
    noFill();
    stroke(0);
    strokeWeight(1);
    arc(130,180,100,150,340,100);
    arc(130,180,133,200,340,100);

    //blush
    if (mouseIsPressed) {
      fill(255,167,151,255);
      noStroke();
      ellipse(310,300,50,50);
      ellipse(190,300,50,50);
    } else {
      fill(255,167,151,150);
      noStroke();
      ellipse(310,300,50,50);
      ellipse(190,300,50,50);
    }

    //glasses
    fill(255,232,200,0);
    stroke(0);
    strokeWeight(1);
    ellipse(200,260,76,76);

    stroke(0);
    strokeWeight(1);
    arc(250,260,24,15,180,360);

    stroke(0);
    strokeWeight(1);
    ellipse(300,260,76,76);

    line(150,260,161,260);
    line(349,260,338,260);

    //eyes
    if (mouseIsPressed) {
      noFill();
      stroke(0);
      strokeWeight(2);
      arc(200,260,30,30,160,340);
      arc(300,260,30,30,200,20);
    } else {
      noFill();
      stroke(0);
      strokeWeight(2);
      arc(200,260,30,30,200,0);
      arc(300,260,30,30,180,340);
    }

    //nose
    noFill()
    stroke(255,131,122);
    strokeWeight(1);
    arc(250,300,30,30,20,160);

    //mouth
    if (mouseIsPressed) {
      fill(255,167,151);
      noStroke();
      ellipse(250,343,25,13);

      noFill();
      stroke(255,131,122,200);
      strokeWeight(2);
      arc(250, 325, 50, 36, 0, 180);

    } else {
      fill(255,167,151);
      noStroke();
      ellipse(250,343,25,13);

      noFill();
      stroke(255,131,122,200);
      strokeWeight(2);
      arc(250, 325, 50, 36, 20, 160);

    }

}

I’ve never coded before this class so I was worried about the project going in. After the preliminary Mondrian exercise, I was comfortable with playing around with code. I started by making some sketches on my sketchbook before I settled on a form I enjoyed, then changed some of it when I coded it.

I had a lot of fun making it, so after I finished I played around with it some more. After Wednesday’s lecture, I added a clickable function.

I struggled a bit, and tried to be original in my formation of the face, though not very detailed. I ended up focusing too much on minor details, and had to rework how I structured the head.

I think I could have done better, but I did my best to be simple in how I structured the art.

Face

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

function draw() {

    fill(255, 224, 189); //skin color
    noStroke();

    //Head
    rectMode(CENTER);
    ellipse(width/2, (height/2), 140, 160);

    //Cut off the top of head
    fill(250);
    rect(width/2, (height/2)-150, 140, 160); 
    fill(255,224,189);

    //Ears
    arc((width/2)-50,(height/2),60,50,3*PI/2+PI,3*PI/2,OPEN);
    arc((width/2)+50,(height/2),60,50,3*PI/2,3*PI/2,OPEN);

    //Mouth
    stroke(0);
    line(250, 310, 220, 300);
    noStroke();

    //Nose
    fill(0);
    triangle(250, 255, 265, 285, 250, 285);
    fill(255, 224, 189);
    triangle(247, 253, 262, 283, 247, 283);

    //Hair
    fill(255, 226, 60);
    triangle(237, 195, 197, 195, 240, 155);
    triangle(257, 195, 217, 195, 260, 155);
    triangle(277, 195, 237, 195, 280, 155);
    triangle(297, 195, 257, 195, 300, 155);

    //Eyes
    fill(0);
    stroke(0);
    strokeWeight(3);
    fill(255);
    ellipse((width/2)+30, (height/2)-10, 25, 15);
    ellipse((width/2)-30, (height/2)-10, 25, 15);

    //Irises
    fill(0,0,200); 
    stroke(0);
    ellipse((width/2)+32, (height/2)-10, 12, 14);
    ellipse((width/2)-28, (height/2)-10, 12, 14);

    //Pupils
    noStroke(); 
    fill(0);
    ellipse((width/2)+32, (height/2)-10, 5, 5);
    ellipse((width/2)-28, (height/2)-10, 5, 5);


}

ashley-sketch

//Ashley Chan
//ashleyc1@andrew.cmu.edu
//Session C

function setup() {
    createCanvas(400, 400);
    background(144, 236, 255);

}

function draw() {

 //hair

     noStroke();
     fill(125, 12, 148);
     rect(75, 20, 250, 600, 100);

     fill(253, 208, 117);
     triangle(190, 75, 200, 20, 200, 75)

 //neck

     fill(232, 185, 90);
     rect(175, 280, 50, 50);



 //face
     noStroke();
     fill(253, 208, 117);
     ellipse(200, 175, 200, 225);


 //glasses

     stroke(0);
     noFill();
     strokeWeight(5);
     rect(220, 150, 90, 50);

     strokeWeight(5);
     rect(90, 150, 90, 50);

     fill(0);
     rect(180, 160, 40, 8);

 //eyes

     fill(0);
     ellipse(140, 170, 25, 25);
     ellipse(250, 170, 25, 25);

     fill(255);
     ellipse(145, 165, 15, 15);
     ellipse(255, 165, 15, 15);


 //eyebrows

     fill(0);
     strokeWeight(1);
     curve(200, 126, 100, 126, 180, 124, 180, 250);

     translate(125, 0);
     curve(700, 250, 175, 124, 100, 126, 200, 126);
 	

//lips
     arc(75, 250, 30, 30, 0, PI);

//body
	
    noStroke();
    fill(243, 213, 15);
    rect(-25, 300, 200, 200, 60);

    fill(232, 185, 90);
    arc(75, 300, 50, 50, 0, PI);

}

Reflection:

My process consisted mostly of trial and error when is came to alignment and figuring out the effects of altering specific coordinates. I need to get better at anticipating what factors affect what so I’m not wasting time plugging in random numbers. But overall, I’m happy with the result and I think this is a pretty direct reflection of what I look like.

It was a hard process for me to create this self portrait as I have never coded before; it was a series of trial and error in order to get things in the right order and place. I drew inspiration from the students who submitted their self portraits before me and just focused on trying to make the objects connect.

sketch

function setup() {
    createCanvas(500, 500);
    background(150,100,100);
    angleMode(DEGREES)
    smooth();
}

function draw() {

    //hair
    strokeWeight(0);
    fill(10,50,100);
    ellipse(250,165,220,220);
    rect(145,165,210,300);

    //ears
    strokeWeight(0);
    fill(255,230,200);
    ellipse(150,210,30,45);
    ellipse(350,210,30,45);

    //head
    strokeWeight(0);
    fill(255,230,200);
    ellipse(250,190,190,200);

    //hair(front)
    strokeWeight(0);
    fill(10,50,100);
    ellipse(285,120,110,100);

    //glasses
    strokeWeight(5);
    fill(255,230,200);
    ellipse(205,200,60,60);
    ellipse(295,200,60,60);
    line(242,205,257,205);

    strokeWeight(5);
    noFill();
    arc(180,198,60,20,150,175);
    arc(330,198,60,20,25,78);

    //smile
    arc(266,250,40,30,20,90);

    //eyes
    strokeWeight(0);
    fill(256);
    ellipse(204,202,30,30);
    ellipse(295,202,30,30)

    //pupils
    strokeWeight(0);
    fill(0);
    ellipse(204,202,15,15);
    ellipse(295,202,15,15)

    //eyelash
    strokeWeight(2)
    fill(0)
    line(190,190,186,186)
    line(304,186,308,181)

}

sketch

function setup() {
    createCanvas(600, 600);
    background(255,248,220);
}

function draw() {
	//face
	stroke(255,218,185);
	strokeWeight(3);
	fill(255,229,204);
	rect(225,175,150,200,60);
	stroke(0);
	strokeWeight(2);
	ellipse(270,295,45);
	ellipse(335,295,45);
	line(291,290,314,290);
	line(240,280,248,290);
	line(356,290,360,280);
	strokeWeight(10);
	line(255,270,286,270);
	line(320,270,350,270);
	ellipse(270,290,2);
	ellipse(335,290,2);
	strokeWeight(5);
	line(303,288,303,317);
	strokeWeight(3);
	fill(238,44,44);
	quad(280,345,303,335,326,345,303,355);
	//hair
	stroke(105,105,105);
	strokeWeight(3);
	fill(160,160,160);
	rect(200,250,40,200);
	rect(360,175,40,275);
	triangle(200,175,400,175,200,300);

}

I designed my self-portrait to concentrate on squares, which makes it very cartoon-like.

My process included starting out researching some inspiration and I happened to stumble upon the works of Stanley Chow. I really liked how simple and straight forward his portraits looked, and wanted to emulate that to some extent. This was my first time coding anything, but found that the more I continue to use the lines of code for the specific shapes, the easier it became to remember what I needed in order to fulfill the tasks that I had in mind. I found that the hard part was the tedious task of trying to find the exact coordinates and calculations that I needed to find the right placements for my shapes.

sketch

function setup() {
    createCanvas(500,500);
    background(105);		//background(246,223,255);
}

function draw() {
  //hair
  noStroke();
  fill(57,26,14);
  ellipse(250,160,180,180);
  rect(160,150,180,100);

  //ears
  noStroke();
  fill(249,228,205);
  ellipse(305,190,50,50)

  noStroke();
  fill(249,228,205);
  ellipse(192,190,50,50)

  //face
  noStroke();
  fill(249,228,205);
  rect(185,100,130,165,57);

 //chin
  noStroke();
  fill(249,228,205);
  triangle(250,275,285,258,213,257);  

  //ears(inside)
  noStroke();
  fill(210,195,172);
  arc(185,190,20,20,PI/2,3*PI/2,OPEN); 

  noStroke();
  fill(210,195,172);
  arc(313,190,20,20,3*PI/2,PI/2,OPEN); 
  
  //eyes
  noStroke();
  fill(0,0,0);
  ellipse(285,180,20,20);

  noFill();
  strokeWeight(1);
  stroke(0,0,0);
  arc(286,180,30,30,PI,PI+TWO_PI);

  noFill();
  stroke(0,0,0);
  arc(220,180,30,30,PI,PI+TWO_PI);

  noStroke();
  fill(249,228,205);
  ellipse(300,175,7,13);

  noStroke();
  fill(249,228,205);
  ellipse(206,175,7,13);

  noStroke();
  fill(0,0,0);
  ellipse(220,180,20,20);
	
  triangle(293,174,300,176,290,185);

  translate(-85,-3);
  triangle(290,178,300,175,295,182);

  //nose
  noStroke();
  fill(210,195,172);
  ellipse(338,215,20,10);

  //lips
  strokeWeight(2);
  fill(202,119,107);
  arc(338,240,25,25,7*PI/6,11*PI/6);

  fill(249,228,205);
  triangle(338,232,325,225,350,225);

  //eyebrows
  noStroke();
  fill(0);
  rect(347,155,28,7,10);

  triangle(300,162,299,155,293,163);

  noStroke();
  fill(0);
  rect(297,155,28,7,10);

  triangle(372,162,373,155,379,163);

   //bangs
 noStroke();
 fill(57,26,14);
 arc(280,110,98,100,106,2,CHORD);

}

portrait

function setup() {

  createCanvas(400, 400);
  background(184, 176, 245);

  fill(243, 224, 189);
  ellipse(200, 200, 165, 200);

  fill(243, 224, 189);
  rect(185, 300, 30, 35);

  fill(255);
  ellipse(165, 210, 40, 30);

  fill(255);
  ellipse(235, 210, 40, 30);

  fill(0);
  ellipse(165, 210, 30, 30);

  fill(0);
  ellipse(235, 210, 30, 30);

  noFill();
  triangle(190, 250, 200, 235, 210, 250);

  fill(241, 173, 168);
  arc(200, 265, 30, 20, 0, PI, OPEN);

  line(145, 180, 183, 175);

  line(217, 175, 255, 180);

  fill(226, 108, 108);
  strokeWeight(4);
  rect(150, 335, 100, 65);

  fill(0);
  quad(105, 145, 200, 95, 200, 125, 105, 200);

  fill(0);
  quad(200, 95, 295, 145, 295, 200, 200, 125);

  fill(0);
  rect(105, 190, 20, 100);

  fill(0);
  rect(275, 190, 20, 100);

  point (162, 243);

  }

function draw() {
}

I am pleased with my finished project even though it is not the most beautiful I have ever seen. It was a time-consuming process for me because I tend to be a perfectionist, but I am happy with it.

Anna Anderson
Section 1
aranders@andrew.cmu.edu
Project 1

alchan project 01

function setup() {
    createCanvas(500, 500);
    background(195, 240, 244);
    angleMode(DEGREES);
    smooth();
}

function draw() {
  //hair back
  noStroke();
  fill(31, 51, 68);
  arc(310, 260, 270, 280, 160, 380, CHORD);
  rect(175, 270, 270, 80);

  //neck
  fill(237, 217, 168);
  stroke(224, 179, 134);
  strokeWeight(5);
  rect(285, 300, 50, 130);

  noStroke();
  fill(224, 179, 134);
  rect(285, 300, 50, 75);

  //face
  fill(237, 217, 168);
  stroke(224, 179, 134);
  arc(310, 260, 190, 200, -90, 200, CHORD);

  //eyes
  noStroke();
  fill(0);
  ellipse(260, 246, 10, 10);
  ellipse(370, 246, 10, 10);

  //eyebrows
  stroke(31, 51, 68);
  strokeWeight(5);
  line(350, 225, 372, 225);

  //mouth
  stroke(224, 179, 134);
  line(280, 310, 340, 310);

  //hair front
  noStroke();
  fill(31, 51, 68);
  arc(200, 120, 270, 280, 2, 100, CHORD);

  stroke(31, 51, 68);
  noFill();
  arc(197, 135, 270, 280, 2, 70, OPEN);

  //shirt
  noStroke();
  fill(256);
  ellipse(310, 515, 300, 250);
}

I started off by figuring out how I wanted to represent the face and ended up with a highly simplified version made of more basic shapes. Once I had a rough layout of what I wanted to accomplish I essentially just used trial and error to put the face together. I found that the hardest part was calculating the position & other variables for each shape, and will probably try to find a more efficient way of figuring those factors out.