Category: S2026 – Aya

Before watching the video, I assumed that randomness = messy or chaotic. I never before thought of controlled randomness, which initially sounds contradictory, but begins to make sense as the video goes on. I was fascinated by the artwork that was produced by programming randomness and it opened my eyes to different ways randomness can be used in my own work. In a way, some of the artworks Reas showed in the video, specifically the music pieces, reminded me of modern AI. The music sounded exactly what it was, random, yet also structured oddly enough. It reminded me of AI generated images and songs because AI tends to create some very messy looking images when you give it a specific prompt, and the randomly generated music somewhat mimics the idea of AI nowadays. More importantly, I was mostly impressed with the artwork that can be produced through computer graphics and code. Coming from a computer science backround, most of my coding involved creating algorithms. So, seeing a whole new world of coding to create abstract art pieces was captivating.

In my own artwork, I definitely plan to incorporate randomness by generating random colors and sizes for objects when needed, and especially for generating random positions and velocities for objects. I believe the optimum balance between total randomness and complete control is having almost complete control yet incorporating some elements of randomness when necessary. The control comes from writing the code yourself and deliberately inserting when you want randomness to be used. This helps create more complex art pieces because sometimes it is difficult to draw each element individually in the sketch and create more abstract pieces. So, the element of randomness allows for the creation of art pieces one might not have completely imagined in their mind.

Thinking of randomness brings the idea of disorganization and something more instinctive that is done with no purpose to me. I came to realize that this is not always the case, and that randomness can rather be a more purposeful approach when working on a piece of art. The way Casey Reas presents and discusses randomness makes it seem like a much more important element to consider incorporating, and I was surprised to find myself relating what he was saying with what I had done so far and what I could do next. I completely agreed with his point that randomness in unplanned things can in fact improve your work, especially as I reflected on my last assignment while listening. I created a looped artwork of a drawing made of shapes, and at first I was too focused on organizing how they moved. However, I ended up using randomizing code, which allowed the shapes to move around more freely and resulted in a stronger outcome.

Along with randomness, I feel that the control and manipulation of it also really matters, as I keep adjusting how random I want each code to behave, and think “how random is too random?” Casey mentioned a quote that made me think more about this concept, “the computer is a unique device for the arts since it can function as an obedient tool with vast capabilities for controlling complicated processes.” This reflects how the computer actually works in my practices, it is just “obedient,” meaning that I am still controlling what it does no matter how random it gets. I plan to incorporate random elements into my work, especially when I’m working with a complex piece, for movement or timings, but I believe there should always be a balance between randomness and control. Complete randomness can possibly lead to a messy display and an overwhelming number of actions, while complete control does do exactly what is planned, it can sometimes result in a less engaging or satisfying outcome. Therefore, when using random elements, I would control the randomness to some extent.

How long something can stay random, when we are always looking for patterns in things. Does it helps simplifying world around. Probably yes. Just now, in the week2 assignment what started as random colliding circles, if I grey them out, I just see two giant Xes. Also when we manipulate randomness is it still random, what the speaker called “Controlled randomness”. But what would be something truly random. A roll of a die, but it’s bound by 6 choices. That also is a form of controlled randomness. Given this all physical systems are bound by laws of physics. That make all random events not so random. If by random, we mean lack of knowledge about the outcome by that I mean the choice of the outcome not the outcome itself, then to increase randomness is to increase the available for the system to choose from.

For an artwork, My balancing point of chaos and control will the total number choice available at a moment. I see one element with 100 choices and 10 elements with 10 choice the same way. Surely, I can play around with by introducing biases and triggers to manipulate the balancing point, this will come at a cost of increasing complexity. And I need to look out for the chaos coming from this complexity. There is beauty in order and chaos both. But ordered beauty and chaotic beauty carry representation of complete opposite worlds which in its own is a spectrum and in that who lies where become their balancing point.

My concept:
As I started planning my work for assignment two, I decided I want to create something abstract using the new things we’ve learned in class, along with concepts I caught up on from previous classes. I started off by looking at the documents attached with the instructions, and two specific artworks grabbed my attention. I noticed how both have rectangles and squares in different sizes and complex ways, intersecting and overlapping one another. This inspired me and gave me the idea to create something similar using squares and rectangles, but make it colorful and moving to add life to it. Here are the references:

Embedded sketch:

A Code I’m proud of:
In this assignment I felt particularly proud of adjusting the movements of the shapes, as it was like trying to get the ranges of the sizes correct and ensure they moved within the frame while still appearing random, enhancing the image I was trying to display. I tried many different ways and ranges of numbers until I reached a result that satisfied me.

//Use if statements to ensure the shapes bounce back and forth instead of going out of frame
  if (rectX < -40 || rectX > 40) rectSpeedX *= -1;
  if (rectY < -40 || rectY > 40) rectSpeedY *= -1;

  if (squareX < -40 || squareX > 40) squareSpeedX *= -1;
  if (squareY < -40 || squareY > 40) squareSpeedY *= -1;

//Rectangles:

  //Set the loop to ensure multiple appear in each frame
  for (let i = 0; i < 25; i++) {

    //Randomize the position for pattern
    let w = random(20, 70);
    let h = random(20, 50);

    //Make width and height random to get a variety of sizes
    let x = random(0, width - w) + rectX;
    let y = random(0, height - h) + rectY;

//Squares:

  //Set the loop to ensure multiple appear in a frame
  for (let i = 0; i < 25; i++) {
    
    //Randomize the sizes of the squares for diversity
    let s = random(20, 60);

    //Adjust positions of sqaures
    let x = random(0, width - s) + squareX;
    let y = random(0, height - s) + squareY;

Another part that I’m surprisingly proud of is choosing the background color. I was just experimenting with different colors until I realized I could make it transparent, allowing the previous frames to show through and giving a more realistic look that matches the inspiration pictures.

//Set the background color to fit the goal
function draw() {
  background("#BDE0FF84");

Reflection and ideas for future work or improvements:
After completing this assignment, I felt satisfied with the progress I made and the final result. I feel that I was able to create a plan and successfully execute it through code, using the different techniques learned in class and resources provided. I enjoyed setting many colors at once and watching them appear on the display using random() and my colors array. I gained a stronger understanding of using loops, specifically for loops, and what really stood out to me is how much they can simplify and improve the flow of code. I also became more comfortable using if statements with || to adjust the movements. For future work, I would like to improve this artwork by learning how to make the shapes float around more smoothly in a specific pattern, or by adding more complex shapes to make it even more interesting.

References:
I referred back to the weekly slides provided by the professor to recap using the “if” statements as we did in class, which I used to keep the shapes within the frame.
I used the “for loop” reference page from the p5 website to learn more and generate multiple shapes within each frame and control their repeated movement.
https://p5js.org/reference/p5/for/ 
I used ChatGBT to set the colors of the shape outlines. I wanted to work with a range of selected colors rather than a single randomly changing color. It showed me how to use an array of strings to store the colors I wanted, and then, within the shape movement, use stroke(random(colors)) to randomly select and display these colors in each frame.

“Controlled randomness” is, and I think most people would agree, an oxymoron. I agree that art is at its best when there’s a healthy mix of chaos and order, but is true randomness even possible? I think randomness is something that is inherently controlled to some extent, since there will always be certain parameters for everything we can conceive of. We are a species that operates on frameworks and pattern recognition, after all. I think we’ve coined the term “random” to describe outcomes for which we can’t see a clear logical process, and naturally, as the finer workings of the universe remain far out of our reach, most things in the world make little sense to us.

Talk to a quantum physics enthusiast and they might tell you that, on a quantum level, there exists some randomness in the way particles interact with one another. Likely, this is just a placeholder theory to explain away our confusion, but regardless, the universe seems to operate both on processes we can follow logically and processes that we can’t. In other words: chaos and order. Maybe that’s why people find so much beauty in “controlled randomness” – it mirrors the way we understand the world: nature, humanity, time, etc. Art mirrors life, after all.

For this assignment I wanted to do something spiraley and trippy. Honestly, I didn’t have a particular vision for this one and figured it out as I went along.

First thing I did was the background. At first I had it be a bunch of overlapping shapes moving randomly accross the screen, but it was too jarring. I ended up simplifying it to what you can see above: an animated perpetual wave of thin white concentric circles over a black background.

if (frameCount % 8 > 6) {
  cc = 29;
} else if (frameCount % 8 > 4) {
  cc = 24;
} else if (frameCount % 8 > 2) {
  cc = 19;
} else {
  cc = 17;
}
while (cc > 1 && cc < 1000) {
  strokeWeight(0.5);
  circle(200, 200, cc);
  cc += 14;
}

As you can see, I used a boolean and frameCount to animate the circles, and a while() loop to draw them. I used the p5 reference library to remind me of how they work and get the finer details right, and I learned about frameCount by watching several youtube videos on animation.

Next I added the eye in the middle using a text box and orienting it so that it aligns with the centermost circle. Pretty simple and straightforward.

  strokeWeight(0);
  textSize(90);
  fill(250);
  textAlign(CENTER, CENTER);
  text("", 210.5, 174.5);

Finally (somehow this was the hardest part), I added the text in the middle and animated it to fade in and out.

 stroke(t);
 if (frameCount % 30 < 15) {
 t = t + 15;
} else if (frameCount % 30 < 30) {
 t = t - 15;
}

for (let x = 200; x < 400; x += 600) {
  for (let y = 20; y < 460; y += 30) {
    textSize(10);
    textFont("Courier New");
    strokeWeight(0.5);
    noFill();
    text(
      "it is only by dying to ourselves that we find life",
      x,
      y,
      [500],
      [10]
    );
  }
}

I used a for() loop to duplicate the text accross the y axis, and a boolean and frameCount to animate the fading. This one was a pain in the ass because I kept messing up the text’s orientation and it took a few tries to get the frame remainders right. I also think the first for() function where I duplicate it accross the x axis is extraneous, but the code messed up when I tried to get rid of it so I just left it in there.

One thing I could potentially add to this is a sound effect or some music to add to the aesthetic. I also feel like I should’ve added an interactive aspect to it; that completely skipped my mind. Otherwise, I’m happy with the final product. It’s nothing too impressive but I think it fits together nicely.

1.   Sketch and Code

Code

2.   Overview

For this assignment, I created an interactive artwork featuring a grid of neon pink “needles” that respond dynamically to user input. The sketch utilizes vector math, coordinate transformations, and mapped interactive feedback.

3.   Concept

The goal of this work was to explore the concept of a sort of “magnetic field” using geometric shapes. I wanted to create something that felt alive under my curser. The choice of a vibrant pink palette against a deep background was inspired by modern neon-noir visuals as I am somewhat interested in cyberpunk styles, and also my favourite color being pink.

4.   Process and Methods

My process focused on moving from a rigid grid to a fluid, reactive environment. I broke the project down into three main layers:

• • The grid: I used a nested for() loop to populate the canvas. By using a spacing variable, I ensured that the elements were perfectly aligned and easy to adjust.
  • Trigonometric alignment: I used trigonometry to calculate the relationship between each grid point and the mouse to make it interactive. I used atan2() for this to determine the specific angle needed for each shape to face the mouse.

let angle = atan2(mouseY - y, mouseX - x);

• • Visual mapping: I used the dist() function to measure how close each point is to the cursor, then used the map() function to link that distance to the stroke weight, length, and color intensity of the lines.

// Calculate how far each point is from the cursor
let d = dist(mouseX, mouseY, x, y);

// Use the distance (d) to drive the visuals
// Closer to mouse = brighter color and thicker lines
let pinkIntensity = map(d, 0, 400, 225, 50);
let weight = map(d, 0, 400, 5, 1);
let lineLen = map(d, 0, 400, 35, 10);

// Set styles
stroke(255, pinkIntensity, 220); // RGB: Pink variations

5.  Technical Details

• • I implemented push() and pop() within the loops, which allowed me to use translate() to move the origin to each grid point and rotate(). If not for this, every line would rotate around the top-left corner (0,0) of the screen rather than its own center.
  • To achieve the motion blur effect, I set the transparency to be 30 in in the draw() loop, making it so that the previous frames don’t disappear immediately, leaving a trail behind the moving lines.
  • Because the lines are drawn from a negative to positive value relative to the translated center, the rotation occurs perfectly around the midpoint of the line.

line(-lineLen, 0, lineLen, 0);

• • The color is updated dynamically where, as the mouse moves closer, the green channel in RGB increases, shifting the color from a deep purple-pink to a bright, glowing, neon pink.

let pinkIntensity = map(d, 0, 400, 225, 50);

6.  Reflection

This assignment developed my understanding of the transformation matrix (push, pop, translate, rotate). My biggest challenge was getting the rotation to feel natural; initially, the lines were spinning wildly, which was how I found the map() function, which helped me map the distance to the angle. Tiny adjustments to the mapping ranges completely changed the mood of my work.

7.  Resources

• • https://p5js.org/

This reading affected me by helping me understand that the coded system itself is the creative act. Which led me to the question “What point does the computer go from being a tool to a collaborator helping in the creative process?” .When randomness is introduced, the outcome is no longer fully controlled by the artist, and this lack of control is actually very intentional. The artist writes instructions, but the results can be unexpected, and that uncertainty becomes part of the artwork. I noticed this idea reflected clearly in the code I wrote for the assignment. I created a system with rules for line width, square size, and color, but each of these elements was randomized within certain limitations. For example, the line width was random between one and four, and the square size was random between 20 and 45. This allowed me to maintain some control over the overall structure while still allowing the visuals to remain unpredictable. The outcome felt more alive and dynamic because it was never exactly the same.I planned to incorporate random elements into my work by using color, line weight, and shape size. As the speaker Cassie Reas explains, us, me, the artist (coder), designs the rules of a system rather than controlling a single outcome, treating the code as a set of rules that guide the work instead of controlling exactly how it turns out.

The optimum balance is achievable by controlling the rules without limiting the outcomes. Setting constraints allows the work to stay coherent while still being unpredictable. I feel that the ideal balance exists when I can predict the behavior of the system, but not the final visual result. In my work, I was able to control what elements could vary and the range in which they changed, but I could not predict the exact combinations of square size, line width, and color that appeared every two frames.

 Casey Reas mentions the term system based art, which is when the artwork functions as a system defined by behaviors rather than a single image. In this approach, the work exists as an ongoing process instead of a finished product. This idea connects closely to my piece, since it generates new variations every time it runs, making no single outcome the definitive version of the artwork.

Concept

For this assignment, I took inspiration from the computer graphics pdf attached to this assignment’s description (photo below).

Building on this graphic, I made a simple grid with squares inside it. I initially wanted to create the moving graphics, but I could not figure out how. Therefore, I decided to use some skills we learned in class on changing colors when the mouse is inside the squares. Finally, I ended up with my final design, where the group of squares changes to the colors of the rainbow when the mouse hovers over them, keeping all the other cells still white.

Here is my final sketch:

Code I am Proud of:

for (let r = 0; r < 5; r++) {
    for (let c = 0; c < 7; c++) {
//calculates where each cell should start based on the row and column and shifts by cell size
      let cellX = c * 80;
      let cellY = r * 80;

      square(cellX, cellY, 80);
      square(cellX + 10, cellY + 10, 60);
      square(cellX + 20, cellY + 20, 40);
      square(cellX + 30, cellY + 30, 20);
  }
}

I am particularly proud of my code which creates the grid, because I optimized it. Initially, I set up the grid with four different for() loops, which basically keep printing a grid but make it smaller each time to create the inner squares effect. Then, I realized I could combine them all into a single for loop by storing each outer square’s starting X and Y locations, and then writing multiple square() functions, shifting each one according to how inner the square is. This also allowed me to select a different color for each square when the mouse hovers over it.

Reflection and Future Improvements:

Overall, I am quite happy with my sketch and enjoyed the process of creating it. For the future, I would definitely like to implement some automatic motion into my sketch. I would probably want to recreate the original sketch I took inspiration from, with the moving inner squares. Additionally, I would like to work on a second version of this sketch where the color of the inner squares only changes if the mouse is directly over it, not if the mouse is generally inside any of the squares within that group of squares.