Week 1 Self-Portrait – Introduction to Interactive Media

Motivation

Initially tried to build a simple person sketch with just a head and body, but I knew I could take it a bit further. So then I added hair and tried to change the body to look less like a stick man figure. I attempted to mimic a picture I had taken of myself.

This was what I had in mind and attempted to make within the program.

This had become the first draft after The Stickman, I can say my drawing abilities by hand are much better. But it was a learning curb.

AREAS OF IMPROVEMENT AND REFLECTION

What I noticed is I lacked the Imagination and the toolset in order to code an image. Although building a website is possible doing art was something I had never thought of as possible. I need to better understand the coding language I am working with and I need to find ways to improve how to use the available attributes and find how to use them in a more creative way.

The code snippet that I had used is simple. There I tried to keep it not complicated and kept to what I learnt originally. To make it more complicated with more attributes and something more intricate I need to study the coding language more. I enjoy commenting the code so I don’t forget what goes where, and to not be confused.

function setup() {
  createCanvas(400, 600);
  background(240); // Neutral background

  // Head
  fill(176, 108, 73); // Brown skin tone
  ellipse(200, 150, 80, 100); // Head shape

  // Hat
  fill(0); // Black hat
  arc(200, 120, 90, 50, PI, TWO_PI); // Hat brim
  rect(160, 90, 80, 40); // Hat body

  // Glasses
  fill(255); // Glasses lenses
  stroke(0); // Glasses frame
  strokeWeight(3);
  ellipse(180, 150, 30, 20); // Left lens
  ellipse(220, 150, 30, 20); // Right lens
  line(195, 150, 205, 150); // Bridge of glasses

  // Eyes
  noStroke();
  fill(0); // Black pupils
  ellipse(180, 150, 8, 8); // Left eye
  ellipse(220, 150, 8, 8); // Right eye

  // Nose
  fill(0); // Same as head
  triangle(195, 165, 205, 165, 200, 175); // Simple triangular nose

  // Mouth
  fill(0); // Neutral expression
  arc(200, 185, 40, 10, 0, PI); // Simple curved mouth

  // Body
  fill(245, 235, 200); // Beige shirt
  rect(150, 220, 100, 120, 10); // Torso
  stroke(220, 215, 180);
  strokeWeight(2);
  for (let y = 220; y < 340; y += 10) {
    line(150, y, 250, y); // Subtle shirt stripes
  }

  // Cross Necklace
  fill(160, 160, 160); // Silver color
  line(200, 220, 200, 240); // Chain
  rect(195, 240, 10, 20); // Cross

  // Arms
  noStroke();
  fill(176, 108, 73); // Skin tone
  rect(120, 240, 30, 80, 10); // Left arm
  rect(250, 240, 30, 80, 10); // Right arm\

  // Backpack Straps
  fill(0); // Black straps
  rect(140, 220, 20, 60); // Left strap
  rect(240, 220, 20, 60); // Right strap

  // Pants
  fill(0); // Black pants
  rect(150, 340, 40, 120); // Left leg
  rect(210, 340, 40, 120); // Right leg

  // Shoes
  fill(50); // Dark gray shoes
  rect(140, 460, 60, 20, 5); // Left shoe
  rect(200, 460, 60, 20, 5); // Right shoe


}

FINAL PRODUCT

Although there’s much room for improvement. I think as a first try it was good.

Leave a Reply Cancel reply