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.

concept:

“My artwork is derived from early computer graphics, with its use of dynamically changing, concentric forms. I‘d prefer to utilize symmetry and repetition in an attempt to produce a hypnotic rhythmic effect, similar to early computer artwork.”

highlight of the codes:

I’m particularly enjoying the loop structure I designed for generating concentric shapes with iteratively altering colors and dimensions. That recursive algorithm generates a rich, multi-colored effect that looks complex but is achieved with relatively simple code.

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

function draw() {  
  background(0);  

  let x = width / 2;  
  let y = height / 2;  

  for (let i = 0; i < 10; i++) {  
    push();  
    translate(x, y);  
    rotate(frameCount * 0.01 + i * 0.1); // Rotate dynamically  
    stroke(0, 255, 255); // Cyan-colored square  
    rectMode(CENTER);  
    rect(0, 0, 6, 6); // Small square inside the circle  
    pop();  
  }  
}

 

the sketch I indetened to use

This time, we had to explore the idea of structured randomness—using loops to create patterns that feel both intentional and organic. I was drawn to the symmetry and repetition found in mandelas, so I used circles, triangles, and leaf-like shapes to build a layered composition. While loops helped generate repeating elements, I also added variations in color, rotation, and placement to make the design more dynamic and to add more uniformity I kept the color scheme consistent with shades of blue for the shapes constituting the mandela.

One part of my code that I’m especially happy with is the layered circles in the background. Getting the balance right took more trial and error than I expected. At first, the colors felt too flat, so I adjusted the shades to match the overall theme to give it a sense of depth. I also had to tweak the positioning to avoid overcrowding while still maintaining a structured look and while doing all this I realized how much small details can change the overall feel of a design.

  // depending on grid created calculates spacing across vertical and horizontal axis between circles 
  spacingX = width / (cols + 1); 
  spacingY = height / (rows + 1); 

  // iterates through each position of grid through rows and columns and assigns differing attributes to each circle to ensure randomness but with even distribution across grid to ensure there's no over-crowding or empty spacing left
  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = (i + 1) * spacingX + random(-20, 20); 
      let y = (j + 1) * spacingY + random(-20, 20);
      let circleSize = random(30, 80); 
      let growthRate = random(1, 2); 
      let maxSize = circleSize + random(20, 50);
      let c = color(random(150, 255), random(150, 200), random(200, 255), 150); 
      
      // adds each circle to array created to store attributes
      circles.push({
        x: x, y: y, circleSize: circleSize, growthRate: growthRate, growing: true,
        maxSize: maxSize, minSize: circleSize, col: c
      });
    }
  }
}

