Author: Shahram Chaudhry

As a senior actively applying to jobs, one thing that really drives me crazy is Workday applications. When I spend time filling out a long online application, only for the site to suddenly prompt me (after I click “Next”) to log in or create an account. Sometimes, it even realizes I already have an account and redirects me to a different version where I am signed in. The logical solution would be to sign up or log in first, but the problem is that not all applications require it upfront. Some let you start without logging in, others ask midway, and many don’t make it clear at all. This inconsistency forces me to guess the “correct” order of actions every time, which becomes especially frustrating when data gets lost in the process. A better approach would be a more consistent and user-friendly UX design: clearly prompting users at the start to sign in, continue an existing application, or proceed as a guest with visible consequences for each. Even more importantly, any entered information should be temporarily saved in local storage or cache, so if a redirect occurs, my progress isn’t wiped out. Small design choices like these can make a huge difference in preserving user effort and trust.

As for the reading, it was a fun and informative read. I used to think interaction design and experience design were basically interchangeable. But now I understand that interaction design is more about usability, discoverability, and understanding, while experience design is about the emotional impact and satisfaction we feel when using something. That distinction really clicked for me. I also loved the conversation about how engineers think logically and they think everyone does too or everyone should at least, but systems need to be intuitive not logical. Just because the engineers wrote a manual to use it, and the logical step for users is to read the manual before using the system, doesn’t mean they will. So it’s the desginers/engineers job to understand their audience/people and design accordingly. Human’s shouldn’t have to try to understand all the different rules different machines/systems have. I mean I can see the microwave with at least 10 different buttons, but I always use the same settings. It’s not that I don’t want more options, it’s that the way they’re presented makes them hard to understand. This is where Norman’s principles of discoverability and understanding come in. If something is hard to discover or hard to understand, we just stop using it.

In interactive media, principles like affordances, signifiers, and feedback can greatly improve how users interact with a piece. Affordances aren’t just properties of an object, but also depend on what the user is capable of doing. A heavy chair might afford sitting, and maybe lifting, depending on who is interacting with it. That highlights how important it is to design with the user in mind, not just the object. For example, a scrollable layout that hints at more content affords downward movement, a pulsing microphone icon acts as a signifier that it’s listening for input, and a search bar that updates results in real-time offers immediate feedback. These small design choices guide, inform, and respond to user actions in intuitive ways. I applied these ideas in my own p5.js generative art sketch. I included a placeholder that says “Enter a word” to clearly signal that users need to type something in the input box. Once the user presses Enter, the word appears instantly on screen providing immediate feedback.

This project started with a simple yet poetic idea , visualizing lines from old Urdu poetry on screen, placing the main verse at the center and surrounding it with words from the next line, like floating thoughts. But then I began replacing those with some of my favorite Urdu song lyrics , the kind I really connect with , trying to merge different verses across songs to create something emotionally layered. That’s when I was reminded of Antakshari, a fun game many of us grew up playing. The rules are simple: one person sings a song, and the next person has to sing another song that starts with the last letter of the previous one. I loved the idea of using that structure as the basis for generative text. I initially wanted to build this fully in Urdu, but I realized it would be tricky to detect and match the last letter accurately in the script. So, I switched to English to get the logic working smoothly. Instead of full lyrics, I used individual words and for each word, the next one is chosen randomly from a list of possible options starting with the last letter. That means each run of the program generates a unique chain of words, but with a meaningful constraint just like Antakshari. I also added visual flair: a short delay between words, small random rotations and scaling for different text sizes so it wouldn’t look like a grid structure and feel a little unpredictable.

The two functions placeWord() and pickNextWord() were the heart of my sketch. I was particularly proud of how I used my prior knowledge of dictionaries to implement the words dictionary, which acts as a lookup system. It takes the last letter of the previous word and finds a list of possible next words starting with that letter. Then I randomly select one to create branching possibilities making the output  different every time.

In placeWord(), I figured out how to make each word feel organic and unique by adding randomness to its angle and size using random(-PI/16, PI/16) and a scaling factor. I also calculated the text width dynamically so I could position the next word without overlap between words. These choices made the flow of words appear natural.

