For this assignment we were encouraged to work in teams (I worked with KC Conchinha) in order to make progress faster and be able to identify mistakes faster. The experience of working as a team was very different than the past assignments. I was writing the code while KC was giving me instructions and vice versa. We started by creating a slider from scratch.
Team work for p5.js
Then we decided to generate a square grid using a nested “For” loop. We realized that p5.js was very slow and it even crashed several times, however at the end we were able to generate the grid and start thinking about the interaction that we wanted to incorporate to the slider in order to complete the 3rd part of the homework.
First grid generated while working in a team.
After we completed the basic grid we mapped the background color in order to change from black to white when the slider was moving to the right side of the screen. We also mapped the stroke color (the opposite way than the background) so that they are always going to be visible. In this point we decided to separate ourselves and continue working separately on the visual style that each of us wanted to follow.
Trying to rotate the squares individually.
From my side, I started some experimentation and I wanted to rotate the rectangles that I had created in the canvas, however since they were generated inside a loop I faced some challenges because I might need to create an array in order to address each rectangle separately, therefore I decided to continue without rotation and focus on an interesting visualization of elements when the slider is moving.
Final result, slider to the left
The final result is a grid with circles and rectangles generated alternatively, the size and color of the elements is changing according to the location of the circle from the slider. It is a simple representation of the positive vs negative space in the canvas.
