Week 10 – “Interactive Color Toy”

Concept

After completing my project, I began contemplating a creative concept for it. It occurred to me that if I had a child, I would use this project as a toy to help them quickly learn colors. Consequently, I decided to name this project the “Interactive Color Toy.” Children can use it as a toy, pressing a button to cycle through three colors: red, yellow, and green. Additionally, they can adjust the LED’s brightness using a potentiometer. By pressing the button and changing the brightness, children could easily learn colors through tactile experiences, especially if parents help by naming the colors that appear when the button is pressed.

Circuit

My circuit consists of the following elements:

– Arduino board (e.g., Arduino Uno)

– Potentiometer

– Push button switch

– LED

– Resistors

– Breadboard

– Jumper wires

In this circuit, a potentiometer is connected to an analog input pin of the Arduino, allowing it to read varying voltage levels. A push button is connected to a digital input pin, enabling the Arduino to detect button presses. Three digital output pins are connected to the red, green, and yellow pins of the LED, respectively. By adjusting the potentiometer, users control the brightness of the LED colors, while pressing the button cycles through the available colors.

Code

// Pins
const int POTENTIOMETER_PIN = A0; // Analog input pin for potentiometer
const int BUTTON_PIN = 2; // Digital input pin for push button
const int RED = 5;  // Digital output pin for RGB LED (red)
const int GREEN = 6;  // Digital output pin for RGB LED (green)
const int YELLOW = 9; // Digital output pin for RGB LED (yellow)

// Variables
int potentiometerValue = 0; // Potentiometer value
bool buttonState = false; // Button state
int colorIndex = 0; // Index of current color

void setup() {
  pinMode(POTENTIOMETER_PIN, INPUT);
  pinMode(BUTTON_PIN, INPUT_PULLUP);
  pinMode(RED, OUTPUT);
  pinMode(GREEN, OUTPUT);
  pinMode(YELLOW, OUTPUT);
}

void loop() {
  potentiometerValue = analogRead(POTENTIOMETER_PIN);
  
  // Map potentiometer value to LED brightness
  int brightness = map(potentiometerValue, 0, 1023, 0, 255);
  
  // Set the LED color based on the current color index
  switch (colorIndex) {
    case 0:  // Red
      analogWrite(RED, brightness);
      analogWrite(GREEN, 0);
      analogWrite(YELLOW, 0);
      break;
    case 1:  // Green
      analogWrite(RED, 0);
      analogWrite(GREEN, brightness);
      analogWrite(YELLOW, 0);
      break;
    case 2:  // Yellow
      analogWrite(RED, 0);
      analogWrite(GREEN, 0);
      analogWrite(YELLOW, brightness);
      break;
  }

  // Check button state
  if (digitalRead(BUTTON_PIN) == LOW) {
    if (!buttonState) {
      // Toggle color index
      colorIndex = (colorIndex + 1) % 3;
      buttonState = true;
      delay(200);
    }
  } else {
    buttonState = false;
  }
}

This is my code. The analogRead function reads the value from the potentiometer, which is then mapped to control the brightness of the LED colors. The switch statement selects the appropriate color based on the current color index, and the digitalWrite function sets the brightness of the corresponding LED pins accordingly. When the button is pressed, the color index is incremented to cycle through the available colors.

Improvements and Overview

Overall, I enjoyed this assignment, particularly the aspect of controlling outputs using different physical inputs. The most challenging part was figuring out how the current moved through the circuit. However, I was able to easily determine the correct way to connect all the components. As a further improvement, I considered expanding the color palette by using a full RGB LED instead of individual colors. This would allow for a wider range of colors and more creative possibilities.

Reading Reflection – Week 10

Physical Computing’s Greatest Hits (and Misses)

This reading was particularly informative, offering a wide array of projects within the field of physical computing. Previously, I had never imagined that such diverse and innovative projects were feasible when I first began my journey in this field. Particularly, I was fascinated by the idea of the theremin. This was a project I had wanted to work on when I was enrolled in another class last semester. However, due to my limited knowledge at the time, I couldn’t bring my ideas to reality. Now, equipped with the skills I’ve acquired from our recent classes, I feel confident and excited about the possibility of making this project a reality. The potential to combine electronic components with musical creativity truly captures the essence of what makes physical computing so exciting.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

