Ocean Microplastics Mania

A gamified way to learn about hotspots of ocean garbage patches.

Comment 1

Inspiration

HackBeanpot's Under the Sea Theme immediately got us thinking about the ocean (shocking). Microplastics came to mind pretty soon as they are getting increasing publicity these days. There are several new programmers on our team and several experienced programmers on the team so we thought we'd do something at the intersection of everyone's interests: a web-y, game dev-y, data science-y, web-app.

What it does

Our project brings awareness to the scale and severity of plastic pollution, highlighting its impact to ecosystems, individuals, and the world at large. We display datasets sourced from NOAA about microplastic distribution, and even built a fun little game to illustrate the problem of microplastic pollution (based on the same dataset!).

How we built it

We built our site using Typescript, Nextjs, Tailwindcss, Radix/Shadcn, React, and WebGL (ReactUnity, Threejs). We built our game using Unity in C#. Using our dataset from NOAA, we built a simple collection/survival game and a visualization tool using Threejs.

Challenges we ran into

We ran into a couple challenges regarding processing our data/preparing it for use in Unity; there were some idiosyncracies with the initial data that didn't quite map well with Unity's rendering system. Also related to Unity, WebGL builds are not the most stable and we spent a lot of time debugging those up until the end.

The biggest challenge (and opportunity) was getting two of our teammates exposed to new tech (js, c#, unity, react, git, etc.). They picked it up quick and made super valuable contributions!

Accomplishments that we're proud of

Over the course of the project there were a bunch of things that made us proud! In no particular order (except #1)

  • Teaching our team members new technology (and them picking it up!)
  • Honing our data preprocessing muscles
  • Getting some sound design work in
  • Finally solving build issues
  • Creating a cool (we think so) site!
  • Working well as a team

What we learned

We learned a ton. Again, no order here.

  • Our newer teammates learned the basics of: Git, React, Unity, Typescript, C#, etc
  • The intricacies of Unity's webGL builds
  • How to create some groovy UIs
  • How to better preprocess data
  • How to efficiently process data

What's next for Ocean Microplastics Mania

We hope that our project will help people understand the urgency and impact of ocean microplastic and garbage pollution. In the future, we'd like to expand the game by enhancing game mechanics! There's a lot to flesh out in that little concept and we enjoyed programming it!

Built With

Share this project:

Updates