AQ/AR (Air Quality AR)

Breathe Easy: See Your Street Level Air Quality in Real-Time

Comment

Inspiration

Air quality is a really big issue in downtown and urban areas like New York City or even in downtown Charlottesville. A lot of people don't know that air quality can actually vary a lot just from street to street. If you have an underlying respiratory issue, you may think the air quality in fine in when you walk outside the house but if you go over a few streets it can change dramatically and be dangerous if you aren't prepared with medicine or a mask!

AR and AR headsets are a really new and emerging technology right now and we were inspired by this to create a solution to bad air quality in cities! Before integrating into an actual headset (because we lack some resources lol) we decided to make an accessible mobile app with AR to see real-time street-level air quality.

What it does

When you open the app you see your current location's air quality index (AQI) and the current weather conditions. There is a scale to see how good your weather quality is and a dynamically changing UI based on this. On the AR mode, we integrated three.js to create 3D models that represent the live location of the sensors. Ball mode and arrow mode. Ball mode creates a 3D object above the approximated location of the sensor in the real world. Arrow mode creates a 3d object which follow the user, but will always point towards the nearest sensor. They are colored based on the air quality of the sensor.

How we built it

Before incorporating into an actual AR headset we decided to make a mobile app for accessibility and usability. We used a standard mobile tech stack of React Native and Expo. We used 3.JS for the 3D modeling component of the AR. For our main source of information we used the Purple Air API. Purple Air is a company that helps monitor air quality by letting people purchase easy-to-install sensors with real-time data on levels of particulate matter. All of the data from sensors are accessible through this API, there are a ton in NYC that have data street by street but even some in Cville!

Challenges we ran into

Hardware limitations limited us from using ARCore or ARKit, two SDKs which would’ve been really good for our application. Therefore, we were forced to use three.js and do some of the math on our end. While we’re still very proud of our results, we believe it can be improved by utilizing ARCore in the future.

Accomplishments that we're proud of

Being able to do this in Three.js. A lot of the locations and the distances and heights had to be mathematically computed in our code. We are also proud of the fact that we successfully integrated AR into our mobile app, which neither of us had ever done before. (I'm also proud of the moving cloud animation on the homepage!!- Shruti)

What we learned

It would’ve been good to have researched our tech stack more before coding in the future! It was mine (Shruti) first time ever coding in mobile, so I learned that too!

What's next for AQ/AR (Air Quality AR)

We want to integrate Air Quality AR into headsets like Meta Raybans and Apple Vision so that it can be integrated into an AR headset. We also want to Improve AR technology with ARCore/ARKit so that it is more accurate and advanced. Our main goal of this project was to raise awareness about air quality and air pollution in urban areas across the US and the globe. We think that it is extremely important to allow people with respiratory issues and underlying health conditions to travel safely and we want to partner with companies who specialize in AR to make this part of their mission and have this be an app in Meta Raybans or Apple Vision Glasses.

Built With

Share this project:

Updates