function placeWord(word) {
  let fontOriginalSize = 24;
  let wordMargin = 8; 

  let angle = random(-PI / 16, PI / 16);
  let scaleFactor = random(0.9, 1.3);
  //find color from colormap
  let firstLetter = word.charAt(0).toLowerCase();
  let wordColor = colorMap[firstLetter];
  
  
  textSize(fontOriginalSize * scaleFactor);
  let wordWidth = textWidth(word);

  placedWords.push({
    word: word,
    x: gridX,
    y: gridY + random(-3, 3),
    size: fontOriginalSize * scaleFactor,
    angle: angle,
    color: wordColor
  });
  
  //move the horizontal position to right for next word
  gridX += wordWidth + wordMargin;
  
  //starts a new line/row
  if (gridX > width - 100) {
    gridX = 50;
    gridY += gridSpacing;
  }
  //canvas not filled checked by seeing if we reach bottom or not
  if (autoRun && gridY < height - 50) {
    pickNextWord();
    lastPlacedWord = nextWord;
    setTimeout(() => placeWord(nextWord), 150);
  }
}
function pickNextWord() {
  let lastLetter = lastPlacedWord.charAt(lastPlacedWord.length - 1).toLowerCase();
  //find the candidate words using lastletter and choose a random word
  let candidates = words[lastLetter];
  nextWord = random(candidates);
}

Here’s the sketch:

Eventually, I’d love to go back to my original vision and bring Urdu fully into the experience. That would mean figuring out last-letter detection in Urdu script and possibly integrating a calligraphic font to preserve the beauty of the language. If I can pull that off, the result would be a truly generative, Urdu Antakshari as a perfect blend of nostalgia, music, and generative text. 

 

A strongly interactive system, in my view, must first be intuitive. This doesn’t mean it has to be entirely self-explanatory, but if users need several pages of instructions just to figure out how to interact, the design has already failed. I mean who is going to even read 2 pages of manual/instructions these days, right? The interaction should feel discoverable through exploration.

As Crawford explains, any interaction has three parts: listen, think, and speak. If even one of these elements is weak, the entire interaction becomes unsatisfying. I think that in creative computing or digital art we often overemphasize the input (listening) and visuals (speaking) but ignore the algorithm or logic (thinking). The system should have enough diversity in its logic to produce interesting, varied outcomes rather than repeating the same response every time. Take Super Mario as an example. Imagine a version where you could only press the spacebar to jump, and Mario never actually moves only the background scrolls to simulate motion. Technically, that would still be “interactive,” but it would quickly become boring. A good interactive system allows you to achieve multiple outcomes for example move left, right, jump, pause, and even fail in different ways, giving players control. This diversity of interaction is what makes it engaging.

I also think interaction should strike a balance between predictability and surprise as we’ve discussed in class. Too much predictability leads to boredom  for instance, a game with only one level becomes dull after you memorize where every obstacle is. But if an interaction is completely chaotic it becomes unintuitive  and confusing. The balance is a design where users can learn patterns but still encounter enough new elements to stay curious.

Reflecting on my own p5 sketches, I realize I rely heavily on mouse clicks, which makes them feel reactive rather than truly interactive. To improve, I could add keyboard controls, use microphone input for both visual and audio effects, and introduce randomness so every run feels slightly different. Immediate feedback maybe by simulating animations, color changes etc. would also make interactions more interesting. Finally, asking friends to try the sketches and improving based on their feedback would help me design from the user’s perspective, not just my own.

 

We are surrounded by people every day , especially as students living on campus. We run into people everywhere, be it the dining hall, the library or even the laundry rooms. I wanted to capture that feeling by filling the entire canvas with people (the dots represent people).

But we don’t actually connect with everyone we see. In my sketch, I use distance as a threshold that determines whether a line forms between two people. The line symbolizes the emotional closeness. If two people get close enough emotionally, a connection forms between them. But life happens. People drift apart, connections break (i.e. line disappears). This is very dynamic, just like in real life.

Also, when the user clicks, a new person appear almost like meeting someone new. At first they are brightly colored because they don’t exactly fit in our network of people just yet, but over time they fade into black, representing how over time they become part of our network. While they are still “new” they don’t form any connections which mirrors how it usually takes time before we can emotionally connect with a new person. The more you click, the more new people are added, just like how engaging with others more often leads to a growing network.

Here’s the code:

let people = [];
let numPeople = 30;
let connectionDistance = 80;

