Author: Fady John

Emotion & Design: Attractive things work better

Norman’s article explains the often misunderstood relation between design, usability, and aesthetics. It’s a refreshing perspective that challenges the notion that usability and beauty are at odds with each other. Instead, he suggests they can and should coexist, creating products that are not only functional but also visually pleasing.

I found Norman’s personal examples, like his collection of teapots, to be relatable. It’s a reminder that the objects we use daily can be more than just tools; they can be sources of joy and satisfaction. The idea that an attractive design can make a product work better may sound unconventional, but it resonates with my experiences in web development. Often, web visitors experience better browsing and interactivity with a webpage if it is visually appealing.

The discussion about the impact of emotions on design is particularly interesting. Norman’s insights into how positive and negative affect can influence our cognitive processes and decision-making make me rethink the relationship between our emotions and the things we interact with daily.

Her Code Got Humans on the Moon

Margaret Hamilton’s story underscores the significance of gender diversity in the tech field. It prompts us to reflect on the ongoing gender disparity that still plagues the industry. While there has been some progress, we’re far from achieving true gender equality in tech. Indeed, some studies specifically focused on software developers suggest that as few as 8-10% of all software developers are female [1]. Hamilton’s journey from an era when women were discouraged from pursuing high-powered technical roles to becoming a pioneering figure in software engineering is incredibly inspiring.

What strikes me most is Hamilton’s unwavering determination and resilience. Her ability to lead a team, make critical technical decisions, and solve complex problems during the Apollo project is a testament to her expertise and commitment. Her dedication to perfection and her diligence in addressing potential issues serve as a valuable lesson in the importance of rigorous testing and debugging in software development. Moreover, we need to keep in mind the time when she was working, especially in terms of technological progress. Just picture this: the thousands of lines of code we can effortlessly write, compile, and debug in a matter of seconds today were back then written and meticulously refined using the available technology of that era. Here is her photo [2] while standing next to listings of the Apollo Guidance Computer (AGC) source code.

 

Resources:

[1] https://jetrockets.com/blog/women-in-tech-why-are-only-10-of-software-developers-female
[2] https://www.wired.com/2015/10/margaret-hamilton-nasa-apollo/

The Concept:
In this engaging “Chromamood” game, players take control of a catching hand, moving it through the game screen width. The objective is to collect words falling from the top of the screen. These words encapsulate various human moods, such as “happy,” “calm,” and “excited.” But the interesting part of the game lies in its categorization system. These words are neatly organized into distinct categories, with each category intimately linked to a unique display color and an associated score. As players adeptly gather these words, they trigger a series of cascading effects. The real magic happens as the words are seamlessly woven into the live video feed, enhancing the text display in the most visually enthralling way possible. The text dynamically updates, with its color shifting harmoniously, reflecting the precise word that the player has successfully captured.

Why “ChromaMood”?
The name “ChromaMood” is a fusion of two essential elements in the game. “Chroma” relates to color and represents the dynamic background shifts triggered by the words collected, where each mood category is associated with a distinct color. “Mood” encapsulates the central theme of the game, which revolves around collecting words that express various human emotions and moods

How the project works:
The game starts on a welcoming screen with the title “ChromaMood” and two options: “start” and “help.” Clicking “start” leads you to the main game screen. Here, you’ll see a hand-shaped object set against a black background, with words falling from the top. The game’s twist is in the words you catch. Each word represents a different mood, like “happy” or “angry,” and it impacts the background and your score. For example, catching words associated with anger turns the background red and gives you a score of 2. The words on the background change too. The goal is to get the highest score by collecting words that reflect positive moods within a limited time.

Code Highlight I am proud of:
The part of the game I am proud of is developing the video display background as I had no idea of how to do it. It required somehow intricate coding to seamlessly integrate dynamic text updates with the live video feed, ensuring a cohesive and engaging user experience. The idea is that I am dealing with the sketch as pixels. So, I update the pixels with every character of the words the player catches. Honestly, it was challenging for me to do it but I watched some tutorials and managed to figure it out.

Sketch:
The video and sound effects are not working in the embedded iframe below. Open it on P5JS editor for better experience.

Soma areas of improvement:
A potential enhancement to consider is shifting the way we control the hand object. Instead of relying on traditional keyboard controls, we could explore the possibility of tracking the player’s movements in the live video feed. By doing so, we could introduce a new level of interactivity, allowing players to physically interact with the game. This change not only simplifies the game’s control mechanics but also aligns perfectly with its fundamental concept. It would create a more immersive experience, where players can use their own motions to catch the falling words, making the game even more engaging and unique.

“Computer Vision for Artists and Designers: Pedagogic Tools and Techniques for Novice Programmers” offers a fascinating exploration of computer vision and its applications, particularly within the realm of art and design. It shows how computer vision has traditionally been reserved for experts in fields like signal processing and artificial intelligence. What I liked the most about this paper is how it breaks down complex concepts related to computer vision into simple terms, making them accessible to readers without a technical background.

Among the diverse applications discussed, one that particularly stood out to me is the audiovisual performance “Messa di Voce.” This performance seamlessly combines whole-body vision-based interactions with speech analysis to visually enhance the expressions of abstract vocalists.

Furthermore, the paper introduces the concept of motion detection, which proved to be a valuable insight for my own project. My midterm project heavily relies on motion detection, as it involves tracking the movements of the user and objects within the video frame. Techniques like frame differencing, as discussed in the paper, offer a practical approach to dynamically adjusting colors and content in specific video areas. This knowledge aligns perfectly with my project’s objective of creating an immersive and responsive text display.

