Week 10: Reading Reflection

Victor’s brief but powerful rant on the future of interaction design continued to open my eyes to the extent that technology has cut off human beings from the physical world. For him, the so-called “future” of design with its touchscreen and glossy surface is not a revolution but merely a very limited advance that pays no attention to the human side of things. He completely turns the issue around and states that our hands are the most delicate locks for the least skillful and least tech-savvy users. The describes actions as elementary as page turning and a glass of water holding caused me to realize the extent of feedback and consciousness that humans get from touch. At this point, one might conclude that most of the devices one has nowadays are the ones that take the feedback away from them. His term “Pictures Under Glass” truly resonated with me since it brilliantly encapsulates the notion of how dull and one-dimensional technology interactions can appear. The reading of his rant made me reflect on the directors’ point that soft human qualities should not be engendered by modern technology. In my opinion, he wants us to know that true advancement should keep us emotionally attached to our creations while tech, unfortunately, does the opposite.

In his later responses, Victor makes it clear that he was not trying to destroy de facto technology but to show the way to future development. He underlines that the iPad and the likes are already very important and revolutionary, and still, they are not the end. The comparison of the iPad with the old black-and-white photography was very pleasant to me. It was good for the time but the market for color film kept rising. Victor believes that it should be the same with interaction design. Not only should we seek the right ways to design technology that is visible, tangible, and interactable, but also we should explore such ways. What I found most striking was his stress on the whole body in interaction rather than just a fingertip. He said that most of us are sitting and staring at screens all day long, which makes a total separation from our original nature of moving, feeling, and exploring. This idea was very strong to me as it brings technology back to something very human. Reading both articles made me rethink the role of design in either restricting or enlarging our innate capabilities. Victor’s writing is a sign that the technology of the future should make us feel more alive and interconnected, while on the other hand, it should not have the opposite effect of making us feel dead and isolated.

Week 10: Musical Instrument

Concept

The musical instrument that inspired us to create our project for the week, is the xylophone. An instrument that is both interesting and easy to navigate, which made for the perfect interactive musical instrument to create using arduino. We created it using three tinfoil strips that each play a different note when they are pressed, with a potentiometer controlling the frequency of every note adding dimension.  The ability to control two different elements such as the note played and it’s frequency provides the user of the participant the ability to create a range of sounds, diversifying the possible experiences that one can create with our instrument.

Demonstration

Schematic

Code Snippet

 if (activeIndex >= 0) {
    int freq = int(baseFreqs[activeIndex] * multiplier);
    freq = constrain(freq, 100, 5000);

    tone(buzzerPin, freq);
    Serial.print("Strip "); Serial.print(activeIndex+1);
    Serial.print(" freq=");
    Serial.println(freq);

    delay(50);
  } else {
    noTone(buzzerPin);
}

This part of code was one that was the most challenging, as it controls all important elements of our instrument. I would say it is where all the magic happens, bringing together both the analog and digital input to create the right sound intended by the player of the instrument. It calculates the final tone by multiplying the base frequency by a set multiplier, keeping the result within a safe range, and then sends this signal to the buzzer. When no input is detected, the sound stops. Essentially, it acts as the core logic that translates user interaction into audible output.

Full Code

Github Link

Reflection

This week’s assignment felt like a more interactive work, building up on our previous projects and adding dimension using more elements. For future improvements we would like to add a limit to the duration a note plays similar to an actual xylophone where a note stops after a certain time after playing a note. This imitates an actual instrument creating a more natural and realistic feel to the work, even playing multiple notes allowing the connection of more than one foil strip and more buzzers. For future projects, I’d like to focus more on aesthetics and adding more visual elements to the works.

Week 9: Analog Input & Output

Concept

For this week’s assignment, I worked on building a Study Tracker that turns study and rest into clear, color-coded cues so I can keep my attention steady. The buttons each control one of the LED’s, making them flash when pressed then stop again signaling study and break depending on the button pressed. The LED flashing means the student is in a break and the blue LED flashing means the student is focused. While the the dial to set the brightness so the lights fit the time period of the studying, softer at night and stronger during the day. Over time the repeated pairing of blue with study and red with rest builds a simple habit, so the colors start to set the mood before a student begins studying.

Demonstration

IMG_7760

Code Snipped

