# instrumentalist with a hat

concept:

This week’s assignment required us to explore the shapes offered in the p5 coding program and make a self-portrait. The first thing I did was to draw a huge circle right in the middle of the canvas, and that was when I saw it… my face. I planned to draw a minimalistic cartoonish face that represents my hobby, playing the ukulele, and myself with a certain clothing item of some sort.

code:

```function setup() {
createCanvas(650, 450);

//assign variables
let midX = width/2;
let midY = height/2;

//blue background circles
background(50, 80, 120);
strokeWeight(0);
fill(80, 115, 150);
circle(midX, midY, 690);
fill(105, 140, 180);
circle(midX, midY, 590);
fill(190, 210, 230);
circle(midX, midY, 480);

fill(230, 170, 140);
strokeWeight(3);
ellipse(midX, midY, 365, 390);

//eyes
fill(230);
circle(midX -100, midY +45, 100);
circle (midX +100, midY +45, 100);

//iris
fill(100, 55, 15);
//stroke(80, 35, 0);
ellipse(midX -95, midY +44, 80, 80);
ellipse(midX +95, midY +44, 80, 80);

//pupils
fill(0);
circle(midX -93, midY +44, 45);
circle (midX +93, midY +44, 45);

//glare
noStroke();
fill(235);
circle(midX -75, midY +40, 20);
circle (midX +125, midY +40, 20);

//smile
stroke(0);
noFill();

//hat
fill(220);
ellipse(midX - 180, midY - 65, 120, 90);
fill(233);
arc(midX, midY - 20, 365, 350, PI, TWO_PI, CHORD);

//hat details
fill(230, 170, 140);
arc(midX, midY - 35, 90, 80, PI, TWO_PI, CHORD);
line(midX, midY -195, midX, midY - 75);
noFill();
noFill();
fill(200);
rect(midX + 20, midY - 40, 15, 24, 5);

//eyebrows
stroke(0);
strokeWeight(5);
noFill();

//instrument
strokeWeight(3);
//ukulele neck
fill(60);
rect(midX +232, midY -80, 35, 255);
fill(180);
rect(midX +232, midY -90, 35, 10);
//ukulele frets
fill(180);
rect(midX +232, midY - 70, 35, 6);
rect(midX +232, midY - 55, 35, 6);
rect(midX +232, midY - 40, 35, 6);
rect(midX +232, midY - 25, 35, 6);
rect(midX +232, midY - 10, 35, 6);
rect(midX +232, midY + 5, 35, 6);
rect(midX +232, midY + 20, 35, 6);
fill(150, 80, 40);
rect(midX +229, midY -137, 40, 50);
fill(200);
circle(midX +238, midY -120, 8);
circle(midX +260, midY -120, 8);
circle(midX +240, midY -100, 8);
circle(midX +256, midY -100, 8);
//ukulele body
fill(150, 80, 40);
ellipse(midX +250, midY +130, 120, 100);
ellipse(midX +250, midY +80, 105, 100);
fill(35);
circle(midX +250, midY +90, 45);
fill(35);
rect(midX +230, midY +142, 40, 12);
stroke(150, 80, 40);
strokeWeight(5);
noFill();
//ukulele strings
fill(235);
stroke(0);
strokeWeight(2);
rect(midX +236.5, midY -117, 1, 270);
rect(midX +259.5, midY -117, 1, 270);
rect(midX +244.5, midY -100, 1, 253);
rect(midX +251.5, midY -100, 1, 253);

}

function draw() {
//print(mouseX, mouseY);
}```

method:

Initially, I started the sketch by limiting myself to solely using the ‘circle’ and ‘ellipse’ functions. I successfully managed to fill that huge circle with glaring brown eyes, eyebrows, and a mouth. Then came the clothing aspect of the sketch. I wanted something that represented me, and the first item that came to mind was the hat I occasionally wear to class. This was somewhat challenging given that the hat is completely constructed using the ‘arc’ function. It was an extremely challenging yet rewarding addition to the sketch as I could add little details such as a metal strap using the ‘rect’ function. Finally, n instrumentalist would not be one without an instrument. Thus I added the ukulele, a combination of circles, rectangles, lines, and arcs.

sketch:

The following images preview how the portrait sketch came to life to become what it is!

future improvements:

Adding some sort of movement to the program that provides an animation aspect would be amusing. For instance, making the eyes move to look wherever the mouse is, or possibly even making the ukulele a playable instrument!