Category: Spring 2024 – Aaron (Section 001)

Reading chapter of ‘The Art of Interactive Design,’ made me think about my understanding of interactivity, where the author offered dynamic exchange of ideas to redefine what interactivity really is. This perspective pushes against the grain of conventional digital design, where interaction is often mistaken for simple user interface manipulations. Reflecting on this, one inference that came to my mind was the depth of our daily digital engagements—are we truly interacting, or just reacting? I believe that author’s argument that true interaction involves a meaningful exchange where both parties listen, think, and respond, gives us a different conceptual framework and also make us critically examine our roles as designers and users in the digital realm.

Another critique that’s presented in the reading stirs a debate of what we value in interactive experiences. Which also more seems to be like a call to action for creators and consumers alike to seek out and foster genuine connections within digital spaces. Reading through this chapter also has truly reshaped my understanding of what makes design genuinely impactful. It’s made me rethink my previous stance on what effective design truly means, guiding me towards valuing deeper, more meaningful interactions over just eye-catching or user-friendly interfaces. This new insight is quite enlightening; it opens up a whole new world of questions about how we can create digital experiences that foster real, two-way conversations with users. It’s not just about altering my viewpoint; it’s about sparking a curiosity to explore how these insights could revolutionize our interaction with technology, making it more immersive and interactive in truly meaningful ways.

Jihad Jammal

 

Intro to IM

 

Professor Aaron Sherwood

 

Reading Reflection Week 4

 

Feb. 12, 2024

 

 

Reimagining Interactivity in the Digital Age

After reading “The Art of Interactive Design,” I find that Crawford’s definition of interactivity has a significant impact on how we use technology in our daily lives. It forces us to reevaluate not just how we create technology but also how we interact with it in our daily lives. I agree with Crawford’s focus on the conversational, cyclical aspect of engagement, which draws attention to the contrast between the promise of digital technology to foster deep human connection and the transactional, often surface-level interactions they currently encourage (Crawford, 2003). This viewpoint calls for a more deliberate use of technology, pushing us to look for and produce really engaging experiences that promote sincere communication and comprehension.

Furthermore, Crawford’s research also poses important questions regarding the viability of this kind of in-depth communication in the framework of social media and mass media. In an age where algorithms are increasingly mediating digital connections, how do we create systems that facilitate meaningful discourse at scale? This motivates us to think of how users and designers might influence the direction of interactive design in the future (Crawford, 2003). Furthermore, it motivates users to seek out more deliberate technological engagement, moving from passive consumption to active involvement. It emphasizes the significance of promoting designs that value depth and quality of interaction, proposing a transition towards more human focused technology ecosystems, as someone who is interested in the larger effects of technology on society (Crawford, 2003).

Citations:

Crawford, C. (2003). The art of interactive design : a euphonious and illuminating guide to building successful software. San Francisco: No Starch Press.

Click on the art to interact and create your own flower garden!

//Define the Flower class to represent each flower in the garden
class Flower {
  constructor(x, y) {
    this.x = x; //X position of the flower on the canvas
    this.y = y; //Y position of the flower on the canvas
    this.size = 5; //Initial size of the flower, to be grown over time
    this.growthRate = random(0.05, 0.2); //Random growth rate for dynamic visuals
    this.fullSize = random(30, 70); //Target size of the flower when fully grown
    this.petals = floor(random(4, 9)); //Number of petals, randomly chosen for variety
    this.petalSize = this.fullSize / 2; //Determines the size of each petal
    this.color = [random(100, 255), random(100, 255), random(100, 255)]; //RGB color of the petals, chosen randomly for diversity
  }

  //Method to simulate the growth of the flower
  grow() {
    //Increase the size of the flower until it reaches its full size
    if (this.size < this.fullSize) {
      this.size += this.growthRate; //Grow based on the predefined rate
    }
  }

