Concept:
Here are my rough drawings that I used for ideation and inspiration:
The scene captures a quiet and melancholic night, showing the contrast between the outside world and the inside of the room. The rain falling against the window, adding to the somber mood. The city landscape outside is cold and distant with the buildings seen as dark silhouettes against the misty night sky. The outside world feels vast and modern, filled with artificial lights and towering structures, yet it lacks warmth and comfort.
Inside the room, the atmosphere is different. There is a longing for simplicity, an escape from the rush of modern life. The wooden furniture, antique candle holders, and potted plants reflect a preference for an older, more primitive way of living. Inside, one feels more connected to nature and tradition.
Overall, this scene is about introspecting on the quiet sadness of longing for a simpler life while knowing that the world outside continues to move forward.
Since this was a generative art project, my project features the following elements that were randomly generated:
- The city landscape changes every time you refresh the code, showing how quickly the infrastructure and outdoor environment evolve.
- The leaves of the potted plants are randomly generated each time to depict the natural growth of plants.
- The raindrops are randomly generated within the window area, with variations in speed, position, and size.
Highlights:
I believe the highlight of the code is the dynamic raindrops, as they are the main part of the project and also the most challenging. It was difficult to make the raindrops move continuously in a way that looks realistic, like actual rain. To avoid gaps in the rainfall, I started by coding the raindrops already scattered across the scene. Additionally, they needed to fall at different speeds to create a natural, random effect. Since the rain is outside the room, the raindrops had to disappear when they reached the bottom of the window and restart from the top.
// Initializing raindrops and distributing them randomly from the very top (y=70) to bottom of the window (y=70+380). this ensured that there were drops already at various heights so rainfall looks continuous.
for (let i = 0; i < dropCount; i++) {
let rx = random(130, 130 + 540); // horizontal area of the window
let ry = random(70, 70 + 380); // vertical area of the window
let sp = random(3, 9); // speed of each drop falling
let ln = random(5, 15); // length of each raindrop
raindrops.push({ x: rx, y: ry, speed: sp, length: ln });
// showing the static scene (background, window frame, city, plants, etc.)
// updating and drawing the raindrops so they fall continuously
stroke(200, 220, 255, 120); // raindrop color
for (let drop of raindrops) {
// if a drop falls past the bottom of the window area, reseting it to the top
drop.x = random(130, 130 + 540);
// drawing the drop as a vertical line
line(drop.x, drop.y, drop.x, drop.y + drop.length);
// Initializing raindrops and distributing them randomly from the very top (y=70) to bottom of the window (y=70+380). this ensured that there were drops already at various heights so rainfall looks continuous.
for (let i = 0; i < dropCount; i++) {
let rx = random(130, 130 + 540); // horizontal area of the window
let ry = random(70, 70 + 380); // vertical area of the window
let sp = random(3, 9); // speed of each drop falling
let ln = random(5, 15); // length of each raindrop
raindrops.push({ x: rx, y: ry, speed: sp, length: ln });
}
}
function draw() {
// showing the static scene (background, window frame, city, plants, etc.)
image(sceneG, 0, 0);
// updating and drawing the raindrops so they fall continuously
stroke(200, 220, 255, 120); // raindrop color
strokeWeight(2);
for (let drop of raindrops) {
// move each drop down
drop.y += drop.speed;
// if a drop falls past the bottom of the window area, reseting it to the top
if (drop.y > 70 + 340) {
drop.y = 70;
drop.x = random(130, 130 + 540);
}
// drawing the drop as a vertical line
line(drop.x, drop.y, drop.x, drop.y + drop.length);
}
}
// Initializing raindrops and distributing them randomly from the very top (y=70) to bottom of the window (y=70+380). this ensured that there were drops already at various heights so rainfall looks continuous.
for (let i = 0; i < dropCount; i++) {
let rx = random(130, 130 + 540); // horizontal area of the window
let ry = random(70, 70 + 380); // vertical area of the window
let sp = random(3, 9); // speed of each drop falling
let ln = random(5, 15); // length of each raindrop
raindrops.push({ x: rx, y: ry, speed: sp, length: ln });
}
}
function draw() {
// showing the static scene (background, window frame, city, plants, etc.)
image(sceneG, 0, 0);
// updating and drawing the raindrops so they fall continuously
stroke(200, 220, 255, 120); // raindrop color
strokeWeight(2);
for (let drop of raindrops) {
// move each drop down
drop.y += drop.speed;
// if a drop falls past the bottom of the window area, reseting it to the top
if (drop.y > 70 + 340) {
drop.y = 70;
drop.x = random(130, 130 + 540);
}
// drawing the drop as a vertical line
line(drop.x, drop.y, drop.x, drop.y + drop.length);
}
}
Reflections, ideas for future work & Improvements:
- It might not be clearly noticeable, but the raindrops overlap with the plant pots, which is something I could have improved. While they still fit into the scene, appearing to be outside the window in the rain, I could place the potted plants in front of the rain to clearly show that they are indoors.
- I could also improve the aesthetics of the room by adding more antique elements to enhance the contrast between the outside world and the inside of the room.
- Another improvement could be randomly generating small movements in the candle flame to make it look more realistic.
