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 ^ ^)

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.