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