Zeyao – LM – LM Game

For the last project, I decided to make a game that is not included the competitive function. For me, I don’t like how people have to win something in a game. Sometimes, a game can just be entertained and for fun. So, this game is a drawing game which people draw the shape of the city based on the metro line. Usually, when we talk about the metro system, we will think of it based on the city itself. Also, the metro map is seen as an extra attributes to a map. However, I realized that why can’t we put the metro line at first, then based on the metro shape, we draw the shape of the city?

I used the google map javascript api for this project. First, I initialize the map then I added a transit layer on the map, which make it more complete. I also added a overlay Tile system to help the player to draw the city. Originally I wanted to use p5 to make the drawing system. Yet I found that there was a drawing manager function on the google map api. So I used that. I made 3 buttons to change the location center by using jquery, however, it showed the error “google is not defined” and I was working on this for hours. So for now this was not working.

For the future development (hopefully I can fix it recently – in the next few days), I want to fix the button first because there is only a line of error and I knew it could work functionally. Then I have another problem that I do not really know how to fix it. The map itself (the city) is the base of the whole API, so to be honest it is basically impossible for me to separate the base from the other add-on layer, for example, the transit. I tried to search it online, and I did not see any results. My idea was to create a button, and once you clicked it, the map will show up. The default page is just the transit layer. I tried to make the map null — which is how people hide the layer or the map itself, but it wouldnt work. Because the transit is based on the initMap by settings. On the Gaode Maps (a Chinese map) API, the subway can be separated by the map itself, but the metro map is more like an image with a white background. It makes everything underneath and you can barely create anything based on the metro map. Also I did not see that they include the drawing system in the API. So hopefully I can find a way to figure it out.

Here is the code:

Locative Media Project 3: Capture the Treasures

My final design of locative game is very similar to Capture the Flag, but just adds more technical elements in it. After changing several ideas and watching several TV shows I think add something new to a already success traditional game will be a good way.

There’re still going to be two teams with same people(ideally each group have 4 people or more, let’s use “n” to represent the number), and each team will have n-1 objects to be picked up by another team. These objects are virtual treasures(which can be different) and and be unlocked with AR scanning. You can tell the location of these treasures on your phone side but can only know what it exactly is until you unlock it. When enemy players is “tagged” by the opposite team member, they will be “frozen” until freed by a member of his own team. The team that unlocks all the items quicker will win and can collect all the items.

So instead of only one side has a “lag, both team have items to be captured on their side in this game, because it takes more time to collect items on phone. Also it requires bigger and more complex environment for players to hide instead of plain playground. Playing in playground will be too much running involved and difficult to unlock anything from your phone (I can imaging people get tagged once they take out their phones out of pocket). So in this sense, think of CS that requires using more strategy when approaching to the “flags” .



(The prototype is based on Jardin du Luxembourg in Paris, which I think is a good location to play this game ^ ^)

LM: Location Website

For my location website, I decided to make a website that would show the user which hemisphere (north vs south) they were in. This is a play on other location websites that try to show you a more precise location, whereas mine is very vague.

I made my website give the user their coordinate, then check whether the latitude was greater than 0. If it is, then a picture of the northern hemisphere will pop up. If not, a picture of the southern hemisphere will pop up.

In the middle of working on this project, my computer decided that it no longer thought the getLocation() attached to the onclick of the button was valid. I didn’t make any edits to this part of the code, and it suddenly stopped working. I tried closing the programs and reopening them, but nothing fixed it. This happened before I was able to put the photos in the program, so even if this getLocation() problem gets fixed, I don’t know if the photos will show up.


LM: Location Game

For my location-based game, I chose to do an airport bingo game.

The user will open the website and see a traditional looking bingo game board. On the 24 squares (not counting the free space) the user will see different situations or people that they may encounter at the airport or in the airplane. As the user sees these, they can simply tap the square to check it off. There is no “signifier” when a user gets a bingo, allowing them to check off as many as they see, not just simply stopping when they’ve found 4 or 5 of the squares.

I found a website that allows the user to create bingo squares and every time the website is refreshed, the game board is reconfigured with the tiles you put in. I then loaded this website onto an html document. I wanted to make sure that this game could be played anywhere, but also couldn’t be completely filled in at one airport, so I put specific squares in that are only available at certain airports or contradicting squares like only two terminals or more than four terminals – you can’t have both of those.

