Week 1 – Assignment – Self Portrait

The first week of the Introduction to Interactive Media course has been a beautiful beginning to this exciting journey. We were introduced to p5.js, a platform for creative coding, and delved right into it by learning to form two-dimensional primitive shapes with the help of available functions. The assignment to create a self-portrait using these concepts allowed me to explore my creativity and translate my imagination into a coded sketch.

My main goal with this assignment was to incorporate and master all the functions introduced in class. I approached the task without any image in mind and began with a simple ellipse to form the face. The rest of the sketch evolved based on spontaneous decisions. I wanted to achieve a realistic look for the hair, and after a few adjustments, I managed to create it using a combination of ellipses and arcs.

Throughout the process, I was extremely particular with details such as the facial features and the headband and worked to find the exact coordinates to position the shape using the print(mouseX+ ‘ , ‘ +mouseY) command.

To depict a bright sunny day in the background, I have used an arc and lines to create the sun, a simple image of birds using arcs, and a green rectangle to give an impression of the ground.

I wanted to experiment with this new form of creativity by making the sketch interactive. I tried this by incorporating the built-in variables of mouseX and mouseY to make the girl raise her hand, waving with a broadened smile as the mouseX variable crosses 300. This was achieved using the if condition and is a part of the code that I am particularly proud of.

//Waving hand
  if (mouseX>300) {
    quad(315,350,337,350,345,391,325,388);
    quad(337,373,377,315,396,318,348,392);
    circle(337,389,24);
    ellipse(385,312,25,28);
    ellipse(372,307,8,15);
    ellipse(375,295,7,20);
    ellipse(382,295,7,20);
    ellipse(389,295,7,20);
    ellipse(396,301,7,20);
  }
  else {
    rect(318,349,18,52);
  }

In addition, the geometric design on the t-shirt has a fill function with mouseX and mouseY as arguments, making the color change with the movement of the mouse. I have also used these variables to depict the movement of birds. Finally, I have used an if condition to make the girl blink when the mouse is pressed.

//Birds
  if (mouseX) {
    noFill();
    arc(153+(mouseX/5),56-(mouseY/5),47,40,0-HALF_PI,0);
    arc(200+(mouseX/5),56-(mouseY/5),47,40,PI,PI+HALF_PI);
    arc(125+(mouseX/10),85-(mouseY/10),47,40,0-HALF_PI,0);
    arc(172+(mouseX/10),85-(mouseY/10),47,40,PI,PI+HALF_PI);
  }

//Blinking eyes
  if (mouseIsPressed){
    fill('#EDD29C');
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  }
  else {
    fill(255);
    ellipse(227,210,14,15);
    ellipse(275,210,14,15);
  
    fill(0);
    circle(227,212,9);
    circle(275,212,9);
    
    noFill();
    arc(278,203,10,10,0,QUARTER_PI);
    arc(279,207,11,10,0,QUARTER_PI);
    arc(224,203,10,10,PI-QUARTER_PI,PI);
    arc(223,207,11,10,PI-QUARTER_PI,PI);
    
    fill(255);
    circle(228,212,4);
    circle(276,212,4); 
  }

The assignment turned out to be a wonderful learning experience. I now find myself more confident with the topic. Reflecting on the process, I feel I would have to work on creating variables, which is something I did not include in this sketch. I would also like to explore the concept of loops as I felt the need to have repeated movement in a few places to enhance my sketch.