Week 3 Assignment: vy’s garden using OOP

My Sketch

Please view the full sketch here.

My concept

I really love how much freedom we have for this assignment! I came up with an idea to create a garden of flowers, called “vy’s garden.” I wasn’t inspired by any particular sources but I’ve always wanted to create a game of planting flowers =)

My idea was to have the user click on their mouse to plant a new flower, which would have random characteristics. This way, every click comes with curiosity and surprise. When all the flowers in the garden are unique and random, each final garden feels personalized and special.

My highlight code

My canvas size is 700x400, and my garden can hold up to 7 flowers (the number of flowers it can hold is 1/100 of the width of canvas). After the 7th flower, if the user continues to click their mouse, all of the current flowers will be removed and they can plant up to 7 new flowers.

// if garden.length > 7
  if (garden.length > width/100) {
    //loops until garden is empty
    while (garden.length > 0) {
      garden.pop();
    }
    x = 100;
  }

In my mousePressed() function, after creating a new flower and adding it to the array, I have an if-statement checking the size of the garden. If it is larger than (width/100) (in this case, 7), then remove all the flowers in the array garden by using pop() until the garden is empty. After that, I reset x to 100, this is the starting x-coordinate of the first flower.

How this was made

I created a class Flower, which serves as the template for my flowers! The flower objects are stored in the garden array.

Each flower can be one of two species (tall/short), have a random petal color, a random center circle color, and a random number of leaves. The details are as follow:

• 2 possible species: short & petals creating an “X” shape OR tall & petals creating a “+” shape.
• 4 possible petal colors
• 4 possible flower center colors

  let petals = ["#FF6B6C", "#f1b709", "#FC814A", "#9ecb15"];
  let flower_center = ["#5f247b", "#095314", "#AD1F2D", "#202C59"];

• 3 possible variation of leaves: no leaves, left leaf, right leaf

There are 96 possible variations of a flower (2×4×4×3). For a garden of 7 plots, where flowers can be repeated, there are 96⁷ possible unique gardens. That is equal to 75,144,747,810,816 aka ~75 trillion variations!!
75 trillion different gardens:
~2.5 times the amount of cells in the human body
~38 times the number of galaxies in the universe
~642 times the number of humans ever been born

To create the randomization, when I instantiate a new flower, its arguments are randomized. For example, int(random(2)) gives 0 or 1, which will indicate the species. Similarly, petals[int(random(0, 4))] returns the string hexcode at a random integer index of the array petals.

//constructor(species, x, petal, center, leaves)
  /*
  2 possible species: 0 for the tall one and 1 for the short one
  x: x-coordinate of the flower
  petal: a random color from the array petal, accessed by indexing at a random integer index
  center: a random color from the flower_center array
  leaves: 0 = no leaves, 1 = right leaf, 2 = left leaf
  */
let newFlower = new Flower(
    int(random(2)), //random(2) is exclusive of 2
    x,
    petals[int(random(0, 4))],
    flower_center[int(random(0, 4))],
    int(random(0, 3))
  );

Each new flower is then pushed into the garden array and the entire garden is being drawn in the draw() function.

Reflection

I’m super proud of this artwork since I’ve wanted to create a digital garden of my own for sooooo long! I love how interactive it is, and I’m really amused at how many possible variations of flowers and gardens there are!

I’m also incredibly happy that this simple assignment involves many of the concepts we learned in class. I used for loops, while loops, conditionals, the random function, multiple arrays (garden, petals, flower_center), and most importantly, objects and classes. If I had more time, perhaps I would also want to give some movement to the flowers when they appear rather than just abruptly appearing like it is right now. For example, I could have it “rise” from the ground by controlling with speedy. But overall, I’m super happy with what I came up with already!

Resources I Used

https://p5js.org/reference/p5/text/
https://p5js.org/reference/p5/textStyle/
https://p5js.org/reference/p5/textFont/

No Artificial Intelligence was used in the making of this sketch or its documentation.