For my first assignment, we were tasked with creating a self portrait of ourselves using p5js. I’ll be honest, I’d say this was a pretty nice intro and learning experience to p5js and arguably one of the funniest moments i’ve had when it came to coding.
I’ve always done coding with a serious intent and I think that took the fun away from my projects, hence I wanted my portrait to reflect that. Thus, I decided to just wing it and make the funniest, interactive and outgoing portrait I could think of XD.
Portrait:
Idea and Process:
My initial thought was that I want my portrait to have movement instead of just a static image because then it sort of brings it to life. I first drew myself using some basic shapes such as circles, ellipses, bezier curves etc. However, I had difficulty thinking of how I could incorporate this movement idea with myself.
After thinking and reviewing some of the examples, I figured I could try making my eyes follow the user’s cursor, that way it’s pretty fun and fits that movement aspect. For this idea, I decided to create the pupils at the center of the eye and it would sort of be constrained within the radius of the eye depending on the X and Y coordinate of the user’s mouse. I used some calculations for this as shown below:
circle(103+(0.03*mouseX), 187+(0.03*mouseY), 20); circle(161+(0.03*mouseX), 187+(0.03*mouseY), 20);
I wanted to have a little bit of fun and add my own humour (pretty cursed) into the portrait so I added the impostor from the hit game Among Us into the portrait cause why not I thought it’d be funny. I used a variety of shapes such as ellipses and rectangles to construct it.
Later on, I decided, why not add a feature for if the user presses the mouse. I didn’t know exactly what to do but I figured I would piece it together as I went along coding.
As time passed I decided it would be funny if the impostor basically turned into some epileptic god, so I used the random() function to continuously change its colour. I also decided to edit my facial features and add golden hair (sort of resembling Goku going super saiyan) to add to the chaos and kinda act like I was ascending.
However, it still looked plain to me, hence, I decided to add some cool flickering stars in the background by using a for loop which would constantly add ellipse-like stars in the background at random points on the canvas as shown:
if(mouseIsPressed) {
background("black");
for (var i = 0; i < 10; i++) {
var size = random(5, 15);
ellipse(random(width), random(height), size, size);
}
}
Overall Thoughts:
Overall, I found it quite interesting with how many functions there were. One cool function I found was the translation function (used on the floating among us) which also added to the movement aspect of my portrait.
Dealing with shapes was tricky because I didn’t know which coordinates I had to put them at or where I would have to alter the control points for curves. Hence, I decided to add a sort of coordinate tracker for my cursor because I figured it would be really handy to when where I would like to place all of my shapes and curves, hence I added one on the top left.
One thing I would definitely improve is organizing my code. Most of the functions I used, the arguments were hard-coded and I feel like I could’ve used traits such as width and height to organize my code space. I could have also used functions such as drawFace() or drawClothes() to further organize my code.
Nonetheless, i’m no expert at art but this was a super awesome and fun assignment and I feel like I developed a strong foundation for some of the basic functions used in p5js.