The bigger challenge for this week’s project was to be able to organize the code in a Class and Method based structure. I decided to first start with some very basic element. I started with an ellipse and I was able to implement the class in the same class that we did it at school however I realized the shape was not what I wanted to use in order to generate some interesting concept for this week. Therefore I decided to start experimenting with lines.
The first step was to create a line that was going to be mirrored across 4 different axis in the canvas, I found a base code online however it was used to draw lines by segments and it was done for processing, therefore I used the logic of the repetition in order to integrate it to my project.
I came up with a basic 4 line design and I changed the position of the background (to the front but with opacity) in order to generate a “blur” sensation whenever the lines are moving (according to the cursor position).
Version 1 lines mirror
The next step was to use the Class structure that I previously created in order to generate 3 more lines with different position and size, and I also started experimenting with colors in order to make it more engaging for the user.
Version 2 lines mirror
I decided to include a recursion in the back of the program, in this occasion I did use the ellipse that is called within itself in order to repeat it every 30 pixels. The ellipse in the background is being mapped according to the position of the mouse in the “X” coordinate, whenever the mouse moves to the right the ellipse gets bigger. I am also using the same mapping of the mouseX position in order to change the colors of the lines.
Final Design lines mirror
The final result is an interactive draw that replicates the movements of the mouse in 4 different quadrants of the canvas, generating interesting shapes as the user moves the mouse.