All posts by Stanley Zuo

101 things to do before graduation

My project combines a countdown timer until graduation day and a checklist of things to do before graduation. The checklist is taken from NYU’s list of 101 things to do before you graduate.

I made this project because I was inspired to visualize the passage of time and the time remaining until graduation, in an effort to make the most of my time left at NYU. I decided to combine the countdown timer with the number of items remaining on the checklist to visualize the number of outstanding items, and how much time users have to complete those items. My hope for this project was for it to serve as a motivation for users to go out and make experiences in their time left at NYU. Personally, I received this checklist during my first semester, and I have made minimal progress in the past two years. By having a constant physical reminder of the elapsing time, I hoped my device would inspire me to spring into action.

My project consists of two parts. The first part is a checklist webpage that displays all 101 items and allows users to check off items they’ve completed. A counter at the top of the page displays the number of outstanding items, as well as the number of completed items.


View post on

The second part of my project is an LCD display that shows the days, hours, minutes, and seconds remaining until 11:00 AM on May 17th, as well as the number of outstanding items from the checklist. The display assembly is accompanied by two LEDs. The red LED blinks every second and serves as an indicator of passing time, while the green LED lights up once the user has completed all items, or when the timer runs out.

View post on

If the user checks off all items on the webpage before the timer runs out, the page displays, “Congratulations, you have done everything!”. If the user fails to check off every item on the webpage before the timer runs out, the page displays, “It’s OK, you don’t have to do everything”. The messaging of the program congratulates users for completing all items but also reaffirms users if they don’t complete every item. Either way, the program ends when the timer runs out, marking commencement as an achievement and end goal in itself.

Ultimately, I wanted to capture the importance of making experiences with one’s time remaining at NYU. Whether or not my project achieves that is up for debate. However, I think seeing the constant passage of time and things to do helps foster a sense of urgency in users.

See it in action | Try it yourself | Code on Github

Final Progress

For my final project, I am interested in capturing and representing the passage of time until graduation.

I’ve experimented with several ways to represent the passage of time. The first approach I tried was using a row of LEDs that would light up after a certain interval. The limitations of this approach is that nothing will be happening between the time intervals and that it doesn’t allow for a very fine grained representation of time unless an exorbitant amount of LEDs are used.

View post on

The second approach I tried was using a 16 x 2 LCD display to show the number of hours, days, minutes, and seconds remaining until graduation. While this approach addresses the limitations of the LED approach, it has its own limitations. Firstly, while the numbers on the display change over time, the overall project is rather static and does not allow users to interact with it in any meaningful way. Secondly, changing the target time requires editing the sketch and this makes it lacking in user input, making it a kind of set and forget affair.

View post on

My goal for this project is to either change the representation of time so that it makes users more acutely aware of the passage of time rather than a process happening in the background or somehow make it interactive with user inputs.

UPDATE: 4/17

To make my project more interactive, I decided to add a list of things I should do before I graduate and display the number of items remaining above the countdown. I used the official “101 things to do before you graduate” checklist from NYU for the list of things to do. I also added an LED that blinks every second in an effort to amplify and make more apparent the passage of time. However, I seemed to have damaged the backlight of the LCD panel after I plugged the Arduino into a wall outlet, as the display is much dimmer than it was before.

View post on

I made a corresponding web interface for users to check off items they’ve completed. The program displays an activity and the user can mouseclick to mark the item as complete or keypress to skip the item. The program sends the number of outstanding items to the Arduino for display above the countdown, giving users a sense of how many outstanding items they have to do before they graduate.

Try it yourself | Github

A limitation of this interface is that it does not allow users to check items off the list once they run through the program. Theoretically, a user would have to run through the entire list of items to update what they completed. My goal for the final project is to make a checklist where users can actually click on items to check off things they’ve completed, so they can come back to the page and update their progress. I also need to think about the end conditions of the program, i.e., what happens when a user completes all activities and what happens if they don’t complete every activity before the timer runs out.

Characteristics of Computational Media

Why did computers appear?  

I think computers appeared to perform large sets of repeatable operations such as crunching numbers and decrypting messages. The first computers could do a single set of tasks. Later computers became programmable and could perform a wider range of operations.

What is Hard About Communication?

Before the advent of communications technology, human communication was limited by distance, time, speed, and scale. Back when talking was the main form of communication, communication was limited to individuals at the same location at the same time. Technologies such as the telegraph, telephone, radio, and television allowed people to communicate across vast distances at faster speeds to larger audiences. However, the fundamental challenges of communication persisted. Issues such as the arbitrary system of symbols that language is based on, regional and international differences in language, and even the nuances of interpersonal communication. Notwithstanding the fact that language and communication protocols are deeply rooted in culture, communication is multi-modal, which means that it is not only composed of language, but also cues such as facial expressions and gestures.

