# Self-Portrait: Bird by Bytes

##### Concept

My aim was to create any drawings using geometric shapes. I had previous experience drawing illustrations but had never coded them to visualize them. That’s why I decided to go through bunch of geometric pictures on the internet and came up with the idea of making a ‘toucan’. I chose to go with a ‘funky colours’ concept, so I separated the background into two triangles and painted them different colors. Then I decided to sketch  on paper to see how many shapes I needed.

I went through everything and chose to use two triangles, four semi-circles, two rectangles, two ellipses, one line, and one circle to represent the toucan’s body. The body is formed of ellipses, the head is made of two semi-circles, the beak is made of a rectangle and a semi-circle, and the feet are made of another semi-circle.
Here is the Sketch that I made

##### Code

Being able to rotate the ellipse diagonally, because when I was dealing with other coordinates, it was difficult for me to get the shapes to form something that resembled what I was attempting to create. And after quite a bit of effort, I was able to arrange all of the shapes in their proper arrangement. My first plan was to have transparency in the colour of some shapes, but each time I changed the transparency, the colour changed, so I used this plugin  in Chrome to retrieve the colour codes, which was quite useful. Here are some code snippets that demonstrate how I created a diagonal oval shape and animated the eye movement.

```function setup() {
createCanvas(500, 600);
background(225);
}

function draw() {
// for the left triangle of the background
c = color('hsl(65,16%,54%)');
fill(c);
triangle(0, 0, 500, 0, 500, 600);

// for the right triangle of the background
b = color('hsl(179,43%,22%)');
fill(b);
triangle(0, 0, 0, 600, 500, 600);

// beak semi-circle right side
arc(355, 135, 175, 175, radians(270), 0);

// beak rect
b = color('hsl(37,75%,52%)');
fill(b);
rect(270, 48, 86, 87);

//feet
fill('#212c3f')
arc(340, 560, 240, 240, radians(180), 0);

//below body
noStroke();
fill('hsl(30,81%,59%)');
ellipse(150, 390, 245, 190)

// rect for feet
fill('#c2bd48');
rect(220, 440, 115, 170);```

```  // Draw a diagonal oval
push(); // Start a new drawing state
translate(250, 300); // Move to the desired position
rotate(PI / 5); // Rotate by 45 degrees (PI/4 radians)
fill('#060d30'); // White color for the oval
ellipse(20, 15, 380, 250); // Draw the oval at the new origin
pop(); // Restore original state

fill('#212c3f')

fill('#e9e4b9')

// Static line above the eye
stroke(0); // Set line color
line(240, 95, 180, 95); // Line for the eye

// Dynamic eye that follows the mouse cursor horizontally
let eyeX = constrain(mouseX, 190, 230); // Constrain the eye's horizontal movement
let eyeY = 107; // Keep the eye's vertical position constant

fill(0); // Set fill color for the eye
noStroke(); // No border for the eye circle
circle(eyeX, eyeY, 20); // Draw the eye circle
}```

##### Reflection

I think having a dynamic image would be a great idea. And using other forms of shapes, such as curves and beziers, would help me create a better graphic. Because it is difficult to play with shapes in such a way that the coordinates coincide without leaving unnecessary gaps. Another thing I want to improve is my understanding of color theory, because even though I was able to obtain the color codes I desired, I know I fell short of obtaining the various transperacy levels of colors required for particular shapes.