  //Method to display the flower on the canvas
  show() {
    push(); //Save the current drawing state
    translate(this.x, this.y); //Move the drawing origin to the flower's location
    noStroke(); //Petals and center will not have an outline
    fill(this.color[0], this.color[1], this.color[2]); //Set the color for the petals
    
    //Draw each petal around the center
    for (let i = 0; i < this.petals; i++) {
      rotate(TWO_PI / this.petals); //Rotate the drawing context to evenly space petals
      ellipse(0, this.size / 4, this.petalSize, this.size); //Draw an ellipse for each petal
    }
    
    //Draw the flower's center
    fill(255, 204, 0); //Color for the center of the flower
    ellipse(0, 0, this.size / 4, this.size / 4); //Draw the center as a smaller ellipse
    
    pop(); //Restore the original drawing state
  }
}

let flowers = []; //Array to hold all the flower objects

function setup() {
  createCanvas(800, 600); //Set up the canvas
  background(0); //Initial background color
}

function draw() {
  background(0); //Clear the canvas at each frame to redraw updated flowers
  //Iterate through each flower in the array to update and display it
  for (let flower of flowers) {
    flower.grow(); //Simulate growth
    flower.show(); //Draw the flower on the canvas
  }
}

function mousePressed() {
  //Create a new Flower object at the mouse position when the canvas is clicked
  let flower = new Flower(mouseX, mouseY);
  flowers.push(flower); //Add the new flower to the array
}

The title of this artwork is “The Flower Garden”. The overall concept of this generative art piece is to simulate a digital garden where flowers can spontaneously grow at locations chosen by the user. Each flower starts small and grows over time, with a unique number of petals and colors, creating a diverse and evolving garden scene. This interactive piece allows viewers to contribute to the creation of the artwork, making each experience unique.

Use of Arrays and Objects in OOP
Arrays: The flowers array is used to store multiple instances of the Flower class, showcasing how arrays can manage collections of objects in an OOP context.
Objects: Each flower is an instance of the Flower class, with its properties and behaviors encapsulated within the class. This demonstrates the use of objects to model real-world concepts (like flowers) with data (properties) and actions (methods).

I tried to create an interactive and visually appealing art, allowing both the creator and the viewer to explore the intersection of nature, art, and technology. The inspiration behind this artwork was the concept of similar virtual garden apps/games that allows users to have their garden, creating and nurturing the flowers in it. I tried to make a similar version of it with vivid colors and shapes. The part I most loved is how the flowers actually look – I think they’re very pretty and when they’re blooming it gives a calm and soothing feel to the viewer.

Here’s how it looks when the garden is full of flowers:

I made another one with some revisions(added stem and two leaves to each flower):

Full garden:

Here are some other designs I kinda played with:

In the provided text, Chris Crawford goes into the complexities of interactive media, attempting to create a specific definition while distinguishing its numerous manifestations.

In my opinion, there is a need for a broader appreciation of interactive media, which is often misunderstood as essentially superficial. However, I am confident that beyond its surface lurks great depth and importance.

Finally, I encourage for collaborative initiatives to help individuals and communities get a better knowledge of this fluid industry.

For this assignment, I decided to take my previous work and try and make it interactive. I have to admit that it took me longer than expected but I eventually got there.

First step was the code. I had to find a way in which I could create firstly a ball that was moving on the screen. After that, I just had to make a bunch of them and make them move in different directions.

I decided to make the colors of the circles random because I thought it might end up being colorful, which it did.

Regarding challenges I think that the constructor was the thing that took me longer but I eventually made it work.

END RESULT:

 

This reading totally shifted my thinking on what interactivity really means. The metaphor of a back-and-forth conversation was a lightbulb moment for me. Like two people listening and responding to each other. It clearly shows why a book isn’t truly interactive even when it fully engages me. A book just conveys information, oblivious to my reactions. It doesn’t necessarily tailor itself to me.

