p5.js: Repetition

This week, I wanted to continue my explorations within the 3D realm and create an array of cubes that would rotate when the mouse is moved. Here is the link to the sketch.

Prior to starting my sketch, I sought out inspiration from the book Generative Design and navigated through the examples of movement within a grid format. I came across this example and saw how they used multiple .SVG files as options of what populated the grid. At first, I attempted to add my own .SVG file and see how I could manipulate it there, but I could not figure out why my image would not load, even when uploaded into the correct file structure. Regardless, I knew I did not want to stick within the confines of a 2D image and explored repetition with the 3D box shape.


Just as I did in the last assignment, I had difficulty understanding how the camera() exactly works, and thought it might be helpful to replace the parameters with mouseX. Here is a video of how the sketch changes when each parameter is changed to mouseX.


I was confused why it seemed like the final cube at the lower right near the center point looked as if it were getting sucked into a vortex. I thought this was merely due to the camera angle, hence the camera() exploration, but I did not find a direct way to push this array “against a wall” or along the same depth plane.

I then started to add control to the way the Z axis translated across the sketch. I ended up creating this gradual sloped look as if the stack of cubes had legs that were starting to give out.

I also included the functionality to increase the amount of tiled cubes there would be by pressing the up arrow.

After this study, I am looking forward to using orbitControl() and perspective() to put that on my tool belt for 3D space exploration.

Here is a playlist that demonstrates the meandering road I followed.