I really liked the directness and clarity in the title of the article. It reflects a fundamental truth about design: designers are communicators, not merely speakers. They show their thoughts through their creations. As the article discusses, Interactive Art goes beyond traditional boundaries by transforming viewers into active participants. This dynamic completes the artwork, creating a shared authorship between the creator and the audience. My experience last summer in a South Korean museum demonstrated this concept. There, I saw an interactive installation where visitors could draw animals and scan them to integrate their creations into the larger display with a pre-created background. This not only made the artwork dynamic but also personal, as each visitor’s contribution became central to the artistic narrative. It was a vivid demonstration of the profound connection that interactive art can forge, drawing beauty from the synergy between the artist’s vision and the audience’s involvement.

Week 9 Creative Switch – “Step”

Concept

There is a moment where imagination sparks innovation. For me, that moment took me back to the muddy adventures of my childhood. Picture this: a young kid, covered in mud, going back home. It is necessary to turn on the lights without adding to the crime scene. And from this muddy dilemma, an idea was born—a switch that doesn’t need a clean hand but just a simple step.

Progress

I made a simple circuit out of these components: 5V – jumper wire – resistor – jumper wire – LED – Ground. It was easy to make the circuit, however, the key was to create a gap in the circuit, hidden beneath the carpet. This gap was placed between the resistor and the jumper wires, completing the circuit only when pressure was applied. Stepping on the carpet would bridge this gap, lighting up the LED. However, this design came with limitations. The switch was only one-time usable. After activation, the gap in the circuit needed manual resetting for the next use.

Reflection

I enjoyed doing this assignment. Of course, the idea that I came up was very simple. However, I could learn from this assignment that creativity comes from everyday problems, and perhaps the solution could be very simple.

Reading Reflection – Week 8a

The sentence “After all, attractive things work better,” which the author repeats several times throughout the essay, resonated with me, cementing the notion that aesthetics should never be compromised in favor of usability. It seems that humans inherently seek out aesthetic objects. Many items, not necessarily usable, exist solely because they are beautiful in their own way—for instance, paintings, statues, and interior designs. In my view, aesthetics is becoming a trend. One example I can cite is the aesthetic cafes, known as “gamsung cafes,” in South Korea. These cafes are designed to entice people into taking pictures, thanks to their stunning interiors. Initially, I couldn’t understand the appeal of these places. However, upon visiting one of the famous “gamsung cafes,” I found myself enjoying the atmosphere and the emotions it evoked. This experience helped me realize that aesthetics can indeed touch people’s emotions.

This reflection also brought to mind the reasons behind the iPhone’s rising popularity. Usability is, of course, crucial. When comparing the two most popular phone brands, Samsung and Apple, I view Apple as the representative of aesthetics, while Samsung champions usability. While older generations might prefer Samsung for its user-friendliness, many from the newer generations opt for Apple. A YouTube video interviewing people about their choice of iPhones surprised me. Their answers were strikingly simple: “It’s beautiful.” That’s it. I believe this sentiment drives the current generation and represents a prevailing trend. As a Business Major, this reading underscored the ongoing trend that “After all, attractive things work better.”

Midterm – NYUAD Ideal Food Tournament

https://editor.p5js.org/hk3863/full/bszj5rkSJ

Concept

One of the games that went viral in South Korea is the Ideal Type World Cup. I have tried this game several times, and it seemed quite simple but also very interesting in the way that it makes the user think of their preferences. Another similar game is the “Balance Game,” which requires the user to choose between two extreme situations, for example, getting 10 million dollars after 10 years or one million dollars immediately. I think what makes this game interesting is that it presents situations that people can relate to.

