This project was inspired by the grid-like patterns formed by concrete tiles around campus, which sometimes appeared curved when seen from a particular angle.
This resemblance to gentle ocean waves led me to delve into generative art. A search for “moving loop art” introduced me to Perlin noise flow fields, which were a significant source of inspiration for this creative endeavor. Combining these elements resulted in the generative art piece I created.
To start, I created a grid of squares using a simple for-loop. My aim was to make this static grid interactive, giving it the appearance of waves when the mouse cursor passed over it. Achieving this effect was both captivating and challenging. To mimic the motion of waves, I used trigonometric functions like sine and cosine. This part of the code was particularly interesting because it required me to use insights from sine and cosine graphs to estimate how each square should move.
The starting position of the circular motion of the squares would change direction depending on the mouse’s position, either clockwise or counterclockwise. The combination of Perlin noise-inspired flow fields and trigonometric functions brought the concept to life. It created the illusion of waves moving through the grid of squares as the mouse moved. The interaction between sine and cosine functions, along with Perlin noise-inspired angles, resulted in a visually captivating effect, making it seem as if the squares were moving together in a harmonious wave-like dance.
An essential part of achieving this, was a piece of code I referred to here. It provided helpful guidance for developing this project. The highlight of my code then follows below:
//starting position based on mouse position const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true); const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true); //varying square positions const angle = xAngle * (x / width) + yAngle * (y / height); //circular motion for each particle const X = x + 10 * cos(2 * PI * t + angle); const Y = y + 60 * sin(2 * PI * t + angle); square(X,Y,50);
Here’s an embedded sketch of my work:
The color of the squares was another dynamic aspect of the artwork. It changed in real-time based on the mouse cursor’s position, creating a colorful and interactive visual experience. This dynamic color variation added depth and engagement to the piece.
Reflecting on this artwork, it’s a variation of what I initially had in mind. Although I didn’t have precise expectations, I had a general concept. In future iterations, I plan to explore individual squares with different colors, creating a generative storytelling narrative. Perhaps the art could start with a single square and gradually build into a full canvas, conveying a visual story. Regardless of the directions I may explore in the future, I take pride in what I’ve accomplished with this piece. It fuels my excitement to continue learning and applying my newfound skills to real-life works of art.