Week 1 Self-Portrait

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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
}
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 }
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.

 

<iframe src=”https://editor.p5js.org/dzf3361/full/HyuTFS6Fv” width = 420 height=644 allow=“camera;microphone”> </iframe>