Week 1 – Self-portrait

Concept

For the first assignment, I will present a simplified picture of myself using p5.js. I chose to cover my eyes in the portrait because I wanted to symbolize introspection and the idea of seeing beyond appearances, as I used in other mediums.

The highlight of the code I am proud of is this snippet:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//small detail in Abaya
stroke('rgb(32,32,32)');
strokeWeight(5);
let dx = 256 - 210; // Difference in X
let dy = 399 - 410; // Difference in Y
// Adjusting both points by the calculated difference
line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)
//small detail in Abaya stroke('rgb(32,32,32)'); strokeWeight(5); let dx = 256 - 210; // Difference in X let dy = 399 - 410; // Difference in Y // Adjusting both points by the calculated difference line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)
//small detail in Abaya
 stroke('rgb(32,32,32)'); 
  strokeWeight(5);
 let dx = 256 - 210; // Difference in X
  let dy = 399 - 410; // Difference in Y

  // Adjusting both points by the calculated difference
  line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)

This is because it really required me to understand the coordinates to position the detail. Finding an accurate x and y coordinates to perfectly align the detail was pretty challenging, with the errors ruining the other details of the portrait. However, using console.log to track positions and fine-tune them allowed me to get it right.

Embedded Sketch

Reflections

 I think I need to improve more on the colors and the use of shapes since my current portraits lack depth and realism. In addition, I would also add a background and add a bit more details in areas like the headscarf. While the task comes with a lot of challenges and debugging to do, I do learn more about JavaScript than I realized, and hopefully, as I learn how to utilize other functions, like the console.log() function, and line(), the processes of learning JavaScript will slowly become easier.