Author: David Arutiunian

I was intrigued to revisit Donald Norman’s work after reading the excerpt from The Design of Everyday Things earlier in class. Personally, I find this article more compelling for how it emphasizes the importance of blending usability with attractiveness to create what Norman terms “good design.” Several ideas stood out to me, particularly the argument that design is inherently contextual, relying on the specific person interacting with it at a unique moment and place. Moreover, what influences how a design functions is the individual’s mood, or “affect,” which constantly shifts. I find this concept extremely helpful for designers as it highlights the fluid and responsive nature of truly effective design.

Another eye-opening point was Norman’s suggestion to consider the context of a design based on the overall stress level of the situation where it will be used. The example he gives — struggling to decide whether to push or pull a door due to one’s stress level — felt especially relatable. I agree with Norman’s implication that a good designer anticipates and accommodates the immediate needs of the user in such moments. For me, the article’s key takeaway lies in the concluding section, where Norman redefines beauty in design as something not superficial and “skin deep”, but holistic and comprehensive. It may seem slightly sarcastic at first when he concludes with “attractive things work better,” yet it underscores the essence of good design. Functionality and attractiveness are always in balance, and functional design, in the end, evokes a unique appeal that aligns with its purpose and context, crafted to enhance the user’s experience.

It is interesting to note how Margaret Hamilton’s experience complements Norman’s ideas about design as a process shaped by context, adaptability, and human limitations. Just as Norman emphasizes how design must account for users’ moods and stress levels, Hamilton’s work highlights the need for resilience in coding to accommodate human error. As for me, both illustrate that effective design — whether in physical objects or software — requires a deep awareness of the user’s state and context. Hamilton’s insistence on error-checking, despite opposition, resonates with Norman’s view that design is not just about fulfilling a basic function but about anticipating a range of human interactions, including mistakes.

I also found similarity between Hamilton’s approach to coding as a blend of technical precision and intuition and Norman’s idea of beauty in design as holistic rather than superficial. Just as Norman advocates for designs that appeal and function seamlessly, Hamilton’s coding enabled the Apollo missions to perform flawlessly in unpredictable situations. Her case proves us that true innovation comes from crafting systems that are both effective and resilient, achieving beauty and function through an intuitive understanding of human and technological dynamics, similarly to the ideas developed by D. Norman.

 

Concept.

As soon as I figured it out that I want my midterm project to be a mini-game, there was no other option but to make something I would really enjoy playing myself. The “treasure hunt” mini-game was something that I really liked playing online as a child. As a fan of Lilo & Stitch animated feature, I had little doubt about the decision to make this version of the game revolve around my favourite characters.

The backstory of the game is preparation for Lilo’s birthday celebration: Stitch has to collect shells in order to tinker a bracelet for her beloved friend, avoiding the dead fish bones on his way. The game uses timers (10 seconds to memorize the position of the bones & 4 minutes to collect the shells) as well as a counter for shells throughout the game.

I really wanted this game to be helpful to train memorisation, as I know it might be a struggle for quite a few nowadays (including me) to memorise information. I truly hope that the players will get immersed into this game and have the urge to play it over and over again, so it will turn out not only as a simplistic entertaining experience but also as a good exercise for the mind.

Highlights & Reflections.

The most challenging part of the code was to make the shells & fishes appear exactly on the sandbox grid, because I accidentally made the wrong starting positions for the grid itself at the very beginning, which I had to figure out only later on.

My favorite part was working on the sound effects and other UI-experience functions (such as the winning & losing signs). The particular part of the code I am proud of is working with timers for the first time, because there are many conditions to take into consideration when resetting both timers and making sure they do not overlap one onto another:

// CHECKING IF SECOND TIMER IS :00 // 
if (isHuntTimerActive && huntTimerValue === 0) {
stitchX = initialX;
stitchY = initialY;
showLosingSign = true;
isHuntTimerActive = false; // Stop the hunt timer
canMove = false; // Disable Stitch movement when timer hits 0
}

