The first class of the semester kicked off with an interesting challenge: creating a self-portrait using basic shapes. This task was not only a great way to start our Introduction to Interactive Media (IM) course but also showed us how this field can be applied in practical work.
For this assignment, I decided to explore how simple shapes could represent different aspects of myself. Since we could only use primitive shapes, I had to get creative to turn a square or a circle into something like an eyebrow. Before diving into coding with P5.js, I spent some time brainstorming and sketching out a rough idea of how I wanted to convey my self-portrait through these basic shapes.
The first challenge was figuring out how to represent myself wearing a hijab using 2D shapes. After some trial and error, I settled on using an arc connected to a quadrangle, which, after removing the outline, looked like a hijab to me. Once that was in place, the rest of the project flowed smoothly as I added details and brought my sketch to life.
The most challenging part for me was trying to recreate my eyebrows using quadrangles. It seemed straightforward in theory, but when I tried it, the brows looked off, and I had to experiment a lot to get the right dimensions that resembled real eyebrows. To help with this, I used the “Print mouseX and mouseY” function throughout the process. It made it easier to understand how to scale things properly because I was struggling to figure out which parameter corresponded to what size.
Even though the assignment didn’t require interactivity, I decided to give it a try. After watching a YouTube video about mouseClicked on p5.js here, I managed to create two global variables that responded to user clicks. This is the part of the code that I’m particularly proud of:
let brow = '#694133';
let smile='#694133';
function mouseClicked(){
if (brow == '#694133'){
brow='rgb(236,99,123)';
}else{
brow='#694133';
}
if (smile == '#694133'){
smile='white';
}else{
smile='#694133';
}
}
It added an extra layer of engagement to my self-portrait, and I found it quite satisfying to implement. It was a pleasant surprise to find out that this function was already built into the program. By using some simple if statements, I managed to change the color of my eyebrows and make my sketch smile whenever the mouse was clicked.
After putting in the effort, I’m proud of my first sketch. Here’s an embedded sketch of my work.
However, for future improvements, I want to add more interactive elements, like maybe a sticking-out tongue or something fun and quirky. I also want to experiment with dimensions and shadows to make the sketch look more realistic.
In any case, this project made me realize the potential of using interactive media to express ideas and identities in creative ways, setting the tone for what we would explore throughout the semester.