Author: Tinh Ngo

One of the key takeaways for me from Casey Reas’ talk is the importance of a ruleset in creating beauty from randomness. I was impressed by the amount of time and effort Reas and his team dedicated to experimenting with shapes – they created more than 1,000 compositions to explore patterns (11:20) . They observed and connected the pieces, then determined which rules to apply to restrict randomness and create stronger compositions.

The idea of developing concepts on paper before writing code also stood out to me. I think the notion of “play” is more effectively expressed through physical materials first, and then translated into code. This approach helps prevent getting sidetracked by implementation details and allows for more focus on the idea itself.

However, I do question the meaning of relinquishing control when creating art. Artists usually have specific intentions – such as what tools to use or how to arrange shapes. Without a ruleset, I feel that randomness can obscure the meaning of a piece. In creating my own art, I want to maintain control over what is in the picture, but I can incorporate randomness by allowing a range of inputs. For example, instead of using a single fixed shape, I could introduce an array of shapes and leave the selection to chance. In general, I think randomness is an intriguing element I would like to attempt at integrating into user interaction.

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.