//Map potentiometer to brightness
  int potValue = analogRead(potPin);
  int brightness = map(potValue, 0, 1023, 0, 255);

  //Button 1
  bool button1State = digitalRead(button1Pin);
  if (button1State == LOW && lastButton1State == HIGH) {
    led1Flashing = !led1Flashing; 
    if (!led1Flashing) {
      analogWrite(led1Pin, brightness); 
    }
    delay(200);
  }
  lastButton1State = button1State;

  //Button 2
  bool button2State = digitalRead(button2Pin);
  if (button2State == LOW && lastButton2State == HIGH) {
    led2Flashing = !led2Flashing;
    if (!led2Flashing) {
      analogWrite(led2Pin, brightness);
    }
    delay(200);
  }
  lastButton2State = button2State;

Brining together the different elements we learnt in class, I believe that this part of the code to me was exploring how there are countless ways to combine techniques and create something new. Which reminded me of this week’s reading which discussed the value of building up on existing works rather than worrying about creating something did not exist before. Creating something functional and different from the simple parts given to us is possible.

Complete Code

Github Link

Schematic

Reflection

During this assignment, exploring both digital and analog input, was interesting in discovering how they can interact together to add depth and dimension to the work. The difficult part to me was coming up with a way to creatively merge both of these elements while not having them crash with each other. In future work, I’d like to explore more sensors and switches and integrate them into my work, there were several ones we dicussed in class that I would like to explore.

Week 9: Reading Response

Most modern discoveries are build on foundational concepts that have been around for years. We are nothing without the knowledge of those who came before us. Which is why it is very insightful to dive into the previous works in the field of physical computing, going through the best and the not so best inventions and creations. Everyone is fixated on creating the next new thing that we forget the importance of building on and improving previous works and ideas. Through reading about these works, I was without a doubt inspired for future projects on how to integrate physical computing. It brought to my attention crucial elements that I would have otherwise overlooked such as the importance of balancing aesthetics and functionality. Projects such as the video mirrors had aesthetics as the central focus foregoing any structural interaction. While the lack of valuable interaction is a valid concern, it did get me thinking on the importance of interaction and if there is value that comes from aesthetics that makes overlooking interaction the correct move. This ties in with themes from the previous readings that discussed the balance between aesthetics and functionality, a concept which I believe were put to the test in these projects.

“Set the Stage, Then Shut Up and Listen” is a harsh message to the artists of interactive art, yet it is an important one as well. Creating interactive art is a collaborative effort, like a puzzle where the artist only has half the pieces and needs to guide the participants so they could place the remaining ones.  It is a reflection of the creator of the work as well as every person that choses to interact with it. A dynamic conversation where the artists becomes primarily a listener, following the guide of the consumers of their work. It is tempting to share the message behind a work, especially when you spent a long time developing it and integrating a message within it. Though, how can you conclude and solidify a message when the work has not been interacted with and spoken to from outside contributors. On the other hand, I do think that it is important to find a balance, where there is a foundational message that the work is being built on, one that can be altered and developed by outsiders. As without a strong foundation a project is at a risk of being void of a message to be build on by the participants. Once again, we are in a position where a balance is crucial to the building of a meaningful and engaging work.

Week 8: Unusual Switch

Concept

The creation of an unusual switch was an interesting task, considering I have created simple LED circuits before, though never with anything beyond what is given in our kit. I decided to use a piano key as a switch to create an interesting switch to add an element of sound that adds dimension to the switch and work. Through this I wanted to create an engaging yet simple work that helps me ground my understanding. To add another layer I wrote code for the light to blink when the key is pressed, which adds a visual to the current auditory element.

Video Demonstration

IMG_7568

Code Snippet

void loop() {
  //Read the state of the switch
  int switchState = digitalRead(A2);

  //Loop to blink if switch is ON
  if (switchState == HIGH) { 
    digitalWrite(13, HIGH); //Turn the LED ON
    delay(250);  // Wait 250 ms
    digitalWrite(13, LOW);   //Turn the LED OFF
    delay(250);  // Wait 250 ms         
  } else {
    digitalWrite(13, LOW); //Keep the LED OFF
  }

}

During this assignment I wanted to integrate two different things we learnt in class to add a little more interactivity to the switch so I decided to use the blinking mechanism during the time where the switch is connected. After prototyping with the regular switch, I added the part of the code where the blinking is handled and noticed a difference on how engaging the switch became which could be useful in creating game interactions or bringing a viewer’s attention to a specific part of a work of interactive art.

Complete Code

Github link

Reflection

This assignment was a great starting point for learning arduino, though a simple task, it helped me make sure that I am well acquainted with the basics of it and I am now excited to learn more. I’d say there is a lot that could be done to improve and develop this work, including adding more LEDs, switches or even more complex visual display when the switch is turned on through a more complex use of digitalRead. Further, this taught me the potential of both hardware and software interacting and what type of work could come out of using such tools together, which inspired me and got me thinking about future projects and how I could make use of this dynamic or how I could have used it in my previous projects.

