Splastic

• 

  Website Example

Inspiration

As someone who loves the sea and loves doing water sports, it was an obvious choice to try to tackle ocean pollution seeing all the bottles and trash in the oceans. What better way to tackle the problem using modern technology!

What it does

Splastic aims to provide an accessible and easy-to-understand platform for tracking ocean pollution. The application I built is in the form of a website which simulates the trajectories of plastic or trash using real world data over a period of 30 days, which serves as a research and general education platform that is fully-interactive and engaging to anyone who uses it. It allows users to choose points where the plastic starts, advects them, before finally showing the points or a heatmap of where the plastic is concentrated at. Although this is not an entirely accurate simulation (doesn't account for size of object and wind), it is still very valuable to researchers and helps to raise awareness on the problem via this game-like application.

How we built it

The website is built with Nuxt.js (built ontop of Vue.js) and the map is provided by MapBox GL js. The backend API is hosted with FastAPI and uses the OceanParcels library to run the simulation.

Challenges we ran into

As someone not familiar with using map APIs and first time using OceanParcels library, scouring the documentation was the hardest part of all. There were also challenges with connecting the frontend with the backend. Adding interactivity (drawing many points on the map) was also a challenge having not attempted this sort of task before.

Accomplishments that we're proud of

I am proud to have utilised these unfamiliar libraries to create an application that surpassed my expectations in terms of usefulness and prettiness.

What we learned

It is worth it to invest time reading documentation and it is very useful to explore examples of certain libraries. I also learned much more about how maps are rendered and am excited by future applications of using map APIs.

What's next for Splastic

In the future, I will explore using high-resolution satellite imagery to accurately track plastic movement. Moreover I hope to expand upon this application such as random coordinates for 100 pieces of plastic for research purposes and improve the interactivity of users with this app.

Built With

• fastapi
• nuxt
• oceanparcels
• python
• vue