Path train schedule App

My final project is translating the time schedule of NJ path train to an animated offline phone application that can show the position of every train in realtime based on its time schedule. I believe it can help easy the anxious when people are waiting for the train without internet connection.

Because of the time limitation, I scaled down the project and focused on one train line, which is 33rd street to Journel Square. The code link is here.

Data source

Although I downloaded the data from path train official website, the data is not an API but a bunch of files linked with each other in GTFS format, which is not readable very well. So I manually inputed the time table to a .csv file.


I drew the train map in Illustrator and imported as an .png background. The size is based on iPhone screen. 

Code organization

The data.js is including all the function of data processing. The trainStation.js is including each station's x and y positions in the canvas. The train.js is for all the train moving function. In the code, I get the time at the moment and search it in the time table data, then calculate and map the position of the train on the canvas.

Phone app translation

I used the PhoneGap and Cordova to translate the web application to an iOS app. And adjusted the html and css to fit the iPhone screen perfectly.

Summery and problems

1) The train is not moving smoothly as an animation because the smallest unite of time in this application is one minute, that is almost the whole time of the train from one station to another.

2) I can not make the train move as a curve which is showing on the official map.

3) The real time schedule has lots of spacial setting such as different time table on weekends, which are too complicate for this time, so the train schedule in this application is not the true schedule.

After this final project, I realized that the development of a full functional problem solving application is not easy and need more thoughtful design and organization. Also I'm not very familia with javascript yet. But I think this realtime train moving App is useful and worth exploring more.

Final project proposal - The crowd

When I showed my The Nobody to my friends, some of them said "Oh, cute!", some of them said "It's a little creepy...", and some of them said "I think it's cute at first sight,but scary after keeping watching it for couple minutes." This made me want to do this concept more because people get different, even polarized, feelings and emotions,  with this same one simple object. 

My first idea is making 50 Nobodys turning their head to follow a light spot which controlled by a user. Then I did the playtesting.


But at the playtesting, some peers give me the opinion that if these little guys just turning their head to follow the people passing by, it's more nature and reasonable. 

I will keep thinking and testing to decide the interaction way.

For now, the problems I need to deal with are

1) Running lots of servos.

2) Making lots of characters.

3) Writing code for turning angles.

3) Find a better way of assembling.

Final project proposal

Everyday I need to take the path trains. There is no internet connection in the train station so I can not know when the train will come. This is really annoying to me. My old solution is take a picture of the brochure below and save it in my Iphone.

But a photo is not cool enough in ITP, right? So I'm thinking about make it a offline realtime animation that can show me where are all the trains and how they are moving on their lines. 

Then I found the open data of this brochure on the official site of the path train, and they are data sheets in .txt files connecting with each other. But it is easy to translate these files to excel files.

The Nobody

Yes, it got a name, Nobody! This week I made him move a little.

This idea comes from the scene that when I see the moment someone is really focusing on or obsessing with his own work, I just super want to say "Hi" or disturb him, and see his reaction...


1. Coding and testing

2. Making the scene

I used clay again to make the Nobody, modeling it with a thick wire in the body and a thin long wire in the head which let it can pass through the body hole. Then I made the floor, desk, chair,and laptop with cardboards. The laptop had a LED in it trying to make it like a real computer screen. (Standoffs are really useful and save me lots of time on all these legs.)

3. Connecting with Arduino

This is a simple circuit with one microphone sound sensor, a servo motor, and a LED. I decided the servo's position first based on the Nobody, then just roughly collected all other parts into the under layer.

4. Assembling

I'm so lucky that I bought these two boxes separately in Container Store and they were perfectly matched! It saved me bunch of time that I just needed to focus on the inner part.


1) I haven't figured out how to sense the knocking direction, and how to dynamically sense the default decibel when there's nothing happen.

2)The head moving is not smooth enough.

3) I didn't mount the servo on anything. Because the iron wire passing through the body was not technically straight, the head is moving better when I let the servo move with it a little. It must had a better way than iron wire.

4) There is no switch! Since I don't want people see the power supplier so I used batteries placed in the box, which made me confused about how to make a switch...