Overview:
In this project my main inspiration was my background and who I am since it is a self-portrait after all. I started off with the blue sky, radiating sun and moving clouds since I love summer but also because Morocco is always sunny and perfect weather. Then I added a red banner with a green circle in the middle of it as a reference to the moroccan flag in which I put my portrait that I made as similar to me as I could get it.
Highlight:
My favorite part about my portrait is the sun shining and the clouds moving it truly gives it life and dimension. Using previous knowledge, trigonometry and loops I was able to create an endless sky feeling as the sun rays expand and retract while the clouds are moving effortlessly through the screen.
Sun animation:
function drawSun(x, y) {
// Sun circle
fill(255, 204, 0); // Yellow color
ellipse(x, y, 40, 40);
// Animated Sun rays
stroke(255, 204, 0); // Yellow color for rays
strokeWeight(2);
let rayLength = 30 + sin(frameCount * 0.1) * 15; // Creates the animation effect
line(x - rayLength, y - rayLength, x - 60, y - 60);
line(x, y - rayLength, x, y - 60);
line(x + rayLength, y - rayLength, x + 60, y - 60);
line(x - rayLength, y, x - 60, y);
line(x + rayLength, y, x + 60, y);
line(x - rayLength, y + rayLength, x - 60, y + 60);
line(x, y + rayLength, x, y + 60);
line(x + rayLength, y + rayLength, x + 60, y + 60);
noStroke(); // Resetting the stroke for other drawings
}
Cloud animation:
// Moving clouds
drawCloud(cloud1X, 60); // Cloud on the right of the sun
drawCloud(cloud2X, 100); // Cloud below the sun
drawCloud(cloud3X, 350); // Cloud at the bottom
//Moves the clouds
cloud1X += 1;
cloud2X += 1;
cloud3X += 1;
// Loop the clouds once they move off screen
if (cloud1X > width + 30) {
cloud1X = -60;
}
if (cloud2X > width + 30) {
cloud2X = -60;
}
if (cloud3X > width + 30) {
cloud3X = -60;
}
........
function drawCloud(x, y) {
fill(255);
// Group of ellipses to form a cloud shape
ellipse(x, y, 30, 30);
ellipse(x + 20, y, 30, 30);
ellipse(x - 20, y, 30, 30);
ellipse(x - 20, y, 30, 30);
ellipse(x + 10, y + 15, 30, 30);
ellipse(x - 10, y + 15, 30, 30);
}
Reflection and ideas for future work or improvements:
The sketch successfully brings together elements of animation and interactivity, and overall bring out what I wanted to from the beginning a serene day in Morocco and who I am. While the current representation is visually appealing, there are several areas of potential enhancement:
-Day to night: I would love to create an aspect in which based on the time of day the sky and the sun changes color and position or even switches to a moon and the clouds change for stars.
-More similarity to me: I would love to be able to figure out how to add more details to the portrait since I do think it’s not as similar to me as I envisioned especially with the hair and other lack of characteristics that were due to not knowing how to manipulate the shapes in my favor.