In order to put more emphasis on the location of the user (what airport they are at), I decided to put a form at the bottom of the website where the user can fill in their name, airport, and an interesting/unique/cool thing they saw at that airport. Once they press submit, the website will load a new page that lists all the users and their answers. This way users can see similarities and differences between airports (that may be in a similar area).

I had a bit of trouble with the layout of the website. I continued to use EvoThings and its platforms. When I would view the website on my phone, the bingo table (which is in an iframe) would continuously shrink. I also couldn’t zoom in. The form was also all the way on the left instead of centered. With Matt, I put a red border around everything to see the edges of all my sections on the page. We finally were able to configure the CSS to make everything look nice.

I tried to add another page that would display all users’ answers, but I ran into more issues. I had to work with PHP and got confused pretty fast. What the website does now is navigates to the list page, but for some reason comments out my php get functions so they don’t show up. I would love to get this working eventually!

This is before centering the form (and before the second page):


This is how it is now:


Zeyao – LM – GeoJsonProject

For this project, I used part of Ashley’s data of the tram in Berlin. However, I realized that it is hard to remake the visualization of those data. I noticed that one of the properties is what are near the stations, so I thought I might find the coffee shops which are close to the tram station, and find the data of their active time. I collected 7 coffee shops’ name, coordinates, and their active time. It took me a while to do this, and it was really hard to find some because some tram stops were too close to each other.

Here are part of the data:

Then my idea was that I used a slide bar to control the active hour, and show whether the coffee shop was busy or not. The first thing I did was to use the googleMaps API and create a map. Then I tried to load the GeoJson in to the map. However, I tried so many different ways and it would not work. First, I tried to just convert the geoJson file to simple javascript, and use the function addGeoJson(data), but it wouldn’t work. Then I uploaded the geoJson file to my website server, and tried to put url into the loadGeoJson function, it showed the issue of “Access-Control-Allow-Origin”. Basically, this is the issue when you used different host for different files and tried to combine it together. So I decided to make a local server. Here is the terminal screenshot that I have for the local server, then it works.

Then I used the GUI under the p5.js and made a slide bar to control the active hours. I learned the GUI from the nature of code, however I got confused by how to get the number of the index from the geoJson file, and control it. I called Ada, and she helped me with that. Basically, geoJson file is a combination of different arrays and all I need to do is to console.log the data and go deeper and find out. geoJson.features[15].properties.active_time[params.hours] this is what Ada helped me got. it hid here! Then I could use slide bar to control the index and get the data that I want.

LM: Beacons

For my beacon project, I wanted to have one beacon that loaded events at the student dorms and one beacon that loaded events at the academic center. This way, students could see exactly which events were happening that day because it’s easy to forget what’s happening on Thursday when we are sent an events email early Monday morning.

I started with testing EvoThings and its connection from my laptop to my phone. I simply loaded the events email onto an HTML document. It worked on the first try! I then went to create my own website that listed all the events for that specific beacon.

I then ran into issues with trying to connect this HTML document to the beacon. In order to configure the URL to the beacon, I had to first find my localhost address, then try to configure a shorter URL address, then attach it to the beacon.

The local host address was the biggest issue. I downloaded MAMP and copied the beacon folder into MAMP’s htdocs folder. Matt and I had to try a few different options with the local host address. We finally found my IPv4 address, then had to find whether I needed to put :8888 after the address or not. We finally got it to work on the laptop, but couldn’t connect on my phone. We figured this was because of NYU Berlin’s WiFi configuration and settings. When I arrived back at my home in the US, my phone was able to connect.

I put my localhost address into bitly’s URL shortener and put that as my beacon’s URL. Normally, you can’t shorten localhost addresses with a URL shortener, but this time it did work. Because I spent so much time trying to figure out the URL and the local host issues, I decided to just do one beacon that would load the events email we got every Monday. If this project were to go as is in the school, I would just replace the email URL every Monday with the new events email. One issue that still remains is that on the laptop, the loaded email is very small whereas it loads correctly on the phone. I don’t see this as a huge issue as I intended people to be looking at this on their phones, and not have a laptop in close proximity to the beacon.

This was the first test:

This was the first test:


This is the website I built:

This is the final:



Locative Media Project 1: Map of Street Artists

Project inspiration:

