Week 3: OOP assignment

Concept:

In the spirit of valentine’s week, I made this interactive scene to celebrate rose day with my boyfriend. It’s inspired by our favorite trip to japan, where we fell in love with the beauty of cherry blossom trees and the iconic torii gate. The scene aims to capture those sweet memories by blending gentle falling flowers, a warm sunset, and a romantic gesture of offering roses. It’s meant to feel cozy, nostalgic, and filled with the magic of our shared experiences. Since we are in a long distance relationship, I gave this as a gift.

Highlight:

The highlight of this scene is definitely the cherry blossom trees. I spent a lot of time studying pictures of real sakura trees to capture their delicate look and subtle branching. I wanted them to appear natural, so I used a fractal-like approach: starting with a trunk and randomly growing multiple smaller branches at slightly varied angles and lengths. Each branch has clusters of blossoms added at the tips, mimicking the way real cherry blossoms bloom in bunches. striking a balance was tricky—too few blossoms made them look sparse, but too many quickly made them look overly dense. Eventually, layering different pink tones and carefully adjusting the random growth patterns helped create a softer, more realistic effect.

// add a random cluster of flowers at a branch tip
  addFlowerCluster(xcenter, ycenter) {
    let numflowers = floor(random(4, 8));
    for (let i = 0; i < numflowers; i++) {
      let offsetx = random(-20, 20);
      let offsety = random(-20, 20);
      let size = random(6, 10);
      let rot = random(TWO_PI);
      this.flowers.push(new flower(xcenter + offsetx, ycenter + offsety, size, rot));
    }
  }
  
  // display all branches and flowers
  display() {
    push();
    translate(this.x, this.y);
    scale(this.scalefactor);
    
    // draw branches
    for (let b of this.branches) {
      b.display();
    }
    
    // draw flowers
    noStroke();
    for (let f of this.flowers) {
      f.display();
    }
    
    pop();
  }
}

Improvements:

I could add more details to the roses, like multiple petals or soft shading, to make them look richer and more lifelike. Similarly, refining the branching pattern and blossom clusters of the cherry trees could bring even more realism by adding subtle color variations and layered petals. Another improvement could be animating the actual gesture of handing out the rose, so the flower doesn’t just glide through the air. Seeing a little motion in the characters’ arms or a gentle pass of the rose would make the scene feel more personal and sweet.

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.