Focus: Animation and Interactivity

• Introducing bees with random motion

• Using loops to animate multiple bees

• Firefly flicker effect with alpha blending (flicker = random(100, 255)) Do more research

• Problems and fixes:

  • Bee drawing inside wrong function
  • Forgetting to return stroke settings
  • Clicking toggles both sun and plants—refined logic using dist()
  • Flower planting only allowed in grass zone

  

This week was where my Interactive Garden sketch really started to come alive. I focused on building animation, introducing motion and interactivity, and refining the logic behind user input. There was a lot of trial and error, and I definitely had to debug more than once, but I walked away understanding so much more about what it means to bring a creative concept to life using code.

🔹 Introducing Bees with Random Motion

One of my big goals this week was to add bees that buzzed around the garden to bring movement to the scene. I didn’t want them to just appear — I wanted them to animate.

I started by creating an empty bees array:

let bees = [];

Then in setup(), I used a loop to generate multiple bees at random positions along the x and y axes:

for (let i = 0; i < 4; i++) {
  bees.push({
    x: random(-100, width), // Random start across or off screen
    y: random(100, 250)     // Random height above the ground
  });
}

At first I hard-coded the bee’s x/y, but realized I’d need a loop to animate multiple bees and update their positions every frame.

🔹 Using Loops to Animate the Bees

Inside draw(), I used a for loop to iterate through each bee in the bees array, draw their bodies and wings, and move them across the canvas:

bee.x += 0.3;
if (bee.x > width + 20) {
  bee.x = -20;
}