LM Beacon Project

For the Beacon Project, I created a locative album. At the very beginning of the semester, we listened to a podcast about the locative album. When I was coming up with ideas for creating a locative album using a beacon.

First, I referred to the template on evothings and coded an interface with a brief introduction and a button.

If the user clicks on the button,  they will be led to another interface which is the music display interface.

Technology difficulties

I had some difficulties when coding and dealing with the beacon.

First, because I am familiar with P5, so I chose to use P5 editor on this project. However, there is something that I overlooked- some P5 library doesn’t work in the evothings app.

When configuring the beacon, the phyweb app always flashed back.

I tried to use <herf> plus file path to redirect to another page after user press the button. However, it kept showing that “file not found.”

Also, I tried to play with the “RSSI” value and include it in an if loop then uses it to control the display fo music. However, as the value is changing constantly within an unpredictable range. So I had to map the RSSI value before using it.

The biggest difficulty that I met this time is the audio part.(Got tons of help from Matt in this part and I am still trying to get more familiar with the code and trying to get it work since I am familiar with JQuery)

At first, I was trying to use the P5 sound library and it was not working. In class, I talked to professor Clay about the difficulties and professor Clay suggest to think about it from another way- if it’s not working on the phone, is it possible to play the music from the laptop or from other musical apps. I tried to find a webpage that contains autoplay music piece and configure the beacon with the URL. However, it’s not working as well.

After talking to Matt, I figured that use “audio control” in HTML might be a better choice, create a list in the display beaconlist function and import music pieces as element that’s my understanding(?)