Week 8: Reading Response

Norman’s ‘Emotion & Design: Attractive things work better’ was a great complimentary work to his ‘The Design of Everyday Things’ that we previously read this semester. A perspective that may seem contrasting was presented yet upon a closer look it becomes apparent that it is not an opposition to his previous work but a build up. Both the works tie in together to create the full picture of what the essential elements of design are. After reading his previous work, I’d say I definitely increased my focus and attention on functionality and usability in my work without considering the fact that  aesthetics wen hand in hand with them. A work that is appealing to look at is one that encourages attention and engagement with it, as human nature is to be driven by aesthetics and visuals, sometimes even beyond usability. Though that should not take away attention from the importance of usability, and that is why the puzzle is incomplete without the pieces provided by the previous work by Norman.

This work particularly brought to my attention the importance of positive affect in encouraging creativity and breadth of thinking when it comes to design and got me thinking of how I can contextualize this to my upcoming projects. Part of creative interactive art is to create works that encourage exploration of the themes and functionalities of a given work, and the achieve this desired effect while usability is essential to ensure that the users have guidance to what they need to do, it is as important to focus on aesthetics to encourage this exploration of the usability of the work. While the importance of positive affect is undoubtedly present in most designs, I’d say it’s importance is exceptionally present in the design of interactive art works and projects. Therefore, the discussion of the intersection of usability and aesthetic is an important one to present in the beginning stages of the design journey to have a foundation that is strong in both aspects. Though, I do believe that in certain cases usability might prove to be more essential to a project or vise versa due to the nature of the situation.

Further, McMillan’s ‘Her Code Got Humans on the Moon’ about the programmer Margret Hamilton was an inspiring work of the discussion of the career beginnings of a women that navigated her way through the field of software engineer back in it’s initial appearance. Beyond her impressive feat reading the work was interesting dive into the world of programming and engineering before it became what we know it today. The method of punching holes in stacks of punch cards to be sent to guide the threading of copper wires into magnetic rings was a clear indication of the significant progress in the field of software engineering. In particular, the lack of urgency of the use of error-checking code was another aspect that is extremely contrasting to today’s practiced with error-checking becoming a central part of today’s programming. Most systems now are responsible to the functions of so many everyday tasks and manage the flow of large amounts of data, which is why they cannot afford to face errors. Though, the article made it clear that mistakes such as the ones that happened with the Apollo were necessary to understand the importance of such functionalities. Which revealed the importance of the work that was being done by Hamilton and the rest of the team at the time to the foundation of today’s software engineering industry.

Midterm Project: An Unusual Case

Concept

An Unusual Case is a horror mystery game, inspired by escape rooms, where there are scattered clues around the game in each room, and the user will have to identify them to move on to the next room and solve the mystery. Else, they are forever trapped in the room. The concept aims for the user to both have an engaging and entertaining experience while thinking through the clues and pushing them to think outside the box. Focusing on the player’s problem-solving and creative skills. Clues never give away the answer directly, rather they push the player to apply critical thinking and pattern recognition.

To make the game even more engaging, the themes of the game visual design are darkness and the melancholy which tie in well with the color palette consisting of deep shadows and muted tones. The mood is further curated by the sound effects that go from very quiet background noises to loud and sudden jumpscares, a mix that is intentional to keep players on edge and engaged. This horror aspect is not just for the sake of enticing fear but also to pull the players into the emotional tension of the situation, thus making every choice and revelation feel more powerful. In the end, An Unusual Case has the ambition to be a combination of mental challenge, appealing story, and spooky atmosphere, giving players a very deep and engaging experience.


 

Code Snippet

