Week 1: Self-Portrait

This is my submission for the first week’s task. I decided to replicate a sketch since I wasn’t sure how to design a distinctive self-portrait.

Inspiration:

The character depicted in my submission is inspired by a sketch I drew a few months ago:The most significant change I made compared to this sketch is the hat I added mainly because hair design was difficult/ineffective. The character is named “Sketch Dude”, and he hates it when people invade his private Zoom box space.

Code:

I used a variety of shapes to design this character. I used lines, ellipses, arcs, bezier curves, and a rectangle. I hardcoded most of the design since my design is not symmetrical and keeping track of the variables would be difficult. However, I used global variables to design the interactive part of the program. I wrote three methods/functions to define the interactive parts of the program (Zoom box, eyes, mouth). Whenever the pointer goes into the Zoom box, the character becomes mad. As the pointer moves out of the Zoom box, the character becomes less mad and returns to his normal state. Following are sample pictures, a video, and the code of the project:

int zoomBoxWidth, zoomBoxHeight, nameTagW, nameTagH, eyeSize, eyeSizeMin, eyeSizeMax;

boolean isInBox() {
  if (mouseX >= width/2 - zoomBoxWidth/2 && mouseX <= width/2 + zoomBoxWidth/2 && mouseY >= height/2 - zoomBoxHeight/2 && mouseY <= height/2 + zoomBoxHeight/2) {
    return true;
  } else {
    return false;
  }
}

void eyes() {
  rotate(2*PI - 0.22);
  noStroke();
  if (isInBox() && eyeSize <= eyeSizeMax) {
    eyeSize++;
  } else if (!isInBox() && eyeSize >= eyeSizeMin) {
    eyeSize--;
  }
  if (eyeSize > eyeSizeMin) {
    fill(255, 0, 0);
  } else {
    fill(0);
  }
  circle(width/2 - 55, height/2 - 41, eyeSize);
  circle(width/2 - 2, height/2 - 42, eyeSize);
}

void mouth() {
  noFill();
  stroke(0);
  strokeWeight(5);
  if (isInBox()) {
    strokeJoin(MITER);
    beginShape();
    vertex(267, 264);
    vertex(282, 246);
    vertex(302, 260);
    endShape();
  } else {
    line(266, 257, 305, 253);
  }
}

void setup(){
  size(640, 480);
  zoomBoxWidth = 440;
  zoomBoxHeight = 330;
  nameTagW = 90;
  nameTagH = 20;
  eyeSizeMin = 13;
  eyeSizeMax = 33;
  eyeSize = eyeSizeMin;
}

void draw(){
  background(150);
  
  //zoom box
  noStroke();
  fill(0, 50);
  rect(width/2 - zoomBoxWidth/2, height/2 - zoomBoxHeight/2, zoomBoxWidth, zoomBoxHeight);
  fill(0, 150);
  rect(width/2 - zoomBoxWidth/2, height/2 + zoomBoxHeight/2 - nameTagH, nameTagW, nameTagH);
  fill(255);
  text("Sketch Dude", width/2 - zoomBoxWidth/2 + 5, height/2 + zoomBoxHeight/2 - 5);
  
  //face
  stroke(0);
  strokeWeight(3);
  noFill();
  arc(width/2 - 30, height/2 - 30, 100, 170, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  arc(width/2 - 49, height/2 + 48, 40, 50, HALF_PI  + QUARTER_PI, PI + QUARTER_PI);
  arc(width/2 - 49, height/2 + 64, 30, 30, PI, 2 * PI);
  line(286, 303, 303, 276);
  line(303, 276, 353, 255);
  line(254, 149, 256, 135);
  arc(width/2 - 30, height/2 - 30, 100, 170, HALF_PI + QUARTER_PI, PI + QUARTER_PI);
  
  //body
  noFill();
  strokeWeight(3);
  arc(width/2 - 10, height/2 + 70, 10, 70, PI + HALF_PI, 2*PI + QUARTER_PI);
  
  strokeWeight(5);
  bezier(314, 324, 226, 330, 225, 335, 210, 480);
  line(260, 480, 268, 400);
  arc(width/2 + 20, height/2 + 85, 90, 70, 0, PI);
  line(400, 480, 400, 400);
  bezier(386, 324, 442, 329, 445, 333, 465, 480);
  line(400, 400, 410, 480);
  
  strokeWeight(4);
  rect(width/2 + 25, height/2 + 165, 40, 40, 0, 0, 10, 10);
  
  //hair
  strokeWeight(6);
  arc(width/2 - 19, height/2 + 10, 130, 300, PI + QUARTER_PI, 2*PI + QUARTER_PI);
  arc(width/2 - 10, height/2 + 10, 130, 300, PI + QUARTER_PI, 2*PI + QUARTER_PI);
  arc(width/2 - 1, height/2 + 10, 130, 300, PI + QUARTER_PI, 2*PI + QUARTER_PI);
  arc(width/2 + 8, height/2 + 10, 130, 300, PI + QUARTER_PI, 2*PI + QUARTER_PI);
  arc(width/2 - 5, height/2 + 5, 80, 300, PI + HALF_PI, 2*PI + QUARTER_PI);
  arc(width/2 + 10, height/2 + 5, 80, 300, PI + HALF_PI, 2*PI + QUARTER_PI);
  arc(width/2 + 19, height/2 + 5, 80, 300, PI + HALF_PI, 2*PI + QUARTER_PI);
  arc(width/2 + 28, height/2 + 5, 80, 300, PI + HALF_PI, 2*PI + QUARTER_PI);
  arc(width/2 + 37, height/2 + 5, 80, 300, PI + HALF_PI, 2*PI + QUARTER_PI);
  
  //hat
  stroke(255);
  strokeWeight(2);
  fill(0);
  arc(width/2 + 5, height/2 -80, 150, 150, PI + 0.3, 2*PI + 0.2, CHORD);
  rotate(0.22);
  rect(width/2 - 50, height/2 -170, 165, 38, 5);
  
  //eyes
  eyes();
  
  //nose and mouth
  stroke(0);
  strokeWeight(5);
  line(275, 232, 290, 230);
  mouth();
    
}