Press "Enter" to skip to content

Category: Intro to Computational Media

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.


Final Project Proposal

My final project will be developed together with Huiyi and it will be about the relationship between sunlight and time. After seeing Huiyi’s midterm project, which overall speaks about the similar concept, I asked her if she’s interested in collaborating – and here’re some common points and differences among our previous projects.

Alice’s Physical Computing midterm: (this is my past project)

Huiyi’s Physical Computing midterm:


First User Testing

For our initial user testing, we used Huiyi’s globe for midterm along with my one of my p5 sketches. The installed object itself was going to be a fixed globe with photoresistors on all the cities where ITP community came from and as people project light source on them (such with their phone flashlight), those corresponding cities’ webcams will show up in projection. However, the results were quite different from our expectation. Here are some feedbacks we got from the user testing:

  • I want to rotate the globe and make it spin!!
  • Seems like it’s more about surveillance & privacy issue
  • It’ll be hard for photoresistors to detect lights?
  • Looks educational and informative
  • Looks like about traveling


New Sketch

We initially planned to project webcams around the world so people can recognize the real time differences, but we decided to rebuild both of the object and the projection parts as users had trouble relating them with time. Although Huiyi and I were eager to use webcam API for our projection, we decided to let it go if many people are easily interpreting them as different subjects.

Instead, the projection part got divided into two parts of (1) Skyline panorama that alters simultaneously as the light rotates and (2) On top of the panorama, having time in number form. The time info in number form will basically emphasize how some cities are not following UTC standard, by having glitchy effects that resemble error message. In order to build this new sketch, Huiyi and I are organizing the list of cities we received from ITP students into timezone format. Here is a testing version:


UTC Timezone_6

Loading different webcams around the world via p5.dom. The live cams’ source is Due to number of cities and live cam limits, this sketch only contains live cams of Vancouver, Los Angeles, Denver, London, Rome, Seoul and Sydney. These cities were selected in order to check the brightness by different timezone.
Full screen:


  • Currently using opacity to turn on/off the live cams, but how can I remove them when the mouse location is not close to the cities?

UTC Timezone_5

Using slider and button of HTML controls from p5.dom in order to alter city name sizes and language options. Full screen:


  • Text edge quality from p5.js; text written from p5.dom is fine
  • Writing city names via p5.dom might be a better solution
  • Next step will be using API or CSV?