Category: F2023 – Mang

I really enjoyed Chris Crawford’s interpretation of interactivity, especially because he challenges conventional notions of interactivity. I specifically wanted to comment on his definition, in which he likens interactivity to having a conversation:

“interaction: a cyclic process in which two actors alternately listen, think, and speak.”

I think framing interactivity as a conversation is both interesting and perhaps controversial because it brings the interactivity of many pieces into question. In class, we have had discussions on “types of interactivity”, where some pieces were defined as being once interactive, as in the user clicks and the interaction happen, or perpetually interactive, pieces whose motions and responses went on infinitely. The latter form of interaction, under Crawford’s definition, is barely considered interactive then. It is just a little above a movie in terms of interactivity, where a user can engage once but then is compelled to watch the result.  It is not a conversation, it is just a one-word response.

Another form of interactivity brought into question are the interactive pieces that have one response to user activity. Two contrasting pieces that I can think of are the “Deep Walls” piece and Chris Milk’s “The Treachery of Sanctuary”. Both these works are considered iconic pieces in the space of interactivity. Deep Walls, under Crawford’s definition is a truly interactive piece – it is a conversation between the art piece and it’s viewers at any specific time. It captures the true essence of dialogue because it will always appear different depending on who is engaging with it and how they’re engaging with it. The Treachery of Sanctuary, on the other hand, in my opinion, falls short of Crawford’s definition. It is not accurate to describe it as a conversation – but moreso as a script. Actors in their performances choose how to enunciate their words and the level of emotion they convey with their lines, but, at the end of the day, the dialogue will always be the same. The same is with Milk’s piece – users have wiggle room to play around a bit, but at the end of the day, the ultimate result will always be the same.

I think it is for this reason Crawford begins to speak about degrees of interactivity. Certainly, every piece alluded to in this response is interactive, but exactly how much? These trains of thought are especially important for us as creators in the Interactive Media space, as it forces us to mindfully think about how open-ended the conversations are that we are creating through our art.

 

For this assignment, I was inspired to create a generative piece that would celebrate my cultural tradition. That’s when the idea of animating a “pookalam” came to mind. A “pookalam” is a vibrant and intricate floral arrangement made during the festival of “Onam,” in Kerala where various colorful flowers are meticulously plucked and their petals separated. These petals are then artfully arranged in front of houses as given in the picture below.

To bring this tradition to life in my assignment, I tried to create an animation where colorful flower petals descend from above, autonomously converging towards the canvas’s central point. This concept not only pays homage to the beauty of “pookalam” but also adds a dynamic and engaging visual element to the tradition.

Initially, my approach involved animating a single flower falling from above, but as I progressed, I decided to incorporate an array function and created an empty array to work with. To achieve the effect of multiple flowers descending, I introduced a variable for the number of flowers and utilized multiplication to replicate them.

Animating their falling was a relatively straightforward task, but the challenge arose when I aimed to gather them elegantly at the center point of the canvas. It was during this part that I acquired a deeper understanding of using the “target” function to achieve this goal. And that is the part of coding I am particularly proud if:

moveTowards(targetX, targetY) {
  // Move the dot towards the target position
  let dirX = targetX - this.x;
  let dirY = targetY - this.y;
  let distance = sqrt(dirX * dirX + dirY * dirY);
  let speed = map(distance, 0, width, 0, 4);
  this.x += (dirX / distance) * speed;
  this.y += (dirY / distance) * speed;
}

While my original intention was to transform these grouped flowers into a beautiful “pookalam,” like arts, this is the outcome I managed to create.

“The Art of Interactive Design” does a good job in delivering its content by being interactive while it’s just a group of simple words but really made engage in the reading like if it is a narrator. The first chapter raises a question reagarding the definition of interactivity, claiming that interactivity is usually misunderstood. The author defines interactivity as a conversation between two actors. Last week while working on a website design, a UI-UX designer told me that whenever users interact with an element in the design, they expect to recieve a response. These words jumped to my head while reading the chapter and thus, I believe that this definition is exactly what interactivity is supposed to mean.