function draw() {
  background(255);
  noStroke()
  
  // iterates through array of circles and displays them on canvas
  for (let circle of circles) {
    fill(circle.col); 
    ellipse(circle.x, circle.y, circle.circleSize, circle.circleSize);

    // Growing and shrinking for added randomness
    if (circle.growing) {
      circle.circleSize += circle.growthRate;
      if (circle.circleSize >= circle.maxSize) circle.growing = false;
    } else {
      circle.circleSize -= circle.growthRate;
      if (circle.circleSize <= circle.minSize) circle.growing = true;
    }
  }

Casey Reas’ exploration of the chance operations revealed this broad tension between order and chaos. He says artists are the ones who keep order, in the world of chaos created by nature. A world where chaos came first, before order was invented to control it. He talks about this concept of “controlled randomness”- where artists can set parameters and boundaries, while maintaining hints of chaos and randomness. He started generating code for art, where there were some shapes and lines, and some behaviours and processes which switches around and creates different pieaces – order is kept while chaos creates this little imprecision, a little flaw for aesthetic visuals. I particularly enjoyed his “Tissue Work”, I feel like it challenges plain, automatic art; art which lost its abstractness and humanity. The art code generated by Lia, when he says something along the lines of, “somewhere in those pixels is the difference between order and chaos” resonated with me the most. It was interesting to note how the dots deviated (chaos) from the grid (order), leading me to wonder- what if order exists everywhere and chaos is just its byproduct, contrary to what Casey says at the beginning of the talk? Casey Reas’ chance operations shift the narrative of an artist as a “keeper of order” to someone who controls the flow of chaos, and is always pleasantly surprised by its outcome. Even minor deviations in coding can lead to the creation of something inextricably beautiful, subtly suggesting that maybe chaos is not an opponent to creativity, rather a collaborator in the process. 

While watching the video, I kept thinking about the relationship between order and chaos. The speaker talked about how artists have historically tried to impose order on the unpredictable nature of the world. But now, with advancements in science and technology, randomness has become part of artistic expression itself. That idea really stuck with me. It made me wonder—do we create to control, or do we create to explore the unknown? The way the speaker described using randomness in his art made me question how much of our daily lives are actually shaped by chance. Even when we think we have control, aren’t we still just reacting to unpredictable forces? It’s interesting how adding a little bit of randomness into a structured system prevents everything from collapsing into sameness. That balance between order and chaos feels very human—too much order, and things become rigid; too much chaos, and everything falls apart.

I’ve been exploring this balance in my own work, especially in this week’s project. The scene I created presents a quiet, melancholic moment viewed from a window—contrasting the ever-changing cityscape outside with the stillness inside. I use randomness to generate elements like the shifting skyline, the movement of rain, and the organic growth of potted plants. This mirrors the way modern life constantly pushes forward, yet we still crave a connection to something timeless and stable. I think the optimum balance between randomness and control depends on intention—too much randomness, and the meaning gets lost; too much control, and it feels lifeless. For my piece, randomness makes each rendering unique, reinforcing the idea that no two moments, even in solitude, are ever exactly the same. The talk made me appreciate how randomness isn’t just a tool—it can be a way of seeing the world differently.

Concept:

Here are my rough drawings that I used for ideation and inspiration:

The scene captures a quiet and melancholic night, showing the contrast between the outside world and the inside of the room. The rain falling against the window, adding to the somber mood. The city landscape outside is cold and distant with the buildings seen as dark silhouettes against the misty night sky. The outside world feels vast and modern, filled with artificial lights and towering structures, yet it lacks warmth and comfort.

Inside the room, the atmosphere is different. There is a longing for simplicity, an escape from the rush of modern life. The wooden furniture, antique candle holders, and potted plants reflect a preference for an older, more primitive way of living. Inside, one feels more connected to nature and tradition. 

Overall, this scene is about introspecting on the quiet sadness of longing for a simpler life while knowing that the world outside continues to move forward.

Since this was a generative art project, my project features the following elements that were randomly generated:

• The city landscape changes every time you refresh the code, showing how quickly the infrastructure and outdoor environment evolve.
• The leaves of the potted plants are randomly generated each time to depict the natural growth of plants.
• The raindrops are randomly generated within the window area, with variations in speed, position, and size.

Highlights:

I believe the highlight of the code is the dynamic raindrops, as they are the main part of the project and also the most challenging. It was difficult to make the raindrops move continuously in a way that looks realistic, like actual rain. To avoid gaps in the rainfall, I started by coding the raindrops already scattered across the scene. Additionally, they needed to fall at different speeds to create a natural, random effect. Since the rain is outside the room, the raindrops had to disappear when they reached the bottom of the window and restart from the top.

// Initializing raindrops and distributing them randomly from the very top (y=70) to bottom of the window (y=70+380). this ensured that there were drops already at various heights so rainfall looks continuous.

for (let i = 0; i < dropCount; i++) {
let rx = random(130, 130 + 540); // horizontal area of the window
let ry = random(70, 70 + 380); // vertical area of the window
let sp = random(3, 9); // speed of each drop falling
let ln = random(5, 15); // length of each raindrop
raindrops.push({ x: rx, y: ry, speed: sp, length: ln });
}
}

function draw() {
// showing the static scene (background, window frame, city, plants, etc.)
image(sceneG, 0, 0);

// updating and drawing the raindrops so they fall continuously
stroke(200, 220, 255, 120); // raindrop color
strokeWeight(2);

for (let drop of raindrops) {
// move each drop down
drop.y += drop.speed;

// if a drop falls past the bottom of the window area, reseting it to the top
if (drop.y > 70 + 340) {
drop.y = 70;
drop.x = random(130, 130 + 540);
}

// drawing the drop as a vertical line
line(drop.x, drop.y, drop.x, drop.y + drop.length);
}
}

Reflections, ideas for future work & Improvements:

• It might not be clearly noticeable, but the raindrops overlap with the plant pots, which is something I could have improved. While they still fit into the scene, appearing to be outside the window in the rain, I could place the potted plants in front of the rain to clearly show that they are indoors.
• I could also improve the aesthetics of the room by adding more antique elements to enhance the contrast between the outside world and the inside of the room.
• Another improvement could be randomly generating small movements in the candle flame to make it look more realistic.

Concept

In this assignment, I initially created a work where random faces of different sizes and colors are displayed, as shown below.

However, after watching Casey Reas’ talk in Eyeo 2012, I challenged myself to mimic his style of digital artwork by using more simple objects to give somewhat abstract feeling to my audience.

So, I made a rotating square with circles of random coordinates. I wanted to create four different squares to rotate synchronously to make the four squares to form one large rotating square.

Demo

 

Code Highlight

let angle = 0;
let speed = 0.01;
let centerX = 200; 
let centerY = 200;  
...
//move the center of grid to (0,0) and top-left to (-200,-200) with top-right of (200,200)
  translate(centerX, centerY);
  rotate(angle); // Rotate the entire canvas
  angle += speed;

I am most proud of moving the center of grid to (0,0) to make it easier to code as I always found it hard to understand x- and y- coordinates system of p5.js. In addition, I made the objects rotate continuously for better visual aesthetics.

Reflection and Possible Improvements

I wanted to create an art as a result of some random values or outcomes of the code. Even though the circles have random coordinates, I initially wanted to create an entire artwork to be of a random result: to display a different outcome after each run. However, I could not be creative enough to make such imagination come true.

Moreover, my work would be more visually aesthetic if there are more shapes or colors; maybe, I could have made the shapes and colors to be randomly generated.