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.”
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.”
“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.
“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.
“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.
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.
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.
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.
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.
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.
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.
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.
While brainstorming for my assignment, my initial thoughts centered around creating an art piece featuring several repetitive elements in motion. Suddenly, I recalled an image of Turkey I had seen before, specifically a picture of hot air balloons in Cappadocia.
The sight of these balloons, each a different color, struck me as particularly appealing, and I decided to base my art on the concept of hot air balloons moving upwards. This idea aligned perfectly with my original concept of incorporating moving, repetitive elements.
Upon completing the hot air balloon portion of my project, I noticed the background felt somewhat empty, so I decided to make moving clouds in the background. Thus, the combination of clouds and hot air balloons became my final concept.
I started with the hot air balloons by creating a Balloon Class, aiming to generate several balloons simultaneously using the same code. Within this class, I implemented a move() function to enable the balloons to move upwards.
//move Hot Air Balloons
move() {
this.x = this.x + this.xspeed;
this.y = this.y + this.yspeed;
}
Next, I used the show() function to draw the hot air balloon.
To ensure each hot air balloon displayed different colors, I introduced variables like “balloonColor” and “highlightColor,” assigning them random RGB colors. The balloon featured two colors: a primary color and a “highlightColor,” which was derived by adjusting the blue component of the RGB value to complement the primary color.
//Randomize Balloon colors
let red = random(255);
let blue = random(255);
let green = random(255);
this.balloonColor = color(red, green, blue);
//Highlight Color in the middle which is similar to the sum of R and B of the main color
let b = (red + blue / 1.3)
this.highlightColor = color(red, green, b)
To continually regenerate hot air balloons and ensure upward movement, keeping the canvas filled, I created a reset() function.
//create a new balloon and reset the animation if the hot air balloon reaches the end of the canvas
reset() {
if (this.y < -250) {
this.y = height + 100
this.yspeed = random(-2, -5)
this.x = random(width)
this.xspeed = 0
}
As mentioned earlier, I wanted to include clouds in the background. Thus, I crafted a separate Cloud Class and utilized similar methods to those in the Balloon Class for showCloud(), moveCloud(), and resetCloud(). The clouds moved from left to right, and their reset function triggered upon reaching the canvas’s right edge. Cloud sizes varied randomly.
I then utilized “this.cloudsize” within the showCloud() function to render a cloud.
To populate the scene with multiple clouds and hot air balloons, I established arrays for each, allowing for automated element addition up to a predefined number.
let balloons = []; //create balloons array
let clouds = []; //create clouds array
function setup() {
createCanvas(1000, 1000);
//create 7 hot air balloons positioned randomly in the canvas with random speed (moving up) and add them to the balloons array
for (let i = 0; i < 8; i++)
balloons[i] = new Balloon(random(width), random(height), 0, random (-2, -5))
//create 9 clouds positioned randomly in the canvas with random speed (moving from left to right) and add them to the clouds array
for (let i1 = 0; i1 < 10; i1++)
clouds[i1] = new Cloud(random(width), random(height), random(2, 5), 0)
}
It was very interesting to learn how to use arrays and classes together to create elements. The process of simultaneously producing multiple elements became significantly simpler. One challenge I encountered while crafting the art piece involved randomizing colors for each air balloon. Initially, I placed the code for randomizing colors in the sketch.js file within the “new Balloon” constructor, which resulted in the color of a single balloon changing randomly each frame. I then realized that I should incorporate this code inside the Balloon Class, utilizing `this.balloonColor` to ensure the randomness of color could be applied specifically to each balloon. Overall, this assignment was highly engaging, and I feel like I gained a considerable amount of knowledge.
We live in an era of disciplines. Human nature’s inclination to have everything organized and well-structured always creates certain rules in any kind of field. I remember watching a video on YouTube of a college entrance exam for the School of Art in South Korea. Of course, all of the paintings were amazing, but it somehow made me think that the drawings were quite artificial. I felt like there was no creativity in terms of how those drawings were made. Particularly, it was like copying things in the world rather than engaging in a creative process. I love order and discipline, so I always tend to create certain rules, but in the art field, I find myself looking for something beyond the rules I know.
Reas’s talk was eye-opening for me in the sense that I found the answer to why I was searching for some sort of chaos in arts. The world is not structured in the way that we might expect. There is no such thing as absolute order. We always face unexpected circumstances that can entirely change the outcome. I found this pattern of unexpectedness very similar to the idea Reas was raising. The difference between chaos and order is not as huge as we might expect. A single change in the algorithm can turn the entire art piece into randomness. However, the act of letting randomness do its further work and create chaos is what makes art beautiful. We actually think of it as discipline, but we live in a lot of chaos. But that’s not necessarily wrong. It takes courage to break rules. But I think that courage can make us special. That kind of specialness is what I wanted to see in art.
You might wonder why the title of this art piece is “Samsung.” Yes, it is the name of the popular electronics company in South Korea. Actually, “Samsung” in Korean translates to “three stars.” Just a fun fact: I am a huge fan of Samsung Electronics. All of the electronics, including smartphones, tablets, smartwatches, earphones, and laptops that I use, are from Samsung 🙂
I really like the shape of the star, so my initial goal was to use the star shape in some way to create art. Initially, I used lines with a ‘for’ loop to create the star shape. However, I later changed my mind to use lines in the background and triangles instead for the star. Afterwards, I wanted to add animation to my art piece. I wanted my background to change somehow. My initial idea was to create a gradation of lines in the background moving from top to bottom, but I could not figure out how to do that, so I changed my plan to make the background color change to white.
To make that idea come true, I made an animation using two white lines moving toward the center. Then, I moved the background color to the setup so that the background color would not change to black again while the white lines were moving towards the center. Using the ‘if’ function, I coded the background color to change to black again if the lines reached the center, so that all of the setups could be reset. This part of my code became the proudest work for this assignment.
//background animation
stroke('white')
x1 = x1 + 1
line(x1, y1, x1-400, height)
if (x1 > width) {
x1 = 0
background('black')
}
stroke('white')
x2 = x2 - 1
line(x2, y2, x2+400, 0)
if (x2 < 0) {
x2 = 400
background('black')
}
stroke('white')
//white lines in the background
for(let x = centerX - 200; x < centerX + 200; x += 5) {
line(centerX, centerY-200, x, height)
}
for(let x = centerX - 200; x < centerX + 200; x += 5) {
line(centerX, centerY+200, x, 0)
}
While I liked the outcome, when I saw the empty space on both the left and right sides of the star, I came up with an idea of creating two more little stars which would have black colors, so that they would appear while the background color changes to white. While the background is black, they are not seen.
I really like the work I have done, but for further improvements, I would like to try to achieve my initial goal of making the background using line gradation.