draw() {
    // Perspective scaling for hallway
    let scaleFactor = 200 / wallDist;
    let w = wallSize * scaleFactor;
    let h = wallSize * scaleFactor;

    let cx = width / 2;
    let cy = height / 2;
    let left = cx - w / 2, right = cx + w / 2, top = cy - h / 2, bottom = cy + h / 2;

    // Draw hallway walls
    fill(20, 0, 0); noStroke();
    quad(0, 0, left, top, left, bottom, 0, height);
    quad(width, 0, right, top, right, bottom, width, height);

    // Fog effect
    this.fogAlpha = 40 + 20 * sin(millis() * 0.005);
    fill(0, 0, 0, this.fogAlpha);
    rect(width / 2, height / 2, width, height);

    // Door setup and glow animation
    let doorWfull = w / 3, doorH = h / 1.5;
    let doorX = cx, doorY = bottom - doorH / 2;
    doorBounds = { x: doorX, y: doorY, w: doorWfull, h: doorH };

    if (!doorOpen) {
        let elapsed = millis() - this.lastGlow;
        if (elapsed < 3000) this.glowAlpha = 60 + 40 * sin((elapsed / 3000) * TWO_PI);
        for (let i = 1; i <= 3; i++) {
            fill(255, 0, 0, this.glowAlpha / (i * 1.5));
            rect(doorX, doorY, doorWfull + i * 12, doorH + i * 12, 8);
        }
    }

    // Door animation and jumpscare trigger
    if (doorAnim > 0.01 && !this.jumpscareTriggered && doorAnim > 0.4) this.triggerJumpscare();

    // Player movement and sound
    let moved = false;
    if (moveForward) { wallDist = max(50, wallDist - 2); moved = true; }
    if (moveBackward) { wallDist = min(800, wallDist + 2); moved = true; }
    if (moved && !footsteps.isPlaying()) footsteps.loop();
    else if (!moved) footsteps.stop();
}
The Hallway.draw() function is something I am exceptionally proud of because it is the technical core of the game, where several systems meet to provide an engaging player experience. This function takes care of complicated animations like wall scaling to make the scene appear deeper, glowing door effects to attract the player, and fog shading for ambiance. It combines player movement, door collision detection, footsteps and door interaction sound effects, and even a jumpscare mechanism, all with smooth transitions and low latency bringing together the essence of the game.  It’s the moment when the player moves from curiosity to fear, which characterizes the game, and a quality that really binds An Unusual Case together. I’d say I spent a lot of time on it because it is the first scene and first impressions matter so I wanted a hallway that communicated the message of the game well through both aesthetic and functionality.

Embedded Sketch 

Game Design
The game is designed in such a way that the main elements are separated into classes where the game and the environment are organized at the same time. The Hallway class is the one in charge of rendering a perspective corridor for the main exploration area and controlling the movements of the players. Animations of the doors, glowing effects, jumpscare triggers, and other events are all part of the Hallway class’s responsibilities.

The wordGame class is a puzzle where the player needs to unscramble the letters to form the correct words in order to move ahead. This class is responsible for selecting the words to be scrambled, performing the scrambling, validating the input, displaying the result, and transitioning the player to the next room based on the success or failure of the player. Another module, FindObject, creates an interactive mechanic of search in darkness where the player using the flashlight effect looks for the hidden key, making the experience more fun and engaging. It uses the clipping effect of the flashlight, placement of the object, and cues for interaction.
The officeReveal class works up to a narrative turning point by presenting a final interaction between the player and a document that reveals the mystery’s resolution. It is responsible for various scene elements, such as rendering, glowing highlights, paper enlargement, and reveal transitions where the player has the option to restart. Last but not least, the Character class is in charge of the rendering, scaling, and positioning of the player’s avatar to ensure there is no visual discontinuity among the scenes.
Reflection
The process of organizing the code and making sure that all classes worked together perfectly was difficult but it also proved to be a great learning experience. The communication between the hallway, rooms, mini-games, and animations was difficult and took up a lot of time, especially when trying to keep transitions smooth and the functions consistent. This experience brought to my attention how we can integrate a lot of the techniques we learnt through readings into our work such as signifiers as I learnt through user testing where more visual assistance was needed in certain places. I see the potential in this project for future expansion, more levels, different types of challenges, and even improving the current ones, enriching the game and making it more captivating. I had such a great time creating this interactive experience and it has piqued my interest to keep working on it even after the class is over, through experimenting with the features, improving the design and making it a more complete and engaging mystery game.

Week 5: Midterm Progress

Concept

For my midterm project I have decided to create an adventure mystery game where the user is taken through an interactive journey where they make decisions based on clues provided to them. The game has different paths with different possible endings, giving the user control over the narrative of the story. With the starting point being in a long hallway where they will receive their first clue before entering the room, with the use of signifiers and feedback to lead the user where they need to be. Once the door is opened they are in the first room where they are supposed to make the first choice that decides which path they will be taking. Through this project I hope to bring together everything we’ve learnt so far technically and conceptually to bring the project to life and make it as engaging and interesting as possible.

Code Design

Character.js:
Represents a simple character with a body and head that can be drawn anywhere.

Hallway.js:
Draws the hallway, handles wall scaling, door animation, and hallway character.

Room.js:
Draws the rooms (intro, basement, office) and manages buttons and room characters.

Sketch.js:
Main controller that sets up p5.js, loads assets, switches between hallway and rooms, and handles input.

Current Progress