The author also discusses the concept of degrees of interactivity which is crucial in our understanding of interactivity while working on producing interactive designs. It is crucial because, as the author mentioned, most people believe that interactivity is a boolean property while it is, indeed, can be measured and evaluated. The degree of interactivity depends on the ways of communication between two actors whether listening or thinking or others. So, I believe that with the rapid evolution of technology this era, the degrees of interactivity will have a wider variation depending on the way its implemented in. For example, Virtual Reality applications should have the most sophisticated degree of interactivity as the users fully engage in these type of applications.

The Concept:
For this assignment, I aimed to create something that truly captivates my interest. Among the many wonders that intrigue me, one stands out – the precise system of our universe. The accuracy by which planets, stars, and galaxies rotate around each other is really worth contemplation. So, I tried to work on creating a simple version of our solar system where some planets rotate in their orbits around our warm sun. However, my solar system is more dynamic with my choice of planets and stars number and random planets’ sizes and colors.

Code Highlight:
The part of code I am proud of is drawing the planets and especially figuring out how to draw their orbits because the planets sizes are randomly generated. So, the orbit radius is dependent on its planet size.
Sketch:

Reflection and ideas for future work or improvements:
I like the final output of my sketch. However, I look forward to simulating the solar system in a more realistic way and giving each planet its own characteristics and implementing 3D visualization of it.

concept:

Because the last generative artwork piece I made was very 2D, this time I wanted to focus on making something that would give the illusion of being in 3D. I was very inspired by the examples and exercises that we saw/did in our last class, specifically the exercise with the randomized balls and the flock that we saw that moved according to the cursor. My assignment idea is a combination of that, where I wanted to make a group of rotating cubes follow a cursor and also scale according to it.

However, I unintentionally increased the difficulty of this project for myself. I came across this when googling examples for how to make cubes in p5.js, and following the code, I set the mode to WEBGL not realizing it would change a lot of the way I needed to approach things in my code. In addition, the mathematics of making the cubes was also a bit difficult for me to grasp initially (the last time I had to think about velocity and vectors this deeply was back when I was doing A-Level Physics, so saying I was quite rusty is a bit of an understatement).

Though the outcome is a bit different than what I hoped to get initially, I still believe I captured the essence of what I wanted.

code highlights and improvements

while the most complicated part of my code is the movement, I’m actually prouder of the scaling of the cubes because I personally feel it is much more intuitive and noticeable.

//get the scaling factor based on the cursor and where the cube is currently
const scaleFactor = map(dist(mouseX, mouseY, this.position.x, this.position.y), 0, width, 0.5, 2.0);
const scaledSize = this.size * scaleFactor;

I also like the subtle disco ball touch I added, because I think it helps convey the energy/vibe of the piece.

function discoBall(cursorPosition){
  let flashing = frameCount % 60
  push();
  strokeWeight(0.2)
  stroke(255)
  if (flashing < 20) {
    fill("#d2d0d2");
  }else if (flashing < 40){
    fill(color(255, 250, 199))
  }else {
    fill(color(0, 57, 163));
  }
  translate(cursorPosition);
  sphere(15, 10, 10);
  pop();
}

For future improvements, I’d like to fix the movement so that it follow the cursor more precisely, or at least that the movement of the cubes according to the cursor is much more intuitive. The mathematics in it is a bit messy, and i was constantly adding new aspects to fix problems that were arising in the movement (for example, I added the separate method after all the cubes began to be in exactly one point, but then had to add cohere after I saw that they were super far apart) and the end result is something else entirely. While I am happy with how it looks, I want to approach movement in my piece in a more organized manner.

 

 

For this week’s assignment, I drew inspiration from the Impressionist art movement, specifically the post-impressionist Van Gogh and his famous Starry Night oil painting. I wanted to recreate the swirling pattern in the form of generative art.

Here is the sketch:

 This code generates its visual effect by simulating a dynamic movement of particles using object-oriented programming. Each particle’s position and movement are controlled by vectors that are affected by Perlin noise, creating smooth and organic trajectories. The particles transition in color as they move, smoothly blending between two predefined colors based on their angle of movement. The result is a gradual build-up of a visual pattern that also transitions harmoniously between colors.

