This generative art piece draws its design from the interplay of geometry and motion. This week my main goal was to incorporate depth into my sketch, something I had never done before.
In the setup() function, I created a WebGL canvas. I also established an orthographic projection, so objects don’t appear smaller when they move away from the viewer.
The core of this artwork lies in the nested loops that traverse the canvas in both the X and Z dimensions (representing a 2D grid). Inside these loops, each iteration represents the creation of a box structure.
The height of each box (h) is determined by mapping the sine of the X-axis rotation angle. This mapping ensures that the boxes smoothly transition between different heights, adding to the calming effect. The stroke color (s) is derived from the sine of the Y-axis rotation angle, which results in a gentle shift in color shades across the artwork. Using the push() and pop() functions, we save and restore the transformation matrix to isolate the properties of each box.
Lastly, the angleX and angle Y values are incremented to create a continuous, slow rotation, producing a meditative motion within the artwork.
Code snipper
let h = floor(map(sin(aX), -1, 1, 50, 300)); // Map sine of X-angle to box height let s = map(sin(aY), -1, 1, 100, 255); // Map sine of Y-angle to stroke color
Here, sin(aX )and sin(aY) are used to create a smooth oscillation as the boxes rotate. By mapping these values, I ensure that the height and color transitions remain serene. The mapping function allows to control the range of these transitions, resulting in varying box heights (h) and stroke colors (s) that contribute to the overall atmosphere of the artwork.
Challenges
I tried to incorporate more complex, unpredictable rotations that were user interactive, but I did not have enough time to flesh out the idea. Nevertheless, I am happy with the final sketch. I hope to make improvements in the future.