Framing interactivity as a spectrum rather than a yes/no thing landed perfectly too. It’s like turning the volume up and down – experiences can be more or less interactive. A video game responds more to me than a cooking show I passively watch. And good graphics or UI design is only part of the equation – you have to build in that two-way communication. Looks alone don’t cut it.

I’ll admit some sections felt dense on first read. But the big takeaway was that interactivity isn’t just about engagement, it’s about a back-and-forth exchange where both parties actively listen and speak. Measuring where something falls on that spectrum makes me evaluate all kinds of media differently now. How much am I conversing rather than just being “spoken to”? Food for thought as I wrap my head around design. Overall, this was a solid, informative read.

In “What Exactly Is Interactivity?”, the first Chapter of Chris Crawford’s book, “The Art of Interactive Design,” Crawford attempts to lay down a definition of what interactivity entails from which certain guidelines for interactive design could be extrapolated. He essentially posits that interactivity is a cyclic process of listening, thinking, and speaking that involves two or more actors – much like the process of conversating with other human beings. Going off this definition, Crawford weeds out certain activities as “non-interactive,” from reading books and watching movies to dancing and attending theatrical performances. By arguing that participation in these activities involves a “strong reaction,” which is qualitatively different from strong interaction, he excludes these forms of activities which may be labeled by some as interactive as strictly devoid of the necessary back-and-forth between actors that characterizes high levels of interactivity.

One of the things I appreciated about Crawford’s discursive thought process as he distills what makes things interactive, in addition to his humor and the use of examples to illustrate his points, was the idea that interactivity does not have to be an exclusive binary, but could be assigned a value on a spectrum from low to high. Based on this approach, people subjectively assign degrees of interactivity to certain activities. It did, however, strike me as a little contradictory to go on to adjudicate that some activities were definitively non-interactive, even though some may experientially feel like they were. It also begs the question of whether different people were unified in their understanding of what interactivity is when assigning values to the degree of interactivity they experienced.

Crawford then goes on to theorize the differences between user interface and interactivity designers. While the former mainly considers structure and form, the latter is more concerned with how a given target function is best served by one form over the other. He also makes the observation that interactivity designers come from a less technical background and are often underserved by their inability to match the more established knowledge,  frameworks, and technical expertise employed by their counterparts in the user interface domain.

The definition of interactivity as a recurring process of listening, thinking, and speaking stuck with me as I contemplated the forms of interactivity that people claim to have incorporated into their work when making web applications or digital artworks. While conversations are dynamic, forward-moving, and seldom repeating, many of the interactive elements embedded in digital creations are rarely so. In conversation, actors have a large space of sentences to choose from when speaking and an almost infinite thought space from which a thought could form. This leads to conversations that are new and fresh every time. In the digital space, this is less likely as user interaction is restricted to a small set of defined actions (e.g. clicks or movements) that are mapped to algorithmically consistent behaviors. How do we then emulate the full range of fluidity that true interactivity entails, given that we are sometimes restricted by computational resources? I think the rise in generative AI tools is definitely getting us closer to actualizing Crawford’s interactivity. I am, however, left wondering if Crawford’s definition of interactivity is restrictive. It seems to place high expectations on designers to equip themselves with higher-end technologies to satisfy Crawford’s interactivity guidelines, which may counteractively act as a deterrent.

Concept

For this assignment, I wanted to build on top of ideas I thought of last week, particularly leveraging organic shapes in nature to produce generative, and *somewhat* interactive art. I especially wanted to dabble with mathematics and its ability to generate aesthetic abstractions and animations. To that latter point, my mind immediately shifted to the complex and patterned loops defined by parametric equations. I came across Re-generate, a work by Akshan Ish, that utilizes shapes governed by parametric relations, and was immediately inspired to adopt the concept. As I thought about possible shapes I wanted to recreate, I thought of butterfly shapes, and just as I hoped, I found a parametric curve that modeled them. With the mathematics by my side, I was now ready to translate it into a p5.js  animated, generative sketch.

Process, Challenges, and Implementation

