Concept of Interactivity 

In “The Art of Interactive Design” by Chris Crawford, the author raises a thought-provoking question that resonates with my own observations: “Interactivity does not always seem interactive in the eyes of the interactor.” This statement challenges us to reexamine our perception of what constitutes interactivity, as many everyday interactions have become so ingrained that we often overlook their interactive nature. Consider the simple act of opening a refrigerator—when these appliances were first introduced, people marveled at the way they responded to their actions, such as the interior light turning on. However, as time passed, this interaction became commonplace, and we no longer perceive it as interactive as it was. That brings me to the degrees of interactivity discussed by the author.

This notion of degrees of interactivity is crucial because it underscores our ability to develop increasingly interactive technology, games, and ideas that facilitate connections among people and generate new ideas and thoughts. It prompts us to question what truly defines interactivity. Is it primarily about entertainment and stimulation, and should interactivity be measured by the extent to which it engages us? Moreover, it’s essential to recognize that the definition of interactivity evolves over generations, particularly in the ever-advancing realm of technology. What was once considered interactive—like early computers that followed programmed orders—has given way to more sophisticated forms of interactivity, such as AI and robots capable of continuous learning and response. In this context, the concept of interactivity continually evolves, reflecting the ever-changing landscape of technological innovation, aside from the other evolving fields that involve interactivity like ways of teaching and learning, working with data, etc.

Concept: For this project, my inspiration came from an image I found on an Instagram account. Initially, I attempted to create a vertical wave effect and incorporate snow, but it didn’t achieve the desired visual result. As a result, I decided to shift my focus towards designing the sand and the waves, which evoked memories of my childhood spent at the beach. While I initially tried to create bird-like shapes, I ultimately chose to keep the design more abstract, allowing for interpretation by the user.

https://www.instagram.com/ag.lr.88/

Code Snippet: I take pride in the code that generates the sand grains because I achieved pleasing results by fine-tuning the parameters. I’m also pleased with how I implemented the wave motion, giving it a slower and smoother appearance, in addition to using the concept of Perlin Noise in general.

function Wave() {
  this.yPos = 0.001;

  this.display = function () {
    fill(118, 170, 206);
    // Drawing a polygon out of the wave points
    beginShape();
    strokeWeight(13);
    stroke(255);

    let xPos = 0;
  
    // Iterate over horizontal pixels
    for (let x = 0; x <= width; x += 10) {
      // Calculate a y value according to noise and map it
      let y = map(noise(xPos, this.yPos), 0, 0.8, 200, 380);

      // Set the vertex
      vertex(x, y);
      // Increment x dimension for noise
      xPos += 0.05;
    }
    
    // Increment y dimension for noise
    this.yPos += 0.002;
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
  };
}

// Create sand grains using a loop
  for (let x = 0; x < width; x += grainSize) {
    for (let y = 0; y < height; y += grainSize) {
      let grainColor = color(random(235, 245), random(220, 230), random(180, 190)); // Light sand grain color
      texture.fill(grainColor);
      texture.noStroke();
      let grainSizeX = random(grainSize * 1, grainSize * 3); // Adjust the X grain size
      let grainSizeY = random(grainSize * 1, grainSize * 2); // Adjust the Y grain size
      texture.ellipse(x + random(-grainSize / 4, grainSize / 4), y + random(-grainSize / 4, grainSize / 4), grainSizeX, grainSizeY);
    }
  }

  return texture;
}

 

Reflection:This project marked my first time using code snippets from online examples in P5.js. I enjoyed working with these examples and modifying them to match my creative vision. However, some of the functions and P5.js features used in these examples were unfamiliar and a bit complex for my current level of expertise. I spent a considerable amount of time exploring my own ideas from scratch, sometimes overlooking the new properties introduced in the examples. This experience highlighted the importance of experimenting with P5.js properties independently before incorporating more advanced techniques that may surpass my current skill level.

 

References:

https://p5js.org/examples/

https://www.schemecolor.com/beach-front.php

Concept:

While trying to find an idea and looking back at my dance floor from last week I knew it was missing the life that I wanted to give it in order to be as 80s as possible so i choose to add some movement to it using rotating tiles to give it life but also to stimulate the sensation of dancing till we are tired since I imagined this was a common thing in the crazy 80s additionally.

Move the mouse across to see it come to life!

Highlight of the code

// Display the tile at its position, with a specific effect based on its position relative to the circle
display(insideCircle) {
  push();
  translate(this.x + 10, this.y + 10);
  rotate(this.angle);
  if (insideCircle) {
    fill(this.col);
  } else {
    fill(150, 150, 220, 150);
  }
  rect(-10, -10, 20, 20);
  pop();
}

