Category: Spring 2024 – Aaron (Section 001)

Overview

As a starting point, I decided to experiment with our class codes and test color palettes, and through that, I stumbled upon shades of blue and pink that immediately reminded me of a scene from the famous movie “Coraline.” With that in mind, I decided to recreate, or at least attempt to, the tunnel to the other world. In the movie, when Coraline is trying to escape the Other World, she notices that the tunnel feels longer each time she uses it, and steeper. That was my goal for this assignment, and using functions helped me achieve it.

Highlight

class RotatingPolygon {
  constructor(centerX, centerY, x, y) { 
    this.centerX = centerX; //center x coordinate
    this.centerY = centerY; //center y coordinate
    this.x = x; //starting x coordinate
    this.y = y; //starting y coordinate
    this.angle = atan2(this.y - this.centerY, this.x - this.centerX); //calculate initial angle
    this.speed = random(0.01, 0.03); //set random rotation speed
    this.radius = dist(centerX-300, centerY-100, x+20, y-20); //calculate radius
    this.sides = int(random(5, 10)); //randomize number of sides for each polygon
  }

An aspect of the code that I take pride in is the usage of cosine, sine, tangent, and pi, along with the radius; they were very useful. Something new I learned was that atan() gives an angle value between -90 & 90, whereas atan2() gives an angle value between -180 & 180. I am also proud of how easy it has become to change the outcome with a simple adjustment, given that I have created a class for rotating polygons (I initially had circles/ellipses but that wasn’t accurate enough). Though I must admit that many of the elements have been the result of trial and error, and I am still exploring this very interesting idea of using OOP in creating graphics.

Reflection

Attempting to replicate the colors from the original scene was definitely challenging, especially since I had already included transparency/opacity components. I believe there is room for improvement in that aspect. In addition, it took some time to understand where and how to position all the shapes accordingly and in line with the original scene. Overall, I believe that I’ve created something worth sharing!

Once, a very thirsty traveler came to the bar and asked, “Water!”

The bartender, raising an eyebrow, says “Sure, sire, would you like room temperature or icy chill water 🥛?”

“Uh, cold please”

“Do you lean towards distilled, mineral, or perhaps a sparkling variety?”

The traveler scratching his head says, “Just regular water is fine”.

The bartender goes “In terms of regular water, we have classic spring regular water or purified tap…”

---

Judging by Chris Crawford’s Interactive Design definition, this is an interactive process.

• There are two actors – the bartender and the traveler
• They actively listen to each other,
• and think (Whether bartender thinks or not is debatable)
• and speak

The only catch here is that this interactivity “did not solve the problem”.  They did interact, there is flow of information between them, but the problem remains unsolved.

Just like how Crawford ranted about people in that day and age re-brands “The Same Old Stuff” as “New Interactive Technology” with hype and criticized how the “plays” ranks about a 0.01 on a 10-point Crawford Scale of Interactivity, I am also going to use this writing to rant about how his interactivity definition ranks pretty low (say around 3.14ish) on the 100-point Pi’s scale of Aesthetic Practicality. This definition of [Interactivity = “two actors” AND “listen” AND “think” AND “speak”] ought to be, at least expanded to be applicable.

Expanding the definition of Interactivity

Personally, when I encounter “Interactivity” I see it not as a “process” (unless you are dealing with human to human problems, where you have to Talk It Out Loud ™). Normally in the context of Human-Software Interactions, UI/UX design, interactivity is about how efficiently you can give the user the complete tutorial so that they can utilize the system with minimal guidance.

On more formal terms, if we ignore the video game industry (because by definition, games have to be interactive), I see interactivity as a measure of “the rate of transfer of information between two agents (i.e. Human-Computer), where this transferred information helps solve human problems using the computer with minimal input in minimal time.” just as in the diagram below.

Note that my definition explicitly states that the more interactive the system is,

1. the more time it saves and
2. the less guidance it needs to give the user in the future.

Otherwise if we go by Crawford’s definition, we fall into the danger of “Impractical Interactivity Deadlock Situation” where two parties keep on interacting without results, just like the bartender joke above.

In short, the holy grail of “Interactivity” is, ironically, to minimize more “interactivity” in the future. Because if you have to keep interacting… if you have to keep going to the bank because the bank customer service keeps tossing you back and forth with other departments and your credit card issue is still not solved, the “interactivity” is simply … not “interacting”.

In short, the holy grail of “Interactivity” is, ironically, to minimize more “interactivity” in the future.

~ Pi

Best Interactivity is Implicit Interactivity, change my mind

Personally, I agree with Crawford, that “Good Interactivity Design integrates form with function.” However, the only pebble in my shoe is that Crawford has the explicit “speak” component in his definition. In a well-designed software, you don’t necessarily have to explicitly speak. The good design speaks for itself, learning curve is so smooth such that the users enlightens themselves without any guidance and hitting F1 for user manuals.

There was a good old time in the UI design when “Skeuomorphism” – a user interface design which adds real-world design cues to virtual objects to make those objects more understandable.

This is the perfect marriage of form and function.

For instance, just look at the Garage Band guitar User Interface.

Super short, sweet and simple. Anyone who have intimately slid their fingers up the fretboard , do not need additional tutorial in order to play the Garage Band guitar. It is intuitive. There is no need to explicitly have the expanding speech bubble saying “In order to use the overdrive/flanger pedal, tap here.”

Also, the interface is just beauty in purest form 😌👌.

The design itself is already intuitive and interactive.

However, just like the average American marriage [source], after 8 years, the form and function got a divorce ☠️… and the entire world catches minimalism/flat design virus, to the extent that where intuition is murdered (Yes, I am looking at you, Material Design and Neumorphism).

The best example of the such worst UI nightmare is the audio mute/unmute icons.

 

After years of experience during COVID, and after using Zoom countless professional settings, my dad still cannot tell whether the audio is muted or not just by looking at the button. (Does red color mean that it is already muted? Or I click the red and it will mute?)

Whereas a sensible, more intuitive audio on/off button will look more like this.

(Flip the switch, light means it is currently on, no light means it’s currently off… Everyone know this from interacting with other electronic gadgets, there is no need to specially train the user)

Hence, when you don’t have this auto intuition built into the original design, explicit interactivity (a.k.a. helper texts here and there, or your IT support guy) has to come in unnecessarily. This interactivity is just a bloat in the system, and a waste of space, and resources.

Well, as they say “Communication is key”, I appreciate the importance of interactivity in human-software interactions. However, in the context of Good software, such “talk-back” explicit Interactivity should be the last resort a good designer should fall back to.

A good doctor doesn’t easily prescribe antibiotics… this is supposed to be the last resort.

Hence, from the artistic engineer point of view…. When designing anything, intuitive function has to come first, then the form, and only then throw in the “explicit” when there is no other way out.

Perhaps, it is time we rebrand Crawford’s definition to Practically-Aesthetic-Interactivity (abbreviates to PAI? Hahaha, very punny Pi, very punny.), and we may be…. just may be… see better intuitive software in the future.

In this assignment, I developed a serene landscape populated by butterflies, clouds, and flowers, inviting viewers to immerse themselves in a tranquil virtual environment.

Key Elements:
– Butterflies: Colorful and graceful, the butterflies are the focal point of the scene. Programmed to flutter across the canvas, their movements are dynamic and captivating.
– Background: The canvas serves as a backdrop for the scene, featuring a gradient sky and soft, rolling clouds that drift lazily across the horizon.
– Flowers: Adding depth and detail to the landscape, flowers bloom sporadically, their vibrant colors contrasting against the lush greenery.

Conceptual Framework:
The project draws inspiration from the beauty and harmony found in the natural world. By combining artistic vision with computational techniques, the goal is to evoke a sense of wonder and serenity, inviting viewers to momentarily escape the confines of reality and immerse themselves in a digital oasis of creativity and beauty.

This assignment provided an opportunity to explore the intersection of art and technology, demonstrating how code can be used to create immersive digital experiences that transport viewers to captivating virtual worlds. Through careful design and implementation, the project aims to evoke a sense of wonder and appreciation for the beauty of nature in the digital realm.

code:

let butterflies = [];
let clouds = [];
let flowers = [];

function setup() {
  createCanvas(800, 600);
  
  // Create a flock of butterflies
  for (let i = 0; i < 10; i++) {
    let butterfly = new Butterfly(random(width), random(height));
    butterflies.push(butterfly);
  }
  
  // Create some clouds
  for (let i = 0; i < 5; i++) {
    let cloud = new Cloud(random(width), random(height));
    clouds.push(cloud);
  }
  
  // Create some flowers
  for (let i = 0; i < 20; i++) {
    let flower = new Flower(random(width), random(height));
    flowers.push(flower);
  }
}

function draw() {
  // Draw gradient sky background
  background(135, 206, 250); // Light blue
  for (let y = 0; y < height; y++) {
    let inter = map(y, 0, height, 0, 1);
    let c = lerpColor(color(135, 206, 250), color(255, 255, 255), inter);
    stroke(c);
    line(0, y, width, y);
  }
  
  // Display and update clouds
  for (let cloud of clouds) {
    cloud.display();
    cloud.update();
  }
  
  // Update and display each butterfly
  for (let i = 0; i < butterflies.length; i++) {
    butterflies[i].update();
    butterflies[i].display();
  }
  
  // Display flowers
  for (let flower of flowers) {
    flower.display();
  }
}

class Butterfly {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-1, 1), random(-1, 1));
    this.color = color(random(255), random(255), random(255));
    this.angle = random(TWO_PI);
    this.size = random(20, 40);
  }
  
  update() {
    // Update position
    this.position.add(this.velocity);
    
    // Change direction randomly
    if (random() < 0.01) {
      this.velocity.rotate(random(-PI / 4, PI / 4));
    }
    
    // Wrap around screen
    this.position.x = (this.position.x + width) % width;
    this.position.y = (this.position.y + height) % height;
  }
  
  display() {
    // Draw butterfly wings with pattern
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size / 2);
    let wingOffset = this.size / 4;
    let wingSize = this.size / 2;
    push();
    translate(this.position.x, this.position.y);
    rotate(this.angle);
    fill(255, 100); // Semi-transparent white
    ellipse(-wingOffset, 0, wingSize, wingSize * 2);
    ellipse(wingOffset, 0, wingSize, wingSize * 2);
    fill(0, 100, 255); // Semi-transparent blue
    ellipse(-wingOffset, 0, wingSize / 2, wingSize);
    ellipse(wingOffset, 0, wingSize / 2, wingSize);
    pop();
  }
}