The concept:
For my midterm project, I was inspired to create a unique piece of interactive art that would heavily rely on the user’s live video display. This idea had been brewing in my mind for several weeks, sparked by two key moments: first, when I saw a screen outside the introduction to interactive media (IM) lab displaying users amidst a backdrop of language characters, and second, when our professor showcased a project featuring flying birds (shown in image 1). These encounters left me captivated by the potential of technology and user interactivity in the realm of art. Additionally, I’ve always had a keen interest in game development, especially when it comes to implementing various elements such as graphics, animations, and user interactivity. So, I set out to combine both concepts by creating a simple engaging game that would contribute to the dynamic text video display.

The core concept of the game revolves around collecting words. In this game, the player maneuvers a box to capture randomly falling words. These words are a fusion of adjectives that depict various moods and emotions. To add an extra layer of depth, these words are categorized, with each category corresponding to a specific display color and score. As the player collects these words, they have a direct impact on the text video display. The collected words are seamlessly integrated into the live video feed, dynamically altering the text and its color based on the specific word the player successfully captures.

Design:
when it comes to the visual layout, I’ve split it into two halves (as shown in image 2). One side is all about the game interface (right side), where you interact with the falling words and move that collecting box. The other side (left side), well, that’s where the magic happens. It’s your canvas for the live video display, where you get to experience the fusion of gaming and art.

Sketch:

Challenges:
One of the challenges I’ve encountered involves effectively implementing the text video display within the project. It requires intricate coding and synchronization to seamlessly integrate dynamic text updates with the live video feed, ensuring a cohesive and engaging user experience.
Another challenge is handling every single pixel to ensure a crisp and smooth video display. To achieve a higher level of visual quality, I’m opting to increase the pixel density on my canvas. However, this choice brings the potential for glitches and slower performance.

Risk prevention:
To implement the text video display, I’ve delved into tutorial resources that explain similar concepts. These tutorials have been invaluable in guiding me through the complexities of working with a canvas as a grid of individual pixels. I’ve gained insights into handling pixel-level manipulations.
To achieve the perfect balance between visual clarity and smooth execution, after getting done with other project parts, I will try to optimize the number of pixels which I think will be done by testing different pixel settings.

The Concept:
For this assignment, I want to do a data visualization sketch. After looking for various data sets and APIs, I decided to choose some data that relates to a personal interest. I decided to create a data visualization of 2016 world’s top 100 football players voting that chooses the best player of the world. It was really interesting to read some of this data as I never know these variations in voting and what makes it more interesting is that Ronaldo, my favorite player, was the best player in that year.

Code Highlight:
I am proud of this part of the code, mapping the voting values to the width o the bar corresponding to the value and increasing the width of the bar at the begging of the sketch display. The concept of mapping is very useful in many ways I have tried while figuring out how to draw the bars.

Sketch:
Reflection and ideas for future work or improvements:
I liked that he sketch effectively introduces a dynamic bar expansion effect, engaging viewers from the start. However, further improvements could involve adding smooth animations for a more visual transition. Additionally, considering user interactivity, such as mouse interactions for control, could enhance user engagement and exploration of the data.

In the first chapter of The Design of Everyday Things, Don Norman delves into our interaction with commonplace items and how the fundamental principles of design shape this interaction. He also explores the concept of design and how everyday objects can create usability problems and frustrations for users. Reading about two of the most important characteristics of good design which are discoverability and understanding made me much more aware of the design of everyday objects that I encounter. Discoverability is about making it clear, often at first glance, what actions are possible with a product or interface. In my experience, a good example of easily discoverable designs that I deal with every day is well-designed mobile apps often have easily recognizable icons and intuitive gestures, enhancing discoverability. Don Norman also discussed a common problem that I faced personally in my first days in the university, which is the confusing doors. Dealing with doors is actually a common example that demonstrates the importance of user experience in the design process.

Another part of the reading that was really interesting is the paradox of technology, especially because it relates to the content of this course. Norman illustrates the trade-off between the convenience that technology brings and the increasing complexity it introduces. This resonates with my experience of using various applications where the initial excitement of features can sometimes be overshadowed by the challenges of mastering them.

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

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

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

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

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

Concept:
For this assignment I looked for many works of computational repetitive art and found really interesting works. However, the one I liked the most is this one I saw in the art center (shown in the figure below). I don’t know why I liked this one so much but maybe because I saw it in real life. I decided to work on a similar idea but with introducing more colors and different pattern. While working some things didn’t go the way I wanted but it resulted in some really cool stuff.

Code Highlights:
The part of code I am proud of is drawing the spiral arm and especially figuring out how to utilize sin and cos functions for my work.
Sketch:

Reflection and ideas for future work or improvements:
I am proud of the final output of my sketch. However, I think of implementing different modes where every mode would have a bit similar color combinations to make it more visually coherent. For example, one mode can contain the shades of blue.

Being an avid lover for randomness, Casey Reas’s talk was very interesting for me. The way he presented how chaos can be applied to visual art to bring out masterpieces answered a question that I always ask myself whenever I face this kind of art, “how was the artist able to think of such art.” What makes the art really awesome is that there is no specific correct way to create it. So, what if a bit of chaos is added to this open-source artisitc world? Indeed, the idea of randomness in art is very interesting.

Although I enjoyed his beautiful art works, another thing really intrigued is the way he approaches his work. As Casey Reas demonstrated in his talk, he artfully describes the elements within his work through a series of simple commands (shown in the figure below), eloquently narrating the shapes and movements that give life to his compositions. This method of breaking down the artistic process into its fundamental building blocks not only demystifies the creation of complex artworks but also provides a unique insight into the mind of the artist. It’s a testament to the power of code as a medium for artistic expression, where algorithms become brushes, and pixels become paint on the digital canvas.