// Rotate the tiles outside the circle
rotate() {
  this.angle += 0.02;

My favorite part of the project was seeing my idea quite literally come to life as the tiles started rotating, it was beautiful and magical in my opinion because i had never use the translate function and as a first time I think it cam out pretty good and exactly how i wanted it to be when i first re-started this piece. Through the rotating tiles I wanted to give the dance floor life but also wanted to through a subtle reference to the funky shapes and neon colors that were trendy at the time hence the choice of color and tile shape and choice to use rotation because I knew that once they are together they will make those funky shapes I was trying to get. Once again I used OpenProcessing (refer to last post to see the details about how to use this goldmine) but also the youtube video “Rotating Tiles and Animation in Tiles” by steve’s makerspace to be able to understand how to do it.

In details, display(insideCircle) draws a tile on the canvas, with its appearance varying based on its position relative to a circle. With the use of push and pop, all of the transformations and styles are localized. It shifts the drawing’s origin to the tile’s center with translate, and then rotates it and sets the tile’s color to be specific randomized color to the tile using an if else, if it’s inside the circle then it will be color, else it will be semi-transparent blue. The tile is drawn centered on the new origin with and the rotate function gradually increases the tile’s rotation angle, creating a spinning effect for tiles outside the circle.

Future changes:

In the future, I would love to be able to add a song and synch the tiles movement to it to make it more rave like and more alive but overall i’m really really happy that i continued to work on it and now has more life than I thought I could give it.

Just like every Interactive Media major (or people who intended to major) who once was a freshman fighting to get a spot on any of these courses, I always used to wonder what exactly this name meant. What makes media interactive? And especially, as mentioned in the text, to what extent can (or should) our media be interactive?

Diving into the world of User Experience Design, I learned that interactivity is a result rather than a component we can add to our projects. In some sense, proper user interaction ends up being more of a reward, born from “good/correct” design decisions, rather than a feature added inside our work. As much as it’s ideal to think of interactivity as a simple exchange of information as in: the developer sets a certain function for the user, the user makes use of it, and feedback returns, reality shows us that it is not easy. Humans are attracted to certain things, and interaction is the ultimate signal of respect for them. We touch whatever thing we are curious about, we smell it, we taste it and we look over and over for it. The question comes as to whether our projects are able to return that feeling. Are our objects able to talk? If so, then our interactivity is born essentially from how well they can also listen to the feedback that they will receive. If we can portray information, but most importantly, if we can, at the same time, receive and react to the information that comes back, then we have achieved interactivity.

User interaction has a long way to go. AI has shown that we are easily capable of generating a high level of interaction with machines, either verbally or virtually. Therefore, I am more than excited to see what the future of user experience and interaction has in store for us.

 

Concept/Inspiration:

This week, we dived into object-oriented programming and arrays. I wanted to utilize a certain movement on a set of objects, and for that, I decided to arrange an array of shapes that would be independent but would also have a function that could move them in a certain pattern.

My inspiration came from a phenomenon called the “Butterfly Effect”. For those who don’t know, the butterfly effect is the idea that small things can have non-linear impacts on a complex system. The concept is imagined with a butterfly flapping its wings and causing a typhoon.

Therefore, in this sketch, there are multiple variables that rely on the random() function in order to show shapes on screen.

WARNING: The sketch plays multiple colors shaking at a really fast speed. If you are sensible to any of these effects, please proceed with caution.

Code Highlight:

In order to make every shape move on its own, I decided to modify the X, Y values of the object itself. The class would contain a function called move() that would slightly change the X and Y of the object by a random value. This random value will change based on the mouse position to create the idea that the “tornado” is following the mouse.

class Form {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }

  move() {
    if(mouseX>=this.x){
      this.x = this.x + random(5);
    }
    else{
      this.x = this.x + random(-5);
    }
    
    if(mouseY>=this.y){
      this.y = this.y + random(10);
    }
    else{
      this.y = this.y + random(-10);
    }
    
    //vibration. Can also use perlin noise.
  }

Future Improvements:

I realized just after writing the code that several parts of the structure could have been improved. One big thing I missed while writing it was the fact that I could have attached the color to the object in order to make every shape a random color. However, I decided to keep it as it is because it would look too fuzzy. In the future, I would like to plan accordingly how I intend to express my inspiration, because even though this topic (butterfly effect) offered many different possibilities, but I couldn’t adapt any of them to P5js.

Concept

Initially I wanted to recreate the Dubai Eye wheel, however due to complexity of the intricate structure of the wheel, I decided to channel my creativity and imagination to design a simpler but visually captivating ferris wheel. The core idea was to create a dynamic scene where a whimsical ferris wheel continuously rotates against a serene evening sky backdrop. This piece combines the charm of a classic carnival ride with the enchantment of a starry night, offering viewers a sense of nostalgia and wonder.

Highlights

class FerrisWheel {
  constructor(x, y, radius, cabins) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.cabins = cabins;
    this.angle = 0;
    this.cabinWidth = TWO_PI / cabins;
  }

  update() {
    this.angle += 0.01;
  }

  display() {
    for (let i = 0; i < this.cabins; i++) {
      let cabinAngle = this.angle + i * this.cabinWidth;
      let cabinX = this.x + this.radius * cos(cabinAngle);
      let cabinY = this.y + this.radius * sin(cabinAngle);

      stroke(255);
      fill(220, 220, 220);
      line(cabinX, cabinY, this.x, this.y);
      
      fill(255);
      stroke(0);
      drawCabin(cabinX, cabinY);
    }
  }
}