When I decided to create an Ideal Type World Cup, I started wondering about something that could make this game much more relatable to students. So, I came up with an idea to make this game using campus food. All NYUAD students get campus dirhams, flex dirhams, and meal swipes, which could be used on campus. I think our campus offers a vast variety of food. Each student probably has a preference for certain types of food and dining places. So, my final concept for the project is to make the NYUAD Ideal Food Tournament, which will feature different campus foods.

My game contains 32 candidates, which are campus foods. The game is in the form of a tournament where the game contains overall 5 rounds. The user has to choose between the two foods that they like more. Then, the winners of each round pass to the next round until there is a winner.

How My Project Works

My code contains four game states: “OPENING,” “CAMPUS_MAP,” and “GAME.”

  1. “OPENING”

The first thing users see is the opening page. The OpeningScreen class in my code is designed to manage and display the initial screen of my project, typically shown when the game or application first starts.

The constructor of the OpeningScreen class takes three parameters: schoolInfo, logoImage, and diningInfo. These parameters are stored as properties of the class and represent the textual information about the school, the graphical logo image, and the information about dining options available on campus, respectively.

The display method is responsible for rendering the content to the screen. It dynamically adjusts the sizes and positions of the text and logo based on the current window size, ensuring that the visuals adapt nicely to different screen dimensions.

  1. “CAMPUS_MAP”

The next page that appears after clicking on the canvas is the Campus Map page. The CampusMap class in this code snippet is designed to provide users with detailed information about dining options available at a university campus. This class contains images of dining halls, marketplaces, and other food outlets, accompanied by informative labels and detailed descriptions.

  1. “GAME”

When the user clicks on the screen again, the gameState changes to “GAME.” During this gameState, the code displays two candidates, updates the winner, and runs the logic for making this game.

4. “ENDING”

What I am Proud of

I am particularly proud of the design for this project. Since the project is related to our campus, I exclusively used NYU colors and also downloaded the official NYU font. The game looks aesthetically pleasing. Additionally, I really like the design of the Campus Map page. I have masked the three campus images displayed on that page into a circular shape so that they look pleasing to the eye. Also, for the background, I used our campus map to design the page in a way that the images are located where they actually are in real life.

let campusmappicturesSize = width / 5
  let campusmask = createGraphics(campusmappicturesSize, campusmappicturesSize) 
  campusmask.ellipse(campusmappicturesSize / 2, campusmappicturesSize / 2, campusmappicturesSize, campusmappicturesSize); // Create a circular mask

    diningHallsImage.mask(campusmask);
    marketplaceImage.mask(campusmask);
    outletsImage.mask(campusmask);

I am also particularly proud of the logic I have created for updating candidates for each round.

function handleGameClicks(candidate1Position, candidate2Position, imageSize) {
  // Check if click is within candidate 1 image bounds
  if (mouseX > candidate1Position.x - imageSize / 2 && mouseX < candidate1Position.x + imageSize / 2 &&
      mouseY > candidate1Position.y - imageSize / 2 && mouseY < candidate1Position.y + imageSize / 2) {
    nextRoundCandidates.push(currentPair[0]);
    updateCurrentPair();
  } 
  // Check if click is within candidate 2 image bounds
  else if (mouseX > candidate2Position.x - imageSize / 2 && mouseX < candidate2Position.x + imageSize / 2 &&
           mouseY > candidate2Position.y - imageSize / 2 && mouseY < candidate2Position.y + imageSize / 2) {
    nextRoundCandidates.push(currentPair[1]);
    updateCurrentPair();
  } else {
    showMessage = true;
    messageStartFrame = frameCount; // Reset message timer
  }
}

This function, ‘handleGameClicks’, is designed to process mouse clicks within the game, specifically to determine if a click occurred on one of the two candidate images. It checks if the mouse’s X and Y positions fall within the bounds of either candidate 1’s or candidate 2’s image by comparing the mouse coordinates against the images’ positions and sizes. If the click is within the bounds of candidate 1’s image, that candidate is added to the ‘nextRoundCandidates’ array, and a function to update the current pair of candidates is called. Similarly, if the click is within candidate 2’s bounds, that candidate is added to the array, and the pair update function is called. If the click doesn’t fall within the bounds of either image, a message is triggered to show by setting ‘showMessage’ to true and resetting a timer for how long the message should be displayed.

