Month: February 2024

The psychological principles for design make a lot of sense to me. Of course affordances and mental models would shape how people use stuff – those concepts seem so core. Formalizing them into the design process feels overdue in a way. Still, I wonder – following guidelines can limit you too, can’t it? The times I’ve felt the spark of creativity or problem-solving have actually come a lot from defying conventions or unspoken “rules.” So where’s the line between guidance and overstandardization? Feels like a tension worth watching.

And even with technology’s insane pace of advancement, I think designers still have to be minimalists at heart. What separates a seamless, delightful experience from a bloated, confusing one is restraint and knowing when to stop adding features just because you can. But how designers make those calls is an art, not a science.

One part that really resonated was thinking about mental models across teams. We all carry biases and assumptions and lenses we see the world through. That exists even (maybe especially?) in cross-functional groups. Creating spaces where communication norms themselves feel simplified and clarified could make a world of difference in alignment, collaboration and innovation. There’s surely design opportunities even in how organizations function on a daily basis.

Overall this piece brought up great food for thought, and refreshed my appreciation of design thinking. I like writings that make me feel both grounded conceptually and curious to apply ideas further. This hit that sweet spot through framing the challenges creatively vs. just technically. The blend of examples and analysis kept a nice engaging pace too. Overall, this was a really enjoyable read!

I’ve always loved cracking open fortune cookies to see the surprise message inside. I decided to recreate this idea digitally by building an animated, interactive fortune cookie in p5.js that reveals a new quirky fortune each time it’s clicked.

The core concept here was to display random fortunes generated from a list of silly phrases. I started by coming up (with the help of ChatGPT) with a whole array of potential fortune texts – things like “Run” or “Don’t eat the paper.” I tried to channel the cryptic non-sequiturs you might find in real fortune cookies.I then set up a pickNewFortune() function that can select a random element from this master list of fortunes. This gets called every time the cookie finishes its opening animation.

So on each cookie click, it grabs a new random index from the list and stores this fortune string to display.

The visual animation of the cookie opening was also really fun to build out. I made the separate cookie halves tilt back and apart slowly to reveal the text underneath. I’m really happy and proud with how realistic the motion looks!

The code for the animation looks like this:

function animateCookie() {
  let halfAnimationStep = maxAnimationStep / 2;
  let angleOffset, pullOffset;
  
  if (animationStep <= halfAnimationStep) {
    // Tilt cookie halves apart  
    angleOffset = map(animationStep, 0, halfAnimationStep, 0, -40);
    pullOffset = 0; 
  } else {
    // Finish opening animation
    angleOffset = -40;  
    pullOffset = map(animationStep, halfAnimationStep, maxAnimationStep, 0, 200);
  }

  drawFortuneCookie(angleOffset, pullOffset);

  // Progress animation
  if (animationStep < maxAnimationStep) {
    animationStep++;  
  } else {
    state = 'open'; 
  }
}

In the future I could definitely expand and refine this concept even more – perhaps allowing the fortune text itself to animate in different ways for some visual variety. I would also love to enhance the text generation further – for example, mixing and matching fortune text fragments to assemble new combinations. I could also display the text animating onto the screen for more visual interest when the fortune is revealed.

For this assignment, I wanted to recreate the Matrix movie’s Neo sees the matrix for the first time in the scene, in which we see everything in green from Neo’s perspective.

I wanted to create the scene using the transcript of the movie itself. So, I quickly downloaded the transcript from open source. While looking for any tutorials online, I found Daniel Shiffman’s tutorial on creating images with ASCII text. I followed this tutorial only to complete the assignment. Following the tutorial, I started with creating the still image attached to this post with the movie transcript. I quickly realized that due to the presence of unwanted characters (numbers, :, etc.),  the visualization was not looking great. I decided to clean up the transcript according to my needs. I used p5.js to remove any unwanted characters from the data. However, following the tutorial, I could not replicate the brightness using empty/smaller ASCII text, as I was using sentences to create the visualization. So, I decided to manipulate the brightness of the text itself, and it worked. However, moving into the video loop, the code was not working smoothly. I realized that as I was using a large string (3300 lines), the array became too big to loop and refresh in the draw loop. I had to cut down the data to the first 70 lines of the transcript to accommodate that.

 

