As a Computer Science major, I am entirely used to working in the console. The black an white screen with limited color has been my best friend since Freshman year. For that reason, seeing the shapes and colors on screen was magical. I have worked with Processing before, but on a very limited scale, with a few shapes and images in hopes of finishing a final project and going home. It took time to maneuver the page again, understand what to put in setup and what in the draw function, but in the end I created this dynamic portrait.
Challenge
Creating this portrait was anything but easy since humans eyes, or at least mine, are not made for estimating pixel position. It was trial and error until the very end, but I think it came out okay. I encountered another obstacle while working out the angle in which the sun can move. Since I did not know p5js uses clockwise rotation for angles, i.e., opposite of Math class, it was incredibly tedious to estimate the movement of the ellipse. Undoubtedly, the hardest part was the brazier curves that I used for my hair. Estimating the pixels coupled up with estimating angles is probably nobody’s cup of tea, but thankfully, once I figured out one side, it was just a matter of subtracting from width on the other.
It took some time to understand how map() and constrain() work, but once I did, the eye and sun movement was pretty easy to achieve. Symmetry was somewhat of a hassle, but since p5js contains the global variables of width and height, it was okay.
Night Phase (Cursor out of screen)
The night phase represents my home country, Bosnia. It is currently snowing heavily there and the day is extremely short. I used the code underneath to create the snowflakes and a few if statements to control the visuals of the page.
for (let i = 0; i < 50; i++) {
ellipse(random(0, 400), random(0, 400), random(1, 4));
}
Day Phase (Cursor on the screen)
The day phase is Abu Dhabi, hence the palms. The sun moves with the x coordinate of the cursor and the angle is mapped from PI to 2PI.
function sun() {
fill("#FFE87C");
// angle is mapped from PI to 2PI in accordance to mouseX
var angle = map(mouseX, -400, 800, PI, 2 * PI);
var sunX = width / 2 + cos(angle) * 550;
var sunY = height + sin(angle) * 350;
ellipse(sunX, sunY, 70);
}
Reflection
This assignment helped me understand the basic principles of shapes and colors in p5js. Although the angle and coordinate axis principles work differently than I was previously taught, working extensively with shapes helped me understand it a lot better. In the future, I would like to focus more on the animated part of coding and make my portrait more lifelike.