Self Portrait – Janindu

Concept

I was taken back to the time when my younger self began to learn to draw on MS Paint. So, I decided to pay tribute to those carefree days and draw a very simplified self-portrait.  The drawing utilizes intuitive shapes such as ellipses to represent soft features and triangles and rectangles to define much more defined features. In the artwork, I wanted to create a warm and playful atmosphere through the sun and a smile.

Implementation

First I implemented Owen Roberts coordinate display system template to my sketch. This helped me gain some sort of positional awareness about the placing the shapes.  This is the link to Roberts’ work.

The following code was then implemented:

function setup() {
    createCanvas(400, 400);
}

function draw() {
//background
    fill("brown");
    rect(0,260,400,140);
    fill(82, 157, 227);
    rect(0,0,400,260);
    fill("yellow");
    circle(0,0,100);
    line(0,260,400,260);
    
  //Ears
    fill(232, 176, 72);
    ellipse(110,200,20,30);
    ellipse(290,200,20,30);
  //Face 
    fill(235, 194, 117); 
    noStroke();
    rect(160, 300, 80, 20);
    rect(50, 320, 300, 150);
  //V-neck
    fill("green");
    rect(50, 320, 100, 150);
    triangle(150,318, 150, 400,200,400 );
    rect(250, 320, 100, 150);
    triangle(250,320, 250, 400,200,400 );
    fill(235, 194, 117);
    stroke("Black");
    ellipse(200,200,90*2,110*2);
  //Eyes
    fill("white");
    ellipse(160,170,30,20);
    ellipse(240,170,30,20);
    ellipse(240,170,30,20);
  //Hair
    fill("black");
    ellipse(160,170,10,10);
    ellipse(240,170,10,10);
    ellipse(200,100,170,90);
    triangle (110,180, 115, 100, 150,110);
    triangle (290,180, 285, 100, 250,110);

    arc(200, 250, 80, 80, 0, PI , CHORD);
  //teeth
    fill("white");
    rect(170,250, 60, 10);
  //tongue
    fill("red");
    arc(200, 270, 180/4, 180/4, 0, PI , CHORD);
  //nose
    fill(232, 176, 72);
    triangle(200,180,180, 215, 215, 215);
  //arms
    line(90,355,90,400);
    line(310,355,310,400);    
}

Here I tried to use multiple shapes to create the hair (I tried to replicate a fade:)). I created the background using two rectangles that span over the entire canvas.

I found that the order in which the code was compiled to be quite interesting. You could simply layer different shapes over each other by writing the code for that shape over another.

I played around with the parameters of the shapes such as their starting point and sizes to create the facial features. Specifically, I used the fill() function before creating each feature to shade it in a different color. I also experimented with using the noStroke() function to remove and implement borders.

Sketch

Here is the simulated sketch of what the code produced:

Reflections

The next steps for this assignment would be to increase the complexity of colors being used. Specifically using the lerpColor() function to create a gradient background. Furthermore, I could also use the mouse tracking functions in P5.js to make interactive features such as opening and closing eyes and hand movement. I feel like I used most of the simple shapes available to use.  Something I really struggled with during the assignment was using and manipulating curves in a sketch. I also feel like some improvements can be made in how the features blended in with each other.

Overall, the portrait was a lot of going back and forth changing values to the parameters of the shapes. Regardless, it was very enjoyable.