Author: Prakrati Mamtani

---

Reading Don Norman’s reflections on the “psychopathology of everyday things” immediately pulled me back to my first-year CADT course on redesign. Professor Geffredo Puccetti. In the course we studied the idea of a “nudge” which is basically a subtle element that steers users in the right direction without needing explicit instructions. It is a simple yet powerful thing to have in a design. Norman’s principles of affordance and signifiers echo this beautifully. He reminded me that design should make the right action feel almost self-evident, sparing users from the awkward trial and error of guessing.

I see this all the time in everyday spaces. At NYUAD, the plain steel strips on push doors are a perfect example. Without a single word, they tell you what to do. Yet, recently, they pasted “push” and “pull” stickers on doors, a sign of design overcompensating for its own ambiguity. Digital design isn’t so different. Minimalist interfaces often leave users hunting for functionality, hiding navigation behind icons. Sometimes I find myself clicking around blindly, wondering if something is interactive or just static.

Norman’s framework helps me think through why. Affordances, like shading, button shapes, or a small animation hint at what’s possible and invite us to try.  Signifiers like a microphone icon or a heart symbol work almost instinctively, cutting down the need for extra instructions.

But the rise of minimalism has complicated things. I think often of the infamous “Kim Kardashian sink”. A perfect example of how design can privilege beauty over usability. The sink looks striking, but newcomers can’t figure out how to use it. I’ve had similar frustrations with everyday objects, like awkwardly designed shopping baskets that seem almost painful to the human hand. Having the handle in the middle makes it uncomfortable to carry and increases the probability of things falling out. This is a clear example of poor design.

For me, that tension between minimalism and intuitiveness is the heart of the matter. Designers are often tempted towards beauty, but at the expense of comfort and clarity. I’ve realised that the best designs aren’t the ones that impress me visually at first glance but the ones that quietly work. In this course I would try to implement buttons which clearly indicate they are to be pressed by a simple shadow or glow effect.  I would prioritise intuitive and visual cues, making every function discoverable, understandable, and, ideally, a little delightful. I would also follow a key for instance, all glowing objects are interactable and all the non-glowing ones are static. Have icons to demonstrate power ups and add a visual animation to add a signifier. Overall, I hope these changes add simplifies discoverability and understanding.

Concept:
For this week’s coding assignment, I wanted to experiment with something more on the creative side. I decided to work on generative text, with the idea of making the appearance of words reflect different moods. My goal was to have the text evoke an emotion not just through what it says, but how it looks and behaves on the screen.

The concept I explored was simple: each time a user clicks, the mood changes, and the text morphs to visually represent that emotion. To achieve this, I combined techniques we covered in class, like sine functions and noise. I also experimented with movement mechanics, such as vertical speed (gravity), bouncing off edges, and the dynamic effect of writing a word.

Code I’m most proud of:

if (!excitedInitialized) 
      // convert text into points (vector outlines of letters)
      points = font.textToPoints(current_mood, width / 2, height / 2, 60, {
        sampleFactor: 0.16,       // density of points
        simplifyThreshold: 0      // no simplification
      });

      // create particles starting at random positions moving toward text points
      particles = [];
      for (let p of points) {
        particles.push({
          x: random(width),
          y: random(height),
          targetX: p.x,
          targetY: p.y
        });
      }
      excitedInitialized = true; // mark as initialized
    }

    // animate particles moving toward their target text points
    for (let p of particles) {
      p.x = lerp(p.x, p.targetX, 0.05); // smooth movement toward targetX
      p.y = lerp(p.y, p.targetY, 0.05); // smooth movement toward targetY

      ellipse(p.x, p.y, 4, 4); // draw particle as a bubble
    }

This snippet stands out to me because it uses two functions I learned during this assignment: textToPoints and lerp.

textToPoints breaks down a word into a set of points based on the chosen font, giving me the flexibility to manipulate text at the particle level.

lerp (linear interpolation) was the key to achieving the effect I wanted. It allowed particles to smoothly move from random positions on the canvas to their designated target points. As a result, the word takes shape out of multiple “bubbles,” giving the text an energetic, almost playful quality.

This was exactly the kind of interaction I wanted. The text doesn’t just appear, it comes alive.

Future Improvements:
While I’m happy with how the project turned out, there’s still plenty of room to push it further. A key next step would be to make the generative text more interactive, so that it doesn’t just display moods but actively responds to the user. I imagine scenarios where hovering over the text could cause particles to scatter and fall apart, or where words might sparkle, ripple, or shift dynamically in response to movement on the screen.

