Category: Spring 2024 – Aya (Section 002)

To a certain extent I agree with the definition of interactivity: a cyclic process in which two actors alternatively listen, think and speak. There should definitely be threads of actions that take input (listen), process it (think) and speak (output), however I believe that it does not have to limit to two ‘actors’, nor does it have to be in strictly alternative order. For instance, when someone interacts with a website, it may seem like there are two actors, but if you divide the website entity to two parts, the frontend and the backend, the interaction would be between three entities. In this sense, interactivity could contain multiple entities. Furthermore, I believe that there needs to be some sort of correlation between the threads. In other words, the output of one actor must be directly or indirectly be taken as an input for the other actor. Otherwise, there would be no relation between the two actors.

Another aspect that piqued my interest was the sentence “The refrigerator does interact with a user but it does so at a low level” . When it comes to measuring the level of interactivity, besides the three requirements, the time it takes for the interactivity to occur could be an important parameter to measure. There could be many micro-interactions simultaneously happening in a short time, which could be argued as a high level interaction. While on the other hand, there could be complex interactivity but the time it takes spans a long period, therefore lowering its level of interactivity. The word interactivity spans large area in our society, and depending on how it is used in various contexts, the definition changes.

“The Art of Interactive Design” by Chris Crawford goes in-depth refining a buzzword – interactivity – that we might be using often without understanding all the intricacies of the interface that allows users to design dynamic interactions for the users. According to the author, it’s not just an additional layer of programming but its core aspect. This has also been true in my experience since I have worked on several projects and oftentimes it’s the interactive layer that makes a difference between a solid or lacking experience. For example, making everything user-friendly, and easy to understand but also dynamic enough so that the user does not get bored of repeating the same action again and again.
He makes a clear divide between interaction and reaction and how the cyclic nature of having two systems defines if something is interactable or not. While I understand his idea of having two actors, I don’t think that the branch example is only about having one actor. Even though it’s an inanimate object, it still plays a major role. The better distinction is that the branch while being an actor, is not necessarily something that can modify its behavior based on our (first actor’s) actions.
Nevertheless, in the following paragraphs, the author gets more concrete in his definition and I have to agree, that having two living organisms interact is much more authentic than any kind of computer interaction we are trying to imitate in real life.
The author further continues to define different levels of interaction and how it is a variable that might have different strengths based on how many components it has and how advanced they are (ability to think, speak, listen, etc). I would argue, however, that it is important to define individual aspects, since while something may be interactive based on all those definitions, a user (who is good at listening, speaking, and thinking) might still find something interactive to be lackluster based on their personal experience. For example, imagine an app that teaches you some skills. On paper it is quite interactive, the user listens, speaks, and inputs answers after deliberate thinking. The app, in turn, responds, speaks when needed, and analyzes answers. However, if the user is already fluent in such skills, this interaction component will seem trivial and more of a hassle unless the app is designed to be tailored to their fields of interest or their behavioral patterns.
I agree with his book example, (there is more of a reaction than interaction). However, some movies can indeed be interactive. For example, Black Mirror: Bandersnatch is a 2018 movie where users can make a choice based on which different scenarios will play out. Even here though, you can argue that this is not true interaction since those scenes have already been pre-shot and there is nothing an individual can do to change the script of those scenes.
His final consensus lies in differentiating user experience designer versus interactivity designer. The latter is less concerned about technical aspects but more about how a function makes the user feel. As such, there is the integration of “form with the function”.
All in all, the author was very forward-looking with his statements. Crawford emphasizes its core role in user experience, distinguishing between interaction and reaction. The science of interactivity has advanced a lot after writing this book, especially with the rise of VR where new definitions can be formed every day based on discoveries and new ways to create immersive experiences. Ultimately, his work serves as a good foundation in this ever-evolving field.

While looking for ideas for generative art I stumbled upon coding train’s playlist by Daniel Shiffman. It was super interesting to see just how many things you can create using simple idea of randomness and how you add different variables to generate seemingly organic patterns. The last video in the playlist was Polar Perlin Noise loops which intrigued me the most. I followed the tutorial and executed the default code which I started messing with to get some interesting results. For example, I changed z_offset and phase values to make the shape spin faster or with greater amplitude, additionally there is a slider to increase the randomness which visually translates to increasing speed. Once I saw the outline I was interesting in not just the changing of the shape but what would happen if background did not override it every time? That way a figure would slowly come to life as we let the code play out. Adding transparency to that aspect made the animation seem smoother and more organic. I changed the color to red and saw how it morphed into circle with spikes after changing amplitude to 10*(cos a + phase). It instantly reminded me of Eye of the Sauron from the Lord of the Rings. Thus I had a picture in mind and a rough plan to execute it. I added more shapes operated by same Perlin noise logic but with different parameters. For example, different phase, color, or shape entirely (latter being very important for the black vertical pupil in the middle of the eye). I then added arcs to imitate the Dark Tower.

