Processing Hack w/ Mouse2D

For this assignment, I decided to investigate the 'Mouse2D" example, which takes cursor position as an input to manipulate the size/position of two rectangles and create a three-dimensional illusion.  In my updated version, I experiment with the color, shape, number, and trajectory of the inputs, adding a third revolving element to create a spherical illusion and peppering the canvas with lil dancing shapes to make it a party.

Original Mouse2D program:

My updated version:

I began with manipulating the color, transparency, and shape type, changing the background to white and making the two original squares into colorful circles. This involved simple adjustments to the values and commands of the draw() method, adding nothing new. I then added a third circle to revolve longitudinally and add an additional layer of depth to the three-dimensional illusion. This was a bit more complex, as it involved understanding the mathematically logics of the position and size values for the circles, and then being able to replicate it with my desired parameters, as per the cursor position inputs. In the code above, the third ellipse() (last line) is the new ellipse I created. Because I knew I wanted my new ellipse to move vertically, as opposed to horizontally like the first two elements, I knew I needed to keep the x-position at a static value. To anchor it to the horizontal center, I adjusted the x-position to half the width. For the y-position, I decided to experiment with how different inputs effected the path of the ellipse, and decided on using the inverseX variable to create an interesting relationship between the y and x axis in which the horizontal movement of the cursor creates the vertical movement of the shape. Then, to add the accompanying "dancing" shapes, a created a 60-frame timer using the counter variable and alternated the orientation of the shapes every 30 frames. I began with initializing my counter variable to 0 the beginning of the programming so it was universal and could increment with each loop of the program. I then created a series of if-statements to create the timer, where the first set of shapes would appear in the first 30 frames (if counter < 30), and the second set of shapes appear with slightly altered coordinates in the second 30 frames (if counter >= 30). After each frame change, the counter is incremented by 1 (counter = counter + 1), and if the counter reaches 60, it resets back to 0 to start the clock over (if counter = 60, then counter = 0).  While I was able to get the resulting effect I wanted, I'm certain there are much cleaner, less redundant ways of producing this, namely using the rotate() command so there's no need to create a duplicate set of shapes and calculate the correct coordinates manually. However, I ran into difficulty in getting the rotate() command to rotate in place, around the center of each object, versus around the origin point of the canvas (0,0). I tried using the translate() command to adjust that point appropriately, but ran into a various bugs that made it look super wonky, which I am still trying to fix. Looking ahead, there are two things I'd like to work on. First, it would be interesting to tie the rotation of the "dancing" peripheral shapes to cursor position/movement as well, so that everything seems to work in a gear-like, unified fashion. Secondly, I'd like to experiment more with the different relationships between the cursor position and the three-dimensional revolving effect, perhaps adding diagonal revolutions to the mix, as opposed to just horizontal and vertical.