Week 1: Self portrait

This is my first processing project, a self portrait, and being a rather crafty person it felt just like using different paper cutouts and somehow putting them together to create a portrait of myself – well somewhat. Getting to know how to create different 2D shapes in Processing, I thought about which shapes to use to create a face and how I will take advantage of the fact that I am not limited by paper cutouts but could actually add some movement and interaction. While experimenting in class, at some point the eyes I had created where not static anymore but moving and creating a pattern behind the head which I thought would be a cool repetition of a visual element in the portrait and add some fun. I kept the face, eyes and mouth simple while trying to remember radian values from high school to create a semi-circle for the mouth. When looking for a somewhat realistic blonde tone RGB value I realized that the color would not match with the skin tone I used. That is how my favorite part of the portrait was added, the color changing hair. To make the code work took another reflection because my approach was too narrow minded thinking about our class example where the color of a rectangle would only change when clicking on it. The simple solution was to define mouseX and mouseY within the whole area of my “artwork” so you can click anywhere within the window and the hair color will change. Hope you enjoy!

P.S. I  have not died my hair yet.

//portrait
//for animated reference
int x; 
int y; 
int xSpeed = 9;
int ySpeed = 9;

//for static reference
int a;
int b;

//to change hair color
float red = 255;
float green = 0;
float blue = 0;
int value = 0;

void setup () {
  size(640, 480);
  x = width/2;
  y = height/2;
  a = width/2;
  b = height/2;
}

void draw () {
  noStroke();

  //eyes background animation
  noFill();
  ellipseMode(CENTER);

  //white part/sclera
  fill(252);
  ellipse(x-35, y-10, 30, 30);
  ellipse(x+35, y-10, 30, 30);

  //black part/iris
  fill(0);
  ellipse(x-35, y-10, 10, 10);
  ellipse(x+35, y-10, 10, 10);

  if (x >= width || x <= 0) {
    xSpeed *= -1;
  }

  if (y >= height || y <= 0) {
    ySpeed *= -1;
  }

  x = x + xSpeed;
  y = y + ySpeed;

  //hair: behind body
  fill(red, green, blue); //hair changes color
  rectMode(CENTER);
  rect(a, b+40, 180, 0.7*b);

  //body shape behind face
  fill(0); //clothes color
  rectMode(CENTER);
  rect(a, 1.5*b, 80, b);

  //face shape
  fill(235, 221, 188);
  ellipse(a, b, 180, 220);

  //static eyes
  //white part/sclera
  fill(252);
  ellipse(a-35, b-10, 30, 30);
  ellipse(a+35, b-10, 30, 30);

  //black part/iris
  fill(0);
  ellipse(a-35, b-10, 10, 10);
  ellipse(a+35, b-10, 10, 10);

  //nose
  fill(209, 156, 50);
  ellipse(a-8, b+20, 6, 6);
  ellipse(a+8, b+20, 6, 6);

  //mouth
  arc(a, b+40, 80, 80, 0, PI, PIE);

  //hair
  //bangs
  fill(red, green, blue); //hair changes color
  arc(a, b-40, 180, 180, PI, 2*PI);
  //sides
  rectMode(CORNER);
  rect(a-90, b-50, 20, 0.7*b);
  rect(a+70, b-50, 20, 0.7*b);

  //arms
  stroke(0);
  strokeWeight(20);
  noFill();
  arc(a, b+100, 300, 180, 0, PI, OPEN);
}

void mousePressed () {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    red = random(255);
    green = random(255);
    blue = random(255);
  }
}