I decided to change color (transparency) of the eye, as well as increase its shape if the volume is loud enough. After 6.8 seconds, the camera also begins to work and 0.4 seconds before audio ends, the inner pupil starts to expand. There is also transparency aspect (commented in code) which makes eye more transparent as it comes closer to the subject, the camera overlay is also semitransparent which gives it sort of slow motion effect using tint function.

I followed articles on web to get the capture feed. I had some difficulty with getting camera to work in sync with audio but in the end, simple boolean checks did the trick. Values for audio were just trial and error, as it was for eyesize scaling and volume levels. I am really happy with how it turned out, especially how the audio dialogue matches what is actually happening on screen. (Camera = seen, and death = engulfed in darkness by expanding inner pupil gradually).

I changed few colors and parameters to make it look like the source material and in the end got exactly what I wanted. Perhaps, this is most impressive part of whole code because this is where perlin noise eye animation takes space:

// draw outer shape
  stroke(255, 10, 0, alphaValue);
  noFill();
  beginShape();
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let xoff = map(10 * cos(a + phase), -1, 1, 0, noiseMax);
    let yoff = map(sin(a + phase), -1, 1, 0, noiseMax);
    let r = map(noise(xoff, yoff, zoff), 0, 1, 100, 220) * (eyeSize / 20); // scale based on eyeSize
    let x = r * cos(a);
    let y = r * sin(a);
    vertex(x, y);
  }
  endShape(CLOSE);

  // orange glow for the first outer shape
  fill(255, orange, 0, alphaValue * 0.5); // lower transparency
  beginShape();
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let xoff = map(8 * cos(a + phase), -1, 1, 0, noiseMax);
    let yoff = map(8 * sin(a + phase), -1, 1, 0, noiseMax);
    let r = map(noise(xoff, yoff, zoff), 0, 1, 0, size_t) * (eyeSize / 20); // Scale based on eyeSize
    let x = r * cos(a);
    let y = r * sin(a);
    vertex(x, y);
  }
  endShape(CLOSE);

  // second glow
  fill(255, 165, 0, alphaValue * 0.5);
  beginShape();
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let xoff = map(10 * cos(a + phase + 1), -1, 1, 0, noiseMax); // different phase
    let yoff = map(10 * sin(a + phase + 1), -1, 1, 0, noiseMax);
    let r = map(noise(xoff, yoff, zoff), 0, 1, 50, 220) * (eyeSize / 20); // Scale based on eyeSize
    let x = r * cos(a);
    let y = r * sin(a);
    vertex(x, y);
  }
  endShape(CLOSE);

  // inner pupil black which is a vertical ellipse
  fill(0); // black
  beginShape();
  for (let a = 0; a < TWO_PI; a += 0.1) {
    let xoff = map(5 * cos(a + phase), -1, 1, 0, noiseMax);
    let yoff = map(5 * sin(a + phase), -1, 1, 0, noiseMax);
    let rx = map(noise(xoff, yoff, zoff), 0, 1, 5, 20) * (eyeSize / 20); // Scale based on eyeSize
    let ry = map(noise(yoff, xoff, zoff), 0, 1, 50, 120) * (eyeSize / 20); // Scale based on eyeSize
    let x = rx * cos(a);
    let y = ry * sin(a);
    vertex(x, y);
  }
  endShape(CLOSE);

  // update zoff and phase
  zoff += 0.008;
  phase += 0.008;

