Category: S2025 – Mang

Casey Reas’ talk on randomness in generative artworks provided an intriguing insight into the concept of randomness not as a frightful enemy but rather as a tool to employ and utilize. As humans, we instrinsically cower away from randomness. It disrupts routines and takes away from order. It is chaotic. However, Reas advocated for randomness as an array of endless possibilities in his talk. In his eyes, it should be seen as a foundation to build upon, rather than an afterthought. He gives examples of his earlier works, where he strayed away from the chaotic nature of randomness, sticking to defined shapes and positions. However, his philosophy shifted overtime to incorporate it, albeit with rules and restrictions to give it direction. This thought process piqued my curiousity, as at what point do those constraints simply become too much, and prevent random chance from truly acting?

Personally, I found this talk thoughtprovoking, and it encouraged me to also incorporate randomness within my assignment. Reas emphasizes that randomness simulates the unpredictable nature of real life, rather than everything being carefully placed and artificial. As such, seeing as my inspiration was natural beauty, I decided to incorporate random positions within my project, as an ode to what Reas described. I did end up setting boundaries for the randomness to stray within my project, as I felt some control was necessary for aesthetic purposes, though I am interested as to what it may have looked like had I not set these restrictions.

What I found interesting about the talk is that it shows a compelling exploration of the intersection between order and chaos in art. The idea that the role of an artist is to maintain order in the face of nature’s chaos resonates with my own experiences in creative work. I have often found that the introduction of random elements can lead to unexpected and exciting results, as in the example of Reas’ tissue work, inspired by Valentino Braitenberg’s hypothetical vehicles. This approach of using biological references and physical properties as a basis for artistic exploration challenges me to reconsider my creative process. How could I incorporate more natural and chaotic elements into my work without losing a sense of artistic control?

Moreover, the concept of using randomness as a starting point, for example in John Cage’s chance-based compositions, raises questions about the nature of creativity itself. I wonder about the ethical implications of using AI-generated randomness in art: does this introduce a new form of bias or remove human intuition from the equation? Also, the observation that patterns trigger the imagination makes me reflect on how we perceive and interpret randomness. Perhaps what we see as random is simply a pattern we have not yet recognized. This talk made me want to experiment with new approaches that balance control and unpredictability in my work.

In this project, I created a flower using functions, loops, and trigonometry to achieve a visually appealing result. I researched how to use trigonometric functions (cos and sin) using Perplexity to calculate the positions of the petals, ensuring they were evenly spaced around the center. The drawFlower function generates a layered petal effect with a color gradient,  and drawGrass adds randomness for a more natural look.

The most challenging part of the code was implementing the gradient petal effect.

// Draw the petals with a gradient effect
for (let i = 0; i < 3; i++) { // Three layers for depth
fill(255 - i * 40, 0, 0); // Darker red inner petals
stroke(0);
for (let angle = 0; angle < TWO_PI; angle += PI / 4) { // 8 petals
let petalX = x + cos(angle) * (size - i * 8);
let petalY = y + sin(angle) * (size - i * 8);
ellipse(petalX, petalY, size, size * 1.2);
}
}


This loop places 8 petals in a circular pattern around the flower’s center.

• TWO_PI represents a full circle (360 degrees), and PI / 4 (45 degrees) is the step between each petal, so 8 petals are drawn (because TWO_PI / PI/4 = 8).

I had to carefully adjust the loop logic to reduce petal size in each layer while darkening the color for a realistic depth effect. Additionally, balancing the size, spacing, and positioning of the petals required multiple adjustments to avoid overlapping or misalignment. Another challenge was creating a natural-looking stem and leaves, ensuring they were well-proportioned with the flower.

Concept:
I initially created the grid while experimenting with using for-loops in p5.js, and added in a single rect that could be controlled via the arrow keys. The whole thing was vaguely inspired by the genre of snake games, but I later came to think of it more as a canvas that the user would draw on at runtime once I reminded myself that the assignment was meant to be an art piece. I also wanted to see how the random() function could be applied to art, and ended up using it in a few places.

Highlight:

// // Traversed cells
for (let c = 0; c < filled.length; c++) {
  fill(filled[c].colour);
  rect(filled[c].x, filled[c].y, gridSize, gridSize);
}

// // Class for retaining pos/colour info of traversed cells
class filledCell {
  constructor(x, y, colour) {
    this.x = x;
    this.y = y;
    this.colour = colour;
  }
}
// // Add a new cell instance to the relevant array
function addCell(oldX, oldY) {
  let newC = new filledCell(oldX, oldY, mainColour);
  filled.push(newC);
}

