I appreciate that Crawford made the differentiation between reaction, participation and interaction. I may or may not have used reaction and interaction to mean the same things before, and now I know to do better 😉. I also liked the point that he made about interactivity existing on a continuum, rather than as a binary property, which in turn allows people to approach it in a subjective manner. In the web that we know today, interactivity exists in some form or another and in varying magnitudes, from the use of simple buttons to complex reciprocal elements. And those that incorporate interactions in meaningful and interesting ways capture attention and attract user traffic. So in this way, one could argue that there now exists a certain threshold for interactivity that applications on the web have to meet to ensure the work gets to the audience.

Building on top of Crawford’s definition of interaction – a cyclic process in which two actors alternately listen (input), think (process), and speak (output) – I think a strongly interactive system could be one that has exposed to the user multiple areas for sending input, listens carefully through those channels, and once it receives input, reciprocates by sending back a meaningful response that satisfies its purpose. It is important that the “speaking” part of the cycle conforms or relates to the “listening” and that it’s not just gibberish; if I ask a local person for directions to the Eiffel Tower in French, I expect exactly what I asked for, and not, for instance, directions to the Shibuya crossing in Japanese. In other words, it is not sufficient to just have all three segments of the cycle present for a system to be strongly interactive, and the content and quality of each is just as important in ensuring user satisfaction.

After watching Casey Reas talk about randomness, it got me thinking about how I usually approach design. When working I’ve always been about control, and making sure every element has a purpose and fits just right. But Reas kind of pushed me to reflect on how it’s not about giving up control but rather just letting a little unpredictability into the process to keep things from becoming flat and boring. When things are too ordered, they lose their spark and this idea made me realize that maybe I’ve been too focused on precision and could benefit from creating space for randomness to breathe a little life into the work im making. I’m now thinking of ways to incorporate small random elements, like little shifts in color, shape, or spacing, so that my designs feel alive without losing the structured feel I love.

As for the balance between randomness and control, I think it’s about finding that perfect place where the two can interact with each other.  Things that are too rigid can become very static, while too much randomness can feel directionless. In my opinion the perfect balance happens when you have a solid structure but let randomness subtly influence the details. Whether it’s adjusting spacing, throwing in a surprise texture, or letting a color shift unexpectedly, it makes the work feel slightly more dynamic. The goal isn’t to pick one or the other but to let control and randomness work together to create something that keeps the viewer engaged and constantly evolving.

The talk by Casey was truly enlightening. His opening remarks about artists and designers being the key players in maintaining order in today’s society—after the chaos (the Big Bang) that led to our creation—really struck me. The rendered animations had an element of randomness to them, but unlike the art where pieces of paper were dropped onto the floor, or the machine that caught fire (intended to destroy itself), these were post-World War demonstrations by the artist. However, hidden within that seemingly destructive surface was an element of randomness, which is what made it so interesting. Once computing became feasible, algorithmic works like those of Keith Tyson could be visualized and fabricated. Whether it’s the ‘role the dice’ algorithm or something of that sort, I believe art cannot truly exist without interpretive bias, complemented by mistakes and uncertainties. This also reminded me of how some painters splash buckets of paint onto the canvas to sometimes set the foundation for their work.

How are you planning to incorporate random elements into your work?

I’m passionate about creating practical solutions—solutions that not only integrate into existing fields but also introduce entirely new possibilities. The word ‘random’ itself is open to interpretation, but in my view, it’s a mix of an artist’s little inattentiveness and human uncertainties. Like I did in this week’s assignment, where I used random color selection, I plan to incorporate different mapping functions that produce unexpected results. It’s true that the internal ‘random’ function built into most programming languages isn’t entirely random, but the influence of the programmer’s choices still adds a layer of uncertainty. Much like Casey, I want the numerical models that form the foundation of my program and its elements to remain random and stay that way. In life, randomness doesn’t equate to mess—it’s simply how things work. The animation Game of Life also visualizes this phenomenon. So, my plan is to innovate artistically while still maintaining a degree of control, such as setting certain parameters.

Where do you feel is the optimum balance between total randomness and complete control?

I believe the balance is subjective and depends on the context. For works that involve transformation and less precision, it’s often better to let things spin out of control. The variation not only eliminates some of the artist’s personal bias, but it also allows for new ideas and inspirations to emerge when the art ‘flows.’ That said, there are also scenarios where the information being used is constrained to specific parameters, and in these cases, the balance depends on the context and how much ‘variance’ is considered acceptable.

Concept

This sketch explores the interaction between two screen squares, incorporating movement and “emotional” behavior. The squares are initially placed randomly on the canvas, and they shrink and change color when they overlap, representing a form of “embarrassment.” The goal is to create a simple yet dynamic visual experience where the squares react to user interaction (mouse clicks) and their proximity. When clicked, the squares move toward the mouse position, and if they get too close, they start shrinking and changing color. This sketch is an experiment with combining basic geometric shapes and dynamic behavior in p5.js.