if (timerValue > 0) {
// CASE 1: TIMER IS STILL RUNNING (NEED TO SHOW FISH ICONS)
for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
sandboxes[i][j].display();
}
}

for (let i = 0; i < fishes.length; i++) {
fishes[i].display();
checkFishCollision(fishes[i], i);
}

for (let i = 0; i < shells.length; i++) {
shells[i].display();
checkShellCollision(shells[i], i);
}
} else {
// CASE 2: TIMER IS :00, DRAW FISH ICONS BEHIND THE GRID
for (let i = 0; i < fishes.length; i++) {
fishes[i].display();
}

for (let i = 0; i < cols; i++) {
for (let j = 0; j < rows; j++) {
sandboxes[i][j].display();
}
}

// CHECK IF STITCH STUMBLES UPON THE FISH ICONS //

for (let i = 0; i < fishes.length; i++) {
checkFishCollision(fishes[i], i);
}

for (let i = 0; i < shells.length; i++) {
shells[i].display();
checkShellCollision(shells[i], i);
}
}

The Game.

Future improvements:

• • It would be nice to have the game in the full screen mode, but due to the presence of grid in the game, I didn’t manage to figure out how to achieve this without any distortions.
  • There is a minor bug in the game that I would like to fix in the future: it’s the fact that the randomly generated fish and shell icons can overlap and be drawn one on top of another, which makes it impossible for user to win the game. As for now, the suggestion is to simply restart the game.
  • Last but not least, I would like to have a higher resolution images in the game in the future. Honestly, I was a bit scared to upload high quality images as I had the game crashed over and over again at the beginning of my work on it. Nonetheless, I believe that in future I will find a way to make the resolution higher (by drawing specific images right in the p5 editor, e.g. the pop-up window with instructions).

Concept & Inspiration.

For my midterm project, I got inspired by the mini-game I used to play as a child online: a treasure hunt that trains memorisation.

As a huge fan of Lilo & Stitch animated feature, I decided to create an authentic version of the game with my favourite character. The (so fat intended) rules of the game are as follows:

Stitch has to collect 5 shells, moving by one sand square with each step from start to finish. The sand squares can hide hazards – dead fish bones – which make the progress fall down to 0 and restart the game.

At the beginning of the game, the player has 5 seconds to take a look at the “revealed” danger zones. After that, all sand squares will be closed, and players will have to rely on their memory not to entrap themselves into a dead fish bone on the way.

Below, I attached two images which I designed in Figma: (1) showing the game interface after 5 seconds, and (2) showing the interface at the very beginning, when the dead fish bones are just revealed.

Uncertainties.

As we have never touched upon working with a timer inside p5.js, I am unsure if I will be able to implement the timer in the way I initially wanted to. Nonetheless, I believe that I will be able to find a solution that will eventually satisfy me (even though it might not be according to what I initially planned).

Also, I had perpetual struggles with uploading images to my canvas throughout the process of working on the first draft. I am still figuring out how to fix this issue, because otherwise some of the icons (including the character) and the background can suddenly disappear during the actual game.

In my first draft of the project, I have only managed to create the user interface (without some of the icons) and make some kind of movement for Stitch with the key arrow presses. I have also included the soundscape, using the music from the original Lilo & Stitch film: to turn it off, user can click the mouse at any part of the canvas.

Embedded Sketch.

Key functions to implement:

• • Add the missing icons (including the shells & fish bones).
  • Make the music respond to the button.
  • Make a pop-up window with game instructions.
  • Implement a timer (or its equivalent).
  • Make Stitch move on the sand squares more precisely.
  • Add a sound effect for the failure.
  • Make the fish bones appear as soon as Stitch touches the sand squares with them.
  • Make the shell count as soon as Stitch touches them.

