Category: S2025 – Mang

For the task of creating generative text, I thought of representing historical conceptual frameworks on machine to create a journey through the development of this conceptualization from literature such as Turing’s ‘Computing Machinery and Intelligence’ in 1950, as well as Isaac Asimov’s exploration of social concepts through the use of machines and robots as a literary medium.

I aimed to extend this literature to create an interactive journey, where the user’s mouse movements will influence the tone of the sentences generated , transitioning to a more hectic state.

I am particularly proud of being able to make the generative text based on a function  ‘mood’ which changes how the text is displayed. This required several iterations to nail down:

choosePhrase(type) {
        if (this.mood >= 0.9) {
            return random(this[`veryPess${type}`]);
        } else if (this.mood > 0) { // Use regular pessimistic phrases
            return random(this[`pess${type}`]);
        } else {
            return random(this[`opt${type}`]);
        }

The optimistic phrases display by default, but the method enables the dynamic changing of text which highlights the aforementioned purpose and intent. Other challenges I faced were making the text display within the correct boundaries, and just thinking of which sentences to formulate and how they would be perceived by the user to try to improve the interaction as much as I can.

READING

Something that still intrigues me and is of particular interest is the conceptual framework on interaction and the mediums by which we express it. There is no agreement of one single concept of interaction. As a consequence, the mediums through which this interaction can be facilitated are limited by our agreement and interpretation of the conceptual framework at hand. I believe it is difficult to reason about the other fundamental notions presented by the Norman without a detailed analysis of the causality in human-centric design, the reception of it, and as a consequence the dynamic improvement of this concept in literature.

I am able to apply the principles and notions presented by Norman by utilizing the methodology in which he discusses these concepts firstly.  Secondly, I am also able to utilize his critical analysis of concepts in psychology on human interaction and human perception to have a deeper understanding of how the end-user interacts with my generative artwork or projects. In fact, this part of chapter 1 is of key interest, where the analysis of a design takes a methodological approach in viewing instances of design and how humans perceive them, whilst hinting at a psychological notion and referring to psychological literature. This also hints towards a more experiential view of this principle of human design (whether it is human centric or centered towards something else).

• What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

One thing recently is that in the game I’m playing right now, a Pokémon game, I cannot reorder my card decks even though on so many other UI interfaces I can, it is really frustrating that I cannot do this on an iPhone.

• How can you apply some of the author’s principles of design to interactive media?

I think they are especially applicable. Keeping in mind that products mus be designed with the end-user in mind, we can use the assumptions people will have about things (link should be pressed) (pages scroll down) as ways to help us decide how we should structure the media we create to make it more accessible for users. It is a matter of stepping into their shoes and thinking about how would someone with no knowledge of the thing they are interacting with do upon first instinct.

Reading Reflection – Week 5

One thing that annoys me is faulty elevator button designs such as the “Door Close” button that doesn’t work or when floors are numbered in a way that makes no sense. Some others make you swipe a keycard first before you press a floor, but you can’t tell that you’re meant to do that, so you just keep pressing the button and can’t figure out why it’s not working. The easy fix is more obvious signifiers, such as a little light or message that says, “Swipe card first.” This is Norman’s guideline that good design must make things obvious so users won’t need to guess. As for interactive media, I believe Norman’s principles can be applied there too.

For example, in VR, buttons and menus need to behave in intuitive ways—like grabbing objects in the same way you would in the real world instead of using awkward button presses. And feedback is crucial as well. If I tap at something within an application or a game, I expect to feel the effect of the tap in some way, with sound, graphical feedback, or vibration. Norman speaks quite extensively about human-centered design, and my favourites kinds of interactive experience are when things just naturally work the way you think you can do with them—they feel intuitive and do not require interrupting flow for working out what you are meant to be doing.

For this week’s project, I wanted to create something with a cosmic theme that felt both interactive and magical. I focused on shades of blue and purple to match the theme and added a twinkling star effect as the background. The core of the project is the interactive bubbles—users can click on the screen to generate bubbles, and each bubble will display a random star sign. Clicking on an existing bubble reveals a short message related to that star sign. The letters of the message then fall down in an effect imitating a meteor shower.

CLICK TO CREATE AND POP BUBBLES

One part of the code that I’m particularly proud of is the way the bubbles and the falling messages behave. When the user clicks on a bubble, the bubble displays a message tied to the star sign. After a few seconds, the letters from the message “fall” like meteors. This falling effect was challenging to create because I had to ensure the letters moved smoothly and looked dynamic without overlapping or bunching together. Balancing the timing and position of each letter took some effort, but I’m happy with how it turned out. It adds a playful touch to the overall design.

class Fortune {
  constructor(x, y, message) {
    this.x = x;
    this.y = y;
    this.message = message;
    this.alpha = 0; // Start invisible for fade-in effect
    this.timer = 90; // Now lasts for 3 seconds
    this.fadeInSpeed = 5; // Controls how fast it fades in
    this.released = false;
    this.floatOffset = 0; // For a slight floating effect
  }

  update() {
    if (this.timer > 0) {
      this.timer--;
      if (this.alpha < 255) this.alpha += this.fadeInSpeed; // Gradually appear
      this.floatOffset = sin(frameCount * 0.1) * 2; // Subtle floating effect
    } else if (!this.released) {
      this.releaseLetters();
      this.released = true;
    }
  }

  display() {
    if (this.timer > 0) {
      push();
      translate(this.x, this.y + this.floatOffset);

      // Glowing text effect
      fill(255, 255, 255, this.alpha);
      textSize(14);
      textAlign(CENTER, CENTER);
      drawingContext.shadowBlur = 10;
      drawingContext.shadowColor = color(255, 200, 255, this.alpha);

      text(this.message, 0, 0);

      pop();
    }
  }

  releaseLetters() {
    for (let i = 0; i < this.message.length; i++) {
      rainingLetters.push(new Letter(this.x, this.y, this.message.charAt(i)));
    }
  }
}


class Letter {
  constructor(x, y, char) {
    this.x = x + random(-10, 10);
    this.y = y;
    this.char = char;
    this.speed = random(1, 3);
    this.alpha = 255;
  }

  update() {
    this.y += this.speed;
    this.alpha -= 3;
  }

  display() {
    push();
    translate(this.x, this.y);
    fill(255, this.alpha);
    textSize(20);
    textAlign(CENTER, CENTER);
    text(this.char, 0, 0);
    pop();
  }
}

I created an interactive galaxy simulation where users can draw stars onto the canvas by clicking the mouse. The stars are generated based on data provided in a CSV file, and the galaxy background moves and spirals as part of the effect.

One of the most challenging aspects of this project was working with dynamic data in the form of a CSV file and integrating it into the interactive star drawing. I wanted to make a galaxy where the background constantly moved while the user could add stars by clicking on the canvas. The CSV file had to be loaded, parsed, and used to generate star properties such as position, size, and color. Managing the data flow, especially ensuring that the properties were being applied correctly to each star object, was tricky.

The file contains predefined star data such as position (x, y), size, and color (r, g, b). In the preload() function, the CSV is loaded using loadTable(), which makes the data accessible within the program. After that, in the setup() function, I loop through each row of the CSV and extract these values to create star objects. These stars are then pushed into the stars array, which holds all the stars that will be drawn on the canvas.


for (let i = 0; i < starData.getRowCount(); i++) {
let x = starData.getNum(i, 'x');
let y = starData.getNum(i, 'y');
let size = starData.getNum(i, 'size');
let r = starData.getNum(i, 'r');
let g = starData.getNum(i, 'g');
let b = starData.getNum(i, 'b');
stars.push({
x: x,
y: y,
size: size,
color: color(r, g, b),
brightness: random(180, 255)
});
}


Right now, all the stars are drawn on the same layer, which can make the galaxy feel flat. I would like to improve this by adding a sense of depth—farther stars could be smaller and move slower than closer stars, and also add different layers of stars to simulate foreground and background elements. Also, I would like to improve the galaxy background, it could be enhanced by adding a texture or some glowing nebula-like shapes to give more life and movement.

While reading Don Norman’s “The Design of Everyday Things”, I was heavily agreeing with his notes on poor design making everyday tasks unnecessarily difficult. An example I found myself thinking of was of the commonplace microwave. Every student lounge in the NYUAD dorms has been provided with one, but each has a slightly different usability, making it an irritating chore to relearn where all the controls are. Many have excessive buttons with controls such as “Auto-Defrost”, “Popcorn”, or have random food symbols with no clear indication of what that setting does. The button layout is unintuitive, and can make tasks like setting a power level or temperature more tedious than it needs to be. This design could very easily be improved, by removing unnecessary additions, and making more-utilized features like the power-level or the timer more prominent. The arrangement of buttons should logically reflect their use. If there’s a sequence required (such as first setting a temperature, then a timer), the layout should guide users intuitively from left to right or top to bottom.

Terrible design aside, I found many of Norman’s points relevant in terms of interactive media. A key aspect of IM is the user interaction, and a user will not fully appreciate the functionality of a design if it is very unintuitive to use or tedious to learn. Websites, apps, video games, and even art pieces, should have visual cues that are easy to understand and distinguishable. Design shouldn’t suffer due to functionality, but that doesn’t mean that it shouldn’t be functional at all. Users should be able to recieve immediate, meaningful responses to their actions, not a frustrating mess.

One thing that drives me crazy is the automatic doors at the D2 Dining Hall. These doors tend to close too quickly, often shutting in people’s faces and making them difficult to reopen. This creates frustration, especially during busy meal times when students are entering and exiting frequently. The problem seems to stem from poor sensor placement or improper programming of the doors’ timing mechanisms.

This is us:

To improve this, the sensors should be recalibrated to ensure they detect approaching individuals from a greater distance and remain open long enough for safe passage. A more intuitive design could also incorporate clear signifiers—such as visible sensors or a light indicator—to communicate to users when the doors are about to close. These adjustments would align with Don Norman’s design principles, particularly the importance of discoverability, ensuring that users can easily and safely navigate the entryway.

How it feels to enter just before the door closes:

In Interactive Media, clear conceptual models help users predict how a system functions. For example, a digital audio workstation (DAW) for music production should visually resemble a real mixing console, helping users transfer their real-world knowledge to the digital interface. If a system’s structure contradicts user expectations, such as a website with illogical navigation, it creates confusion. So, a well-designed user interface (UI) ensures that users do not have to guess where to tap or click. This aligns with Norman’s principles of design, particularly discoverability, feedback, and conceptual models, which are highly relevant to interactive media

What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

What drive me crazy is the back of a normal wooden HB pencil once the eraser is finished. It is understandable that the metal band was designed to secure the eraser, but what if I excessively used it throughout handwriting and hear a screeching sound, similar to nails on a chalkboard? Nowadays with new materials used to secure erasers on pencils, I believe they should get rid of the metal band on the pencil end.

1. The metal band itself can feel uncomfortable when touched or pressed against the skin. It’s often slightly sharp and can feel like it’s tugging at your fingers or the paper.
2. When I have to erase something on a page unintentionally, it would be sharp enough to tear the paper apart.

I wish that these wooden pencils at least replace the metal bands with materials like rubber, silicon since to me, rubber and silicon would give the pencil a soft, smooth feel, and they’d be less likely to scratch or irritate your fingers.

How can you apply some of the author’s principles of design to interactive media?

To apply these principles, it ensures that technology aligns with human needs, making systems more intuitive, efficient, and enjoyable to use. With the use of his principle of affordances, it can help users understand what actions are possible, while signifiers provide clear cues to guide them, like buttons, links, and things the mouse can hover over, so that it can be accessible to the users. To me, a well-designed model for websites and apps helps users predict how a system works. While technology can make tasks easier, it can also add complexity, so designers must carefully balance functionality, usability, and aesthetics to create a smooth and engaging experience.

Concept

For the fourth assignment, I will present a sentence generator that provides new drawing ideas. When you hit the “Enter” key, the sentence displayed will be changed to a new randomly generated idea. The interface has a beige color to resemble a warm, inviting workspace. On the left, the text “Possible Drawing Ideas” is centered, and a small, cute pencil image is positioned just below it. On the right side, a large white rectangle looks like lined composition paper, with blue horizontal lines and a red border to make it look like a notebook page. The sentence generator uses three arrays—subjects, verbs, and objects—to construct new and random sentences whenever the “Enter” key is pressed. This is inspired by word generators online, more specifically the drawing generator below:

https://randomwordgenerator.com/drawing-ideas.php

I always wanted to know what to draw after a while of not doing so, so I hoped this generator could help me generate ideas on what to draw during my freetime.

Code Highlight

A a snippet i am proud of is this one:

function generateNewSentence() {
  let s = random(subjects);
  let v = random(verbs);
  let o = random(objects);
  currentSentence = `${s} ${v} ${o}.`;
}

This is because when I first started creating this, I struggled to get the sentence structured properly. At first, I couldn’t figure out how to manipulate the arrays and get the randomly selected items to fit properly into the structure of the sentence. I kept getting errors like missing spaces or syntax errors because I didn’t understand how important it was to use template literals for dynamically building strings. Upon discovering that, I was still struggling with randomization, e.g., getting an undefined result due to the arrays being accessed improperly. Eventually, after practicing with W3Schools and learning about template literals using this as reference:

https://www.w3schools.com/js/js_string_templates.asp  

I realized I needed to structure the string with it in a more precise way to avoid errors with spacing.

Embedded Sketch

(You can go to p5.js to see it clearly)

Reflection

Overall, this was a really fun project to play with texts and random words to generate one sentence. I really enjoyed testing my project by hitting “Enter” to transform the sentence to another random one. However, what had frustrated me sometimes is finding out the fonts for separate texts. I once tried to add another font but it ended up changing the size of the title “Possible Drawing Ideas” and caused some parts of the sentence to be chopped off (See below).

I can see myself using this feature in p5.js more and I can add extra details to make it seem a bit more realistic (shading, and details on the small pencil).

In this assignment, I created an interactive visualization featuring animated letters that swirl, drift, and change colors as they fall across the screen. The letters are selected randomly from a character set of uppercase English letters and numbers. Each letter moves independently with unique properties such as speed, rotation, color cycling, and sinusoidal horizontal drift. The use of transparency in the background creates a subtle trailing effect, enhancing the sense of motion and fluidity. The goal of this project was to create an aesthetically engaging and dynamic animation with a mix of structured randomness and organic movement.

One part of the code that I am particularly proud of is the display() method inside the SwirlingLetter class. This function not only ensures smooth rendering of each letter but also cycles through colors using sinusoidal variations. This approach creates a mesmerizing shifting color effect without requiring predefined color schemes. Another aspect I appreciate is the reset mechanism in update(), which seamlessly resets letters when they fall below the canvas, ensuring a continuous flow of animation. Looking ahead, possible improvements include adding user interactivity, such as allowing the mouse to influence letter movement or introducing gravity variations for more dynamic behavior. Another potential enhancement could involve applying Perlin noise for smoother, more naturalistic drifting patterns, making the animation feel even more organic.

display() {
  // Calculate color based on colorPhase (sin/cos wave)
  let r = 127 + 127 * sin(this.colorPhase);
  let g = 127 + 127 * sin(this.colorPhase + TWO_PI / 3);
  let b = 127 + 127 * sin(this.colorPhase + (2 * TWO_PI) / 3);
  
  push();
    translate(this.x, this.y);
    rotate(this.angle);
    textSize(this.fontSize);
    fill(r, g, b);
    text(this.char, 0, 0);
  pop();
}