Code Highlight

One section of code I’m particularly proud of is the implementation of the shrink-and-color-change behavior. Here’s the part where the squares react when they “feel embarrassed”:

// Check for "embarrassment" (if squares overlap)
let distance = dist(square1.x, square1.y, square2.x, square2.y);
if (distance < (square1.size / 2 + square2.size / 2)) {
  square1.shrink = true;
  square2.shrink = true;
}

// If embarrassed, shrink and change color
if (square1.shrink) {
  square1.size -= 0.5;
  square1.color = color(random(255), random(255), random(255)); // Random color
  if (square1.size < 10) {
    square1.shrink = false; // Start over
    square1.size = 50; // Reset size
  }
}

if (square2.shrink) {
  square2.size -= 0.5;
  square2.color = color(random(255), random(255), random(255)); // Random color
  if (square2.size < 10) {
    square2.shrink = false; // Start over
    square2.size = 50; // Reset size
  }
}

Reflection and Future Work

This project started with a simple concept of square interaction, but it quickly became more dynamic by adding emotional “reactions” like shrinking and changing color. The interaction of movement toward the mouse creates an element of control, while the “embarrassment” response adds unpredictability.

For future improvements, I’d consider the following:

1. Adding sound effects to accompany the “embarrassment” reaction, like a shriek or a sound that corresponds with the color change. This would enhance the multisensory aspect of the experience.
2. More complex behaviors: Perhaps, when the squares get too small, they could “reproduce” into smaller squares, creating a chain reaction, or they could break apart into multiple pieces.
3. Interactivity: Instead of just reacting to the mouse, I could add additional interaction methods, such as keyboard inputs or random events that change the behavior of the squares.
4. Visual effects: Adding gradient colors or animations when the squares change could make the transition smoother and more visually engaging.

This sketch could evolve into a larger concept where geometric shapes and their “emotions” become central to the user interaction, possibly forming the foundation of a game or interactive artwork.

One thing that stood out to me from the video was how randomness can be used to generate complexity. Casey talked about how simple rules together with random elements, can give results that feel natural and unexpected. I personally like using randomness in my work because it makes things feel more natural, rather than too structured or predictable. I also found it  interesting how randomness isn’t just about making things look chaotic—it actually reflects real-life patterns from the biological to the mathematical world. Just like in nature, nothing is perfectly placed, and randomness can help simulate that. However, I believe it is best to allow randomness to do its thing in artwork but while still maintaining some control over the whole structure to some extent. Having control or knowledge over art makes me feel more connected to the final structure.  If everything is completely random, it can feel messy, but if there’s no randomness at all, it feels artificial. I choose to settle for balance between the two . A great example Casey mentioned was a piece that incorporated randomness but became more structured when symmetry was introduced. This showed how even a small amount of control can bring order to something that initially seems chaotic. 

Another point that resonated with me was on the use of random numbers in art. He mentioned how random numbers can serve as a tool to introduce variation, but they also rely on a system of rules to guide the outcome. Without some guiding principles, the randomness would lose its purpose. I think this aligns with my approach to using randomness in my work—it’s not just about throwing chaos into the mix, but about using it in a controlled way to show creativity while still achieving a somewhat desired result. In my week two project, I was able to maintain order for the most part of the artwork, while also adding randomness in aspects like the color choices.

How are you planning to incorporate random elements into your work?

I really like how I incorporated randomness into my own work. I feel like making my art project have random color and shapes makes it more visually appealing and it makes it look more vibrant. In my lighthouse project, I integrated random stroke weights and colors in the background to represent how light dynamically illuminates the beach. This randomness supports the theme, but too much in my opinion could make the artwork unclear. While randomness adds energy, some structure is needed to keep the message strong or else it becomes too overwhelming.  

Where do you feel is the optimum balance between total randomness and complete control?

The best balance between randomness and control depends on how much structure is needed to keep the artwork clear while still feeling dynamic. In my lighthouse piece, I use random stroke weights and colors to show how light spreads, but I keep the lighthouse itself structured to maintain focus. Too much randomness would make the image chaotic, while too much control would make it feel lifeless. Casey Reas’ Eyeo talk supports this idea, explaining that rigid systems become static, while too much chaos loses meaning. For me, the key is using randomness in a way that adds energy without taking away from the main idea.

Introduction:

I grew up in this small city that was known for two things: first, the streets that crossed in a way you could see an 8-pointed star, kinda like the British flag, if you looked from above. And second, the whole textile vibe—it was everywhere. Factories on top of factories, markets packed with all kinds of clothes. Most of it got shipped off to Europe and other places. The city itself had some pretty wild sights, but honestly, what always caught my attention were the machines in the factories. The speed and precision with which they wove and embroidered stuff was mind-blowing—a real testament to what humans can do. I was reading the August 1977 issue of Computer Graphics and Art, and on page 27, it talks about using computer graphics in textiles, which totally reminded me of my hometown.

I figured, why look elsewhere when I could dive into something that’s always been close to my heart and totally fascinates me: weaving. Since I was already familiar with coding, I just jumped right into it! At first, I thought I’d weave in a simple horizontal pattern, but then I realized that’s pretty common in real life. So, I switched it up and went for a diagonal pattern instead. To make it more fun, I decided to mimic how the machines move, like the back-and-forth zig-zag motion, and coded that in.

example of weaving done.

Concept:

At first, I thought about using loops like while loops and counter-controlled loops to get started. But then I realized just printing the stitches or weaves straight into the animation wouldn’t really show the ‘time’ and ‘effort’ that goes into the manufacturing process. So, I decided to go with the zig-zag diagonal pattern instead.

Implementation Stage:

While implementing the code, straight away from the thought process didn’t go as planned.

At first, I wanted to keep things simple and sketch smaller stitches, but every time the nested loop ran, the program would crash. So, I switched things up and used the ‘draw()’ function. Since the if and while loops are pretty similar (both have a pre-condition check), I used an if loop like a while loop, and that did the trick! I really wanted to use loops, but considering the limits of Chrome’s rendering power and the design needs, I had to either abandon the idea or find a way to make it work. So, I went for the second option. Then came the fun part—making the flow of the ellipses move up and down. For the diagonal effect, I used the linear equation y = mx + c to create a gradient that would rise and fall with each increase or decrease in the x-axis. To get the right gradient of 3 (+ and -), I adjusted the y_pos by 6 (+ and -), and for every change on the y-axis, I grouped it with a horizontal shift of 2. So, 6/2 or -6/2 would give me -3 or +3.

Code I am proud of:

The coding in general wasn’t difficult, but something that makes me proud is the ‘on’ and ‘off’ stage the ‘weave_direction’ variable had which worked like a switch.

// starting coordinates of ellipse/printhead;

let weave_direction=0; // direction switch
// 0 -> machine weaves downwards
// 1 -> machine weaves upwards

function setup(){
 
}