// draw function
function draw() {
  background(0); // setting background as black

  let charIndex = startIndex;
  // calculating the width and height of the cells
  let w = width / capture.width; 
  let h = height / capture.height;

  // load the pixels of the webcam capture
  capture.loadPixels();
  
  // loops to iterate over each pixel of the webcam capture
  for (let j = 0; j < capture.height; j++) {
    for (let i = 0; i < capture.width; i++) {
      // calculate the pixel index
      const pixelIndex = (i + j * capture.width) * 4;
      // rgb component of the pixel
      const r = capture.pixels[pixelIndex + 0];
      const g = capture.pixels[pixelIndex + 1];
      const b = capture.pixels[pixelIndex + 2];
      
      // calculating brightness 
      const brightness = (r + g + b) / 3;
      
      // Adjust the fill color based on brightness
      // map brightness to green color range
      let fillColor = map(brightness, 225, 0, 225, -150);
      fill(0, fillColor, 0);
      
      textSize(w * 1.3);
      textAlign(CENTER, CENTER);
      
      // retrieve a character from the matrixText string based on charIndex
      let textChar = matrixText.join('').charAt(charIndex % matrixText.join('').length);
      if (random(1) < 0.05) {
        textChar = matrixText.join('').charAt(floor(random(matrixText.join('').length)));
      }
      text(textChar, i * w + w / 2, j * h + h / 2);
      charIndex += rainSpeed;
    }
  }
}

 

I still could not replicate the rain sequence in the visuals as expected. I hope to improve that in the future.

 

I think ‘communication’ is a keyword in interactive media. In real-life communication, for example, if you are a teacher, you should know whom you are talking to and give the information based on their intellectual level. It is important to ensure that the person who is listening to you understands what you are trying to convey. The same mechanism applies to interactive media. Since designers communicate through the results of their designs, the outcome should be very precise, and small details should have the power to deliver certain messages so that the user can feel comfortable. Designs become meaningless if the user does not understand their purpose. They only become useful if there are users that use them properly.

I remember from one of the core classes that I have taken, the professor mentioned the ‘desired path.’ If the walker creates a new path on a road that was not designed that way, it is the designer who miscreated the whole road and did not consider how walkers would prefer to walk. I think sometimes most designers pay too much attention to aesthetics, forgetting the experience part of design, which I understood is very important from the reading text. Designers are responsible for creating things that consider users’ preferences. I think this is the most important thing that I should remember from now on as I go through this course.

Don Norman, author of “Design of Everyday Things” brings various examples and concepts when it comes to technology and challenges that arise with designing devices we use in our everyday lives. The thing that stood out to me the most was his example of a watch with four buttons. The whole paragraph talks about how it makes the user experience less enjoyable since now the watch is not merely about checking time but also providing users with additional functions. While the premise of a more feature-packed piece of technology is quite optimistic, the reality of it only confuses the vast majority of users as it takes away from its main function. Expanded this to today, this remains true. I personally own a smartwatch. Initially, I thought it would be very useful and offer numerous features. While it does all that, after the initial novelty wore off, I saw why so many people dislike them. There is no disagreement that some of these features are quite useful: instant notifications from your phone, the ability to call, reply to messages, check different apps, and so on. However, we already have peace of technology that provides all that and the purpose of the watch is redirected to a compromised clone of such device. Small screen, limited performance, difficulty interacting with UI and small buttons, and abundance of features I will probably never use, are the same sort of challenges Norman talked about. The fact that I have to charge it every day to keep it going puts a huge barrier to usability.
At the end of the day, a watch should serve one function, to display time at a quick glance. How many of us, have used our smartphones to do that even though we ourselves have digital watches on our wrists? We are sacrificing user-friendly design for the sake of complexity. It is a product that tries to be sophisticated – a jack of all trades but never excelling at anything in particular. Even when it comes to displaying time, the options and different layouts get overwhelming. This design ignores fundamental elements of good design which are simplicity, clarity, and ease of use. And what if something goes wrong? It is not a simple repair. It is attractive but not that affordable. Do I regret my purchase? Not really. At least I used it for my homework reflection.