class Cloud {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.velocity = createVector(random(-0.5, 0.5), 0);
    this.size = random(50, 100);
  }
  
  update() {
    this.position.add(this.velocity);
    if (this.position.x > width + this.size) {
      this.position.x = -this.size;
    }
    if (this.position.x < -this.size) {
      this.position.x = width + this.size;
    }
  }
  
  display() {
    noStroke();
    fill(255);
    ellipse(this.position.x, this.position.y, this.size * 1.5, this.size);
    ellipse(this.position.x - this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
    ellipse(this.position.x + this.size / 3, this.position.y - this.size / 4, this.size, this.size * 0.8);
  }
}

class Flower {
  constructor(x, y) {
    this.position = createVector(x, y);
    this.size = random(10, 20);
    this.color = color(random(255), random(255), random(255));
  }
  
  display() {
    fill(this.color);
    noStroke();
    ellipse(this.position.x, this.position.y, this.size, this.size * 1.5);
    fill(255, 0, 0); // Red
    ellipse(this.position.x, this.position.y - this.size / 1.5, this.size * 0.8, this.size * 0.8);
  }
}

 

Reading Response:

The first chapter of “The Art of Interactive Design” presents a thorough and insightful exploration into the true essence of interactivity. The author, Chris Crawford, dismantles the common misuse and overuse of the term by defining interactivity as a cyclic process in which two actors alternately listen, think, and speak. This definition, grounded in the analogy of a conversation, strips away the ambiguity surrounding the concept and refocuses our attention on the quality of the engagement rather than mere action and reaction.

