Category: Spring 2024 – Aaron (Section 001)

This is my Object Orientated Programming art piece: taking part of my love for flowers, and combining it with the coding techniques we were taught in class. Unfortunately, I was not present in class (I was sick) so I had to use a lot of self-learning.

📋Assignment Brief

• Create a generative artwork using arrays and objects
• Reference any examples or inspiration
• Use excellent names for variables and functions

💭Conceptualisation

The idea for this project stemmed from a desire to create a generative artwork that mimics the organic beauty of nature, specifically flowers. Flowers are inherently dynamic, with their delicate petals, vibrant colors, and radial symmetry, making them an ideal subject for generative art. I wanted to design a system where flowers could grow and bloom over time, creating a tranquil and visually engaging experience. Additionally, I aimed to make the artwork interactive, allowing users to “plant” flowers by clicking on the canvas. This interaction would give viewers a sense of agency and creativity, as they could influence the composition of the artwork. The overarching goal was to combine randomness (to mimic nature’s unpredictability) with structure (to ensure visual harmony), resulting in an evolving digital garden.

💻Process

The coding process began with defining the basic structure of a flower using Object-Oriented Programming (OOP). I started by creating a Flower class that encapsulated the properties and behaviors of a flower. Each flower had attributes like position (x,y), size, petal count, colors, and growth rate. The display() method used trigonometry to arrange petals in a circular pattern around the flower’s center, while the grow() method allowed the flower to increase in size over time.

Once I had the basic functionality of individual flowers working, I moved on to creating an array of flowers that could be updated and displayed in each frame. This allowed me to simulate a garden where multiple flowers grew simultaneously. To add dynamism, I introduced randomness in attributes like petal count, colors, and growth rate, ensuring that each flower was unique.

After achieving this foundational setup, I wanted to make the artwork interactive. This led me to implement the mousePressed() function, which generates a burst of new flowers around the mouse position whenever the user clicks on the canvas. To enhance visual variety, I added random rotation angles for each flower and adjusted their initial size to make their growth more noticeable.

function mousePressed() {
  // Create a burst of flowers around the mouse position
  for (let i = 0; i < 10; i++) {
    let angle = random(TWO_PI);
    let distance = random(50, 150);
    let x = mouseX + cos(angle) * distance;
    let y = mouseY + sin(angle) * distance;
    flowers.push(new Flower(x, y));
  }
}

 

The final step was fine-tuning. I experimented with different ranges for attributes like maximum size and growth rate to strike a balance between realism and aesthetics. I also adjusted the background color to create contrast and ensure that the vibrant flowers stood out.

🚩Challenges

One of the main challenges was achieving visual harmony while maintaining randomness. Nature is unpredictable but still follows certain patterns that make it visually pleasing. Translating this into code required careful tuning of parameters like petal count, size ranges, and color palettes. Too much randomness made the artwork chaotic, while too little made it monotonous.

Another challenge was managing performance as more flowers were added to the canvas over time. Since each flower is drawn using trigonometric calculations for its petals, having too many flowers on screen could slow down rendering. To address this, I limited the growth rate and size of flowers so they wouldn’t overwhelm the canvas.

Lastly, implementing interactivity posed its own set of challenges. Ensuring that new flowers appeared in an organic burst around the mouse position required calculating random angles and distances while keeping them within bounds. It also involved balancing user-triggered interactions with the generative behavior already present in the code.

📶Potential Improvements

While the current version achieves its goal of creating an interactive generative artwork with a flowery theme, there are several areas for improvement:

• Animation Enhancements: Adding subtle animations like swaying petals or pulsating centers could make the flowers feel more alive.
• Audio Integration: Adding ambient sounds or musical notes triggered by interactions could enhance the sensory experience.
• Flower Decay: Introducing a lifecycle for flowers—where they bloom fully and then slowly fade away—could add another layer of realism and dynamism.

</>Source Code

https://github.com/theSumeed/Assignment-3/tree/main

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.

I would like to start by explaining my artistic intent. I was recently interest in nihilism. As a matter of fact, I always thought of concepts within nihilism, and this materialized into this concept recently when reading some literature by Nietzsche. Essentially, I aimed to demonstrate my emotions and my perception of objects through this form of artistic self-obliteration, dissolving into the surrounding environment. Therefore, in this sense one might argue that this artwork tells a story (as per the inevitable dissolution into the evironment).

 

How I did it:

 

I made the canvas 800 by 600, and I decided to make the background a specific color of glistening yellow that resonated with me when taking inspiration from Yayoi Kusama’s Polka dots artwork.

I used noStroke() to create the shapes with no solid outline, as I wanted to blend in the repetitive elements (geometric figures symbolic of the representation of objects and elements in our perception of space-time).

 

Then I drew a representation of abstract ‘pumpkins’ but they aren’t really pumpkins, that is not the emphasis on art here. These rows of abstract pumpkins were drawn using a for loop.

 

I am particularly proud of the rest of my code where I believe I truly achieved my artistic goals. In this loop I tried to manipulate space and make use of the remaining space in the canvas from the pumpkins as a precursor to including the geometric figures as a representation of objects in spacetime. To do this, I used some simple boolean (if conditional).

if (random(1) < 0.5) { 
       let detailSize = size / 4; // These shapes will be smaller than the main shape.
       fill(255, 150, 0, random(100, 200)); // Set a transparent orange color.

       push(); // "Remember" the position again.
       translate(x + random(-size / 2, size / 2), y + random(-size / 2, size / 2)); // Move to a random spot somewhere on or near the bigger shape.
       ellipse(0, 0, detailSize + random(-5, 5), detailSize + random(-5, 5)); // Draw a slightly irregular circle.
       pop(); // Go back to the original position.
     }

 

 

