Introduction:
While looking through the same art, I thought that its actually far from what I could create at least at this point. I wanted it to simple yet something that reminds me of home. I ended up then thinking about what makes home, home? Was it the people that I missed? Was it the seas and mountains? Was it the seasons? Well, it was a bit of everything, the way the mountain changed its vegetation across the seasons, the way I’d travel to those mountains with those very precious people. The way the seasons or the feel of the seasons could not be replicated here with in the UAE.
Concept:
My concept for the post had to do with mountains and seasons. The reflection on something not season as clearly or with in the country as abundantly as my own country. I didn’t really use any references from the document but it’s essence rather gave me something I’d rather implement.
Production and Completion:
Although I had to go through many trials, like getting the color scheme, the clouds, the sun and moon, the mountains, as well as the time switch to show the seasons. I wasn’t satisfied, because I had a dream of how it should have made me felt. I hadn’t gotten close but I had gotten somewhere, starting with what can represent the seasons? the time? The way things change. If you look at the code you will notice that the frame rate changes at about every 3 seconds like the months. The sun changes into the after 1.6 seconds and the moon to the sun at 0.8 seconds, match 16 hours of sun and 8 hours of moon.
let sunAngle = 0;
let showMoon = false;
let seasonProgress = 0;
let currentSeason = "spring";
let mountainProgress = 0;
let seasons = ["spring", "summer", "autumn", "winter"];
let brushColors;
let icons = [];
let clouds = [];
function setup() {
createCanvas(800, 600);
brushColors = [
color(139, 69, 19), // Brown (Autumn)
color(34, 139, 34), // Green (Spring)
color(255, 165, 0), // Yellow-orange (Summer)
color(173, 216, 230) // **Distinctive icy blue for Winter**
];
frameRate(30);
generateIcons();
generateClouds();
}
function draw() {
if (currentSeason === "spring") {
background(144, 238, 144);
} else if (currentSeason === "summer") {
background(255, 223, 186);
} else if (currentSeason === "autumn") {
background(255, 165, 0);
} else if (currentSeason === "winter") {
background(100, 150, 200); // **Deeper Frost Blue for Winter**
}
drawMountain();
drawClouds();
if (!showMoon) {
drawSun();
} else {
drawMoon();
}
displayIcons();
updateIcons();
updateClouds();
if (frameCount % 90 === 0) {
changeSeason();
generateIcons();
}
}
function drawMountain() {
let layerHeight = 50;
let numLayers = 6;
for (let i = 0; i < numLayers; i++) {
let layerColor = getMountainColor(i);
stroke(layerColor);
strokeWeight(15 + (sin(mountainProgress + i * 0.5) * 5));
noFill();
beginShape();
for (let x = 0; x < width; x++) {
let y = sin(x * 0.02 + mountainProgress + i * 0.5) * (100 + i * layerHeight) + 400;
vertex(x, y);
}
endShape();
}
mountainProgress += 0.02;
}
function getMountainColor(layerIndex) {
let seasonIndex = seasons.indexOf(currentSeason);
if (currentSeason === "spring") {
return lerpColor(brushColors[1], color(255, 255, 255), layerIndex * 0.1);
} else if (currentSeason === "summer") {
return lerpColor(brushColors[2], color(255, 255, 255), layerIndex * 0.1);
} else if (currentSeason === "autumn") {
return lerpColor(brushColors[0], color(255, 255, 255), layerIndex * 0.1);
} else if (currentSeason === "winter") {
return lerpColor(brushColors[3], color(255, 255, 255), layerIndex * 0.2); // **Stronger white contrast for winter**
}
}
function drawSun() {
fill(255, 204, 0, 150);
noStroke();
let size = 100 + sin(sunAngle) * 30;
ellipse(650, 100, size, size);
sunAngle += 0.02;
if (sunAngle > TWO_PI) {
sunAngle = 0;
showMoon = true;
}
}
function drawMoon() {
let moonSize = map(sin(frameCount * 0.1), -1, 1, 50, 100);
fill(255, 255, 255, 150);
noStroke();
ellipse(650, 100, moonSize, moonSize);
if (frameCount % 24 === 0) {
showMoon = false;
}
}
function changeSeason() {
let nextSeasonIndex = (seasons.indexOf(currentSeason) + 1) % seasons.length;
currentSeason = seasons[nextSeasonIndex];
generateClouds();
}
function generateIcons() {
icons = [];
let iconSymbol = "";
if (currentSeason === "spring") {
iconSymbol = "🌸";
} else if (currentSeason === "summer") {
iconSymbol = "☀️";
} else if (currentSeason === "autumn") {
iconSymbol = "🍂";
} else if (currentSeason === "winter") {
iconSymbol = "❄️";
}
for (let i = 0; i < 5; i++) {
icons.push({
x: random(width),
y: random(100, 300),
speed: random(0.2, 0.5),
symbol: iconSymbol
});
}
}
function updateIcons() {
for (let icon of icons) {
icon.y += icon.speed;
if (icon.y > height) {
icon.y = random(100, 300);
}
}
}
function displayIcons() {
textSize(32);
textAlign(CENTER, CENTER);
for (let icon of icons) {
text(icon.symbol, icon.x, icon.y);
}
}
function generateClouds() {
clouds = [];
for (let i = 0; i < 6; i++) {
clouds.push({
x: random(width),
y: random(50, 200),
size: random(60, 100),
opacity: random(100, 200),
speed: random(0.5, 1.5)
});
}
}
function drawClouds() {
for (let cloud of clouds) {
fill(255, 255, 255, cloud.opacity);
noStroke();
ellipse(cloud.x, cloud.y, cloud.size, cloud.size * 0.6);
ellipse(cloud.x + 30, cloud.y, cloud.size * 0.8, cloud.size * 0.5);
ellipse(cloud.x - 30, cloud.y, cloud.size * 0.9, cloud.size * 0.6);
}
}
function updateClouds() {
for (let cloud of clouds) {
cloud.x += cloud.speed;
cloud.size += sin(frameCount * 0.01) * 0.5;
cloud.opacity = map(sin(frameCount * 0.01), -1, 1, 100, 200);
if (cloud.x > width + 50) {
cloud.x = -50;
cloud.y = random(50, 200);
}
}
}
Sketch:
Improvements:
I think I can improve a lot with more dynamic visuals and smoother transitions. I will try to include more user interaction that can allow them to do more than just have a ‘watch’ experience. They should be able to have ‘active’ experience as a participant. I could include sounds that mimic the ambiance achieved in places in South African to make it further immersive.