Crawford’s critical perspective on the buzzword nature of interactivity in the 1990s and the superficiality of its application to products and technologies drives home the importance of discernment when evaluating interactive experiences. His reference to the frenzied rat race for ‘new and improved’ interactivity, often without substance, highlights the need for more profound and meaningful interactions rather than mere novelty.

The conversation example between Fredegund and Gomer excellently illustrates Crawford’s definition of interactivity, emphasizing the importance of understanding and responding within the context of an exchange. Moreover, his critique of non-interactive activities, like books and movies, offers a clear boundary between passive and interactive experiences.

Crawford’s commentary on the degrees of interactivity is particularly thought-provoking. He challenges the binary view of interactivity as either present or absent, proposing instead a continuum where the depth and richness of the interactive experience can vary. This nuanced approach allows for a more sophisticated analysis of interactivity in various contexts, from refrigerator doors to video games.

In summary, Crawford’s elucidation on interactivity is not only eye-opening but also serves as a call to action for designers and users alike to aspire for deeper, more meaningful interactions. His insistence on the necessity of all three components of the interactive process (listening, thinking, and speaking) provides a clear framework for evaluating and designing interactive systems. The first chapter sets the stage for a deeper dive into the intricacies of interactivity design and its implications for technology and society.

For this project, I was super inspired by those amazing nights spent away from the city lights in the dessert, looking up at a sky full of stars. I wanted to try and capture a bit of that night sky with code.

