Focus: Foundations and early sketches

• How I started the project (canvas setup, sky/grass/soil layers)
• Creating and drawing flowers with a custom drawFlower() function
• Adding mouse interaction for planting flowers
• Early bugs or realizations (e.g., needing to use arrays to store user-planted flowers)

🔹 Visual Planning

Before writing any code, I created a digital sketch in Procreate to map out my vision for the Interactive Garden.

This helped me plan:

• The layout of the canvas: sun in the top left, sky filling the background, grass and soil layers below.

• Flower positioning across the grass.

• Bee placement and movement path.

• The overall color palette and visual feel I wanted.

  

Creating this sketch made the actual coding phase feel more grounded. I knew exactly what I wanted the scene to look like, which helped me break the project down into layers and plan what to build first.

🔹 Setting the Scene (Canvas + Layers)

I started my setup() function by creating the canvas (600 x 400) and drawing the background layers. I used solid fill colors for each layer:

• Sky (background(135, 206, 235)) – light blue during the day
• Grass (rect(0, 300, width, 100)) – dark green
• Soil (rect(0, 370, width, 30)) – rich brown