I like how the author points out the fact that no matter how much knowledge the machines’ operators accumulate over the years and how well-versed they are in their field, they still have to make the construction and/or programming simple. It’s all about precision and accuracy, or perfection in the process in other words, which humans are not prone to. But it’s fascinating how, given the contradictory nature between machines and humans, humans have managed to churn out some very advanced technology that requires high level of precision and accuracy and to minimize the number of errors as much as possible merely through experimentation and testing! But that said, added complexities equate increased difficulty in use and frustration. High-tech machines/gadgets today require a lot of knowledge from users, and not every form of knowledge is easy to be acquired.

Another point from the author with which I resonate is about the relationship between affordance and signifier. This kind of relationship is not very clear-cut as one would say, as the author points out, “some affordances are perceivable, others are not” and “perceived affordances often act as signifiers, but they can be ambiguous” (19). Despite the fact that signifiers are more important than affordances, I’ve seen some terrible signifiers that do not fulfil their duty at all, which leaves users to figure out affordances all on their own and hence, suffer from frustration. The more high-tech and more complex machines, the more effort operators should put into curating the signifiers for a more effective affordance from the users.

When I read the description for our assignment, I wondered how to use randomness in generating text. The idea came from my everyday experience. I remember always struggling to choose what to order in fast-food restaurants because there were so many variants. So, the concept of my assignment became using generative text to depict myself in a fast-food restaurant ordering some food.

First, I found a picture of a fast-food restaurant on the internet to use as a background. Then, I also found a speech balloon picture on the internet.

function preload() {
  mypicture = loadImage('speechballoon.png')
  backgroundpicture = loadImage('background.png')
  strings = loadStrings("fastfood.csv");
}

The preload function was used to load these pictures. I used the code I generated for the first self-portrait assignment to make an icon of myself. Then, I used scale() and translate() functions to relocate the icon.

hamburgers, fish and chips, pizza, pasta, fried chicken
french fries, onion rings, chicken nuggets, tacos, ice cream
cola, ginger ale, sprite, apple juice, orange juice

I created a .csv file where the first line was the main dishes, the second line was the side dishes, and the last line was drinks.

//text generator
textSize(30)
text('I want', 190, 100)
textSize(20)
for (let i = 0; i < strings.length; i++) {
  // Split the current line into an array of items (.csv file)
  let items = strings[i].split(', ');
  // Select a random item from this array
  let randomItem = random(items);
  // Display the random item
  text(randomItem, 150, i*30+140);
}

I made a code that chooses a random item from each line and generates text located in the speech balloon. 

function mouseClicked() {
    redraw();
  }

I used the redraw() function inside the mouseClicked() function to regenerate the entire code again, ensuring that the outcome of the three menus (main dish, side dish, drink) would change if the mouse was clicked.

For further improvements, I think I can use a different font and also maybe add more menus, or add a picture of the menu that was chosen randomly and display it with the text.

