OOP Class 3

Concept: Blooming Emoji Garden

The Blooming Emoji Garden is a generative artwork that simulates a lively, interactive garden filled with animated emojis. The artwork is inspired by the beauty and dynamism of nature, where flowers bloom, insects flutter, and life interacts in playful and unexpected ways. Using Object-Oriented Programming (OOP) in p5.js, the piece brings together a collection of emojis that grow, rotate, and interact with each other, creating a vibrant and ever-changing visual experience.

Highlight of Code: Dynamic Interactions with checkNeighbors()

One part of the code I’m particularly proud of is the checkNeighbors() method in the BloomingEmoji class. This method enables the emojis to interact with each other in a dynamic and organic way. Here’s the code snippet:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
checkNeighbors(shapes) {
for (let other of shapes) {
if (other !== this) { // Avoid self-comparison
let d = dist(this.x, this.y, other.x, other.y); // Distance between emojis
if (d < (this.size + other.size) / 2) { // If emojis overlap
this.growthRate *= 0.99; // Slow down growth
this.x += random(-2, 2); // Add a little jiggle
this.y += random(-2, 2);
}
}
}
}
checkNeighbors(shapes) { for (let other of shapes) { if (other !== this) { // Avoid self-comparison let d = dist(this.x, this.y, other.x, other.y); // Distance between emojis if (d < (this.size + other.size) / 2) { // If emojis overlap this.growthRate *= 0.99; // Slow down growth this.x += random(-2, 2); // Add a little jiggle this.y += random(-2, 2); } } } }
checkNeighbors(shapes) {
  for (let other of shapes) {
    if (other !== this) { // Avoid self-comparison
      let d = dist(this.x, this.y, other.x, other.y); // Distance between emojis
      if (d < (this.size + other.size) / 2) { // If emojis overlap
        this.growthRate *= 0.99; // Slow down growth
        this.x += random(-2, 2); // Add a little jiggle
        this.y += random(-2, 2);
      }
    }
  }
}

 

Why I’m Proud of It:

  • Dynamic Behavior: This method makes the emojis feel alive. When they overlap, they jiggle and slow down their growth, creating a sense of connection and interaction.
  • Performance Optimization: Despite checking interactions between all emojis, the method is efficient enough to run smoothly with up to 50 emojis.
  • Organic Feel: The randomness in the jiggle (random(-2, 2)) adds an organic, natural feel to the interactions, making the garden feel more alive.

Embedded Sketch

You can interact with the Blooming Emoji Garden below. Click anywhere on the canvas to add new emojis and watch them grow, rotate, and interact!

Reflection and Ideas for Future Work

What Worked Well:

  • The use of emojis made the artwork visually appealing and accessible.
  • The interactions between emojis added a layer of complexity and engagement.
  • The user interaction (click to add emojis) made the artwork feel participatory and fun.

Challenges:

  • Performance became an issue with too many emojis. Optimizing the checkNeighbors() method was crucial.
  • Balancing randomness and control was tricky. Too much randomness made the garden feel chaotic, while too little made it feel static.

Ideas for Future Improvements:

  1. More Emojis and Variety:
    • Add more emoji types, such as animals, weather symbols, or food, to make the garden even more diverse.
  2. Advanced Interactions:
    • Introduce different types of interactions, such as emojis “attracting” or “repelling” each other based on their type (e.g., bees attracted to flowers).
  3. Sound Effects:
    • Add sound effects, like buzzing for bees or rustling for flowers, to enhance the immersive experience.
  4. Garden Themes:
    • Allow users to choose different garden themes (e.g., desert, forest, underwater) with corresponding emojis and backgrounds.
  5. Mobile Optimization:
    • Make the artwork responsive and touch-friendly for mobile devices, so users can interact with it on the go.
  6. Save and Share:
    • Add a feature to save or share the garden as an image or animation, so users can preserve their creations.

Conclusion

The Blooming Emoji Garden is a playful and dynamic generative artwork that combines the beauty of nature with the whimsy of emojis. It’s a testament to the power of Object-Oriented Programming and creative coding in p5.js. With its engaging interactions and endless possibilities for customization, the garden invites users to explore, create, and imagine. 🌸🐝🦋

Leave a Reply