What do computers add?

Computers add to the affective dimension of communication. Whereas media such as text, images, audio, and video may produce their individual meanings and affects, computational media allows for the integration of all the above types of media to produce interactivity. This results in a more personalized experience compared to linear forms of media such as video. While the same video may produce different affects in different viewers, its structure and story is uniform. Whereas a user’s experience with computational media may be significantly different from another user’s experience based on their individual input.

Is Computational Media Better at Expressing Your Internal Life?

I think the answer to this question depends on the audience of my internal life. If the audience is solely myself, I don’t think computational media would necessarily be better at expressing my internal life than a diary or a journal. However, if I wanted to reach a wider audience, computational media may be more effective in producing empathy, since an interactive media-rich experience may better allow others to understand my point of view.

Does narrative and interactivity go together?

Absolutely. As I mentioned earlier, interactivity allows users to make their own meaning and affect the outcome of the narrative. The prime example of interactive narratives are video games. At its core, every video game tells a story. Player choices and actions within the game may directly or indirectly affect the outcome and experience of the narrative. The meaningful interaction of video games, that is, player actions resulting in changes in the game experience, is what I think makes video games one of the most accessible, captivating, and not to mention, popular forms of entertainment today.

What is so important about Computational Media?

To summarize, computational media combines elements of traditional media that allows for personalized experiences and meaningful interaction. The power of computational media lies in its ability to reach a wide audience but at the same time, provide personalized experiences based on user input. Computational media allows users to create their own meaning based on their interaction with the media and has a greater capacity to produce varying affects in different audiences.

How does computational media makes us more or less understanding of people unlike ourselves?

Like other media, the impact of computational media is heavily dependent on the narrative its creator wants to sell. That being said, I think computational media has a greater capacity for producing empathy for groups of people unlike ourselves. While text and video may allow us to understand other groups of people to a certain extent, computational media such as video games and VR allow users to view and interact with another person’s environment. I think the key here again is interactivity because it allows users to build empathy by exploring another person’s world.

Tennis for Two

For my final project, I would like to recreate what many consider to be the first video game, Tennis for Two, with Arduino and p5.js. Tennis for Two was a simple 2-D tennis game for two players that featured an oscilloscope for a screen and controllers with a single button and a dial. I plan to create the graphical interface with p5.js and the controllers using button switches and potentiometers from the Arduino kit.

If this idea doesn’t work out, I would still like to create some sort of interactive game with a physical input for one or more players.

Color Bounce

I made the ball change color every time it hits the window. I only drew the background once, so the ball leaves colored trails behind. Since the colors are randomly generated, the result is different each time the script is run.

Here’s the code.

Try it yourself | Github



Motorized Pinwheel

For this project, I used a combination of the DC motor we set up in class and Project 9 from the Arduino Projects Book. The output of the DC motor is controlled by a potentiometer, which allows the user to vary the speed of the motor by twisting the potentiometer knob.

Motorized Pinwheel

See it in action | Github

Color Mixer

I soldered leads to the piezo buzzer included in the Arduino starter kit because the pins on the buzzer itself are too short and the component takes too much room on the breadboard if plugged in by the pins.

Soldered Piezo Buzzer

For my Stupid Pet Trick, I made a color mixing LED with analog input and output by modifying the fourth project from the Arduino Projects book. I substituted the phototransistor inputs with potentiometers to allow users to manually adjust the amount of red, green, and blue light the LED emits.


View post on

View post on

View post on

View post on

View post on

View post on

View post on

Body Position Indicator

Building on my Orientation Switch from last week, I added a green LED to my circuit to provide a visual indicator for both the flat and upright positions instead of having a single LED turning on or off to indicate the position. I configured my switch so that the red LED would turn on when the circuit is lying flat and the green LED would turn on when the circuit is positioned upright.

To achieve this, I used the tilt switch input as a variable for my conditional statement. If the switch was on (circuit in flat position), the red LED would turn on and the green LED would turn off, and vice versa.


View post on

Position flat: Red LED on, Green LED off

View post on

Position upright: Green LED on, Red LED off

View post on

I attached the circuit to my chest so that the red LED would be on when I am lying down and the green LED would be on when I am upright. This can function as a rudimentary sleep/wake indicator based on body position alone. And this time, I’m not using my hands!

Orientation Switch

For my circuit, I decided to use the tilt sensor included in the Arduino starter kit as my hands-free switch. The tilt sensor is a hollow cylinder with a metal ball inside that makes a connection across two leads when tilted in the proper direction. The switch is closed when the circuit is lying flat and opened when the circuit is tilted.

View post on

Switch on

View post on

Switch Off

View post on

In Action