For this assignment, our task was to create a simple artwork using for loops and our knowledge from previous classes.
Initially I filled the canvas with a grid of rectangles and circles in a static manner. To make this pattern, I used a double for loop to draw the shapes over the y-axis and then the x-axis.
Then to increase interactivity, I changed the width of the squares and the circles to change dynamically based on the position of my mouse. To do this. I used the dist function to compute the distance from the position of the mouse. I had to spend a lot of time on how should the function be linked to the shapes. I realized the solution was actually much simpler that what I was trying to do initially.
My solution in the start was only plain white shapes so the most challenging part of the pattern was adding color. I had to do a lot of research and trial and error to understand how could I change the color of where I am hovering on the canvas. For this purpose, I eventually reached at the solution of using a map function within the fill function to change the color of where I am hovering only.
I further wanted the canvas to change color continuously on its own as well alongside the hover, for which I added the hue variable after setting the colorMode from RGB to HSB. Integrating this feature, was a challenge to achieve because I was not working with the ‘mod %’ function in the start so kept running into errors.
Below is the canvas for my artwork:
Reflections:
The assignment was an exciting one to work with. I really wanted to work with interactivity and in particular the draw function after my assignment 1. I got to work very creatively to create this piece using different functions within the draw function which allowed me to add dynamically changing shapes and colors. As I had never before used some of these functions, most of my time was spent on understanding their use correctly and debugging them. In the future, I think it would be interesting to try changing the number of shapes on the screen dynamically as well.