const newPeopleColour = [
  [255, 0, 0],    
  [0, 255, 0],    
  [0, 0, 255],    
  [255, 255, 0],  
  [255, 0, 255],  
  [0, 255, 255],  
  [255, 128, 0],  
  [128, 0, 255]   
];

function setup() {
  createCanvas(600, 400);
  // Create initial people 
  for (let i = 0; i < numPeople; i++) {
    people.push(new Person(random(0,width), random(0,height), false));
  }
}

function draw() {
  background(240);
  for (let i = 0; i < people.length; i++) {
    // Update & display the person
    people[i].move();
    people[i].updateColor();
    people[i].display();

    // Check distance with all other people and make connections 
    for (let j = i + 1; j < people.length; j++) {
      let d = dist(people[i].x, people[i].y, people[j].x, people[j].y);
      //if close enough and not new make connection
      if (!people[i].isNew && !people[j].isNew && d < connectionDistance) {
        stroke(0,50);
        line(people[i].x, people[i].y, people[j].x, people[j].y);
      }
    }
  }
}

function mousePressed() {
  people.push(new Person(mouseX, mouseY, true));
}

class Person {
  constructor(x, y, isNew) {
    this.x = x;
    this.y = y;

    this.speedX = random(-3, 3);
    this.speedY = random(-3, 3);

    if (isNew) {
      // Pick a bright random color
      let c = random(newPeopleColour);
      this.r = c[0];
      this.g = c[1];
      this.b = c[2];
      this.isNew = true;
    } else {
      // For initial people make them black
      this.r = 0;
      this.g = 0;
      this.b = 0;
      this.isNew = false;
    }
  }

  move() {
    this.x += this.speedX;
    this.y += this.speedY;

    // Bounce off edges
    if (this.x < 0 || this.x > width) {
      this.speedX *= -1;
    }
    if (this.y < 0 || this.y > height) {
      this.speedY *= -1;
    }
  }

  updateColor() {
    if (this.isNew) {
      // Fade to black eventually 
      this.r = max(0, this.r - 1);
      this.g = max(0, this.g - 1);
      this.b = max(0, this.b - 1);

      if (this.r === 0 && this.g === 0 && this.b === 0) {
        this.isNew = false;
      }
    }
  }

  display() {
    noStroke();
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, 8, 8);
  }
}

The main challenge I faced was that at first, two lines were being drawn between the same two people which broke the clean look of the network. I solved this by using a nested for loop and tarting j from i + 1 which avoided checking duplicate pairs and made sure each connection line was only drawn once. I also really like the colour-fading logic, it’s simple but menaingful as new people slowly assimilate into the network. The max() function is a small but important detail, it prevents colors from becoming negative and making sure the isNew flag flips to false so these people can eventually form connections.

In terms of future work and improvements, I could add a ‘main character’ , a single person who’s at the center and stays still while the rest of the network moves and connects around them. This would focus on the idea of how one person’s network changes.

I think humans are really fascinating because we’re full of contradictions. We long for order; familiar, predictable, structured patterns in our lives. But at the same time, we crave chaos; the unfamiliar, the unexpected, the little bit of disruption that shakes us out of routine. A very obvious example is how much we rely on having a daily routine. Most of us feel disoriented without some kind of order: a set time to wake up, a rhythm to our workday, the same coffee order every morning. Especially now, when distractions are just a notification away, that structure is often the only thing that keeps us grounded. But then, almost paradoxically, there comes a point where too much order starts to feel suffocating, and we search for a dose of chaos. That’s why vacations, spontaneous trips, or even small detours from our daily habits feel so refreshing. What’s interesting is that this balance between order and chaos looks different depending on where you are in life. For instance, I’ve talked to people a few years out of college who told me that the desire to explore the unknown is strongest at my age. Later, they said, you find more comfort in the predictability of routine.

This makes me think about how randomness in art isn’t just a visual effect, but also a negotiation between control and surrender. From the artist’s perspective, it’s about deciding how much control to let go of : how far to allow chance to shape the outcome? As humans, we instinctively want to manage and predict everything, but there’s something powerful, even humbling, about letting unpredictability take over and seeing what emerges. From the viewer’s perspective, though, the experience is different: our brains are wired to search for patterns, even in what looks chaotic. That tension, between the artist releasing control and the viewer trying to find some meaning in the randomness, creates a space of curiosity and engagement.

