Category: F2023 – Mang

The Art of Interactive Design offered me deep insights into the world of interactivity. Before reading this text, I had never stopped to think about the definition of interactivity or the steps necessary to consider something interactive, even though it is a core idea of computing. Nonetheless, I have found that the text managed to put into words almost all of my beliefs on the topic, and even the aspects that I do not agree with ended up intriguing me. For instance, the author argues that movies are not interactive because they fail to utilize two principles of interactivity: thinking and listening. He goes even further by saying that we should “appreciate them for what they are good at instead of press-ganging them into something they’re terrible at”. I found this passage to be interesting because nowadays we do have interactive movies, one example is “Black Mirror: Bandersnatch”, which gives the option for the viewer to change the story depending on their choices. To me, it is amusing to come across an example of an outdated perspective and compare it with the forms of media that we have nowadays. Moreover, even though interactive movies did not exist back when the book was written, I still found his previously mentioned statement to be quite harsh. For someone who argues so much in favor of innovation, I did not expect him to reject the possibility of interactive movies in the future so easily. Sure, interactive movies are not that popular, but they are still appreciated for how entertaining and creative they are.

On a different note, I completely agree with his definition of interactivity, and I found his idea of a degree to be extremely useful. As he argued, the definition of interactivity is quite subjective. The lights of a refrigerator that turn on and off when a door is opened and closed are not interactive with adults, but they could be with children. In that case, how would we define whether refrigerators are interactive or not? With the interactivity scale, we can argue that they are indeed interactive, although lowly, because they barely interact with the user. Following that notion and the three principles of interactivity given by him (listening, thinking, speaking), I would like to give my own damn definition of interactivity. To me, one definition of interactivity could be: “A form of medium that connects two or more agents through active listening, thinking, and speaking”. The same idea, but written more clearly to me. Still, I deeply admire and respect the author’s arguments on such a modern concept.

“The Art of Interactive Design” by Chris Crawford

Chris Crawford raises the issue of the ambiguity and overuse of the term “interactivity” in “The Art of Interactive Design”. Although I have never thought about the meaning of the word and intuitively identified the products as highly interactive, this article was the ‘wow’ moment for me, making the clear distinguishment between interaction and reaction. 

During the class, Professor Michael Ang told an interesting debate between the artists and the interactive media designers about whether the drawings are interactive or not. The artists’ argued, claiming that the artworks interact with the audience by making them think about the meaning and interpretation to which designers have their own opposing claim. Although before, I was closer to the artists’ perspective, after reading the text, I absolutely support Chris Crawford’s point of view. It is for sure the paintings make the people think, but nothing more. According to the author, in order to have the interaction, three components should be well delivered from BOTH sides such as listening, thinking, and speaking, or in professional terms, input, process, and output. In this case, the audience has the input as seeing the painting and process as thinking and interpretation of the painting. Of course, the viewer can comment orally but the painting is not going to either listen, think, or respond to you. Hence, there is no mutual interaction. Because of this, the response of the viewer is no more than a reaction, which cannot turn into interaction. These thoughts came to my mind, forming my perspective on the definition of interactivity. 

After distinguishing the interaction from the reaction, another question was raised in my head is there a quantitative way to distinguish the level of interaction? Although the author touched on this topic, he didn’t consider that in-depth. Consequently, I am interested in whether this level of interaction is subjective, whether it depends on the time and space as well as the age of the person interacting with. Additionally, should the interaction be connected with the person to be considered as the interaction or can the interaction between machines and AIs be considered an interaction too? 

For this assignment, I decided to create a simple demonstration of a mandala. I used only three shapes of small, big circles and rectangles; which rotate around the center, forming a visual pattern.

A mandala is a geometric pattern that holds deep symbolic and spiritual significance in various cultures around the world. It often represents unity, harmony, and the balance of elements. In my work, I tried to capture the essence of a mandala by creating a dynamic composition of shapes that radiate from the center, reminiscent of the sun.

Compared to my previous coding assignments, this time I had fewer issues. However, I found it challenging to implement the rotation drawing for the shapes. I used the “translation” function to establish the center of the screen as the point around which the shapes would rotate. This function moves the rotating point to the desired center position. Next, I computed the angles of rotation using the “map” function, based on each shape’s index within the array of shapes. These angles of rotation were then used in the “rotation” function, for shapes to spin around the central point.