One of the first thing I noticed since arriving in Europe is that there’re so many talented street artists with different professions. They sing, play instruments, draw, make bubbles, and pretend to be status… I found out that they always have a favourite spot to do art. You can always found them their. Even people playing music on the metro (probably) have a fav line to go on. What’s more, during my traveling in Europe, I found that street artists in different countries have a certain “style”. Paris is more classic, Prague is more absurd (like kafka’s work), and Copenhagen feels more “minimalistic”. It would be fun to map the out – a map of street artists that you can’t possibly found them on google. It’s also a way to exhibit these arts online, showing their talents to more people.



So we start mark locations on the map with geojson. You click on the map and codes with the mark info will be generated. I give my every marks with a few properties: “where ” “type” and “id”.

Collecting datas

One thing that is particularly important for me is to let my image/video source match with the array since it’s easy to mess up. I learned that it’s important to name your assets. My assets folder looks like this:

(although my first level is not quite well-organized..)

So I have 13 datas collected by myself and my friends from several countries: France, Danmark, Czech Republic, Portugal, and Austria.


I choose to use mapbox as my map basis because it looks more aesthetic. https://www.mapbox.com/

They also have very thorough documentations if you don’t know how to code something.


Feedback from class is very useful. It mainly gathered in the “Reset” button in my map. The function of it is letting user easily zoom out from a country and getting to see the map of europe more easily. It is hard to do so manually with clicking “-” button. critics about the button are: 1) probably change the name. “reset” makes people don’t know what it does. 2) move it somewhere else than the middle top, because now it looks like an ugly title.


Using localhost for this project is really legging, and I think it’s because there’re too many videos. So I just dragg it into firebox.

Continue reading

Locative Media Project 2: Christmas Beacon


Project description:

Christmas Beacon is a locative based project which ables people to participate real time with their phones. Since middle November, shops and public monuments on the streets start decorating themselves with beautiful and identical Christmas trees. So what if people can participate something with these tress collectively? One way is to establish a sending greetings page that people can leave a virtual message on the web page with a Christmas emoji icon. They are able to “plant” these icons real time and see others messages real time as well.


Adoption/ what else it can be:

After completing this project I realize that the same idea and be adopt for other things that is more socially meaningful than just greetings. For example, it can used for NYUSH cafeteria feedback wall. I saw a picture on NYUSH Facebook group a few month ago, which is is whiteboard placed in cafeteria written with people’s likes and dislikes from the dishes. However, a lot of informations are covered or blurred because of there are way too much comments. Then, having a web page that can store all these data is more important. And beacon can be a reminder for people to submit feedbacks once they go dining in the cafeteria.

Project progress:

Step 1. Configure beacons

I started with testing different apps in phone to configure my beacons. First I used GetTok to configure it and make sure it detects me beacons. Then I tried to click on the beacon info line, enter the password and I saw a page with more infos but then my quit very quick. After that GetTok quit whenever I tried to clicked on that page(I found how the page looks like with online). Im now sure about if it is a must to have Eddystone password and passkit user key.. Since the GemTok keep quitting I decided to move on.

I opened the app “PhyWeb” with blue icon. After detecting beacons for a few seconds, it shows me the preset url (apple.com). I went to the settings and tried to change the url into something else to see if it works.


Step 2. Firebase

I used firebase to store my datas. Since I’m not experienced with it, I watched two videos from The Coding Train to learn a bit more about it. Links: 9.1: What is Firebase? (Database as a Service) – Programming with Text 9.2: Firebase: Saving Data – Programming with Text

Step 3. the website

The design of the website is pretty basic. I followed the youtube video’s instructions to set up firebase links. In my firebase table, I store 4 objects: “icon, text, x and y”. X and Y are the position of the message user leaves based on where they click/touch on their screen. I also make the rules to be public so that everyone gets access to it.

I used Bounce.js http://bouncejs.com/ for emoji informations. I also have a random array of Christmas emojis so the users will get different ones when they sent out messages. I increase the chance of getting more 🎄 because it’s more relevant to the physical object.

To make things easier, I registered another github account christmasbeacon. And use the GitHub server pushed a new web https://christmasbeacon.github.io/. (I thought about to have a sub from my website like wenqianhu.com/beaconchristmas but the url is too long and doesn’t look good).

Step 4. Test

Then just to set the url to https://christmasbeacon.github.io/ in the beacon. Somehow I couldn’t edit the beacon that I already configured to my website. It shows “reading” forever when I go to the edit url page. So I used another beacon that I didn’t change url yet.

Okay it works!

My code should be easily found in the christmasbeacon github account repo https://github.com/christmasbeacon/christmasbeacon.github.io.