I found Golan Levin’s article on computer vision to be extremely informative and useful for my future artworks, as it is highly illustrative and detailed in explaining what computer vision actually is. I particularly appreciated how the examples Levin provides demonstrate the vast array of forms in which computer vision is used in interactive media arts: from the sociopolitical Sorting Daemon by David Rokeby to the metaphorical Standards and Double Standards by Rafael Lozano-Hemmer. I believe, as the article suggests, that there is still significant room for improvement in computer vision. It undoubtedly cannot be compared to human vision, as it requires meaning to be assigned to it (a thing human eye has no need to do) through the careful design of algorithms that analyze individual pixels and patterns using techniques like differencing, background subtraction, and brightness thresholding for detection tasks.

Beyond the obvious potential for growth, one concerning issue with computer vision is its possible use as a tool for surveillance, and thus as a powerful method of control. The ethical concerns here are significant: computer vision in art has the potential not only to create but also to exploit those who interact with it without their consent (as in Suicide Box by the Bureau of Inverse Technology).

Therefore, while Golan Levin successfully demystifies the concept of computer vision, it remains unclear how we, as artists, should address the ethics of its use in relation to surveillance. How do I make an interactive artwork that is engaging and immersive without being intrusive and exploitative? That is one of the primary questions an artist should ask when working with computer vision.

 

Concept & Inspiration.

For this project, my main goal was to create generative text that transforms everyday, mundane things we’re so used to into something unexpectedly funny and slightly absurd.

When thinking about text we frequently encounter, warning signs came to mind. They are a common part of our daily lives, but we have become so accustomed to them that we barely notice what is written anymore. In this project, I wanted to experiment with something as rigid and conventional as warning signs, turning them into something absurd through generative text.

Perhaps my surreal warning signs might catch the attention of passersby, if only for a moment?..

Highlights.

In this code, I worked with file uploads in p5.js to import both my spreadsheet (containing three rows of random text) and a custom font (Heavitas), using the loadFont() and loadStrings() functions we learned in class throughout the week.

This is the first project where I focused on making the code as concise and efficient as possible by identifying repetitive patterns. To achieve this, I used a technique we didn’t cover in class but found intuitive—an array of arrays, let rows = [[], [], []];.

Additionally, I applied concepts from previous lessons to optimize the use of for() loops in various parts of the code, which I’m particularly proud of.

// Splitting each row into separate words and storing in 'rows' array
for (let i = 0; i < 3; i++) {
rows[i] = split(strings[i], ','); 
}

// Setting array to store the randomly generated text for three rows
let signText = ["", "", ""];

// Building a function to generate a random sign from three rows
function generateRandomSign() {
for (let i = 0; i < 3; i++) {
signText[i] = rows[i][int(random(rows[i].length))]; // Random selection for each row
}
}

Reflection.

Although this project may seem simple, the code was challenging to work with as I struggled for a while to shorten it without removing any functionality. Nonetheless, despite these difficulties, I enjoyed the process, especially at the initial stage, when coming up with random words and imagining the crazy possibilities of their combinations.

In the future, I would like to focus more on making the text responsive and adding real interactivity. I would also love to incorporate a warning pattern animation to make the code more visually engaging when I have more time. Overall, working on this assignment was extremely valuable for my coding skills, as I can see myself using generative text for other projects, like creating a mini-game.

Embedded Sketch.

Mouse click to generate a random warning sign.

Personally, I found the first chapter of Don Norman’s The Design of Everyday Things to be an insightful introduction to human-centered design and user experience. However, some aspects of it struck me as somewhat contentious. Having already read some of my peers’ reflections on the infamous “Norman Doors” (which are also found on our campus), I was intrigued by the mixed reactions. Some people found the design intuitive and user-friendly, while others have consistently struggled with it over time.