I created a butterfly class from which butterfly objects would be instantiated. The main attributes specified the starting point coordinates, the angle from the x-axis in the Cartesian plane used to control the drawing of the wings, the parameters that control the magnitude of the radius, the color of the stroke (which is randomized from a given color palette, and the angle that controls the rotation of the Cartesian plane so that different objects will be drawn from a different starting point. Having the explicit equations for the x and the y parameters facilitated things for me as I would have had to derive them myself otherwise. One thing I had struggled with a little bit here was making the curve draw incrementally over time. After realizing that the angle determines how much of the curve is drawn, it became evident that incrementing the angle in every frame by a little bit and drawing up to that point would essentially produce that effect.

class Butterfly {
  constructor(x, y) {
    this.x = x; // starting x location 
    this.y = y; // starting y location 
    this.theta = 0; // current drawing angle 
    // choose a random color from the color palette for the butterfly animation
    this.color = random([
      color("#7c9eb7"),
      color("#c5d6db"),
      color("#ffd3d7"),
      color("#ffc20c"),
    ]);
    // controlling hyperparameters for the butterfly shape 
    this.b = random(3, 6);
    this.a = random([4, 6]); 
    // variable controlling the rotation of the object 
    this.angleRot = random([-1, 1]) * random([0, 1, 2, 3, 4]);
  }

  drawButterfly() {
    push(); // save the current drawing state 
    translate(this.x, this.y); // move the origin to the object's position
    stroke(this.color); // set the stroke color based on the chosen color 
    rotate((this.angleRot * PI) / 4); // rotate the object 
    noFill(); 
    strokeWeight(1);
    beginShape();
    // draw the curve 
    for (let i = 0; i <= this.theta; i += 0.1) {
      // calculate the radius based on the parameteric equation for the butterfly curve 
      let r =
        exp(sin(i)) -
         this.a * cos(4 * i) +
        pow(sin((1 / this.b) * 12 * (2 * i - PI)), 5);
      // calculate x and y position of the curve 
      let x = r * cos(i) * random(10, 20);
      let y = r * sin(i) * random(10, 20);
      // draw circle 
      curveVertex(x, y, r);
    }
    endShape();
    this.theta += 0.01; // increment theta for animation 

    pop(); // restore original sketch state 
  }

  finished() {
    return this.theta > TWO_PI; // to indicate that the drawing of the shape has ended 
  }
}

When the sketch is played, a Butterfly object is inserted into a global array of butterflies. The user can add objects to the sketch at any location by pressing the mouse. Once a butterfly object is drawn in full, it is deleted and another object is instantiated in its place at a random location. One issue I encountered was that the more objects I created by pressing the mouse, the more overcrowded the sketch became. I tackled the issue by placing bounds on the length of the butterfly array so that objects are only re-instantiated only if the array size does not hit a certain maximum size.

Admittedly, I had a lot of fun playing with different shapes and introducing randomness and Perlin noise into the sketch. I found that different methods produced different emergent qualities. For instance, curves with randomness were akin to children’s drawings on a blackboard, but with Perlin noise, they were more seamless and refined. Circles with randomness had a glowing radiance that reminded me of fireworks or diamonds. The use of circles with Perlin noise, however, elicited a more abstract effect and almost had a level of depth to it that I liked. Here are images from the four experiments below.

3.1 – Lines with Perlin noise 3.2 – Circles with randomness3.3 – Lines with randomness3.4 – Cirlces with Perlin noise 

Embedded Sketch

I am embedding the sketch that I liked the most. The p5.js sketch for each of these can be found by clicking the URL linked with the caption below each one of the images above.

Reflections and Ideas for the Future

What I loved about the process of creating these sketches was how it naturally flowed from my earlier projects and how it amalgamated the power of mathematics to create something generative and abstract yet still organic and nature-inspired. I want to continue experimenting with different polar curves and to continue abstracting my work and learning more advanced animation strategies.