I started by creating a bunch of twinkling stars using classes and arrays, which felt a bit like putting together a digital constellation. The fun  started when I played around with the `noise` and `sin` functions to make the stars change colors and gently pulse. 

Adding a gradient background to mimic the night sky’s colors was a bit tricky at first, but once I got it, it really brought the whole scene together. The whole process was a lot of trial and error, but seeing the final result was totally worth it. It was a cool mix of creativity and coding.

 

Code:

let stars = [];

function setup() {
  createCanvas(600, 500);
  for (let i = 0; i < 100; i++) {
    stars.push(new Star());
  }
}

function draw() {
  // To set the gradient background from blue to black
  setGradient(0, 0, width, height, color(25, 25, 112), color(0), Y_AXIS);
  
  // Update and display each star
  for (let star of stars) {
    star.update();
    star.display();
  }
}

// Function to create a vertical gradient background
function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
  for (let i = y; i <= y + h; i++) {
    let inter = map(i, y, y + h, 0, 1);
    let c = lerpColor(c1, c2, inter);
    stroke(c);
    line(x, i, x + w, i);
  }
}

// Constant to specify vertical gradient
const Y_AXIS = 1; 


class Star {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.size = random(0.5, 3);
    this.t = random(TWO_PI);
    this.color = color(random(255), random(255), random(255), random(100, 255));
  }

  // Update the star's properties
  update() {
    this.t += 0.02; 
    this.size = this.size + sin(this.t) * 0.5;
    // Randomly move the star
    this.x += random(-1, 1);
    this.y += random(-1, 1);

    // Change the star's color using Perlin noise for smooth transitions
    this.color = color(
      noise(this.t) * 255,         
      noise(this.t + 5) * 255,     
      noise(this.t + 10) * 255,    
      random(100, 255)             
    );
  }

  display() {
    noStroke(); 
    fill(this.color); 
    ellipse(this.x, this.y, this.size); 
  }
}

The provided code is designed to create a gradient background transitioning from a dark blue color to black. This effect is achieved by calling the `setGradient` function with specific parameters: the starting coordinates `(0, 0)`, the width and height of the canvas (`width`, `height`), the initial color (dark blue, defined by `color(25, 25, 112)`), the final color (black, defined by `color(0)`), and the direction of the gradient (`Y_AXIS`). This setup results in a vertical gradient that fills the entire canvas, creating a visually appealing background effect for graphics or visualizations.

Reading Response:

In the book “The Art of Interactive Design,” Chris Crawford explains that true interactivity is like having a good conversation. For something to be interactive, both sides need to listen, think, and then speak or react. He argues that many things we call interactive, such as books or movies, aren’t truly interactive because they don’t allow for this two-way communication. Crawford points out that simply pressing a button isn’t enough, there needs to be a deeper level of engagement where both the user and the system or product can exchange information and respond to each other in a meaningful way.

