Week 2: Reading response (Casey Reas’ Eyeo talk on chance operations)

While watching the video, I kept thinking about the relationship between order and chaos. The speaker talked about how artists have historically tried to impose order on the unpredictable nature of the world. But now, with advancements in science and technology, randomness has become part of artistic expression itself. That idea really stuck with me. It made me wonder—do we create to control, or do we create to explore the unknown? The way the speaker described using randomness in his art made me question how much of our daily lives are actually shaped by chance. Even when we think we have control, aren’t we still just reacting to unpredictable forces? It’s interesting how adding a little bit of randomness into a structured system prevents everything from collapsing into sameness. That balance between order and chaos feels very human—too much order, and things become rigid; too much chaos, and everything falls apart.

I’ve been exploring this balance in my own work, especially in this week’s project. The scene I created presents a quiet, melancholic moment viewed from a window—contrasting the ever-changing cityscape outside with the stillness inside. I use randomness to generate elements like the shifting skyline, the movement of rain, and the organic growth of potted plants. This mirrors the way modern life constantly pushes forward, yet we still crave a connection to something timeless and stable. I think the optimum balance between randomness and control depends on intention—too much randomness, and the meaning gets lost; too much control, and it feels lifeless. For my piece, randomness makes each rendering unique, reinforcing the idea that no two moments, even in solitude, are ever exactly the same. The talk made me appreciate how randomness isn’t just a tool—it can be a way of seeing the world differently.

Week 2: Using loops

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 });
}
}

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.

Week 1: Self-Portrait

Concept:

This was my first project using p5.js, and also my first for this class. So, I decided to experiment and explore as much as I could to build a solid foundation for the projects ahead.

To start, I used a photo of myself to get a rough idea of how to align my basic features. The goal was to create a portrait as realistic and true to life as possible. I used different shapes, like ellipses, arches, and rectangles, to form the features, and added line strokes to bring in more detail.

Since I’m a computer science major, I wanted to add some movement and interactivity, instead of just making a still portrait. First, I made the eyes follow the cursor by adjusting their position as the cursor moved. At first, though, the pupils kept escaping the eyes, so I had to put some limits on the movement to keep them inside the eyes. Then, since I love flowers, I created a function that draws small flowers whenever the mouse clicks anywhere on the screen. This made it look like I was looking in the direction where each flower appeared, reflecting my interest and excitement for flowers. After every five flowers, I added a little celebration with confetti falling from above. Once the confetti finished, the flowers slowly started falling too. The user would then need to refresh the page to draw more flowers.

Ideally, I would’ve made the flower creation loop infinite, so the user wouldn’t have to refresh to make new flowers. However, I’ve been feeling really worn out with work lately, so I decided to leave it as is. The idea was that I needed to refresh before getting more work — since the project is meant to reflect me, not just being a simple program, it kind of shows that I need a break too.

Click anywhere to make flowers. I’ll be super happy if you can make 5 !

Highlights:

I think the highlight of my project was the confetti and the flowers falling down. It added a fun sense of celebration and reflected my love for flowers.

// confetti falling down if celebration has started
if (celeb_start) {
for (let i = 0; i < confetti.length; i++) {
confetti[i].y += confetti[i].speedY; // move the confetti down
confetti[i].x += confetti[i].speedX; // move the confetti horizontally to give a wavy effect
fill(confetti[i].color);
noStroke();
ellipse(confetti[i].x, confetti[i].y, 10, 10);
}

// removing confetti that has gone off the screen
confetti = confetti.filter(c => c.y < height);
}

// falling flowers after celebration
if (flower_count >= 5 && !celeb_start) {
celeb_start = true;

// pause for 1 second before the celebration starts
setTimeout(() => {
generateConfetti(); // start the confetti
}, 300);

// pause for 5 seconds after confetti
setTimeout(() => {
makeFlowersFall(); // making flowers fall
}, 3000); // confetti and delay time
}

// move the falling flowers
for (let i = 0; i < fall_flowers.length; i++) {
fall_flowers[i].y += fall_flowers[i].speedY; // make flowers fall
fall_flowers[i].x += fall_flowers[i].speedX; // adding horizontal drift to the flowers
drawFlower(fall_flowers[i].x, fall_flowers[i].y);
}

// removing flowers that have fallen off the screen
fall_flowers = fall_flowers.filter(f => f.y < height);
}

I also liked the idea of making the shirt with a round neckline using a skin-colored semi-circle (to extend the neck skin), which gave the clothes a more realistic look. This saved me time because creating the shirt itself with that structure would have been much more difficult than simply extending the neck.

Reflections, ideas for future work & Improvements:

I have slightly wavy hair and wanted to capture that instead of using simple straight line strokes. I tried using sin() functions to create the waves, but I couldn’t get it right due to time constraints. Since the thing I love most about myself is my hair, I really want to make it more realistic and true to mine. I also hope to make my bangs look more natural by using arches instead of line strokes.

I could definitely improve the aesthetics of the background and add a more appealing scenery. Since the theme of this portrait is all about flowers and positive vibes, I could create a garden in the background to complement that idea. Lastly, I’d love to make a full-body portrait with a nice dress in the future.