24 Hour Pinhole Camera

Ideal: live webcam stream from sources in New York

Reality: use timelapse video (computer not fast enough to run the program with live feed in real time)

Code: https://github.com/hellonun/liveweb/tree/master/pinhole%2024%20hour


1 image = 1 hour

Only the stills remain

The interesting things about this:

  1. hours of sunlight in different seasons
  2. camera motion
  3. even level of light in timesquare (bright all day)
  4. rain marks on camera during Hurricane Sandy

pinholeArtboard 6

pinholeArtboard 5

pinholeArtboard 4

pinholeArtboard 3

pinholeArtboard 2

pinholeArtboard 1


Mirror Draw (with Eva Phillips)

The class sees the mirror on the screen, an extension to the room they’re sitting in (webcam placed above the screen). Each person can tune in to draw their environment in the virtual space.

Code: https://github.com/hellonun/liveweb/tree/master/mirrordraw_iphone

This code only works with iPhone because Android phones require a different calibration method (the angles given by each phone brand’s gyroscope is different).

Test algorithm:

Actual space:

Photo on 18-11-2562 BE at 15.09.jpg



Let’s assume our bodies, made up mostly out of water, are flattened, digitized and resized into a few black and white pixels a.k.a. a mouse.

Our movements and expressions, walking, turning around, nodding, smiling become clicking, double clicking, right clicking, sliding, scrolling, scrolling and scrolling…



Most of the time we spend on the screen, we’re being perceived as two numbers which define our position in the space, our presence is just a few pixels in this enormous screen space



We are pointers of different variations. Our actions are guided by how our bodies interact with the environment; that moment when a mouse turns into a finger suggesting that we click, or the rainbow wheel of death telling us to slow down



Have you ever seen more than one mouse on a screen? We only see ourselves; although a million of us could be on the same webpage at the same time. Are we really alone?



We don’t feel as awkward about addressing uncomfortable questions, even when we’re sitting in the same physical space and sharing the same digital environment

So… what does it REALLY mean for us to be mice? And how can we design a more exciting web experience around it? (Also, doesn’t it sound funny, that instead of ‘a mouse’ we’re mice?)

Inspiration: http://donottouch.org/ 

Code: https://github.com/hellonun/liveweb/tree/master/getting%20to%20know%20the%20mouse

*insert video*

HTML Portrait / Synchronous Web


  • Using HTML5’s video or audio tags along with JavaScript, create an interactive self portrait. Link to it on your blog.
  • Find a live or synchronous site or platform online. Try it out. Describe it on your blog. How is it used? What do you find interesting about it? Come to class prepared to discuss.

To familiarize myself with HTML and Javascript, I decided to visit the webite https://www.w3schools.com/html/default.asp and tried to incorporate as many features as possible. The results can be found in this HTML file:


A chat app feature “typing”/”read”. – Facebook messenger or Line messenger. https://line.me/en/

We discussed in class that asynchronous web has the ability to join the worlds of two ends. This is especially true for me as I now live far from home. Chat apps are the main platforms for my family / my friends and I to communicate. I once typed something and hesitated to send. My friend asked “What were you just typing?” in hope to draw out my spontaneous reaction to the topic being discussed. Asynchronous platforms allow us to experience the reaction of another person in real time which brings down the wall / closes the space between us. Things are less filtered, less crafted, more spontaneous, more authentic (not good or bad, just different).

An additional site: I’m not sure whether this is a synchronous web but I find the interaction here very interesting: https://luminghao.com/

This is a portfolio website of my ITP classmate Luming. Once landed on the page, the site unfolds itself with a text shuffling animation. It lists all the projects and mousing over each one creates an underline which suggests it’s a link. Once the link is clicked, the page plays a sound and loads the project. The sound is different for each project and acts as if it is launching something (similar to when a wrestler launches himself on stage). Each project then appears on the page, some interactive, some links to soundcloud, some to chat bots. The title of the pages keeps alternating between projects making it feel live.

I appreciate the simplicity and directness of the web. While visually it is mainly a bunch of texts, the sound and animation make the site very playful and enjoyable to browse. There’s a element of surprise in every click – as if you’re unfolding something, finding something, putting it back.