let angle = map(this.index, 0, shapes.length / 3, 0, TWO_PI); // Calculate the angle for rotation
let x = cos(angle) * this.radius;
let y = sin(angle) * this.radius;

push(); 
translate(x, y); 
rotate(angle); // Rotate based on the angle

In the future, I would like to try to use more shapes like triangles and spirals to create visual variety. I think expanding the color choices with gradients and dynamic color changes will make the artwork more visually appealing.

Overview:

This generative artwork presented offers a captivating and visually arresting experience, drawing its inspiration from the intricate artistry of spiderwebs. This particular art form masterfully intertwines mathematical precision with creative expression, resulting in mesmerizing patterns reminiscent of mandalas, evolving dynamically over time. Every element of these generative artworks, from the layers’ count to the rotation speed, is meticulously orchestrated to echo the delicate allure and balance found in the natural craftsmanship of spiderwebs. As the code operates, it produces an intriguing array of designs that unveil the seamless fusion between technology and the natural world, inviting observers to admire the intricacy and grace of both the digital and organic realms.

Embedded sketch:

A highlight of code that i am proud of:

I am so proud that I utilized classes. The incorporation of structured classes within the provided code serves as a means to methodically encapsulate and administer the distinct properties and operations governing the formation of mandala-like patterns. Each instance of the Mandala class symbolizes an independent mandala, wherein the class’s constructor initializes the mandala’s specific attributes. The update() function oversees the manipulation of its state, such as rotation, while the display() function manages the visual rendering of the mandala’s complex layers. Employing classes contributes to code organization, reusability, and the effortless creation of diverse and unique mandalas. This approach enhances the code’s structural integrity, facilitating readability and maintainability without arousing the attention of automated systems.

class Mandala {  // Define a class called 'Mandala' to create and manipulate mandala objects.
  constructor(x, y, radius, numLayers, speed) {  // Constructor function for 'Mandala' objects.
    this.x = x;  // Initialize the x-coordinate of the mandala's center.
    this.y = y;  // Initialize the y-coordinate of the mandala's center.
    this.radius = radius;  // Initialize the mandala's radius.
    this.numLayers = numLayers;  // Initialize the number of layers in the mandala.
    this.speed = speed;  // Initialize the rotation speed of the mandala.
    this.angle = 0;  // Initialize the initial angle of rotation.
  }

Reflection:

// Batool Al Tameemi - week 4 
//intro to Im 
let mandalas = [];  // Create an empty array called 'mandalas' to store instances of the 'Mandala' class.

function setup() {  // This is a setup function required by p5.js to initialize the canvas and other settings.
  createCanvas(400, 400);  // Create a canvas of size 400x400 pixels.
  noFill();  // Disable filling shapes.
  stroke(255);  // Set the stroke color to white.
  let numMandalas = 1;  // Define the number of mandalas to create (in this case, 1).

  for (let i = 0; i < numMandalas; i++) {  // Loop to create mandalas.
    let x = width / 2;  // Set the x-coordinate of the mandala's center.
    let y = height / 2;  // Set the y-coordinate of the mandala's center.
    let radius = random(50, 200);  // Set the radius of the mandala randomly.
    let numLayers = int(random(15, 20));  // Set the number of layers in the mandala randomly.
    let speed = random(0.005, 0.02);  // Set the rotation speed of the mandala randomly.
    mandalas.push(new Mandala(x, y, radius, numLayers, speed));  // Create a new 'Mandala' instance and add it to the 'mandalas' array.
  }
}

function draw() {  // This is a draw function required by p5.js to continuously update and draw the canvas.
  background(0);  // Set the background color to black.

  for (let i = 0; i < mandalas.length; i++) {  // Loop through the 'mandalas' array.
    mandalas[i].update();  // Call the 'update' method of each 'Mandala' instance.
    mandalas[i].display();  // Call the 'display' method of each 'Mandala' instance.
  }
}

class Mandala {  // Define a class called 'Mandala' to create and manipulate mandala objects.
  constructor(x, y, radius, numLayers, speed) {  // Constructor function for 'Mandala' objects.
    this.x = x;  // Initialize the x-coordinate of the mandala's center.
    this.y = y;  // Initialize the y-coordinate of the mandala's center.
    this.radius = radius;  // Initialize the mandala's radius.
    this.numLayers = numLayers;  // Initialize the number of layers in the mandala.
    this.speed = speed;  // Initialize the rotation speed of the mandala.
    this.angle = 0;  // Initialize the initial angle of rotation.
  }