There were two interesting things I learned with this code. The first was controlling the noise scale. By dividing the coordinates by a constant value (in this case, 100), I managed to influence the scale of the noise. Smaller divisors resulted in finer-grained noise, while larger divisors resulted in smoother noise. In other words, the divisor determines how quickly the noise changes as the particle moves across the canvas. By using a larger divisor I was able to create a more gradual variation.

update() {
  //Calculating the angle based on Perlin noise
  this.angle = noise(this.position.x/100 , this.position.y/100) * TWO_PI;
  // Move the particle's position based on its angle and speed
  this.position.x = this.position.x + cos(this.angle) * this.speed;
  this.position.y = this.position.y + sin(this.angle) * this.speed;

}

The second lesson regarded the transition of colors and the lerpColor() function. I began by defining two colors, ‘color1’ and ‘color2’. The ‘angleIndex’ is a result of mapping the particle’s angle to a value between 0 and 1. lerpColor() then assigns a color between the colors 1 and 2 based on the colorIndex, resulting in a gradient-like color change for each particle. Finally, it sets the stroke color to the blended color and draws a point at the particle’s position, creating a visually appealing color transition effect as the particles move. I wanted to focus more on the aesthetic appeal with this assignment, and the lerColor() assisted me a lot with that.

display() {
    strokeWeight(random(0.5, 1.5));

    // Define the two colors for the transition
    let color1 = color('#274df5'); 
    let color2 = color('#fafcfb');
    
    // map the color based on the angle for smooth transitions between colors
    let angleIndex = map(this.angle, 0, TWO_PI, 0, 1);

    // Interpolating between the two colors based on angleFactor
    let blend = lerpColor(color1, color2, angleIndex);
    
    stroke(blend);
    point(this.position.x, this.position.y);
}

As I was browsing on Pinterest for color and pattern inspiration, I came across Cameron Beccario’s near real-time visualization of global weather conditions. I found his project very interesting, interactive and somewhat connected to our last week’s reading (Casey Reas’ talk, especially the part about data visualization). Beccario’s choice of visuals and aesthetics also appeared similar to what I was going for with my sketch, thus I thought I would share:

https://earth.nullschool.net/#current/wind/surface/level/orthographic=-25.43,16.43,387

 

When I mention that I study Interactive Media, the response is often followed by a “What’s that?” To explain, I only give the example of the piano-ball piece in Professor Sherwood’s office, which produces different sounds when interacted with. After reading Crawford’s insights, I definitely have a better explanation to provide by talking about the dynamic two-way process, not one-sided reactions. This distinction makes me question my past experiences: did I truly interact, or did I merely react? What makes engagement meaningful, avoiding passivity and limitations?

Crawford’s views that speaking, thinking, and listening are fundamental to interaction makes perfect sense in human-human interactions. But what about human-computer interaction? Can an absence of one component, compensated by two others, make the interaction as unsatisfactory as he suggests?

Considering Crawford’s thoughts on user interface, interactive design and things that one should’t consider interactive, I recall a Netflix series I had seen, “You vs. Wild” with Bear Grylls. While it involves impressive design, filming, and conversations, its interactivity is scripted, lacking real-time interaction with Bear Grylls. This still provides users with an interactive experience, however, it might not be considered Interactive since it sways away from Crawford’s definition.

His final point, “Good interactivity design integrates form with function,” applies broadly, including to the Netflix series, where form (aesthetics and immersion) and function (user experience and purpose) merge quite well thus making it interactive.

In a nutshell, Crawford’s insights challenge conventional notions of interaction, prompting me to consider what truly constitutes interactivity. Whether in human-computer interaction or entertainment like “You vs. Wild,” the integration of form with function remains an important aspect of creating engaging and meaningful interactive experiences. It’s a reminder for me that in interactive design, aesthetics and functionality should move together to elevate the user’s overall experience.

Design Concept

This project portrays that in a box, there are various balls flying around and another rather distinctive ball floating inside. Every other ball experiences a force when approaching the yellow ball in the center. No matter how the yellow ball moves, other balls are driven away from it. My original intention is to remind people that there are bright spots in people, even if most reject or isolate them. However, it is also open to other interpretations since it only vaguely represents my intent.

Code I am Proud of

