Press "Enter" to skip to content

Category: Intro to Physical Computing

Time: process & results

Images taken by Nicolas Peña-Escarpentier – thanks for awesome photos

What’s time? Is time a logical thing? A project “Time” started from throwing simple questions about time and its standard – eventually evolving into the combination of physical piece and digital visualization about different time zones. The physical piece is consisted of two parts: inner cylinder that represents UTC Time Zone map, and outer sphere that is rotatable and contains light source. As the user rotates the outer sphere, and it creates movement in light. While the light is moving, the inner cylinder that has 24 light sensors for each longitude reacts to the changing brightness.

The physical piece will be installed on transparent and round table that I personally own, which approximately has 40” diameter and 30” height. People should be able to walk around the table and see the cylinder time zone map inside the sphere. The digital visualization will be projected from underneath the table; due to its transparency, the table is able to directly show the visualization on is top surface. In this way, people can view both physical and digital piece without being distracted.

When the light shifts from one time zone to another, the digital visualization reflects the movement as well by changing gallery of skylines. Those skylines are from survey towards ITP community regarding which cities they came from, and organized according to the longitude location.

All the coding parts can be found in my or Huiyi’s GitHub repository.



The skyline photos are are collected in a single folder and organized in each city with same 24 steps. The archive is called via .json file.

24 light sensors send array of numbers. During this process, Huiyi and I had to add black tubes around the sensors to block the ambient light. Usually when the light source is not close enough, the reading is under 10~15. When the light source is in front of the sensor, it gives value between 50~100. Using that, if there’s enough difference between max and min, it will indicate max as 12:00PM.

What happens if the difference between max and min is too small – such as, when the light is off because I put the switch on the light source without thinking everyone’s going to press it? Well, it basically makes the whole sketch goes to “sleep.” This won’t and shouldn’t happen in real life, but since our work is not literally showing the scientific information, we rather found it will be a good visual effect that wraps up the whole idea.


Second User Testing:

In order to give a general idea of how it functions, I brought the partially completed physical piece and the sketch that works with slider input. Although Huiyi and I were in the finishing stage at this point, the user testing was extremely helpful to make some small changes. The most mainstream feedback I got was that it’s hard to recognize the light location inside the sketch.

After the user testing, Huiyi and I realized the need of light indicator and initially built a white line that goes across the sketch and directs to the max input – which is the version I presented in the last ICM class. Then later it became a line along with orange gradient to make the light change more noticeable and dramatic. Furthermore, the text color for max input zone will be turn into yellow as well.



This is the second short video that contains some process and imagery of how it works. There will be more documentation and modification until the show.








Running the prototype:

The mouse is on New York, Quebec, and Washington D.C. area on p5 as well as the lighting directs the same location. However, due to the degree limit of the servo motor, it can only go as far as Rome area for now.


Next steps?

  • 180 to 360 degree
  • Better lighting source!



p5.js with Arduino

As I’m building project about timezone in the Intro to Computational Media course, I wanted to build something related to the same subject to have deeper connection between two courses. First attempt was using potentiometer to input value to some of my existing p5 sketches, and the second part was trying to control led and servo motor with mouseX. The process was rather a collection of one failure after another than moving towards what I expected.


Arduino to p5

Idea: Visualizing a clock that receives value from potentiometer
Problem: The original sketch was from another project that I didn’t have to care about speed of rotating – but it seemed funny in this experiment because as the value gets lower it starts accelerate to the point that the clock hand disappears.

Idea: Using potentiometer to control which part to be the brightest
Problem: To simplify the process, I used the hard-coded example and indeed it was easy to operate.




In order to be more specific, I start sketching the structure. The inside will be divided to 24 sections and each section represents one longitude. Bright parts will be the areas that are in daytime, and the opposite will be the areas in nighttime. One idea is using the 360 motor with one light source. The other idea is using 24 light sources. Also, there’s possibility of combining those two.



p5 to Arduino

Some experiments with servo motor and led were done, but I spent most of my time staring at this error screen – and spending hours to fix it. It was sometimes solved by unplugging and update the Arduino file, but one of my boards is just broken and keep showing the same message.





Another activity that I’ve done this week was trying to use p5.js along with Arduino.





LED and Piezo

Beginning part of Undertale Soundtrack – 11. “Determination”


Original Soundtrack

The colored part was used for this exercise.



Observation about Gmail

Recently, despite of having four different accounts – all of my Gmail inboxes are about to explode by high number of incoming emails! Therefore, I’ve decided to make some observation about Gmail.

“Reply” or “Reply to all”

I’ve been using Gmail to communicate with my team members for a recent assignment. Apparently, there’re three options to choose for a group email: Reply, Reply to all, or Forward. However, due to its dim color and unnoticeable typography, it’s easy to just ignore those three choices and click the blank box. Then what happens is,

It only shoots email to a person who wrote the last reply. However, what most people expect from this situation is shooting email to all the members. I’ve made the same mistake several times and could hear similar experience from other users as well.

“I attached”

Due to the continuous group project, I was keep exchanging massive amount of messages and files via Gmail – and as usual, I forgot to attach my file for one of the emails I was sending and clicked Send button. Then this pop-up message came up asking if I forgot to attach anything – because Gmail detected “I attached” from my sentences. I thought it was kind of creepy and sweet at the same time. Thanks Gmail.


Analog and Digital

Analog Input

Analog input using two different potentiometer but same code.

Digital Input

Digital input using three different codes but same circuit structure.