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.

Locative Media Week 4

Reading Mark’s chapter1-3 reminds me of high school when I am studying geography. I learned a lot about how to read different maps, getting information from them and also how to distinguish them. Mark mentioned different kinds of maps in his article, some of them are a Humanistic map which shows human phenomena in the map, for example, how long or how much does it take for you to get to certain place etc. Compare to geographical maps or maps showing natural phenomena, this kind of map needs to be updated regularly. For example, in chapter3, I love that how he used Washington Metro map as an example. Now the map is updated and the scale is already larger. There are also some new lines and stations added to the map. Also, it is mentioned in the reading that this kind of map made it easier for users because it’s efficient in addressing questions. “Where am I, where is my destination, do I need to change trains etc.

Beijing has a similar metro system and Baidu published an electronic version of the metro map. It’s very convenient because compared to hard copy, update electronic version is a lot easier. Also, riders can highlight which line they want to take. Also, if riders put their destination and starting point, the system will generate the best line for them including “transfer”, “total riding time” etc. They can also take a look at First and last bus time at each station for each line. Baidu map also has a mobile app version that enables users to use data to query anytime and anywhere that they want. Mark also mentioned, “ functions dictates form, a map more “accurate” in the usual sense would not work at all. “Maps especially humanistic maps, are generated based on the need of human beings. When we looking at the subway map, the map in the usual sense was totally hidden because that might cause a distraction.

So sometimes when we saw a white lie in the map, It’s probably because of human need and the purpose of the map seeing people better.Like selection, smoothing, line conversion mentioned in the reading. Also, nowadays lots of maps are enabling users to alter the scale by themselves so that they can decide how detailed they want based what they are going to use the map for. All in all, map a tool of serving people, even if it lies, it lies for serving people better.

GPS track

Those are my track for my days during this weekend. On 23rd, I went to a museum called “neuseum”. on 24th, I went to one of the parks. On 25th, I went to my internship at the capitol hill.