READING RESPONSE:

Upon taking inspiration from Casey Reas, I focused on utilizing space and randomness as a method of employing artistic intent. As I mentioned in my explanation of the artwork, the randomness at hand is the implementation of these abstract spherical objects (as if they’re pumpkins or some orange circle), which fill the canvas randomly. After this, the random geometric shapes fill in the canvas randomly, this is my take on what Casey Reas outlined in his demonstrations of art through physical computing. I tried to add to this discussion further by taking inspiration from Yayoi Kusama, where I attempted to merge her abstract and repetitive use of polka dots, drawing inspiration from her use of color in her canvases of art. In my take on answering what I felt about the tension between order and chaos, I believe that I was able to show in my art how I perceive this tension, where a more nihilistic view is implemented, showing the symbolic geometric objects dissolve and move downwards in a randomized but nearly controlled manner.

 

Another aspect highlighted by Reas (timestamp 13:59) is the precise and logical structuring of things by artists, I made a new take on this where I favored randomness and chaos over structure and organization of elements in my art.

 

When I was watching Casey Reas’ Eyeo’s talk on chance operations, I tried to bare in mind the question: “Where do you feel is the optimum balance between total randomness and complete control?”. Especially because I watched the talk after doing my artwork, I felt that the talk really aligned with the concepts that I envisioned for my assignment. For example, one example that he showed that left a lasting impression on me was Project Signals:

Basically, he explained that this artwork was a result of negative or positive communications that proteins sent within a cancer cell  — essentially a visualization of biology data. Without this context, I would have assumed that it was professional art from a painter or such because of how beautiful it looked. This realization in the assumptions that I made, made me realize that there’s art everywhere and that rather than computers replacing artists, they can serve more as a tool to help us create naturally occurring phenomena into art.

Referencing back to the initial question, I think there’s an important point to be made about the balance between how much randomness we incorporate into an artwork. More specifically, I think that it doesn’t actually matter if an artwork is created totally randomly or with complete control. I believe that the beauty in creating art lies in artist autonomy, even with the uses of computer technology. Of course, for this then we would have to engage in the conversation about AI ethics (e.g. How much of the artwork is truly by the artist), but I think that might be a conversation for another day. Ultimately, I believe that what matters is the intention behind the creation, whether an artist carefully designs every element or embraces randomness as a creative tool, both approaches are valid. In my opinion, the interplay between control and unpredictability can lead to unexpected beauty, and that, in itself, is an artistic choice.

At first, I wanted to do something that was static (e.g. putting everything in setup) since that was an option presented by the professor. However, the more I thought about incorporating randomness into my project, I thought that having some animation or movement would be the best way to do that. I still wanted to keep the artwork simple and focused on making use of a clear, structured pattern while allowing for unexpected variations.

I decided to create a looping animation that generates geometric designs at five key positions on the canvas: center, top-left, top-right, bottom-left, and bottom-right.

let positions = [
  [width / 2, height / 2], // cent
  [0, 0],                  // tl
  [width, 0],              // tr
  [0, height],             // bl
  [width, height]          // br
];

Each of these positions contains a series of concentric shapes that shift over time, creating a dynamic, evolving effect. The rotation is driven by angleOffset * j, which ensures that each circle is slightly different in position based on frameCount, adding to the sense of movement. The shapes themselves are defined using beginShape() and endShape(CLOSE), which connect the calculated points to form a jagged circular pattern.

let angleOffset = frameCount * 0.1;

for (let i = 0; i < positions.length; i++) {
  push();
  translate(positions[i][0], positions[i][1]);
  stroke(colors[i]); 

  for (let j = 0; j < numCircles; j++) {
    let radius = map(j, 0, numCircles, 20, maxRadius);

    beginShape();
    for (let angle = 0; angle < TWO_PI; angle += PI / 6) {
      let x = radius * cos(angle + angleOffset * j);
      let y = radius * sin(angle + angleOffset * j);
      vertex(x, y);
    }
    endShape(CLOSE);
  }

  pop();
}

I wanted to do a bit more and add an interactive element on top of the randomness. So, I added a function that shuffles the colors whenever you click on the canvas. This makes sure that while keeping the overall structure of the artwork the same, each interaction with the piece introduces a fresh, randomized arrangement of colors, keeping it visually engaging.

function mousePressed() {
  shuffle(colors, true);
}

This project helped me appreciate the balance between structure and randomness in p5.js/computational art. By keeping certain elements predictable (such as placement and form) while allowing colors and movement to shift dynamically, I was able to create an interactive piece that feels both intentional and surprising. Well…at least I hope! Check it out:

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

For my self portrait my intuition was to experiment with a style of art that is new to me. In this case I wanted to represent myself with a background of a dark star-lit sky. I always thought of the theory of existence, and as far as I know we are all representations of energy in the literal sense, with every form of life dependent on energy. Therefore, the distorted facial features are meant to blend into the background.

 

It is my first time using p5.js, and I am particularly proud of this line of code:

for (let i = 0; i < 200; i++) {
    fill(random(150, 255));
    ellipse(random(width), random(height), random(1, 4));
  }

It is a simple for loop that fills random parts of the background with stars, and I like seeing new representations of stars by repeatedly compiling the code. I tried to limit the use of functions and to instead use quadratic vectors to represent the rest of the elements of the portrait, which did bring about some difficulty. Looking forward, I will familiarize myself with the Quadratic Vector function, as well as other functions in p5.js .