Category: Project Week 1

Project-01-Face

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 01
*
*/

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

function draw() {
	fill(60, 30, 30);
    rect(100, 0, 400, 600); // hair

    fill(240, 227, 174);
    rect(150, 0, 300, 400); // face

    fill(50, 10, 6);
    arc(220, 75, 100, 100, 0, PI); // eye (left)

    fill(50, 10, 6);
    arc(380, 75, 100, 100, 0, PI); // eye (right)

    fill(237, 210, 155);
    arc(220, 67, 100, 100, 0.14, 3); // eyelid (left)

    fill(237, 210, 155);
    arc(380, 67, 100, 100, 0.14, 3); // eyelid (right)

    fill(140, 0, 0);
    rect(237, 320, 125, 40); // mouth 

    fill(350);
    arc(300, 320, 125, 70, PI, TWO_PI); // teeth

    fill(237, 210, 155);
    quad(295, 90, 305, 90, 350, 240, 250, 240); // nose base

    fill(237, 210, 155);
    rect(260, 190, 80, 60) // nose top

    fill(50, 10, 6);
    arc(280, 250, 20, 20, PI, TWO_PI); // nostril (left)

    fill(50, 10, 6);
    arc(320, 250, 20, 20, PI, TWO_PI); // nostril (right)

    fill(60, 30, 30)
    triangle(280, 25, 170, 50, 170, 40); // eyebrow (left)

    fill(60, 30, 30)
    triangle(320, 25, 430, 50, 430, 40); // eyebrow (right)

    fill(187, 240, 248);
    quad(390, 140, 420, 200, 390, 240, 360, 200); // tear
    
}

I wanted to make look interesting even with my limited knowledge – I’m not sure if I succeeded, but it’s much better than I thought it would be, so I’m happy with it.
I’m not sure why it got all messed up when I published it – the features aren’t supposed to be squished, and obviously the teeth aren’t supposed to be separated from the mouth… I have no idea what happened, but the index.html looks completely normal.

Project-01-Face

sketch
I tried to use multiple objects to represent the face to show its actual asymmetry. I used the shapes to create the outline and then simply just added differing colors afterwards.

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

function draw() {
    background(155,22,10);
    //settings
    ellipseMode(CENTER);
    rectMode(CENTER);
    strokeWeight(0);
    //hair
    fill(1, 2, 5);
    rect(300, 200, 450, 300, 80);
    rect(300, 50, 200, 100, 75);
    //neck
    fill(237, 209, 185);
    strokeWeight(1);
    ellipse(300, 300, 480, 520);
    strokeWeight(0);
    rect(300,575,150,100);
    //ears
    ellipse(75, 300, 120, 175);
    ellipse(525, 300, 90, 134);   
    //mouth
    fill(219, 151, 180);
    rect(300, 450, 150, 50, 35,40,32,45);
    //eyes
    fill(123, 150, 186);
    ellipse(200, 230, 125, 160);
    fill(250, 248, 242);
    ellipse(400, 230, 175, 133);
    fill(150, 108, 29);
    ellipse(200, 230, 90, 60);
    fill(105, 145, 107);
    ellipse(400, 230, 70, 90);
    fill(0, 0, 0);
    triangle(200, 240, 220, 215, 180, 215);
    fill(232, 225, 144);
    triangle(400, 215, 420, 240, 380, 240);
    fill(232, 189, 144);
    //nose
    quad(300, 280, 240, 360, 300, 400, 350, 350);
    noFill();
    strokeWeight(1);
    line(300, 300, 300, 375);
    //eyebrows
    arc(150, 100, 200, 100, 0, HALF_PI);
    arc(450, 100, 200, 100, HALF_PI, PI);
}

Project-01-Face

            Reflection

Since the basic elements in this portrait are restricted to simple geometric shapes, I decided to create a minimalistic portrait. The blue and yellow used in the portrait are selected from photos of minerals online.

Also, I stumbled across the code for generating random points automatically, so I decided to create a shimmering effect with it.

sihan_self portrait

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

function draw() {
	background(0);
  quad(100,100,150,150,100,150,150,100);

  var bg1 = color(221,159,35);
  fill(bg1);
  noStroke();
  rect(0,50,500,80);
  rect(0,180,500,30);

  var ri = color(27,102,205);
  var bg2 = color(200,81,35);
  fill(ri);
  noStroke();
  rect(0,450,500,45);
  rect(0,500,500,100);

  var skinlt = color(252,252,244);
  fill(skinlt);
  stroke(252,252,244);
  triangle(100,0,50,100,250,450);
  triangle(100,0,250,450,400,0);
  triangle(400,0,250,450,450,100);

  //cheek triangles
  triangle(70,110,110,350,250,450);
  triangle(430,110,250,450,390,350);

  fill(50);
  noStroke();
  ellipse(250,125,410,410);

  fill(skinlt);
  noStroke();
  ellipse(250,200,350,350);

  var lip = color(174,41,30);
  fill(lip);
  noStroke();
  ellipse(250,350,30,30);
  ellipse(250,320,40,40);

  var skindk = color(252,240,224);
  fill(skindk);
  stroke(skindk);
  quad(250,450,170,393,170,530,250,530);
  quad(250,450,330,393,330,530,250,530);
  ellipse(250,530,160,160);

  var ri = color(27,102,205);
  fill(ri);
  stroke(255);
  strokeWeight(5);
  ellipse(85,300,50,50);
  ellipse(415,300,50,50);

  stroke(50);
  strokeWeight(3);
  noFill();
  curve(5,26,200,30,400,250,50,100);
  curve(5,26,200,20,400,175,50,100);

  fill(0);
  noStroke();
  triangle(0,515,0,450,170,450);
  triangle(500,515,500,450,330,450);

  noFill();
  stroke(50);
  strokeWeight(10);
  arc(170,220,60,60,0,PI);
  arc(330,220,60,60,0,PI);

  stroke(80);
  strokeWeight(5);
  line(130,170,200,170);
  line(370,170,300,170);

  fill(250);
  stroke(251,191,46);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(85,random(330,430),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);
  ellipse(415,random(330,450),10,10);

}

 

Project-01-Face – Sara

sara-selfportrait

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

function draw() {
	//skin
 fill(247,202,200);
 noStroke()
ellipse(375,400,800,800);
	//eyes
 strokeWeight(12);
 stroke(60,150,40);
 fill(20);
ellipse(150,250,50,50);
ellipse(450,150,50,50);
	//mouth
 strokeWeight(70);
 stroke(200,40,100);
 fill(20);
ellipse(500,500,600,400);
	//hair
 strokeWeight(220);
 stroke(144,68,180)
line(0,0,600,0);
 strokeWeight(240)
line(0,0,0,200);
 strokeWeight(120)
line(0,0,0,400)
	//curls
 strokeWeight(7);
 stroke(205,67,220);
 fill(144,68,180)
bezier(0,80,600,1,1,300,580,100);
bezier(0,70,480,10,8,200,590,85);
bezier(0,90,450,5,3,210,600,50);
}

I began this process with the close-up eyes and open mouth at an angle, as that was basically recognizable as a face, and reflects my personality. Using that image as a jumping off point, I added details including color, stroke weights, and the purple curves to represent my hair. I like that the image feels active and in motion.