This divergence reminded me of my early experiences with social media. When I was 9, I had an account on the Russian social network VK, which (even then) I found incredibly easy to navigate. I also had a Facebook account at the same time, but I could never quite figure it out due to its cluttered and complex design. Interestingly, when I later traveled to Armenia, I discovered that many people there had the opposite perspective: they viewed VK’s interface as poor in terms of user experience, while Facebook was considered relatively straightforward. To this day, I still find Facebook extremely annoying to use, overwhelmed by its numerous buttons and pages whenever I open the sidebar or attempt to navigate through it.

This brings me to a broader question: is user experience really as universal as Don Norman suggests? Are there only conceptual models — mental representations of how objects work, based on users’ past experiences — that determine the value of design? How do cultural differences influence or limit the usability of objects? When discussing Norman Doors, who do we consider as the elusive “ideal user”? Is there truly a universal standard for which almost anyone can be considered the model for evaluating a design’s discoverability?

Concept & Inspiration.

My primary inspiration comes from the game Flappy Bird, which I used to play on my phone as a child. While reflecting on it, I didn’t intend to fully replicate the game, but rather merge its concept with something else. I then remembered the children’s book The Ugly Duckling and thought about incorporating that theme. One duckling may be considered ugly, but what if there were an endless number of them? Would they still seem as ugly?

With this idea in mind, I decided to write code using classes, and through careful use of color, I aimed to show that a whole flock of supposedly ugly ducklings might not look so ugly after all.

Highlights.

For this project, I created a class and made it an array birds[] so that the user can add endless number of ducklings on canvas. Moreover, I used the .push and .pop functions for adding and removing the ducklings. Even though it took me a while to understand how to flip the bird horizontally after bouncing, I eventually implemented it in my code by creating the facingRight variable inside the class.

// Flip the bird after bouncing
if (this.x > width - 60 || this.x < 0) {
  this.xspeed *= -1;
  this.facingRight = !this.facingRight;
}

It was also the first project where I worked with text() (which was relatively easy) and some of the text-related functions.

 if (birds.length === 0) {
  fill(255);
  textSize(24);
  textAlign(CENTER);
  textStyle(BOLD);
  textFont("Helvetica");
  text("mouse click to add a duckling", width / 2, height / 2);
}

Reflection.

I am proud of this project, as I was able to implement almost all the new functions we learned in class this week. Additionally, I experimented with incorporating text for the first time. One challenge I faced was with the ducklings near the right corner, which glitch after a mouse click. I attempted to solve this issue using generative AI, but unfortunately, I wasn’t successful.

Overall, I believe the project achieved its intended purpose. In the future, I hope to create a more detailed background for the canvas, as I didn’t have enough time to include that in this version.

Embedded Sketch.

Mouse click to add a new duckling & click any key to remove the last one.

As I searched for the definition of “interactivity,” I found two distinct meanings placed side by side: (1) the process of two people or things working together and influencing each other, and (2) the ability of a computer to respond to a user’s input. In The Art of Interactive Design, Chris Crawford claims that the term “interactivity” is commonly “misused and misunderstood” due to the prevalence of the second definition. He challenges this misinterpretation by outlining three essential criteria for true interaction: (1) listening, (2) thinking, and (3) speaking. Importantly, Crawford argues that all three principles must be equally present in both “actors” of the interaction, with no trade-offs. This helps to clearly differentiate between interaction and mere reaction (such as reading a book) or participation (like dancing to music), which, as I agree, are not truly interactive activities.

While I found the text enjoyable overall, some examples provided by Crawford were based solely on his personal assumptions (for instance, his discussion of performance art and the extent of interaction involved). This led me to reflect on a question posed at the beginning of the chapter that remained unanswered: what is the role of subjectivity in interactivity? How much of interaction depends on the perspective of the individual interactor?

From the text, I gathered that there is some subjectivity in interactivity, which Crawford acknowledges. However, he also emphasizes that an objective foundation for interactivity exists as well, rooted in the essential definition of interaction. I agree with this view and also concur that defining interactivity merely as “the ability to respond to input” is a misuse. Such a limited definition can constrain designers. Therefore, in my future artworks, I plan to implement Crawford’s “rule of three” when assessing the interactivity of my code.