The highlight of my code would be the ferris wheel class itself. Initially, the cabins on my ferris wheel remained static, failing to mimic the natural rotation of a real ferris wheel. This static appearance detracted from the realism and overall visual appeal of the piece. figuring out the math behind making the cabins move as the wheels rotate made the entire piece look so much more realistic.

The update and display functions play the most important role here. In the “update” function, a subtle but crucial change occurs as the “angle” of the wheel is incrementally adjusted by 0.01 units with each frame update. This seemingly minor alteration is, in fact, the driving force behind the entire dynamic effect. The magic happens in the “display” function. Here, a loop iterates through each cabin, accurately calculating their positions based on the current wheel rotation angle. By incorporating trigonometric functions,”cos” and “sin,” the cabins are positioned equidistantly around the wheel’s circumference. This calculation ensures that each cabin moves synchronously with the wheel’s rotation.

Reflection

In hindsight, while my final art piece has achieved a significantly more lifelike representation, I think there is still room for improvement. If given the opportunity for further refinement, I would consider the addition of towering skyscrapers in the background. This addition would not only serve to augment the visual appeal of the artwork but also create a captivating juxtaposition between the timeless charm of the ferris wheel and the modern urban landscape, further enriching the narrative and depth of the composition.

 

Concept: Mimicking Organic Patterns

For this assignment, I wanted to implement insects and add behaviors to them that would give rise to organic patterns that are found in nature. For example, slime mold exhibits fascinating patterns when searching for food.

I wanted to recreate this effect. However, I was unable to achieve this. Still, I managed to create a class-based visual that is interesting in its own way.

Process

After watching some videos on simulating ants and slime mold, I wanted to work on a similar project as I loved the results. I would play around with the visuals that I could achieve, but I wanted to create the visuals based off of movement of some insects.

I decided to create an insect class that would leave trails behind it as it moved. Initially, I wanted to create trails that would allow ants to seek out the best route to food, and back to their home. However, the logic that I implemented did not achieve this. Instead, I decided to make the trails look aesthetically pleasing and added random movement to give the insects some life-like feeling.

Code Highlights

My favorite part of the code was making the trail diffuse. Since I implemented the trail on a grid layer, all I had to do was to create weaker trails on the surrounding grid cells. The code that does this is as follows:

diffuse() {
    //if the trail  is too weak, don't diffuse
    if (this.life <= 9) {
      return;
    }
    //diffuse the trail
    let i = floor(this.x / gridSize);
    let j = floor(this.y / gridSize);
    let x = i * gridSize;
    let y = j * gridSize;

    let intensity = this.life / 4;

    //add the weaker trails to the surrounding cells

    for (let x = i - 1; x <= i + 1; x++) {
      for (let y = j - 1; y <= j + 1; y++) {
        if (x >= 0 && x < trails.length && y >= 0 && y < trails[0].length) {
          let weakerTrail = new Trail(
            x * gridSize,
            y * gridSize,
            gridSize,
            this.type,
            intensity
          );

          //add the trail  to the cell
          trails[x][y] = weakerTrail;
        }
      }
    }
    this.life = intensity;
  }

Not only do the trails fade over with time, but they spread out if they are strong enough. This is what allowed the fading away effect to emerge.

Reflection

While working on this project, I realized that I need to measure the scale of the project better beforehand. This project was a massive undertaking and so I had to give up some of my goals due to time constraints. Going forward, I need to plan the project with respect to the time frame so that I can achieve what I want to for the project.

