Neon City

Swift 4 (iOS development), ARKit, Shader, Google Places API

Team Project with Chloe Gao

 

The Neon City app is an AR experience that transfer our surroundings into a neon world. It also provides you the information about nearby stores by placing glowing 3D texts into the neon world. This combination opens a portal into a cyberpunk cityscape, and create a little piece of modern Shibuya Tokyo nightlife inside your mobile device.

 

MY ROLE

I worked on this whole app design and development with Chloe Gao. We worked closely on all aspects of app design and development, but more specifically I worked on getting the data and visualizing in on the screen and the logo design. 

I mainly used ARKit with Swift 4, and Google Places API. Reference from Danijel Huis' HDAugmentedReality library.

 

CONCEPT

The concept of this app is to make users see the city with neon lights on when it's dark. We are both from big cities and shared similar memories about neon lights. I thought all those sign light on the streets we see at night give specific feelings and emotions to people. Busy street lights brighten up the city and wake people up. You can easily see these views especially in cities like Seoul, Tokyo, or Hong Kong.

 
 
 
 
 
 

First

We wanted to convert the world users see through the screen to something different to the real world. So we used camera filter to make everything looks like neon lights. The camera filter will only works when it's dark enough.  We wanted to give the sense of neon signs lightening up at night.

 
 
 
Screen Shot 2018-03-30 at 12.46.21 AM.png
 
 
 
IMG_9839.png
 
 
 

Second

After that, we wanted to expand the idea further than a camera filter app. What if there are real neon signs with actual place names?

We decided to keep the night-like look and feel of the camera filter but add more elements to the space. Those elements will be neon light signs. Based on the user's current location, I imported point of interest data to the app using Google Places API. 

 
 
 
Point of Interest from Google Places

Point of Interest from Google Places

 
 

If the user tap on the NearBy button, the app will place neon signs of nearby places in the space. We used ARKit for augmented reality. 

 
 
 
IMG_9976.PNG
 
 
 
IMB_S8lYah.GIF
 
IMB_oBpeqd.GIF