I am proud of the part where I implemented the particle effects of the balls traveling around. Originally, I wanted to implement an algorithm that makes the particles fly out in a certain cone range behind the ball. However, the effects are rather unsatisfactory. The particles fly out sequentially in an over-orderly manner. It was almost like the particles were in a line when the range of the cone was too narrow. Then I thought of the movements the balls are making. If the ball is moving, perhaps I could make the particles fly in all directions instead of only in a cone behind the ball. It will still form a coned trail as long as the particles have less velocity than the ball. The particles with the same direction as the ball will have less relative speed to the ball. Therefore, it will disappear close to the ball, and vice versa. This makes the trail look more chaotic and more like a trail instead of a projector.

class Particle{
  //xyz be the coordinates of the ball
  //dir is random plus direction of the ball
  constructor(x,y,z,dir){
    this.x=x;
    this.y=y;
    this.z=z;
    this.r=random(255);
    this.g=random(255);
    this.b=random(255);
    //Generate random cold color
    if(this.r>this.b){
      this.clr=color(this.b,this.g,this.r);
    }
    else{
      this.clr=color(this.r,this.g,this.b);
    }
    this.direction=p5.Vector.add(dir,p5.Vector.random3D());
    this.opacity=0.5;
  }
  
  //Displaying color
  display(){
    push();
    if(this.r>this.b){
      this.clr=color(this.b,this.g,this.r,this.opacity*255);
    }
    else{
      this.clr=color(this.r,this.g,this.b,this.opacity*255);
    }
    stroke(this.clr);
    translate(this.x,this.y,this.z);
    sphere(3);
    pop();
  }
  
  //Movement and change in opacity
  updateLocation(){
    this.x=this.x+0.5*this.direction.x;
    this.y=this.y+0.5*this.direction.y;
    this.z=this.z+0.5*this.direction.z;
    this.opacity-=0.015;
  }
}

Improvements

I wanted to do lighting on the balls, especially the central ball. However, I cannot understand the usage of shaders or other methods that can imitate lighting and light halos. Therefore, this project is not yet complete, and it should have lighting effects to indicate the size of the repulsion field of the central ball. Without the lighting, the theme that “even the most isolated people shine” becomes not obvious.

I find this reading very interesting because it was not until now I realized that interactivity is related to interaction. It never occurred to me that one-way interaction might not even count towards being interactive at all. When I actually think about it, I realize how reasonable the author’s claims are. If anything that moves when you interact with it is interactive, then anything could be interactive. You could potentially pick up a rock, throw it away, and say it is interactive. Then, there would be no meaning to the word “interactive.” The author’s definition of interactivity really gave me a lot of new insight into the term”interactive media.” This framework clearly separates and distinguishes interactive media from traditional media. Being interactive requires the media to somehow respond to the audience and improvise. Regarding media, it could only be done with algorithms and sensors, which traditional media doesn’t include.

Another thing I find interesting is the distinction between interactive design and traditional interface design. I always thought that interactive design is based on interface design and that there must be an interface basis to implement interactivity on top of it. It only occurred to me now that interactivity design could be much broader than interface design. There is much more to play with in interactive design, not just thinking about the aesthetics and alignment of elements on the page.

I found the reading to be quite intriguing as it prompted me to think what interactivity really is, a concept I had not given much thought to previously. Crawford’s definition of interactivity, drawing parallels with the dynamics of a meaningful conversation – involving listening, thinking and speaking – resonated with me. Throughout most of the reading, I found myself in agreement with his perspective on interactivity in various contexts.

However, I didn’t quite agree with Crawford when it came to his perspective on movies. He appeared to suggest that movies, inherently, lack interactivity. This reminded me of “Bandersnatch” a movie on Netflix that challenges this notion. In this movie, we as viewers have the opportunity to make choices for the characters, and the storyline changes depending on these choices.

Thinking about it a bit more, this difference in opinion really makes me wonder how media and storytelling are evolving. Traditional movies tend to stick to a linear plot, but “Bandersnatch” blurs the line between cinema and interactive storytelling, challenging our old-school idea of how movies work.

 It’s clear that interactivity is changing and adapting to new technology. We, as consumers, want more immersive and hands-on experiences in our media. While Crawford’s view has its merits, it might need a bit of an update to include these exciting, new forms of interactive storytelling that are turning our passive media consumption into an interactive adventure.