While reading Chris Crawford’s chapter on “What Exactly Is Interactivity?”, it was interesting to him use the metaphor of listening, thinking, and speaking as the foundation of interactivity. This conversational model made the concept easier to grasp because it parallels something we intuitively understand, human dialogue. However, when Crawford extended these terms into a more literal context, insisting that actors must possess intellectual ability, I found it difficult to relate to his perspective.  For me, interactivity is whether one actor’s input produces a meaningful change in the other. Therefore, I found myself questioning some of Crawford’s examples. For instance, he dismisses the refrigerator light as non-interactive because it does not truly “think.” Yet I feel that even in his own terms, the refrigerator does listen and respond. When someone opens a refrigerator they are giving an input and the refrigerator is listening to it and by thinking it then turns on the light. To me, that still counts as a form of interactivity, even if it is simplistic or mechanistic.

Additionally, I agreed with several of his distinctions. His argument that reading a book is not interactive made sense: the book only “speaks,” but it does not adapt to or acknowledge the reader. The same applies to dancing: two dancers interact with each other, but the music itself is not interacting with them. These examples clarified for me the difference between experiences/ participation and genuine interaction.

Moving forward, when Crawford discussed movies, I started thinking about the children’s show Dora the Explorer. On the surface, it seems interactive because Dora asks the viewer questions. However, as Crawford would point out, the show fails at “listening.” It cannot actually register or respond to the viewer’s input, which makes the interactivity an illusion rather than reality. This helped me recognise that some systems or media may simulate interactivity without fully achieving it.

Ultimately, I interpret interactivity as a cause-and-effect relationship. If my input changes the receiver’s action, then interactivity has occurred. This perspective also ties into what we are learning in class. Functions like mousePressed() or keyPressed() are fundamental building blocks that create interactive spaces. In my Week 3 assignment, I experimented with this by coding a response to mouse clicks. Looking ahead, I want to experiment with creating interactions that are not uniform for every user but instead feel more personal and dynamic. For example, rather than coding a mouse click to always trigger the same outcome, I could design the system so that each person’s click produces a different reaction. This could be achieved by introducing elements of randomness, personalisation, or memory.

The inspiration for this art piece came from cherry blossoms in Japan. My friend was telling me stories of when she visited and how beautiful, peaceful, and calming being around the blossoms felt for her. While exploring generative art online, I also came across examples of flow fields that captured a similar sense of beauty. I liked one of the examples and decided to integrate that idea with the concept of cherry blossoms.

For this piece, I try to mimic the nature of cherry blossoms and recreate that positive, calming environment around them. Each circle in this artwork represents a blossom, drifting softly in circular motion like petals swaying in a spring breeze. They begin large and vivid, then slowly shrink, mirroring the delicate, short-lived bloom of cherry trees that peak for only a brief moment before fading. Because cherry blossoms symbolize new beginnings and fresh starts, every click becomes a moment of renewal. The background’s soft pink hue further evokes this atmosphere.

move() {
    // moving ball in a circular motion
    this.angle += this.speed;

    // Calculate new position
    this.x = this.x + (this.d / 2) * cos(this.angle);
    this.y = this.y + (this.d / 2) * sin(this.angle);
  }

The above code defines the movement of class and is particularly something I’m really proud of. In class so far we have only talked about linear motion but I have observed that many of my classmates have used sin and cosine functions, hence, for this project I decided to venture out, learn something new and incorporate it into the sketch. In the code the angle increases by speed and while mapping it in x-coordinate, y-coordinate I know that x=r*cos(angle), y=r*sin(angle) and since we are increase the x by this value, I add it to this.x.

One challenge I faced while creating this artwork was drawing the circular path of motion. At first, I wasn’t sure how to model this in p5.js. After some research, I discovered that sine and cosine functions could be used to trace circular paths, and I learned how to increase the angle gradually to animate the motion. Another challenge was resizing the blossoms: initially, all my circles shrank to a fixed diameter of 20, but I wanted each to reduce to a random size. To solve this, I introduced a  targetSize variable, which allowed each blossom to shrink smoothly to its own unique final size.

In the future, I would like to add gradual color transitions. Specifically, I imagine the blossoms changing from colorful hues to red, where red represents the fading or “death” of the blossoms. I think this would add another poetic layer to the theme of impermanence.

When given the chance to create geometric art, my mind immediately went back to a tradition from my childhood. Since I was ten years old, every Diwali, my family and I would gather outside our home to make rangoli: a colorful pattern made on the floor with powders, flowers, or rice. Diwali, the festival of lights, is celebrated in India with lamps, sweets, and vibrant designs meant to welcome prosperity and joy into the home. For me, rangoli has always been a way to blend creativity with culture. Alongside this, I also grew up enjoying drawing mandalas, which share the same symmetrical and intricate qualities. Together, these influences shaped my concept.  A digital reinterpretation of rangoli through geometric art.

For the scope of this assignment, I decided to use two shapes: circles and triangles. The circles form the core of the design, anchoring the artwork, while the triangles create a layered geometric background effect. This simple structure captures both the symmetry of mandalas and the festive layering of rangoli.

Rangoli:

Mandala:

One section of my code that I am particularly proud of is the logic behind alternating triangle shapes. I wanted two different kinds of triangles to appear in an alternating pattern. While drawing a single triangle was straightforward, alternating between two variations required more thought. After experimenting, I realized I could use an ‘if’ condition based on coordinate positions. The logic I arrived at was:

let step = 50;
  for (let x = 0; x < width; x += step) {
    for (let y = 0; y < height; y += step) {
      // pattern A
      if ((x / step + y / step) % 2 == 0) {
        fill("#800000");
        triangle(x, y, x + step, y, x, y + step);
        fill("#000080");
        triangle(x + step, y + step, x + step, y, x, y + step);
      }
      // pattern B
      else {
        fill("#000080");
        triangle(x, y, x + step, y + step, x, y + step);
        fill("#800000");
        triangle(x, y, x + step, y, x + step, y + step);
      }
    }
  }

This simple equation gave me an alternating algorithm, ensuring the triangles switched consistently across the canvas along with their colours.

In the future, I would like the artwork to become more dynamic and closer to an actual rangoli design. I imagine the outer circles slowly rotating, smaller circles filled with different colors, and more intricate shapes combining into floral or star-like motifs. Expanding beyond just circles and triangles would also bring the piece closer to the vibrancy of traditional rangoli while preserving its digital, algorithmic foundation.

This project allowed me to merge childhood memories, cultural traditions, and coding in a way that felt both nostalgic and innovative. Just as rangoli brings people together during Diwali, I hope this digital version shows how art and technology can come together to celebrate tradition in new ways.

For me art and its beauty has always been defined in terms of structure, order ,and algorithmic precision. Coming from a computer science background, I recognized beauty in the patterns that nature presents, like the spirals of sunflowers reflect the Fibonacci sequence. Yet, watching Casey Reas’ Eyeo talk has broadened my perspective.

Reas’ idea of introducing chaos into order struck me as both unsettling and exciting. It reminded me of the games I have created so far, taking me back to the simple bouncing ball game. What if the ball bounces in the exact same way every time? After a few rounds, the game would become predictable and monotonous. What keeps me engaged, in games or in art, is that element of surprise, the small but meaningful ways randomness shifts the experience. Reas framed this randomness not as the enemy of structure, but as its partner, an insight that felt both intuitive and profound once I heard it. Maybe the most memorable experiences emerge when we loosen the grip of order. In fact, Reas’ examples like turning cancer cell reproduction data into patterns made me realize how randomness can still carry intent, even narrative. The rules guide the outcome, but the unpredictability breathes life into it.

In my future work, I aim to set clear rules or structural boundaries for my projects, but within those bounds, I’ll allow random processes to shape outcomes. For example, in an artwork, I might define the color palette and number of shapes, but let their positions, sizes, or interactions emerge randomly every time the code runs. 

Reflecting on Reas’s talk, I believe the optimal balance lies at 60-40: about 60% structure and 40% randomness. The structured part grounds the work, maintaining coherence and intent. The random component injects surprise, transforming an algorithmic process into something truly engaging. This approach enriches both my understanding of art and my development process. By integrating defined rules with elements of unpredictability, I hope to create work that is structured yet lively.

When I saw the examples in class, I knew I wanted my self-portrait to have an element of fun. A touch of movement to make it more interesting. So after brainstorming I decided to add a small cute wink in it. I didn’t have any answers to how to do it or when it would happen, but I knew starting was the best way to develop the idea.

I started by building the background. I chose a beach scene because it’s bright, fun, and resonates with my personality. Using just four rectangles, I created the sand, sky, and beach.

Next, I focused on the structure of my portrait. I used an ellipse for the face, and for the neck, I initially tried combining a circle and rectangle. After exploring the documentation, I realised a rounded rectangle could give the same effect with fewer shapes, so I went with that.

Then, the sweater collar was created using two triangles, traced easily with the print(mouseX, mouseY) trick taught in class. The body was a simple rounded rectangle to echo the shape of the shoulders. Once the structure was in place, I added details such as the nose, eyes, and sweater textures.

Finally, I added the wink. I wanted the portrait to respond to time or interaction. I decided that whenever the cursor moves to the right side of the canvas, the portrait would wink. Hence, I set the if condition that when position of mouseX is greater than 300 (middle of canvas) then draw a different shape. If condition made this simple because the eye now has two states: open or closed.

if (mouseX > 300) {
    stroke('black');
    strokeWeight(2);
    line(315, 190, 325, 190); // closed eye line
  } else {
    circle(320, 190, 10); // open eye
  }

The hardest part of this portrait was the hair. I initially considered straight hair, but that looked too robotic. After several iterations, I decided on curly hair with circles on the ends to give a flowing effect. By leaving one side slightly incomplete, it adds the sense of wind moving through my hair.

In the future, I’d like to make the portrait even more dynamic: perhaps animated clouds or waves in the background, and more detailed facial features. I also hard-coded most values, so I want to explore making my code more dynamic and flexible, so changes in one area automatically adjust related elements.