Crawford also criticizes how the word “interactive” is often used more for marketing than to describe a genuine interactive experience. He warns that this can lead to confusion and disappointment when the interaction isn’t as rich as expected. He urges designers and users to think more critically about what interactivity means and to seek out or create experiences that allow for a genuine conversation-like exchange, where both parties can learn and adapt from the interaction. The book challenges readers to look beyond the hype and to strive for genuine, quality interactivity in technology and design.

Concept:

 

 

Diving into this project, I was really drawn to the bright colors and the way shapes came together in those two images. It made me think about how sometimes less can be more. This idea isn’t new, but seeing it in action sparked something for me. I remembered those simple, yet catchy thumbnails on NoCopyright Sounds videos (Third Image) and wondered if I could apply the same principle. So, I decided to cut back on the clutter in my work, aiming for simplicity while still keeping it colorful and lively. It was a bit of a challenge, trying to find the right balance between too much and just enough. But in the end, it paid off. This approach helped me see my work in a new light, proving that you can make something stand out by stripping it down to its essentials. It was a great reminder that sometimes, the simplest approach can be the most effective.

A highlight of some code that you’re particularly proud of:

// Define a class for the Wiggly Circle
class WigglyCircle {
  constructor(x, y, radius, color) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.color = color;
    this.time = 0; // Time property for animation
  }

Embedded sketch:

Reflection and ideas for future work or improvements:

Reflection on this assignment I would have liked adds layer of engagement, transforming the viewer’s experience from passive observation to active participation. Even with my academic commitments, I managed to experiment freely with colors and shapes, which was a liberating process.

If I were to work on this again in the future improvements, I would consider either thickening the lines to give the shapes more definition or reducing the background’s opacity to allow for a clearer view of the action on the canvas. Both adjustments aim to enhance the visual impact and ensure that the vibrancy and movement I’m striving for are fully realized.

For this assignment, I wanted to further the idea I had for assignment #2, where I made (what I called) a inescapable prison and I wanted to further the exploration of how I would like to imagine the person who would stuck in it look like. I wanted the concept of how the harder the person would try to escape, the worse the prison got. I wanted to make it tortuous in a way. So I started experimenting with the push(); and pop(); functions and decided that it would look appealing to have the person gain speed, which is a concept I have implemented on the prison walls.

 

 

I think the most difficult part of making this was understanding how each function worked. However, I am proud of myself for figuring out how the pop and push mechanism worked because I had an issue with both of them and I was doing something very wrong with the arrays. I did end up only using one but at least I understand how they both could be implemented.

 // Add Square at the end of array every time mouse is pressed
  squares.push(interactiveSquare);
}
// Keyboard pressed = make the end of array fast
function keyPressed() {
  squares.push(interactiveSquare);
}

Reflection:

I would love to experiment with different shapes. I honestly considered making it Super Mario-related by having the rectangle be a Mario power star and have it make that effect, exactly how it is in the game but I wanted to make this one more. I will try to make the star in my free time.

 

Taking inspiration from a basic car drawing, I started what I thought was an easy assignment. But as the deadline got closer, I realized I had misunderstood the instructions. Even though I spent a lot of time on it, the final result wasn’t what it should’ve been. Still, I decided to include it in my work to show my effort. 🤣🤣🤣🤣🤣

Not giving up, I tried again. This time, I wanted to make something different. This time I created a random canvas, inspired by children’s drawings of random shapes. (since that was what my niece was doing right beside me when I was working on this assignment 🙂 ) 

where each time the mouse clicks a new shape, a new color appears on the place you have clicked. Although it was very simple, since I was rushing, I still managed to include arrays 

class Circle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.diameter = random(30, 100);
    this.color = color(random(255), random(255), random(255));
  }
  
  move() {
    this.x += random(-3, 3);
    this.y += random(-3, 3);
  }
  
  draw() {
    fill(this.color);
    noStroke();
    ellipse(this.x, this.y, this.diameter, this.diameter);
  }
}