All in all, I had lots of fun working on this project and I am very happy with the results. Hope you like it too! Here is the final version: (I would highly suggest opening it on actual browser and giving it camera/microphone permissions for the full animation- https://editor.p5js.org/dt2307/full/krd4mZZqJ)

 

 

Having recently watched Casey Reas’ video, it’s fascinating how he navigates through concepts like art, randomness, order, chaos, algorithms, and aesthetics. One key takeaway that stood out to me is how randomness, when guided by certain rules or parameters, can lead to order – a concept that reminded me of an old game called “The Game of Life.”

In this game, lights follow a simple algorithm: if they’re lonely or surrounded by too many others, they go out; under ideal conditions, a new light emerges, creating a continuous cycle of life and death. Upon further exploration, one can realize that specific conditions, or parameters can play a crucial role. These act like guidelines, turning what might seem like randomness into a more structured and even aesthetically pleasing pattern. Imagine it as a kind of artistic recipe: the right mix of chaos and order, with a sprinkle of algorithms, can result in something visually appealing. It’s like making sense out of what initially seems like randomness, and that’s pretty cool.

In a nutshell, Reas’ video taught me that even in the seemingly chaotic world of art and algorithms, there’s an underlying order waiting to be uncovered. It’s like solving a puzzle, understanding how randomness can actually contribute to creating beautiful and ordered patterns.

Casey Reas is the inventor of Processing (software which I often used in my Freshman year of university) and is well known for many projects in digital illustrations. In Eyeo2012 he talked about chance operations which I found very intriguing and interesting for several reasons. First of all, his talk about random systems with seemingly random parameters which after some time tend to order and become homogenous (Process 18) is very much similar to what I did for assignment 2, where I used random functions while ending up with clear shapes depending on different parameters after many iterations.
His work based on “Tissue Work” highlights how small changes in parameters largely influence the paths his figures follow. I also found this true when modifying variables of my project which completely changed the shape. More surprisingly, the way the change worked started making sense in a nonmathematical context as well. Without thinking about the equations I could visually deduce how one parameter (percent) influences the resolution of the shape and the other (n) influences how it spreads.
I found it inspiring how many fields can random chance operations be used in physics, music, and obviously art. One might think how all these fields are related by underlying mathematical equations and might even explain how our entire universe works.
Seeing the random number book got me thinking about how if anything is truly random. As a student who studies computer science, we have often been told how you can’t program true randomness. I started wondering if we even need true randomness as controlled randomness helps us in many ways already. Be it encryption, algorithms, and in this case creating art.
The demo regarding triggering our imagination was truly fascinating, as it got me thinking about how our brains try to declutter chaos and try to do their best to make sense of what we see based on our preconceived notions.
I think that Casey Reas’s presentation and his personal experience show us how we might find meaning and beauty in the most unexpected (random) places which in turn should inspire us to look for order in chaos in both our fields and our personal lives.

I found Casey Reas’ talk about Chance Operations quite intriguing, as it reminded me of my old beliefs regarding art and its concept. Before, I had a completely different perspective about what art is and what defines artistic expression. As someone who is interested in visiting museums and art exhibitions as much as I can, my understanding of art was limited to human expressions through hand made artworks. However, as I had more contact with the digital world, I started changing this conception and appreciate the digital art, as it is showcased in the talk for example.

During his talk, Reas displays different examples of art generated by computers and algorithms. In my current understanding, it also represents art since we can use code to create different angles, shapes, colors and several other characteristics to represent feelings, emotions, and other expressions. At the same time, Reas’ talk inspired a reflection on the role of technology in shaping the contemporary art. The integration of algorithms and computational processes in art creation blurs the lines between human and machine, making me to reconsider what it means to be creative in the digital age. However, I believe it also raises concerns about the potential loss of human “touch” in art when relying too heavily on algorithms. How can we strike a balance between increasing the power of technology and preserving the essence of human creativity in art?

For this assignment, I aimed to create an artwork based on geometric shapes, especially squares and rectangles. For that, I searched for famous artists that use this kind of technique and found the work of Piet Mondrian, which became the inspiration for this project. At first, my goal was to create a Canva of size 1920, 1080 composed by several squares that give the sensation of overlapping colors, as you can see in the following image:

For this I used for loops, constants, and the full screen option when the mouse is pressed, following this tutorial.

However, I was not satisfied with the result, so I decided to modify it and create something more visually appealing. That’s when I thought of the tesseract concept we have in movies, such as Interstellar, that also illustrate this kind of chaos and order composed by geometric shapes. That’s when I worked to add some animation and make the squares revolve in an elliptical orbit.

For that, I used variables to determine the number of squares, the speed factor, square size, etc. And I’m particularly proud of the following snippet code, as it allowed me to add a bit of interactivity because when the user clicks on the screen, it increases the speed of the squares, giving a cool motion effect as you can see in my sketch as well:

// Increase speed factor if mouse is pressed, otherwise reset speed factor
  if (mouseIsPressed) {
    speedFactor = 0.5; 
  } else {
    speedFactor = 0.05; 
  }
  
  // Loop through each square
  for (let i = 0; i < numSquares; i++) {
    // Calculate x and y positions based on sine and cosine functions
    let x = map(sin(frameCount * speedFactor + i), -1, 1, 0, width - squareSize);
    let y = map(cos(frameCount * speedFactor + i), -1, 1, 0, height - squareSize);

Reflection: While I successfully implemented for loops, constants, and mouse interactions, exploring additional programming techniques and functionalities could enhance the depth and complexity of future projects. This could involve delving into advanced animation techniques or incorporating other libraries for more intricate visual effects.

 

Casey Reas’ talk provides an interesting glimpse into the intersection of art and chance, challenging conventional notions of control and order in artistic creation.  The artists’ work utilizes the juxtaposition of order and chaos, a theme prevalent throughout art history, using chance operations and randomness. The transition from early controlled coding to the exploration of emergent behaviors reflects a shift in the artist’s mindset, raising questions about the role of intentionality in the creative process.

The exploration of algorithms, particularly in the tissue simulation based on Valentino Braitenberg’s Vehicles,  was fascinating for me. The simulated behaviors of conceptual vehicles responding to their environment introduce an element of unpredictability and organic growth. Reas’ emphasis on the paths taken by these vehicles rather than their static positions resonates with the idea that the journey, filled with constant restructuring, holds artistic significance. This challenged my conventional understanding of art as a static, predetermined outcome, urging me to appreciate the dynamic nature of the artistic process. 

Also, Reas’ exploration of biological data in the “Signals” artwork, visualizing the communication among proteins within a cancer cell was another intriguing piece due to the deliberate combination of structure and randomness in determining the position and scale of protein cluster. It’s as if the artwork becomes a dynamic representation of the delicate dance of life at the cellular level.  Overall, the concept of chance in art prompted me to reconsider the traditional boundaries of creative control as well as made me rethink the dynamic outputs we can create from algorithms.

I remember watching video by numberphile called Chaos Game years ago which I found very intriguing.  I wanted to create a generative art illustration around that topic something that would involve Fractals and creating order out of randomness. Fortunately, I found Daniel Shiffman’s video regarding Chaos Game where I followed his tutorial for the initial version of the project which draws Sierpinski triangle.

Even this simple configuration of Chaos game is surprisingly beautiful and very interesting as we have created triangle shaped forms simply by drawing points halfway to one of the three random points that is randomly created and then selected.

Next step was to add more complexity to the project, thereby adding more seed points and refactoring whole thing to make changing variables for future reference more dynamic. Tutorial was very helpful in achieving this. To be more precise, I had two values which I could dynamically change: percent (the distance to a randomly chosen point where new point has to be placed at) and const n which is basically number of seed points.

I could make a very lengthy post talking about each aspect of the code but instead I want to highlight the code I am most proud of and rest I will either explain in class or you can see through embedded comments of P5 sketch.

for (let i = 0; i < 200; i++) {
    
    strokeWeight(1);
    stroke(255, 255, 255, 200);
    
    let neighborIndex;
    do {
      neighborIndex = floor(random(points.length)); //from array
    } while (neighborIndex === previousVertexIndex || neighborIndex === (previousVertexIndex + 1) % points.length || neighborIndex === (previousVertexIndex - 1 + points.length) % points.length);
    let next = points[neighborIndex];

    current.x = lerp(current.x, next.x, percent);
    current.y = lerp(current.y, next.y, percent);
    
    point(current.x, current.y);
    
    previousVertexIndex = neighborIndex;
  }
}

This is an additional condition I added to make it so that newly chosen point can’t be the same as the old point or a neighboring point from the polygon. We are using LERP (linear interpolation) for updating position.

In the future, I could possibly experiment with more shapes and more drawings and users are also welcome to modify the code and play with it. Perhaps, adding a slider would make things much more fun to play with parameters. Additionally introducing color, or an interactive element users can play with could potentially be more captivating. For now, I am including the project with parameters of the shape I liked the most, but we can try other ones in class. I really liked making this project and I hope you like it too.

 

 

 

 

 

The presentation prompted a thoughtful examination of the nature of creativity in the digital era by examining the relationship between chance and creativity.  In particular, it resonated with me that randomness can foster creativity within the inflexible confines of code. It suggests that the “unintentional” can contain a new kind of intentionality, challenging the conventional narrative that art is solely a human endeavor. This counterintuitive notion begs the questions, “Is creativity a uniquely human trait, or can it emerge from the interaction between computational randomness and human intention?” I was prompted to reevaluate the artist’s function in the digital age by the talk. Rather than being the only creator, it’s possible that the artist is becoming more of a curator, arranging the circumstances in which art is produced through human-machine collaboration.

The conversation on using code-generated randomness to create unexpected and meaningful art struck a deep chord as well. It suggests a change in perspective from seeing art as a static representation to seeing it as a dynamic process where meaning is created via interaction and interpretation rather than being predetermined. This viewpoint is consistent with broader societal movements that prioritize experience over possession and procedure over product. It also raises difficult issues regarding authorship and authenticity in art. In the event that the “creator” consists of a collection of human-designed algorithms, how can we distinguish between the creator and the medium? Furthermore, how does this affect how we see art itself? In addition to providing insights, the talk created a forum for a more in-depth examination of the changing dynamics between people, art, and technology.