The ‘showMessage’ variable triggers the display of the text “Please click on one of the pictures” when a user’s click does not fall within the bounds of either candidate 1’s or candidate 2’s image.

if (showMessage) {
      displayMessage("Please click on one of the pictures");
function updateCurrentPair() {
  if (nextRoundCandidates.length === 1 && currentRoundCandidates.length === 0) {
    // Only one candidate left, game should end
    gameIsOver = true;
    gameState = "ENDING";
    
    
  } else if (currentRoundCandidates.length > 0) {
    // There are still candidates in the current round to be paired
    currentPair = [currentRoundCandidates.shift(), currentRoundCandidates.shift()];
  } else if (nextRoundCandidates.length > 1) {
    // Current round is empty but there are enough candidates for another round
    currentRoundCandidates = shuffle(nextRoundCandidates.slice()); // Create a new round from remaining candidates
    nextRoundCandidates = []; // Reset for the next round
    roundNumber++;
    currentPair = [currentRoundCandidates.shift(), currentRoundCandidates.shift()];
  } else {
    
  }
}

‘updateCurrentPair()’ manages the transition of game states and the setup of candidates for comparison in each round of the game. If there is exactly one candidate left and no more in the current round, it signifies the end of the game by setting ‘gameIsOver’ to true and changing the ‘gameState’ to “ENDING,” indicating a winner has been determined. If there are candidates still available in the current round, it forms a new pair for comparison by removing the first two candidates from ‘currentRoundCandidates’ and assigning them to ‘currentPair.’ In cases where the current round has ended but there are multiple candidates left for the next round (‘nextRoundCandidates.length > 1’), it shuffles the ‘nextRoundCandidates’ to start a new round, empties the ‘nextRoundCandidates’ for future use, increments the round number, and assigns a new pair to ‘currentPair’.

Improvements and Problems

In the Campus Map page, I was thinking of making the page more interactive. My initial thought was to display text about the dining place in a rectangle if the mouse is located over one of the three images. However, I had some difficulties making the description appear when the mouse is located inside the circle. My code was detecting the wrong location for images, thus, showing the rectangular description at the wrong timing. So, for further improvements, I would like to add this feature. Also, I would like to add some buttons instead of requiring users to just click on the screen to start the game.

Overall, this midterm experience helped me to figure out how to build logics for projects, and I learned a lot of new skills to make what I have imagined.

Midterm Progress

Concept and User Interaction

One of the games that went viral in South Korea is the Ideal Type World Cup. It’s a simple game where several rounds are played, each presenting two options of celebrities, and you have to choose one out of the two. The selected option advances to the next round, and you continue choosing the one you like more until there is only one winner left.

Recently, while I was studying, I wanted to take a break, so I decided to play this game with my friends. I found one on the internet about the ideal Korean male actor and then played another one about food. Then, it occurred to me that it would be very interesting to try making this World Cup with the food we have on campus. The final idea for my midterm project is to create a Campus Food World Cup, where there will be photos of food from places on campus (Marketplace, D2, D1, Mysk, Blacksmith, etc.). Users will click on the photos of the food they prefer to find out what their top campus food is.

Design

Some elements that I would like to add to my project, as part of the design, include a beautiful interface and fonts. Additionally, there will be background music playing during the game and another piece of music at the end of the game. When the user selects the winner, I would like to add a sound effect. The overall interface will feature colors related to our campus, using NYU colors, etc., to establish a connection with our campus. Also, on the starting page, I plan to add some text about our campus and the dining systems we have.

Code

The biggest challenge I faced initially when I started to conceptualize the logic for my project was figuring out how to make my code remember the winners I had chosen from each round and continue the game to the next round until there was only one winner. To understand how the logic should work, I decided to experiment with numbers before loading all the pictures and designing the project. Therefore, I created an array of 32 numbers.

To facilitate several rounds of the game, I introduced a ‘winner’ variable, which would be determined by the mouse location.

if (currentPair.length === 2) {
    let winner = (mouseX < width / 2) ? currentPair[0] : currentPair[1];
    nextRoundCandidates.push(winner);

If the mouse location is on the left half of the canvas, the ‘winner’ variable would be the element on the left side, and the same logic applies to the right side.

Then, I created an array called ‘nextRoundCandidates’ so that the array would contain all the elements that should pass to the next round.

if (currentRoundCandidates.length === 0) {
    if (nextRoundCandidates.length === 1) { // If only one candidate remains, the game is over
      gameIsOver = true;
      return;

If there are no more candidates left for the next round, the program recognizes that the game is over.

if (gameIsOver) { // Restart the game if it's over
  gameSetup();
  return;
}

The program then executes the gameSetup() function.

function gameSetup() {
  // Reset and reshuffle the game for a new start
  candidates = Array.from({length: 32}, (_, i) => i + 1);
  currentRoundCandidates = shuffle(candidates);
  
  nextRoundCandidates = [];
  currentPair = [];
  updateCurrentPair();
  roundNumber = 1;
  gameIsOver = false;
  loop(); // Restart the drawing loop
  
  // Show a restart message
  showMessage = true;
  messageStartFrame = frameCount;
}

This code resets the game to its starting conditions, reshuffling the candidates and resetting all relevant variables for a new game.

Although there are still many aspects to add to this project, I am pleased that I was able to write the code for the main logic of the game. Now, I will focus on the details and design part of the project to make it visually appealing.

Reading Reflection – Week 5

An insight that I got from this reading is that you do not need to be a total tech person to use computer vision. Going through different examples of how artists and designers are mixing tech with creativity, it was eye-opening to see tech being used in such fun and engaging ways to make art and media more interactive. Back in the day, Marvin Minsky thought computer vision could be a quick summer project. It turns out it is a huge field with lots to figure out, but the journey from then to now shows just how much more approachable tech has become. Today, if you have an idea and the internet, you are pretty much set to dive into learning about anything, including computer vision.

Seeing different examples of projects, where technology and creativity create digital art pieces, really drives the point that tech and art can come together in some pretty amazing ways. It is not just about coding; it is about imagining how to make experiences that pull people into a creative world where their movements and actions matter. What amazes me is how easy it is to start playing around with computer vision nowadays. There are a ton of free resources, tutorials, and communities online where anyone can start learning how to blend tech with their creative projects.

This whole thing makes me think about how technology, especially computer vision, is becoming a tool that is not just for the few. It is for anyone with a curious mind and a creative heart, ready to explore how to bring their ideas to life in new and interactive ways. It was pretty inspiring to see how breaking down the barriers to tech is opening up a world where art and interaction go hand in hand, making for some really cool experiences.

Reading Reflection – Week 4

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.

Assignment 4 – “Hyein in Fast-Food Restaurant” by Hyein Kim

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.

Source: https://www.dreamstime.com/stock-illustration-fast-food-restaurant-interior-hamburger-beverage-drink-flat-design-vector-illustration-image80172236

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.

Reading Reflection – Week 3

We often overlook the audience for whom we create something, a tendency especially noticeable in the tech sphere. The primary focus tends to be on making the code function well, while the ‘thinking’ process is neglected, as the author points out. This mirrors human interaction; understanding the person you are talking with is similar to the concept of being interactive. You should know their personality and truly grasp what they want and like to foster meaningful conversation. I believe the true essence of being ‘interactive’ lies in the ability to engage people by understanding their preferences.

Initially, my view of interactive media was merely as a course that merges art and technology. However, after further reflection, my understanding of interactive media has deepened. Now, I see interactive media as something beyond merely delivering impressive outputs; it is about conveying a message and touching someone’s heart, whether by making them feel happy, interested, or impressed. It gains true significance through the “thinking” process between inputs and outputs. My decision to major in business was driven by a desire to create something meaningful for people. Realizing that interactive media can achieve this objective has made it increasingly appealing to me.