class Triangle {
  constructor(x, y) {
    let x2 = x + random(-50, 50);
    let y2 = y + random(-50, 50);
    let x3 = x + random(-50, 50);
    let y3 = y + random(-50, 50);
    
    this.points = [{x: x, y: y}, {x: x2, y: y2}, {x: x3, y: y3}];
    this.color = color(random(255), random(255), random(255));
  }

I had to use class, and the concept of randomness to create this abstract, and noise to create the jittering effect, that adds interactivity to this project, making it more interesting.

 

Looking back, even though I made the huge mistake of skimming through the instructions, I learned a lot from this project. It taught me to pay more attention to details and understand what I needed to do, and I was able to experiment and find a way to trigger the creation of a random object each time the mouse was clicked.

Concept:

The visual design that I created is reminiscent of waves moving. The inspiration for this design comes from the ‘Bees and Bomb’ design named cube wave . This effect is achieved by varying the height of each box according to a sine wave, with the wave’s phase offset by the box’s distance from the center of the canvas. This creates a harmonious, visually appealing pattern that continuously evolves. I came across this video on YouTube, that kind helped me with the basics of this design.

The choice to center the artwork, combined with the monochromatic color scheme (black boxes with white strokes), emphasizes the geometric shapes and the movement pattern, focusing the viewer’s attention on the fluidity of the motion rather than being distracted by color.

Code:

In this generative art project, I’ve merged Object-Oriented Programming (OOP) with arrays to manage dynamic 3D visualizations using p5.js. The core of the project is the Box class in box.js, which outlines the characteristics and behaviors of the 3D boxes, including their wave-like height adjustments and rendering on the canvas. Utilizing an array, I efficiently organize multiple Box instances, populating this structure in the setup function and iterating over it in the draw function to update and display each box according to a sine wave pattern. This setup leverages OOP for encapsulation and arrays for managing multiple objects, showcasing the project’s complexity through simple user interaction—a keypress initiates the animation, demonstrating a direct engagement with the artwork and highlighting the thoughtful integration of coding principles to bring interactive, dynamic art to life.

Box.js:

class Box {
    constructor(x, z, w, h) {
        this.x = x;
        this.z = z;
        this.w = w;
        this.h = h;
    }

    updateHeight(offset, offsetIncrement) {
        let d = dist(this.x, this.z, width / 2, height / 2);
        let a = offset + d * offsetIncrement;
        this.h = floor(map(sin(a), -1, 1, 100, 300));
    }

    show() {
        push();
        translate(this.x - width / 2, 0, this.z - height / 2);
        // stroke(255); // White stroke
        // noFill(); // No fill, or use fill(0) for a black fill
        // box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
        // pop();
      
        fill(0); // Fill with black color
        stroke(255); // White stroke
        box(this.w, this.h, this.w); // Draw the 3D box with p5.js's box function
        pop();

    }
}

Sketch.js:

let boxes = []; // Array to store Box objects
let angle = 0;
let w = 24; // Width of the boxes
let ma; // Magic angle
let offsetIncrement;

function setup() {
  createCanvas(400, 400, WEBGL);
  ma = atan(1 / sqrt(2));
  offsetIncrement = TWO_PI / 30; // Adjust this for smoother or more rapid changes
  
  // Populate the array with Box objects
  for (let z = 0; z < height; z += w) {
    for (let x = 0; x < width; x += w) {
      // Adjust the initial height (h) as needed to fit your artistic vision
      boxes.push(new Box(x, z, w, 200)); // Using 200 as an example height
    }
  }
}

function draw() {
  background(0);
  ortho(-400, 400, 400, -400, 0, 1000);
  rotateX(-QUARTER_PI);
  rotateY(ma);

  // Update and display boxes from the array
  let offset = angle;
  boxes.forEach(box => {
    box.updateHeight(offset, 0.15); // Adjust the second parameter to change the wave's speed
    box.show();
    offset += offsetIncrement;
  });

  angle += 0.1; // Adjust this for faster or slower animation
}

Embedded Code:

Reflections and Improvement:

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.