I went to the cinema a lot so I was fascinated about the box office of the movies released in 2023 (mainstream movies only as their box offices are always reported with accurate data from cinemas). I wanted to make a data visualization of the top box office of movies released last year. I searched on Kaggle and came across a CSV files compiling the US Domestic box office of top 200 movies in 2023 (https://www.kaggle.com/datasets/mohammadrizwansajjad/top-200-movies-of-2023). I edited the dataset a little bit, removing unnecessary data columns and reducing the dataset down to 20 to reflect the top 20 movies with the highest box office. The chart displays the movies’ box offices as well as the month they were released while also vertically ranking them according the box offices.

Snippets of code:

//Retrieving data from the table
  let Month = movies.getColumn("Release Date");
  let Name = movies.getColumn("Title");
  let Rank = movies.getColumn("Rank");
  let Boxoffice = movies.getColumn("Total Gross");

  for (let i = 0; i < img.length; i++) {
    // split data into string
    let splitString = split(Month[i], "/");

    //     displaying data
    image(
      img[i],
      12.5 + ((int(splitString[0]) - 1) * (width - 20)) / 12,
      map(Rank[i], 1, 22, 50, height - 20),
      53,
      23
    );
  }

Embedded Sketch (hover mouse diagonally to see all box offices):

The chart essentially displays the movies’ logos according to their box offices using the Map function. We can eyeball and compare one movie’s box office with another’s. The hardest part is to figure out the placements of the movies’ logos. But more importantly, it is also about extracting the data from the dataset and come up with a way to graph them.

For future improvement, I want to come up with a way to display the movies’ logos in a more visible manner. As of now, because of the size of the chart, the logos are pretty small and the accompanying hover number for the box offices are also small. I also want to display the box office number separately as well, i.e. it only shows when the mouse hover on the image. The challenge here is to figure out the coordinate of mouseX and mouseY.

For this assignment, I went back to the basics and utilized the main coding concepts we learned in class last week to create a simple and EXTREMELY plain piece that showcased my understanding of generative text using p5js. I used a poem from Mahmoud Darwish, a popular poet from Palestine, as text for my sketch. The main concept of my sketch was to create a simple piece of art that displays his poem using generative text that includes elements of interactivity, while simultaneously prioritizing simplicity and minimalism. This can be seen through the simple text font and color used in the sketch to display the words of the poem. 

The process of creating this sketch involved a lot of trying to understand the coding concepts that come with generative text. This was because I was confused about the concepts we learned that week. Through practicing and studying the material once more I was able to better understand the technicalities behind generative text and how to successfully implement it in my sketch. With that being said, I used this assignment as a way to integrate all the other things we learned in class such as the ‘mousePressed’ command and different ways to position elements within my sketch. Side note, pressing the mouse allows for users to see the whole poem, if they wished to view it in the non-generative text form. Back to my sketch, implementing past material with new material helped me better conceptualize how these different elements within p5js are able to compliment one another, which in a sense enriches the flow and user experience of the sketch. 

Another side note, I used functions but decided to keep them on the main Javascript file instead of a separate file due to the fact that it made it easier for me to organize the code. Anyway, back to the sketch coversation!

As I mentioned, I was struggling initially with understanding and implementing generative text concepts, which is why the parts I am most proud of are ones that relate to it: 

 

function drawWords(x, y) {
  // Splits the poem into words and removes any empty strings from the poem
  let wordGroup = poem.split(' ').filter(word => word.trim() !== "");

  // A random number from the array is selected as a starting word and ending word
  let firstWord = random(int(wordGroup.length));
  let lastWord = firstWord + random(2, 8);

  // Makes gold the color of the text
  fill('gold');
  
  // Displays the selected words from the poem at specified positions
  text(wordGroup.slice(firstWord, lastWord).join(' ').trim(), x, y);
}

 

My Final Sketch: 

In terms of improvements, I think I would have loved it if I was able to have made my art more complex. Although not necessary, I feel like using generative text to create something more complex would have helped add more effects and style to the piece as a whole. By doing so, it would have made my sketch more dynamic and potentially more appealing to users. Overall, this sketch has made me want to practice using generative text in my future projects as I want to develop my skill in it and add more complexity, effect, and different forms of user interface design to my sketch. I really enjoyed learning and experimenting with generative text as I was able to combine a poem from one of my favorite poets to create text that is creative and sometimes even humorous.

One of the aspects that piqued my interest in the reading was the paradox of technology. It is without a doubt that things tend to get replaced as newer and better technology emerges. As the complexity increases alongside it, I believe there is certain fragility that comes with as well. In the case of watches, as it evolves to maximize efficiency there could be certain capabilities that are sacrificed in order to achieve that. These sacrifices are what causes these fragilities. This leads to the question of whether there should be balance between them, as this could lead to lower efficiency. I think that there are many examples of products that is made with this in mind, but they are not particularly regarded as better in this society’s standards.

In regards to design, I often noticed that when something has a good design, it is rarely notices, but if it has a bad design, the annoyances are highlighted much easily. When the design is good, there seems to be a certain smoothness within the system, but if the design is bad, certain redundancy or annoyances are to be found. With a good conceptual model, the communication between the design and the user becomes less confusing. With complex operating systems like Microsoft, it contains numerous manuals but when there are certain errors, troubleshooting it becomes more and more vague in some cases therefore requiring additional help, which I believe is large but inevitable design flaw.