I have created an outline of the starting path of the game, particular the hallway and introductory room where the user makes their first choice. As well as a rough outline of what the first two rooms will be like. For the hallway I have integrated sound effects and a little walking and door opening animation to create an environment that draws the user in as soon as they start the game.

Challenges

The most difficult thing to do in this project so far was the animation of walking toward the door at the beginning, which required exact perspective scaling and smooth transitions. At first, the walls were not scaling consistently, and the door animation felt unnatural, making it hard to build the idea of depth for the viewer. I had trouble related to the door opening and the player’s movement being properly synchronized, meaning that certain awkward jumps between states occurred. To get around that, I rewrote the code to include a Hallway class to concentrate all logic related to the hallway, introduced a scaling value based on wallDist to scale the walls proportionally, and smoothed out the door animation via incremental increments to doorAnim. I also centralized the movement logic so that the footsteps and perspective changes are in sync, which led to smoother and more believable walking animation. Overall, I’d say making different elements compatible is the most difficult part but with the right organization of the code with abstraction and encapsulation.

Reflections

Working on the rough outline of what I want my project to look like and creating a skeleton for my code was very beneficial in learning what is the right way to approach this project. I now have a cleared idea of the path I’d like to take with this work and what I want to focus on. My first next step would be focusing on the narrative and the different storytelling elements that I will be integrating to guide the user. I feel like I need to focus on creating a path that is easy to follow and come up with reasonable signifiers.

Week 5: Reading Reflection

Our vision as people comes with a few prerequisites for creating a clear image in our mind, for example an object needs to be close enough with lighting that is sufficient for us to identify what it is. Computer vision is differentiated to our vision with the existence of a larger set of these prerequisites, the conditions need to be tuned to the abilities of the algorithm in place for accurate identification. With each system built for different purposes needing different unique conditions and pre-existing information to complete its purpose, while our vision is able to cover all ends such as motion detection and object detection without the need for different conditions. Which is why it might be a difficult task to integrate computer vision into interactive media, it is not only about picking the right system and mechanism, you need to set up the right circumstances for the system to successfully bring your vision to life.

However, even with the complication that come with it, the use of computer vision opens up a new realm of possibilities for interactive art. It takes the ability to interact with a user to another level with the possibility of now tracking tracking the movement of the user adding another layer to the ways the art can ‘listen, think and speak’ to the participant. This is especially true due to the increased accessibility to open source code and the technologies needed to navigate the world of computer vision, it is now easier than ever to utilize such technologies to explore themes more in depth. Though, this does raise the question that many of the works mentioned in the article tackle, which is surveillance. These technologies provide interactive art pieces with eyes, they are now partaking in the observing and tracking process of the work. This is more of a concern when it comes to those works installed in public spaces where the technology is used to detect the movement of people who did not choose to be part of the work. Which is why it is important to approach the use of such technologies with care to make the most of them in stepping up the level of interactivity in art works.

Week 4: Reading Reflection

Intuition guides our everyday lives, most applications and devices that we run into in different situations are ones we are not familiar with, yet we are able to interact with them and intuitively figure out how to utilize them. This can be attributed to unspoken rules that we have gotten used to over the years a button is to be pushed, and a knob is to be turned. These are affordances derived from our intuition and guided by signifiers and feedback to design devices usable by everyone. An interaction that I would say drives me crazy, due to it’s lack of all that is aforementioned would be trying to find my way around in the public transportation of some locations, especially underground trains where there are not enough signs signifying which train is coming or which platform to take. Often the maps are even cluttered or outdated making it even harder to wayfind my way around. This lack of clear signifiers and feedback makes it difficult to form a reliable mental model of the system, making it impossible to wayfind intuitively without searching things up or asking someone else around you.

When it comes to interactive media, this did open my eyes to the lack of intuition or clear instructions and signifiers to how to use my system and navigate my work so far. Most of the them depend on the user having previously provided knowledge through reading the concept or speaking to me. For example, this week my project has an interaction where the user can switch a book through clicking it, which can only be found by chance by clicking the books if not having read the concept. However, the switching of the book could count as feedback clarifying that the action of clicking does make a change. Moving forward I’d like to make my work more intuitive to interact with where the user is able to identify the purpose and the next move upon coming across a piece of mine. I’m looking to explore the possibility of strong signifiers through visual cues or micro-interactions that lead the user naturally without their having to be told beforehand. Such cues would create a seamless and engaging experience for users where they are able to independently go out and play and interact with the system. At the end of the day, the works we are creating are very user-focused most of the time and keeping their perspective in mind might be more important than in most other art forms.