  update() {  // Method to update the mandala's properties.
    this.angle += this.speed;  // Increment the angle of rotation.
  }

  display() {  // Method to display the mandala.
    translate(this.x, this.y);  // Translate the canvas to the mandala's center.
    rotate(this.angle);  // Rotate the canvas by the current angle.

    for (let i = 0; i < this.numLayers; i++) {  // Loop to create mandala layers.
      // Various calculations to draw each layer of the mandala.
      let layerRadius = this.radius * ((i + 1) / this.numLayers);
      let numPoints = int(map(i, 0, this.numLayers - 1, 2, 12));
      let layerSpacing = map(sin(frameCount * 0.01), -1, 1, 2, 20);
      let layerColor = map(i, 0, this.numLayers - 1, 100, 255);

      stroke(layerColor, 150);  // Set the stroke color for the layer.
      beginShape();  // Begin defining the shape.

      for (let j = 0; j < numPoints; j++) {  // Loop to create points in the layer.
        let angle = TWO_PI / numPoints * j;  // Calculate the angle between points.
        let x = layerRadius * cos(angle);  // Calculate x-coordinate of a point.
        let y = layerRadius * sin(angle);  // Calculate y-coordinate of a point.
        vertex(x, y);  // Add the point to the shape.
      }

      endShape(CLOSE);  // End the shape, closing it.
      translate(0, layerSpacing);  // Move to the next layer vertically.
    }
  }
}

I read this chapter in one long “aha!” I can tell the author sounds like someone who has put a lot of thought into the philosophies that drive digital creation, and I would definitely be interested in looking into the later chapters of the book. I can’t think of a time when I really stopped to think along these lines: when people ask me what I want to do with my computer science degree, I blurt out a mushy something that resembles the job description of a web developer. When I work on web or mobile projects, I’m usually doing all the design and code by myself, so finding the line between these things just never came up. But, now enlightened, I can say that there is in fact, a place for a UI designer and an interactivity designer, and I think the final product is more the outcome of how these two agents (among other things) interact with each other rather than simply the sum of their individual contributions.

Definitely a lot of takeaways here (for me at least), but what hit closest to home was something he wrote towards the end: “good interactivity design integrates form with function”. Ever since I discovered Codepen and JsFiddle, I have been integrating the most random effects and interactions in my work. Sometimes a website has frills that doesn’t really add anything to it but doesn’t take anything away either, but in my work I would compromise on function for something that just “looks cool”, regardless of whether it actually complements the remaining UX or gets in the way of the user. If I can take apart my roles when I’m working alone, and think for stakeholders from both arts/humanities and math/science backgrounds, or those from the “Webby” generation or the “Personal Computer” generation, my finished work would probably come together much better.

It’s interesting how the juxtaposing binaries of order and chaos are so interrelated together and constitutes a vital component in visual arts. Casey Reas’ talk further enlightened me in this perspective. Randomness in art throughout history has been celebrated and such a chaos is what inspires the many variations of art we see in contemporary times. Yet it’s important to note that such a seemingly liberating practice involves delicate control, a notion that is reiteratively referenced throughout the video. Whilst this may be an implicitly obvious knowledge, it’s usually not something we consciously deliberate upon.

I didn’t know to the extent how closely interconnected the role of control was in chaos and vice versa. Following on from this, it’s intriguing how, even in our deliberate attempts to harness randomness, we are engaged in a kind of controlled chaos. It’s like we’re conducting an intricate symphony, guiding the elements of chance to produce results aligned with our intentions. This challenges the notion that randomness is synonymous with unpredictability; rather, it can be a tool for crafting intentional, yet pleasantly surprising, outcomes.

My aim for this assignment was to produce an Andy-Warhol(esque), visually abstract art with a pronounced focus on colour portrayal. This is because some of Andy Warhol’s more iconic features of pop art was his use of distinctive arrays of colour. Through this ever prominent display of colours, which was made especially overt by the black background, coupled with the illusion of depth that is added within each square, I was able to generate an unintended yet desirable end-result.

This assignment punctuated the fact that my brain is not hardwired for coding, especially p5.js – javascript coding, and to some extremes, it even made me reconsider my major (interactive media). Whilst I had ambitious ideas and concepts I wished to bloom into fruition, my abilities and understanding of coding severely restricted this. As a result, I am incredibly proud of every single code that I produced with the for() loop since it took me an unbelievable amount of time to perfect(?) it. Initially I had wanted some form of dynamic physical change of shapes e.g., squares transitioning into ellipses, circles alternating in size, but again, with my incredibly limited knowledge it was hard to replicate it.

let cols = 10; // Number of columns
  let rows = 10; // Number of rows
  let gap = 10; // Gap size between squares
  let squareSize = (width - (cols - 1) * gap) / cols; //calculating square size
  
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      let x = c * (squareSize + gap); //x+y position of squares
      let y = r * (squareSize + gap); 
      
