Author: Sumeed

Patterns have always captivated me. From the fractals in the Mandelbrot set to the Gallifreyan language in Doctor Who, they evoke a sense of wonder. Yet, as mesmerizing as these patterns are, they often stem from predictable rules. Casey Reas’ work, however, introduces a twist: his patterns emerge from chaos and randomness. This unpredictability is what sets his art apart—it’s not just about following rules but about embracing the unexpected. Reas’ exploration of emergence– the phenomenon where individual elements combine to create something entirely new- resonates deeply with me. It reminds me of Craig Reynolds’ Boids algorithm or Conway’s Game of Life, where simple rules lead to complex behaviors. Reas takes this concept further by marrying randomness with intention, creating art that evolves organically. His work feels like a precursor to today’s AI-driven generative tools, which similarly harness randomness to produce stunning results.

One aspect of Reas’ process that intrigues me is his use of “planned randomness.” By defining simple rules like “move in a straight line” or “deviate from direction,” he creates intricate abstract pieces that feel alive. It’s a method I’m tempted to replicate in my own work- building arbitrary rules like LEGO blocks and letting them unfold into something unexpected. But this raises an interesting question: is it truly random if there are rules? Even with pseudo-random number generators, outcomes can be replicated if the same seed is used. What would pure randomness look like in art? Could we create rule-free generative systems where even the rules themselves are randomly determined? The thought of such an experiment excites me- it could push the boundaries of what we consider “random” and challenge our understanding of originality.

Reas’ work also makes me reflect on a topic I care deeply about: AI art. As an avid artist, I sometimes worry about how far AI has come in replicating creativity. When randomness plays such a significant role in art, it blurs the line between human and machine-made creations. If an artwork relies heavily on chance, does that make it less human? Or does the artist’s intention still shine through? Personally, I believe there’s value in balancing control and randomness. While randomness can add an element of surprise, too much of it risks losing the personal touch that makes art meaningful. In my own projects, I prefer to use randomness sparingly- for example, in selecting colors or text- while maintaining overall control. This balance keeps my work grounded in human expression.

Casey Reas’ work has deepened my understanding of the interplay between chaos and order in art, prompting me to reconsider traditional creative boundaries and explore the fusion of technology and human expression. Inspired by his ability to reveal patterns within randomness, I aim to incorporate both structure and spontaneity into my future projects, setting objectives while remaining open to new discoveries. My goal is to find a balance between control and chaos, mirroring Reas’ skillful approach to art.

This is my for-loop art piece: taking part of my love for geometric art and combining it with the coding techniques we were taught in class. I chose to be more abstract because my last piece was very portrait-like/ realistic and I wanted to experiment.

Assignment Brief

• Use for() loops or while () loops
• Use past learned coding techniques
•  Make a simple work of art, inspired by old computer art magazines

Conceptualisation

The goal was to create dynamic geometric art, featuring rotating shapes that interact visually. The core concept revolved around three elements:

• Rotating circles to create orbital motion
• A radial pattern of triangles spinning collectively
• A rotating grid of rectangles to add depth and complexity

The vision was to layer these elements while maintaining visual harmony. Early iterations included a spiral, but it was later removed to reduce clutter. The final design focused on symmetry, contrasting colors, and opposing rotational directions to create a hypnotic effect.

Process

I initialised the canvas, centered the coordinate system to the centre of the page, and set the angle mode to degrees for rotation control. I then created an off-axis rotating circle, positioned away from the centre. I used a for loop to distribute 10 triangles radially. Each triangle’s rotation used a fixed offset for simultaneous orbiting.

Next, I added a second circle rotating counterclockwise to create visual tension. I then implemented nested for loops to place rectangles in a grid. Each rectangle rotated with an angle for a shimmering backdrop. I used a translucent background to make a continuous motion trails.

I was the most proud of how I was able to make the grid of squares rotate and spin around. It took a lot of iteration but I was glad that I finally figured out how to make it rotate, and leave a trace.

// Additional Element: Rotating Grid of Rectangles 
  push();
    rotate(angle * 0.2);
    for (let x = -width / 2; x < width / 2; x += 80) 
    {
      for (let y = -height / 2; y < height / 2; y += 80) 
      {
        push();
          translate(x, y);
          rotate(angle);
          fill(255, 255, 0, 100);
          noStroke();
          rect(0, 0, 40, 40);
        pop();
      }
    }
  pop();

Challenges

One significant challenge stemmed from managing coordinate transformations. Early versions of the code caused shapes to orbit erratically or appear static because rotations and translations were applied in the wrong order or without proper isolation. For instance, the triangles initially refused to spin because an outer rotate(-angle) transformation, intended to create a dynamic counter-rotation, inadvertently canceled out the individual rotations applied inside the loop.

Another challenge involved implementing opposing rotations for the two circles. Initially, both circles spun in the same direction, which diluted the intended visual contrast. Fixing this required applying rotate(-angle) to the second circle, but this also inverted its positional translation. By maintaining consistent translation distances (90 pixels) for both circles while inverting only the rotation, the symmetrical yet opposing motion was achieved.

Potential Improvements

We could enhance the artwork’s interactivity and visual appeal in several ways. Adding user-controlled parameters, like sliders to adjust rotation speeds or grid density, would allow viewers to interact with the piece directly. This could make the experience more engaging and personalized. Color dynamics present another exciting avenue for exploration. We might implement gradual transitions between different color schemes or incorporate noise-based gradients, creating more organic and fluid color shifts throughout the animation. These changes could significantly alter the mood and feel of the artwork.

For a more dramatic upgrade, we could venture into 3D space using p5.js’s WEBGL mode. This would add a new dimension to our geometric shapes, enabling them to orbit in layered planes or respond to perspective changes. It would transform the flat, 2D experience into a more immersive, depth-filled visual journey.

</>Source Code

GitHub Link: https://github.com/theSumeed/Assignment-2-For-Art/tree/main