Concept & Inspiration.

How do we understand time? How do we grasp its relativity, and how does time differ across the globe in each corner of the world?

These questions came to mind as I reflected on the nature of time. My inspiration came from a piece of artwork I encountered on Pinterest titled “Rhythm.” As I observed the moving rectangles in the artwork, they reminded me of the movement of a clock. But what do these many clocks represent? For me, they symbolized two key ideas: (1) the relativity of time, and (2) the global nature of time, with its 24 time zones that shape the rhythm of life around the world.

Additionally, I drew heavy inspiration from a talk by Casey Reas, which I reflected on in a recent writing assignment. His discussion on randomness and order heavily influenced the way in which I approached my work.

Highlights.

In my interpretation, the background of the piece represents a chaotic flurry of clock dials, moving at a faster pace than the clock hands themselves. This fast-paced, seemingly erratic animation of ellipses symbolizes the relativity of time—its ability to feel both slow and fleeting, elusive and constant. Through this hectic background, I aimed to convey how time can feel overwhelming, moving quickly yet still slipping away before we can fully grasp it.

One aspect I’m particularly proud of is the grid of 24 clock hands, which I arranged to move with a calculated precision. Each clock hand is offset by PI/6 radians, representing a one-hour difference in the 24 time zones of the world. Although the movement of the arrows may seem chaotic when viewed all at once, there’s an underlying pattern — each line is meticulously timed to reflect the rhythm of global time. I have also learnt how to implement such functions as push() and pop().

for (let lineX = 0; lineX < 4; lineX++) { 
  for (let lineY = 0; lineY < 6; lineY++) { 
    push(); 
    translate(100 + lineX * 120, 100 + lineY * 120); 

    let offset = (lineX * 6 + lineY) * PI / 6; 
    rotate(baseAngle + offset); 
    line(-50, 0, 50, 0); 
    pop();
  }
}

Reflection.

I loved working on this project, as it gave me opportunity to master the basic knowledge of loops (specifically, “nested loops” which I got particularly curious about during the class). Furthermore, I aimed to focus more on the idea and conception (relying on the talk by Casey Reas and “randomness in order”), and gave myself more time to understand what I want to achieve before sitting to code.

Probably, the only thing I could not figure out is how to properly indicate time in numerical aspect in my artwork. In the future, I would like to create more sophisticated animated shapes so the idea is conveyed clearly.

In essence, this piece is an exploration of time’s complexity — how it can be experienced in so many different ways, how slowly yet at lighting speed it can pass by, and how it is governed by a specific order we all live within.

Embedded Sketch.

For me, Casey Reas’ talk on the balance between randomness and control in artistic process appeared to be extremely motivational and spot-on. Although Reas does not provide a definitive answer on where this balance lies, the ideas he presents are still compelling and thought-provoking. For instance, I loved the way in which he highlighted the beauty of imprecision, suggesting that it stems from nature itself (which unexpectedly reminded me of the recent reading from another class on the beginning of life on Earth). To prove his point, Casey refers to the “randomness in order” seen in the artwork that demonstrates protein molecules communicating within a cancer cell. This non-obvious connection between the chaotic patterns of nature and those found in computer programming was truly eye-opening.

As I begin to work on my own creative projects using coding, I am constantly reflecting on how much I will rely on chance. For me, randomness is simply a tool to help achieve a creative goal, but it is by no means the most decisive factor. I firmly agree with Reas that artistic choices involve a little magic of chance, but they are mostly guided by thoughtful decision-making about the final result. This applies to all forms of art, as the artistic process is always shaped by stylistic choices, vision, and ideas that arise from the creative mind long before the actual craft begins. Henceforth, there is no “chance” in the foundational decision of what the work will make the viewer feel. The uncertainty only lies in the ways the effect is reached: that’s where embracing the beauty of chance and experiment becomes so handy.