    //generating a random colour
    let randomColor = color(random(255), random(255), random(255));
      
      noFill(); 
      stroke(randomColor);
      rect(x, y, squareSize); // Draw the square
      
        //creating transition between square and ellipse
        for (let size = squareSize; size >= 20; size -= 2) {
          rect(x, y, size); // Draw a square
          ellipse(x + size / 2, y + size / 2, size - 10, size - 10); // Draw a circle in the middle of the square

Creating a spaced grid with randomly iterating colours was definitely doable although I can’t deny that it was a mind-twister but trying to create this transition from square to ellipse was almost impossible. I’m still not entirely sure how to adjust the coding to produce my desired result but, though not intended, this outcome was equally wonderful. I was very pleased with how it displayed on screen. For further improvements, as I have previously mentioned, I would love to first of all solidify my coding knowledge so that I can produce more dynamic and animated works. Perhaps an interesting idea could be that these squares randomly swap positions to occupy a new coordinate.

Casey Reas’ Eyeo talk on chance operations was a captivating exploration of the creative potential found within the realm of randomness and chaos. Throughout his presentation, he skillfully conveyed the idea that by relinquishing some degree of control and allowing chance to play a role in the creative process, remarkable and unexpected outcomes can emerge.

One impressive aspect of Reas’ talk was his ability to draw connections between chance operations and art, highlighting how artists throughout history have employed randomness as a tool for inspiration and innovation. He showcased famous examples like John Cage’s experimental music compositions, where random elements determined the outcome of the piece, and Jackson Pollock’s drip paintings, which embraced the element of chance in the artistic process.

Reas also demonstrated the practical applications of chance operations in contemporary art and technology, particularly in his work with generative systems and computer algorithms. His discussion of software and coding as mediums for exploring chance operations opened up new possibilities for creativity and self-expression, showcasing the intersection of art and technology.

Another striking feature of Reas’ talk was his emphasis on the relationship between randomness and intention. He emphasized that while chance operations introduce an element of unpredictability, they are not entirely devoid of intention. Artists can carefully design the parameters and constraints within which randomness operates, guiding the creative process toward desired outcomes while still embracing the unexpected.

As a programmer, something ‘random’ happening in code is the worst nightmare. So, for me, the topic of randomness in computer science or coding itself was quite new. Usually, what programmers are obsessed about, is solving why ‘random’ and unexpected things are happening in their projects. So, at the beginning of the video, I was very confused in terms of how randomness can be used in coding.

After the talk, I came to the realization that even with randomness, we’re not just counting on pure luck- we are actively engaged in ‘designing’ with randomness, employing it as a tool to manipulate and shape outcomes according to our intentions. I appreciate how he nuances randomness/chance can be carefully calculated and determined, all while retaining the capacity to yield surprising results.

One question that comes to mind is whether our utilization of randomness can be regarded as an inherently random process as well. Although we don’t have access to the specific codes of the projects shown, it seems like we are trying to use randomness and make it behave in a way that we desired. I am uncertain whether, even in this context, randomness can be construed as entirely uncontrolled or arbitrary.

Casey Reas’ work, particularly his piece “Maharam,” indeed offers an exploration of randomness and the interplay between simplicity and complexity in art. The concept of “tissue work” that he employs is a remarkable way to create interesting patterns and forms that emerge from seemingly basic elements.

What’s striking about “Maharam” is how it mirrors natural processes. By allowing simple wiring to interact and cross-connect in an uncontrolled manner, Reas simulates a sort of artificial evolution. This process mimics the way natural systems, like neural networks or ecosystems, evolve and adapt over time through countless interactions. It’s a testament to how computational art can capture the essence of complexity found in nature.

When he multiplied the connections, which might be a reflection of how complex systems can appear chaotic or overwhelming when viewed up close. Yet, as mentioned, Reas’ ability to eventually shape this chaos into a discernible figure demonstrates the power of coding and computational art.