However, I love the actual effect that was produced in the end. It reminds me of The Game of Life, and maybe my grid-based implementation for the trail markers is why such a similar effect emerged. Nonetheless, I’m happy with the way this project turned out.

Sources

Slime Mold – Audrey Dussutour

Coding Adventure: Ant and Slime Simulations – Sebastian Lague

What exactly is interactivity?

Chris Crawfords chapter on “What is Interactivity” was interesting because I had never thought about formally defining interactivity before. Since Crawford was trying to do so, I approached the reading as if I were a skeptic, trying to think of a counter argument to anything that Crawford proposed.

Crawford insists that interaction is the name of the exchange between two actors as they listen, think, and reply to one another. I was about to ask what exactly an “actor” is to Crawford, but he replied not soon after. For him an actor is a “purposeful creature”.  This is still a bit unclear to me. Right then he mentions that a fridge that is programmed to “react” to someone opening the door by turning on its light is not what he is considering as an actor, but rather what he wants is “interactivity that has some blood in its veins.” To me this just means that he does not want include entities whose decision-making is too simplistic in his notion of interactivity. Humans are one type of actors that Crawford would accept, and the replies that they can generate are on a spectrum when compared to the refrigerator that can only turn on or off as a reply to an input. As such, Crawford’s definition of interactivity required the actors to have a certain degree of complexity.

Thinking about this for a little bit, I did not find myself disagreeing with this notion. He insists that interaction is different from reaction, and even though I’m taking the skeptic’s position, I will have to agree with him on that. So far, I’ve accepted the notion that interaction needs two actors to listen, think, and reply to one another. However, I thought of moments when I’ve had small talk and conversations without purpose. By this definition, it would seem that such conversations would not be interactive. It seemed a bit counterintuitive that a conversation is non-interactive, but as I thought of this I read through Crawford’s position on the subjectivity of interaction, and his proposed solution to it. He insists that interaction can vary on a spectrum, and that interactivity is just a measure of how much thinking, listening, and replying occurs during an exchange. As if he had read my mind, the example of trivial conversations was one that Crawford used to explain the spectrum of interactivity.

Was the book interactive then? It certainly felt like it. However, by Crawford’s proposed definition it was definitely lower on the scale than an engaging conversation. Although it felt like I was conversing with someone who had just read my mind, the ideas in the chapter were stagnant, unchanging to my thoughts. For a moment they seemed to be a reply to my thoughts, but I know better than that. Still, this gave Crawfords definition a merit in my books.

After going through the entire chapter, I wonder what the epitome of interactivity would look like. One technology that comes to mind is artificial intelligence. I think the reason AI fascinates us is because it is a technology that is much higher on the interactivity scale. When interacting with AI technology it feels as if there is more complex thinking involved in the interaction between us humans and technology. If interactivity is one measure of how good a program is, then is a perfect program one that uses some AI algorithms to tailor its function and form to our needs?  If such tailoring is done, then what is the need of specialized programs. When I imagine the peak of interactivity, I think of something without a predetermined form. A single program that is an amalgamation of every possible program but does not have form until it is interacted with.

I have always viewed interactivity as a simple “switch” where something is either interactive or not, with no middle ground. However, Crawford’s nuanced exploration of the concept as a spectrum rather than a binary has opened my mind to a more complex understanding of the concept.

Crawford believes there can be varying levels of interactivity and his use of conversations as a metaphor to illustrate his idea struck me the most. He views interactivity as having 3 essential components.

First, there’s the “listening” component, representing the user’s input or actions. This marks the point where users engage with the system or content. It’s where users contribute their choices, commands, or interactions to an ongoing conversation.

Following that, there is the “speaking” component, where the system responds to the user’s input. Here, the system acknowledges the user’s actions and provides feedback, making users feel heard and valued within the interaction.

Finally, there is the “reacting” component, which encapsulates the user’s response to the system’s feedback. This is where users assess whether the system’s response aligns with their expectations and intentions. It’s intriguing because it underscores the user’s agency and their role in shaping the direction of the interactive experience.

I think this more nuanced approach to understanding interactivity can have a significant impact on design in the sense that it encourages a more thoughtful and user-centric approach. By recognizing that interactivity exists along a spectrum, designers can tailor their creations to align with the specific goals and preferences of their audience. For example, when it comes to designing mobile apps, with the realization that interactivity isn’t a binary on-off switch, designers can employ a variety of interactive elements to enhance the user experience. They might incorporate features that range from simple taps and swipes for quick interactions to more complex decision points and branching narratives for deeper engagement. This flexibility allows designers to cater to a broader audience, accommodating both users who prefer a streamlined, efficient experience and those who seek a more immersive and participatory one.