Embed:

• Arrow keys = move
• Spacebar = move to random cell
• Click = change colour
• r = clear canvas
• R = randomize canvas

Reflection:
Overall, I’m a lot more satisfied with this piece than the self-portrait. I made sure to approach things more systematically, and achieved my goals of using variables more effectively and leaving comments in my code. One thing I would still like to improve on is ordering and grouping things together, since even though I had distinct sections (e.g. Globals, Interaction, Helpers) my code still ended up being rather messy. The section for helper functions was particularly bad, since I just threw things in there as I came up with them.

Another thing I both struggled and succeeded in was creating functions. There were a number of points where I saw an opportunity to move code from the main body into distinct functions, which was an improvement from last week, but I also had to stop myself from going overboard and creating more functions when I could just leave a few lines in the body to do the same thing. Lastly, while my work was more structured this time around, I still did not plan things out as thoroughly as I would like to. Most of what I wrote was done spontaneously, which resulted in plenty of backtracking to properly implement the new functionality in my existing code.

Reflection

For this assignment, I created a checkers board using loops and conditionals in p5.js. The program generates an 8×8 grid with alternating black and white squares, and places red and blue checkers pieces on the appropriate black squares using conditionals. The checkers pieces are drawn as circles and are positioned in the top three (red) and bottom three (blue) rows. One of the most interesting parts of the code is how (i + j) % 2 !== 0 ensures that pieces only appear on black squares, while additional conditionals determine their placement. In the future, I could improve this by adding interactivity to allow piece movement, highlighting valid moves, implementing kinged pieces with visual markers, and enabling player turns to make it a fully playable checkers game.

Code

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(30);
  let cols = 8;
  let rows = 8;
  let squareSize = width / cols;

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * squareSize;
      let y = j * squareSize;

      // Alternating black and white squares
      if ((i + j) % 2 === 0) {
        fill(240); 
      } else {
        fill(20); 
      }

      rect(x, y, squareSize, squareSize);

      // Placing checkers pieces only on black squares in the right rows
      if ((i + j) % 2 !== 0) {
        if (j < 3) {
          fill(200, 50, 50); 
          ellipse(x + squareSize / 2, y + squareSize / 2, squareSize * 0.8);
        } else if (j > 4) {
          fill(50, 50, 200); 
          ellipse(x + squareSize / 2, y + squareSize / 2, squareSize * 0.8);
        }
      }
    }
  }
}

 

One of my favorite parts of Casey Reas’ Eyeo Talk was his emphasis on how randomness should be embraced and has been embraced when creating art. He gives examples like John Cage’s experimental music compositions, where random elements influenced the outcome, and Jackson Pollock’s drip paintings, which embraced chance as a key element in the artistic process. But, he also provides examples from his own work in graphic art using generative systems and computer algorithms. I feel as if many people stray away from randomness out of fear that the chance exists of a random element ruining what they hope to achieve, but Reas welcomes that chance in his art, showcasing to others that randomness can create unexpected but fascinating art that is worth appreciating. He even states that with computer generative systems, you can create bounds or limits such as how big or small to make something in order to control some of the randomness in your art, creating endless possibilities for future computer generated art that have a guide on what to do but still have unexpected elements to them.

I was inspired personally by this talk and really tried to incorporate randomness into the assignment for this week, but with some bounds to get the desired effect I wanted for my project. I created lists with a set of elements that would be acceptable to use such as a set of colors or a set of numbers and then used the random function to have the program pick a random element from that list. This way, all my lines looked different due to the random line sizes and they were varied in color due to the random colors picked. I doubt I’ll ever be able to fully give in to total randomness as I do want some sense of control over what is created, but I am open to trying it to see what could be created since the possibilities are endless.

For this assignment, I was inspired by an artwork in the Computer Graphics and Art May 1976 magazine titled “The Cubic Limit Series” by Manfred Mohr shown below:

I wanted to create a grid like it along with similar looking shapes, but instead have the shapes/doodles be randomized and made from sharp lines that rotate in different colors within each square. The result of that looked like this:

Overall, I think the assignment did end up aligning with the vision I had in my head. When I initially made the grid, I was having trouble getting the background to be black as it seemed like the background was somehow being overwritten. It took me a bit, but I eventually I figured out that the squares in the grid had an automatically applied color fill which was displaying over the background. I also had trouble with getting each doodle to be in the center of each square before I realized I had to use translate to change its origin. I did have to create a separate function to create the doodle in each square, and while it seems complicated, it just involved picking a random number from a list I had defined in an earlier variable. I am proud of getting the result to be similar to the inspiration from the image I had in mind, and the snippet of that code can be seen below:

// Function to draw a random doodle in each square
function drawSquiggle() {
  strokeWeight(1.25)
  stroke(random(colors))
  line(random(neg_numbers), random(neg_numbers), random(numbers), random(neg_numbers)); 
  line(random(numbers), random(neg_numbers), random(numbers), random(numbers));  
  line(random(numbers), random(numbers), random(neg_numbers), random(numbers));
}

In the future, I want to see if I can make the rotation be smooth as well. Even though this kind of choppy look was intentional to seem more robotic, I feel a different shape rotating smoothly inside of the grid would also look cool. I also want to get better at navigating transformations of shapes for the best placement.

 

Within Casey Raes’ talk on chance of operations, I find that it provided an intriguing perspective on the relationship between order and chaos when creating pieces of work. His idea that artists keep things in order within a chaotic world resonates with me, especially after creating my loop assignment in p5.js.  This is because by setting boundaries (the grid) while allowing for unexpected outcomes (the random colors), I was able to maintain a balance between order and chaos.  I find it interesting when he mentions “controlled randomness,” since it shows me that he believes that when randomness is controlled, it can be used to generating beautiful pieces of art.

As he discussed World War I art pieces, I was intrigued as I never knew there were connections between the artwork that represents the artist’s history and current history. As someone who is currently learning World War I for the first time, this has gave me a gist to what these artworks mean, and it is about symbolism and the historical context. After watching the video, I am excited to be a bit more “chaotic” with the pieces along with keeping things in order, just like my loop experiment on p5.js.

 

Concept

For the second assignment, I will present a  series of squares that show contrast between a structure  black and white gradient and vibrant colors. When pressing the “Enter” key, the orderly monochrome arrangement becomes a more random, colorful display. At the time, I aimed to explore how colors can change randomly and how it can change a perception of an artwork

Code Highlight

One snippet i am proud of is this one:

//Loop pattern
 for (var i = 0; i < 20; i++){ // Loop through 20 columns
   for (var j = 0; j < 20; j++){ // Loop through 20 rows
     //Position and Size of the square
     var x = i * 50 + 25
     var y = j * 50 + 25
     var d = 25

This is because I was working on repeating the same code of using Variables of x, y, and d except changing the values, then I later found out, through a p5.js  tutorial by The Code Train on “Arrays and Loops” that there can be another loop to incorporate instead of copying the same lines of code over and over for rows to better calculate the positions and dimensions for each square in the grid.

Embedded Sketch

Reflections

Initially, I wanted the squares to rotate or spin upon pressing “Enter” using the rotate() and rotateX() functions, but there are challenges in structuring the lines of code, since at some point there are mistakes that disrupted my entire layout, leading me to use an alternative to incorporate randomly generated colors within the cubes.

I also referenced snippets from my past p5.js experiments, like using this from my last experiment with p5.js:

function keyPressed() {
if (keyCode === ENTER)
// Clicking between two assets :)
showGif = !showGif;
}

However, I modified it to change colors instead of changing gifs.

Overall, this was a really insightful experience and I plan on revisiting more concepts on loop functions along with rotating functions to help understand more as I experiment more with p5.js.

For this week’s reading reflection for Casey Reas’ lecture about chance operations, I have considered how randomness can be utilized in my work. In my current work in VR, I have seen that randomness could introduce an added level of immersive experience in my work. For example, having unpredictable environment shifts and interactions could generate a sensation of uncertainty, amplify the level of engagement for the user, and make them even more engaged in the experience. Nevertheless, a delicate balancing act must take place between randomness and control, for excessive randomness could disorient, and a lack of randomness could make the experience too rigid and lifeless. In my work, I’d like to experiment with randomness in bounded structures—generating a level of surprise but not compromising purpose and clarity of the experience.

The lecture challenged my thinking about randomness in my work. As I have liked having a level of control over my work, having calculated unpredictability in my work opens doors for new avenues for investigation and inquiry. It’s posed questions for me about an excessive level of randomness and whether an ideal sweet spot can stimulate and maintain a level of creativity and an involved level of user experience. Can excessive randomness destroy the narrative and emotional impact of a VR experience, or can it generate new dimensions of meaning? I’m interested in exploring these questions in my continued development of my work.