Another thing I couldn’t help but think about was that the randomness in computer art isn’t truly random at all. It’s pseudo-random, generated by algorithms. Yet even though it’s artificial, it still produces the illusion of chaos. I find it interesting that machine-made randomness can still tap into the same feelings we get from natural chaos. To me, the perfect balance is when order provides familiarity but randomness introduces curiosity, surprise, and the possibility of discovery. That’s what makes a piece feel alive.

One part of the video that really caught my attention was the phrase “natural unreasonable order.” It made me think that the more humans chase perfection and efficiency, the more our way of living starts becoming unsustainable. We often wonder how people managed without all the technology and advancements we have today, but the truth is life on earth has always sustained itself regardless of technology.

In my piece, I wanted to capture the balance by mixing randomness and structure. The randomness in how the grid gets colored helps keep the viewer’s attention, while my choice of squares over circles represents order versus chaos. Squares feel more rigid and structured, while circles feel looser and more chaotic. It takes a few seconds for the grid to gradually fill with color, almost like watching the slow formation of nature itself.

But here’s the twist: as long as you let the process run undisturbed, the artwork stays vibrant. The moment you interfere by clicking, the cells start turning white. If you keep interfering, the whole grid could eventually end up blank – an analogy to what happens when humanity disrupts nature’s delicate, chaotic order: color fades, and life disappears. I was debating whether or not to have a reset option, but ended up not having it, because life never gives us the chance to go back and fix our mistakes anyways. 

There’s also another layer to this idea. We usually celebrate curiosity, but there’s a point where too much curiosity can lead to destruction. Curiosity kills the cat, right?

Here’s the Interruption:

 

I like this code because it’s kind of the main part but it uses nested for loops to create a grid, where each cell has a random chance of being filled with a random color, unless it has been disabled by a click :

function draw() {
  for (let c = 0; c < cols; c++) {
    for (let r = 0; r < rows; r++) {
      if (!disabled[c][r] && random() > p) {
        fill(random(palette));
        rect(c * cell, r * cell, cell, cell);
      }
    }
  }
}

For improvements and future work, I would like to add a slow fade effect so that when a cell is clicked, instead of instantly going white, it gradually fades away, almost like nature decaying over time. It might also be interesting to add sound to the clicks, so that human interference is not only seen visually (through the white cells) but also felt in other ways.

As someone who grew up watching suspense, mystery, and thrillers, I have always had a love for the unknown . It is practically part of my personality at this point. So for my self-portrait, I wanted to bring in that sense of intrigue.

When the sketch first loads, you see an anonymous figure – a faceless, question-marked silhouette. But if you click anywhere on the canvas, the figure is replaced by a self-portrait. Click again, and it disappears back into anonymity.

On the surface, it is a fun interactive switch. But on a deeper level, I think it reflects something more personal: the idea that people can choose to know you  or not. Maybe someone clicks, sees the portrait (a glimpse of who I am), and then clicks again to hide it. Maybe they don’t want to see me. Or maybe, like in real life, they’re unsure if they’re ready to know the full picture.

I guess that is the suspense in being known . Once someone sees you, they can never unsee you. But they can still choose to look away.

Here is my sketch.

The part of my code I am most proud of is the use of a boolean and if…else logic to toggle between the anonymous and self-portrait modes when the user clicks on the canvas.

function draw() {
textAlign(CENTER, TOP);
textSize(12);
noStroke();

if (showPortrait) {
background(255);
fill(0);
text('click to hide', 200, 50);
drawPortrait();

} else {
background(0);
fill(255);
text('click to reveal', 200, 50);
drawAnonymous();
}
}

function mousePressed() {
showPortrait = !showPortrait;
}

I am also quite proud that I managed to create a relatively expressive smile using just one line of code. It is simple, but adds a lot of personality in I think.

arc(200, 330, 30, 10, 0, PI, CHORD);

For future improvements, I would love to build on the toggle idea by introducing multiple personalities or moods instead of just a binary switch between anonymous and self-portrait. I believe everyone reveals different layers of themselves depending on the environment or the people around them. It would be really cool if the portrait could reflect that. For example, changing facial expressions, clothing, or color schemes to represent different sides of my personality: serious, playful, thoughtful etc. This would add both depth and relatability to the sketch.