Project #1 Generative Design

Click to generate flowers. Press Space to clear the canvas.

Description

For my generative design project I made a program that randomly generates a flower where ever you click. I'm pretty proud of how perceptually different the flowers can end up being

Design Process

The first property of the flower is the number of petals, which is randomly generated between 2 and 18. I tried a larger range of petals, but anything above 18 started looking more like a circle. I also realized that I needed to convert the random number to an integer, otherwise the math with rotate() would be wonky and make a weird unsymmetrical flower.

The second property is the color of the flower. I started off using a standard randomizer for each RBG value between 0 and 255, but ended up with a lot of muddy colors. After some research, I found this code here (https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/) and converted it to JS. This makes it so that the color is relatively pretty no matter what random number is generated

The third property is the size of the flower. I struggled with petals that were either too close, too thin/thick, or so spread out it wasn't really a flower anymore. However, I didn't want to standardize the ratios so much that they all looked the same. Because of this, I spent a lot of time messing with the ratios of y, width, and height values.

The fourth property is the starting angle of the flower. This just makes it so that each flower isn't exactly vertically aligned, and adds some variety.

The last property is the number of layers. This I added in later when I had fun clicking multiple times in the same place and decided to just implement it in the code. Here I also limited the number to between 2 and 7, as more than 7 often ended up looking circular/crowded, and less than 2 usually just looked plain.

Credits

This project was created based on the Sound Interactive tutorial by Ari Melenciano (@AriCiano) and it remixes never by Everest Pipkin (@everestpipkin), licensed under MIT License 2018.