Project #2 Form Generator

Description

This project was about generate a form that can change size and color without changing it's original form. I wanted to create different circles that stay in one axis while increasing or reducing its size according to the movement of the mouse. Additionally, the color of the background changes depending on the position of the mouse. Additionally, the colors of the ellipses change by clicking on the canvas.

Design Process

I started creating two paper sketch, this helped me to identify the shapes that I need to use, as well as to consider the different ways to organize and write my code. I made this drawing on p5js. I created 4 variables that I used for the transformation and control of speed for the ellipses. Since the ellipses responded to the movement of the mouse, the value of two of my variables were mouseX and mouseY. Addionally, I created variables for the color of the ellipses, and I use "map" for one of the colors. To change the size, I used a conditional, as well as I worked with radious. I played a little with the different types of color of the background, as well as a the speed. At the end, the result was better than I thought.

Reflection

I like coding in p5.js but I would like to be more precise with the values, especially those that are set for mouseX and mouseY. There is still a surprise factor that I would like to be more in control, and I wonder if there are other ways to recreate the same design. Overall I feel my design skills felt a little limited in terms of creating shappings.