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

Image

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

  //bigger one - head
  fill('#212c3f')
  arc(255, 180, 300, 270, radians(90), radians(270)); 
  
  //head smaller semi-circle
  fill('#e9e4b9')
  arc(255, 120, 180, 150, radians(90), radians(270)); 
  
  // 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
}

 

Embedded sketch

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.

Leave a Reply