Week 2: Loop Flowers

For inspiration, I found some online references with patterns created by combining similar shapes. Most of these combinations resulted in forms that resembled flowers.

Flower Pattern

I drew a connection between using a shape multiple times to draw a pattern and using loop in p5js. My idea is using the same shape, with elements of randomness to create a different flower every time the user interacts with the canvas.

Challenge

When creating this piece, what I found particularly challenging was using the rotate() function to position the petals around the center (the mouse cursor). However, the rotate() function in p5.js only allows rotation around the origin (0,0), so I had to use translate() to change the origin to the mouse cursor’s position. This quick fix created a problem later when I wanted the flowers to remain permanently on the canvas instead of disappearing every time the mouse was released.

For drawing the flowers, I created two functions: one to draw flowers with squares and one with ellipses. They are similar in essence except for the change in shapes used to draw.

function squareFlower(x,y,size,fcolor){
  //repeat drawing the square with the rotation of angle until the 360 degree is full
  for(let i =0; i<(360/angle); i++){
    rotate(angle);
    stroke(fcolor[0], fcolor[1],fcolor[2]);
    fill(fcolor[0], fcolor[1],fcolor[2],fcolor[3]);
    rect(x,y,size);
  }
}

Finally, I included random attributes like shape, petal size, and angle of rotation to create different flowers. I also adjusted the opacity of the shapes to create a more interesting composition. To make it look more like flowers, I implemented an increase in shape size over time when the mouse is pressed, creating a blooming effect.

Final Sketch

Reflection

After finishing the sketch, I tried to make the flower appear permanently on the screen instead of disappearing, but I couldn’t because the flowers are drawn based on their rotation around the origin (which changes for each flower). When I revisit this in the future, I want to change the drawing of the flowers from using the built-in rotate() function to using math to calculate the new coordinates. This will allow the flowers to be drawn independently of the origin’s location. Another issue is that some shapes in the flowers are overlapping, which I think stems from the calculation of the rotation angle. I will also try to improve this calculation in future sketches.