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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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();
}
}
// 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(); } }
// 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.

Leave a Reply