Assignment 1: Self Portrait

After the first session, I played around with p5.js and made this embarrassed-looking koala using shapes, lines, fills, and the mouseX and mouseY variables. Clicking the koala makes it blush, because why not?

Embarrassed Koala

I thought it was pretty cute, so I decided to use it as a template for my actual self-portrait. I wanted to make it funny and representative of my personality of not taking things too seriously, especially with a practice as playful as IM.

In the process, I found p5.js to be an interesting adjustment. Instead of seeing color or stroke width as a property of an object, I had to type them out as separate lines of code every time I wanted something to have a different property. I couldn’t just do leftEye.color = “black” – I had to first declare the fill, then draw the left eye.  This was rather tedious, so next time, I will probably plan ahead so that I can more effectively group colorways and avoid back-and-forth switching.

After drawing the basic shapes of my self-portrait, I accidentally wrote an infinitely calling while loop, which auto-ran (because auto-running was turned on) and immediately crashed and destroyed the entire self-portrait, which I thought was being auto-saved, but was actually not. I was very sad, but I soldiered on and started again from scratch, a little faster this time around. Advice to anyone else doing this: turn off auto-run when making risky decisions like while loops.

I eventually decided to have the character hover around (to somewhat reveal NYUAD! WOO on its shirt), the eyes follow the mouse, and the background color also respond to the user’s mouse.

Originally, I was going to use a slider for changing background color, but I found that it distracted from the user experience of moving your mouse around. I also added a little “click for awesome” so that they know something will happen (the character blushes and the background goes neon yellow) when they click.

Making the portrait was quite time consuming because I had to restart, do a lot of little tweaks to put my layers in the right order, and make everything more or less symmetrical. Nevertheless, I was able to use circles, ellipses, lines, rectangles, arcs, text, a rotating transform, and mouseX and mouseY to achieve this very memey final self portrait. I think I’m pretty proud of it!

Overall, the activity made me more excited to learn more time-efficient way of doing things on p5.js, as well as more advanced techniques in producing generative effects and interesting animations. I enjoyed the process and am looking forward to figuring out more complex interactions.

Final Self-Portrait