function draw(){
 
      
      if (weave_direction === 0){
        fill (r,g,b);
        ellipse (x_pos, y_pos, 5, 5);
        x_pos +=2; // line gradient of -3
        y_pos +=6;
        if ((y_pos >= height) || (x_pos >= width)){
          weave_direction =1;
          x_pos = x_pos + 10; // horizontal gap between the streaks.
        } 
      } else if (weave_direction === 1){
        fill (r,g,b);
        ellipse (x_pos, y_pos, 5, 5);
        x_pos -=2; // line gradient of +3
        y_pos -=6;
        if ((x_pos <= 0) || (y_pos <= 0)){
          weave_direction =0;
          x_pos = x_pos + 10; // horizontal gap between the streaks.
        }
      } // for weaving downwards or else upwards diagonally.
        
      
    

How to use the Program:

Click once to start the ‘stitching machine’, keep pressing to change the color to your liking.This Program in its in spirit is designed towards actual realization of effort that goes into the process.

Embedded Sketch:

Reflections and ideas for Future Improvements:

I’m planning to let users click on the screen to mark points that can be ‘mapped’ and used later to fill in color (the same as the background), which will create the effect of the user drawing onto the stitches. I also tried to keep the code as short as possible while still keeping the logic intact, but down the line, I want to use OOP to make it more dynamic. That way, users will be able to change colors and coordinates after the initial creation.

Sample Art Made:

Concept:

For my art project, I wanted to try and incorporate some of the material we learnt from the previous assignment. So I tried to make an art project where a part of it is moving randomly and has random color, while the rest of it is still. I implemented this using for and while loops for the most of it.

When I started looking for inspirations, I tried to think of something that I like. So in the end I decided on doing a simple lighthouse because i like the beach:

Although I had a picture for inspiration I tried to make my drawing more vibrant and colorful to represent how the lighthouse lights up the whole beach:

Code highlight:

I used for loops to create the outlines for the red and white stripes in the lighthouse, where the arc decreases per a specific distance. And when it came to the lines in the background, i made the code so that it chooses a random color and strokeWeight from a specific range. I tried to make that using a while loop so that the background does not become overwhelming and continue forever, so i set it to run till a maximum frame.

if (currentFrames < maxFrames) {
    // draws lines while under maxFrames
    let i = 0;
    while (i < 5) {
      // random color with transparency
      stroke(random(150, 255), random(150, 255), random(150, 255), 150);
      strokeWeight(random(1, 3));

      let x1 = random(width);
      let y1 = random(height);
      let x2 = random(width);
      let y2 = random(height);

      line(x1, y1, x2, y2); // draw a random line

      i++; // increment loop counter
    }
    currentFrames++;
  } else {
    background(180, 220, 255); // reset the canvas
    currentFrames = 0; // restart the frame counter
  }

Reflection and future improvement:

At first I tried to make the waves move but I couldn’t figure out how to make it have that illusion of it going back and forth so instead I decided to keep it and make the whole painting more vibrant by making the outlines of all the shapes have random colors as well.

Week 2: Art Work

For this assignment, I wanted to create a simple yet interactive artwork that users can engage with easily. My goal was for users to be able to click on the canvas to generate a new, random art piece, which ensures that each one remains unique and creative. I drew inspiration from the techniques and concepts we have been exploring in class and wanted to make this a fun interaction where people can experience various generative artworks.

One of my favourite parts of the code is the random colour generator, as it produces a new colour each time, making each piece visually dynamic and engaging. It also adds a layer of unpredictability and excitement to the art.

let c = color(random(255), random(255), random(255), random(200, 255)); // Random colors
fill(c);
noStroke();

(click to generate new art)

I am satisfied with how my art piece turned out, as it successfully achieves what I intended while allowing me to explore new coding concepts and functions. I liked how the random shapes and colours added variety, keeping the artwork interesting and different each time. The ability to regenerate a new art piece enhances user interaction, making the experience feel fun and creative. There are a few things I would improve on in the future including adding more details and complexity. This includes introducing more shape variations, such as complex shapes, lines, and curves, as they can help create a more intricate and detailed composition. Additionally, after reflecting on the project, I realised that enhancing user interactivity could make the experience even more engaging. For example, I could add a feature where users can contribute to the artwork by drawing their own elements would make it more personal and creative. Overall, this assignment was fun and rewarding to create and helped me better understand loops.

Reading Reflection: Casey Reas’ Eyeo talk on chance operations

Casey Reas’ Eyeo talk on chance operations examines the intersection between randomness and artistic control, especially in digital art. His discussion brings up an interesting reflection on the role of unpredictability in creative processes. While structured designs offer predictability and intentionality, bringing in random elements can lead to unexpected and innovative outcomes. His approach aligns with John Cage’s philosophy of chance operations, where the artist gives up some control to external forces, which allows for new interpretations and meanings. This raises questions regarding the limits of authorship in art, when does an artist stop being the sole creator if randomness plays a significant role in the final piece? His examples challenge the idea that randomness is naturally chaotic, but it can actually be utilised to create structured complexity.

In my own work, I see the potential to incorporate randomness as a way to explore new creative directions without sticking to preconceived outcomes. This is something I have already experimented with a little, for the artwork that I created. I made an artwork that generates various art pieces using random colours and shapes. However, I think that there is a balance between total randomness and complete control. Having too much unpredictability can make a design feel disconnected while having excessive control can suppress creativity. The challenge is in the ability to set parameters that allow for both structure and coincidence. This talk made me reconsider the extent to which I rely on controlled methodologies and has encouraged me to experiment more with random processes. One question that I still have is, how can we embrace randomness while ensuring the outcome still serves a practical purpose?

I really like using random elements in my work; both assignments so far have incorporated random elements because I feel like it adds so much movement and engagement with only a few lines of code. The computer program almost creates the art for you; you just have to give it a guiding path to follow. Even though I like randomness, there’s still specific visions I want it to follow. I use random as a way to represent reality and organic ways of forming images. For example, carefully placed and well-thought out placements of certain objects feel artificial; being able to simulate randomness means mimicking real life. 

The book of random numbers (million digits) in Casey’s talk mirrors my point; people use these numbers to simulate and test things in the real-world. It did get me wondering though, if multiple areas and teams are using this specific set of random numbers, would it eventually be unreliable? Depending on the context in which it’s used, I’m sure it doesn’t matter, but I just felt like if the whole point of these random numbers is to give unbiased data on society, they shouldn’t be reused over and over again. Another thought came to mind when watching the video: our universe is just a random simulator. What if our world was just programmed by someone who used randomness to let organic life move and form freely? This reminds me of the theory popularized by the Matrix about how we’re very likely living in a simulation because eventually, a civilized society will develop the ability to simulate worlds, which then can also simulate worlds, and so on. That means there are probably millions of simulated worlds and only one base reality; the likelihood of us being one in a million is unlikely. We might be a simulation to test a specific outcome, and that technology could be rooted in the randomness shown in Casey Reas’ talk.