The Concept:
For this project I wanted to try to code something that reflects in any form or sense who I am as a person. I kept racking my brain for ideas but I didn’t have any that I particularly liked so I just started drawing random things. I started with ellipses, a big one, a smaller one, an even smaller one. I created them non concentric because I don’t like everything to be perfectly aligned. Then I decided why not make it the background and just draw a simple face that resembles me on top. Then I started thinking about colors; I was too indecisive to choose one color so I settled on three!
The three colors I used for the background represent the sun, sea and grass because one thing about me is that I enjoy being by the beach and going to parks since nature has a very calming effect on me.
By clicking the mouse, not only does the background change but also my facial expressions do too. I go from happy to surprised to pissed off. I wish I could say that the expressions relate to the background color or something cool like that, but it was really just an attempt at challenging myself to experiment further with p5.js.
I added AirPods to the portrait because I am almost always listening to music. Music has been such a big part of my life for so long, I couldn’t draw a self-portrait without including any element of music into it. However, the AirPods are missing in the “pissed off” version of myself, because I can never get pissed off while listening to music.
As you move the mouse around the screen, the eyes follow the movement of the mouse because I wanted to add an element of interactivity in the portrait, but you could also say it reflects my curious nature.
A highlight I’m proud of:
Although it may seem very trivial, I had such a hard time getting the eyebrows to look the way I wanted them to. So I am proud of the final result I reached.
//eyebrows
fill(hair);
if(option == 1){ //straight brows
bezier((width/2)-15, (height/2)-30, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-25);
bezier((width/2)+15, (height/2)-30, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-25);
}
else{if(option == 2){ //surprised brows
bezier((width/2)-15, (height/2)-40, (width/2)-35, (height/2)-45, (width/2)-45, (height/2)-40, (width/2)-50, (height/2)-35);
bezier((width/2)+15, (height/2)-40, (width/2)+35, (height/2)-45, (width/2)+45, (height/2)-40, (width/2)+50, (height/2)-35);
}
else{if(option == 3){ //pissed off brows
bezier((width/2)-15, (height/2)-25, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-30);
bezier((width/2)+15, (height/2)-25, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-30);
}
}
}
Another part I am particularly proud of is the way I had the background colors change with every mouse click.
if(option == 1){
let blue0 = color(59, 197, 255);
let blue1 = color(135, 219, 255);
let blue2 = color(110, 212, 255);
let blue3 = color(161, 227, 255);
//non concentric circles in the background
background(blue0);
noStroke();
fill(blue1);
ellipse(150,150,500);
fill(blue2);
ellipse(200,150,350);
fill(blue3);
ellipse(150,150,200);
// changes option to 2 so that the frame changes with next mouse click
option = 2;
// drawMe() function is called todraw the face over the desired background
drawMe();
}
// second mouse click, changes background from blue to green (along with other changes further described in drawMe() function)
else{if(option == 2){
let green0 = color(67, 166, 60);
let green1 = color(0, 139, 0);
let green2 = color(76, 187, 23);
let green3 = color(97, 194, 86);
background(green0);
noStroke();
fill(green1);
ellipse(150,150,500);
fill(green2);
ellipse(200,150,350);
fill(green3);
ellipse(150,150,200);
option = 3;
drawMe();
}
else{if(option == 3){
let yellow0 = color(255, 191, 79);
let yellow1 = color(255, 172, 28);
let yellow2 = color(255, 209, 130);
let yellow3 = color(255, 228, 181);
background(yellow0)
fill(yellow1);
ellipse(150,150,500);
fill(yellow2);
ellipse(200,150,350);
fill(yellow3);
ellipse(150,150,200);
drawMe();
//resets option to 1 so that backgrounds can loop
option = 1;
}
}
}
Reflection and ideas for future work or improvements:
Working on this assignment was very fun, I kept pushing myself to try new things and I stuck into this loop of constantly wanting to add more features without complicating it too much. It was hard for me to decide where to draw the finish line. For future work, I would like to work on having more interactivity and creativity within my code. I would also like to work on making my code more efficient by removing redundant repetition of code.
