Form Generator

Description

Click your mouse to get an eye! Click and move your mouse to change the size and color of the eye.

Design Process

I started by drawing random shapes on the template and decided to draw an eye for this project. Then I drew up the drafts in the maximum and minimum scale to get a general concept of how the eye would vary in p5js. According to the draft, the eye consisted of one ellipse as the rim and several circles as the eyeball including a small light spot. I also chose rectangles with rounded corners as the eyelashes. For the colors, I used pure white for eyelashes and kept the white part of the eye to make it stand out in the blue background. The color of the inner circles varies when people move their mouse. The background color works in the same way but the variation only happens in the range of blue.

Reflection

I struggled a lot about how to vary a group of shapes in the same scale. Specifically, when I set “random” to change the size of the ellipse, I wanted the whole form to change in the same scale as an entirety. But it turned out that the shapes varied in different scale when I created several variables. Later I found that I could create a coefficient as the only variable and multiply it with the widths and heights. In this way, when the coefficient varies randomly, the shapes will vary in the same scale as the coefficient is the only variable. One thing I have learned from this project is trying to understand the principles behind the work or the design is really important than simply coming up with a bunch of ideas.