{{ var timeNow = Date.now();

$.each(getSortedBeaconList(beacons), function(index, beacon)

if (beacon.timeStamp + 60000 > timeNow) {                console.log(htmlBeaconURL(beacon).indexOf(“songone”));

if (htmlBeaconURL(beacon).indexOf(“songone”) > -1) {


var element = $(  ‘<li><audio controls autoplay><source src=”music/1.mp3″ type=”audio/mpeg”>Your browser does not support the audio tag.</audio></li>’ );                     $(‘#songone’).append(element);  } else {

$(‘#songone’).empty();  } } });


Also, during the video conference Matt and I adjusted the timer as well since for the default setting, it only show beacons that are updated during the last 60 seconds.

Locative Game

For my locative game, I decided to do something relevant to museums since Washington DC is famous for museums. Also, this idea came from our scavenger hunt during the orientation.

During the orientation, all the students at NYU DC were divided into groups and were given a piece of paper with prompts on it. For example, students are prompted to find three things related to “elephant” on it and take pictures.

So I wrote a drawing program which can help the user get to know museums in their cities better. At first, it will ask the user to input 4 museum names. Then it will lead the user to the drawing interface and help the user to decide a feature and a museum. Then the user can go on their scavenger hunt. For example, what I got is “find the most interactive media art thing” in the spy museum. So my friend and I went on a trip to the spy museum and then tried to find the most interactive media art thing.

After a thorough visit, we figured that there’s a photo booth which is similar to what we have for each and every year for re end of semester show. This is the most IMA thing in my mind. However,  another NYU Shanghai student who has taken talking fabrics thought that a coat which was modified as a weapon is the most IMA thing. Bullets can come out of the button and the trigger in hidden in the pocket.
Also, I am preparing to establish a documentation page where people can share their findings with others. I had this idea because I saw the documentation page for Geocaching and loads of people discuss and share information there.
Museums are an important part in terms of city spirit and residents spiritual life. However, less and less people are paying attention to the museum. This project is aiming at helping people get to know more about the museum and encourage people to pay more attention to the exhibition. Since nowadays there are lots of museums and exhibitions tend to be ignored by people.
code for the drawing program

LM Project1


For this project, I was using Jackie’s data of street artists. Street art has become a more and more important part of the city culture. So I wanted to build an album for them and help to spread this kind of culture. At the same time, I made the project more interactive by adding some feature letting users alter the music the way they like and create their own music.
The first thing that I did was to get familiar with the Google map API. I read through the sample and had some trouble understanding it, the map wouldn’t show on the screen. After I tried for several times, I figured that the API key was not working and I had the canvas and the map at the same time. So I fixed that.
Then I tried to import the data from GeoJson file to the map and add markers. There were three ways introduced on the developer page and I tried all of them. Thanks to Matt helping me fix all the bugs. API key was the first bug, and me forgetting the call back function in the HTML file was the other reason that it didn’t work. When trying to debug, I added a callback function in the JavaScript file, which was unnecessary at all. What’s more, I also kept the original name from the sample code online without changing it.
Then I started with the “radio” code. Which I simply write the code of a video recorder with street artist’s picture on it rotating. Also, I write a simple simulator, which can control the music. First I wrote about all the thing in sublime using HTML and then when I started to have the thought of letting users manipulate the recordings, I looked up and found the p5 sound library was actually an easier way of doing it so I switched all the things into p5. Then I connected the mouse position with pitch and speed of the music.
I created a radio page for each individual artist. Linking map to the “radio pages” that I have done is another challenge. I was trying to using to link but in my code, the linking is actually in JavaScript. So I went to the library and reference and got code “window.location.href” Then I put markers in a for loop and use I to define them so that I can link them to the “radio pages”. The code didn’t work at first but after I pushed all the markers into the aerialist then I worked.
I also added a typing effect at the very beginning and explain the whole project to make more sense.
I also contained the p5 geolocation library and managed to grab the longitude and latitude. If I have enough data, I really want to expend the map and let users to get information of the street artists of their current location.


LM – P5 map

I used the p5 library to create a color-changing ellipse based on the location. I used the latitude and longitude to fill in the red and blue.  At first, the difficulty came from that I didn’t totally understand the library. Then I figured and called the functions correctly.

At first, I asked other classmates to run the code and test it for me, However, all of them tell me that they saw a blue ellipse. Then I asked them to screenshot the reading in their inspectors. It turned out that reading is absolutely normal. Then I asked them to send over the screenshot and figured that it’s different but just making such a small difference. So I end up mapping the value figured that it’s still not making the obvious change in color. What I did afterward is linked the coordinate reading of the user to the measurement of the ellipse so that a more obvious change can be observed.

There is also another thing that I want to mention when trying to debug, I also think of the possibility that it might be the negative number or the decimal that was not recognized.

New York



Locative Media-Google Maps


Here’s the map I created. I first mapped the place I frequently visit in red and then landmarks in blue. Which contains the gym, local CVS Macys and grocery stores like trader&joe’s. Also, I marked places and landmarks that I wanted to visit. Which has Lincoln Memorial, National Mall, Capitol Hill (where I am interning) Pentagon, National Museum of history.

After that, i marked the NYU DC building and tried to visualize routes. There are lots of one-way road in DC so I have to distinguish and keep it in mind when I am making “driving route” and “walking route”

After all, those, based on the route and markers. I marked the area that I always hang out (big triangle is living area and the small on in my hangout place during my internship). And I also find that this place is also the place that’s walkable for me since I tend to walk pretty much everywhere in DC.

LM- Marian Traffic

There’s a port in the southwest Washington, has approximately 25 ships in port and 41 port calls. Which is a fair amount of marine traffic. By the time I looked at it, it’s mainly sailing vessels. and two passenger vessels. To be honest, I am a little bit surprised that Washington has this kind of port since I assume it’s an inner land city different from Shanghai and Suzhou. Different from lots of ferries transportation in New York, I barely heard that people are taking a ferry in Washington.

This is Berlin, it has a fair amount of vessels as well. But is basically along the continental river. I spotted a port on the south side of the river. I also notice a pattern that vessels are almost along the major cities.

This is Shanghai~ Shanghai is such a busy port and Changjiang(Yangzi River) is a major canal for China. The majority of vessels are cargo, bulk carries and oil/chemical tanker. And vessels are distributed along the border of Shanghai as well.


For the GeoJSON data collecting, I mainly collected two data. The first one os the shopping that I frequently go to, I include the nearest Macys, CVS near our academic building. For the second one, I marked all the CVS pharmacy I have visited.

I was motivated to do the second one because one day when I went to the CVS, which was supposed to be a 24 hr convenience store, it was closed. So I paid attention to the opening time and documented. Also, there are special centers within CVS, so I also documented the CVS special center.