Dawn and I partnered up to create a spiraling array of boxes with adjustable parameters. The box width, transparency, frame rate, and background color are the elements with values that exist within a range, controlled by a series of sliders.
As a starting point, we looked through Kelly De Naples' sketches, which could be found here: https://editor.p5js.org/denaplesk2/sketches. We came across one in particular titled: Exercise 4: Functions_Circles, which could be found here: https://editor.p5js.org/denaplesk2/sketches/ryIwGqZsf.
To understand her algorithmic design, we explored each line of code step by step. We wanted to break down her exercise into digestable, individually controlled elements. We changed a whole slew of parameters, and turned her pattern grid of jostling circles into a 3D environment of cubes.
At first, we were confused why the boxes appeared stacked on top of another, especially when there were two for loops to create both rows and columns of the boxes. We quickly realized that within WEBGL, a push / pop / translate were required to ensure that each box would shift as the variable x and y increased within the for loop.
Another point of confusion was why the boxes were being drawn in the center of the canvas we defined. It is a result of the default camera angle. We had tried changing the values of different parameters, but instead we used the top portion to create our User Interface for adjustable sliders. I think for a future iteration, it would be interesting to create an additional slider that controls camera angles.
