My Concept
For our first assignment for IM, we had to make a self portrait of ourselves using some skills we learned in class. I was originally planning to do just a normal self portrait of me outside, maybe with the sun or grass. But, due to the pure amount of time spent coding, I thought it’d be fun to portay myself working on the computer. Almost as if the self-portrait is really just me sitting at the desk coding myself.
Highlight of Code I’m Proud of:
//mouth noStroke(); fill (0) arc(200, 240, 60, 50, TWO_PI, PI); //inside mouth fill(1000) rect(200, 242, 40, 5) //teeth fill(255, 105, 180) arc(200, 260, 25, 15, PI, TWO_PI); //tongue
The reason why I was so proud of the mouth is because it was the last thing I worked on, so it ended up being a good showcase of everything I had learned. It took me so much less time to do compared to every other facial feature and it made me happy to see that I had gotten somewhat comfortable with the coding process.
Other parts of the sketch may have been harder to do but this one felt important to highlight because it was so easy. I was incredibly happy to see myself improve.
Embedded Sketch
How This Was Made:
The code was made by looking at the references page on p5js and by watching the first four videos on Youtube by The Coding Train. The videos were extremely helpful since they gave me a good starting point when I got on the website. The videos also helped explain some things I was a bit unsure about (specifically how to do the the order of the code, but also helped with pointing out certain features that ended up being incredibly helpful and made the program so much easier to work on [such as the high contrast feature!])
There were some times when I couldn’t figure something out so I tried searching on google or reddit to see if they had an answer, but those didn’t really help much so I wouldn’t consider them a part of the process. All of the credit should be attributed to the youtube videos and the references on p5js.
Reflection:
Truthfully, I struggled a bit when it came to how I wanted to portray myself. A part of me considered pulling out all the stops and trying to do a full pixel art rendition of myself as a challenge. However, I realized that going that route would be more limiting than challenging. I wanted my portrait to have a multitude of shapes and colors. I wanted to play around with code I couldn’t figure out in class and make sure I properly understood every line of code I was typing. Pixel art would only limit me to squares and squares only.
So I decided to do a very simplified version of myself. The more I coded the more I stopped caring about how I looked and the more I cared about what code I was learning and whether I was actually retaining the information. A lot of emphasis was put on understanding what exactly the numbers represented in each shape. I didn’t want to just insert multiple numbers together and pray they worked out in the end, I wanted to prove I actually understood what I was doing.
While maybe not obvious at a first glance, there are a few parts of the portrait I can attribute to my exploring. The bit of hair under the hijab was my way of playing around with arcs since I did not understand how they worked at all. Meanwhile the eyelashes were me figuring out how lines worked and whether I could easily move them around if I so please. I even got the colors from learning about RGB and playing around till I saw a color that fit. Overall, I’m pretty happy with the end result!
However, a part of me does wish I also tried my hand at adding an interactive section, but I was worried that doing so would cause me to stress out over the assignment rather than use it as an opportunity to learn. Hopefully I’ll be able to add a bit of interaction and movement in the next assignment!