Inspiration 💡

In one scene of the Joker, the Joker’s therapist reveals that the mental health service’s funding is being cut. This alludes to a real world issue: barrier when accessing mental health care. This is especially detrimental considering how mental health affects wellbeing and physical health. Change comes when people are educated of a problem. I hope that Barrier can introduce this issue in a more memorable way.

What it does 🎮

Barrier is a social justice themed game. Players first chose a state in the U.S. to play in. A grid then appears filled with moving red blocks. These blocks are a visual representation of "Percent of Unmet Need". This is used by to measure the magnitude of the mental health professional shortage. Users must use their keyboard to navigate through the red blocks and to the end. This journey is a representation of the real-world barriers that some must avoid in order to access quality mental health care.

How we built it 🛠

Processing, HTML, CSS, JavaScript

Challenges we ran into 🧩

1) I had trouble finding a dataset. At first I ventured through PDF’s on the American Psychiatric Association page, then studies by the National Center for Biotechnology Information. Finally, I came across data that used a fair means of comparison and a large sample size (49 states, Vermont didn't have data).

2) When transferring my code from my local computer onto GitHub, I was greeted with a life-less website. The console was the first place that I looked. After copy the error onto Google I pinpointed my problem: the Reader function (to parse a CSV file) was not supported. To resolve this, I turned to the Table function in Processing. Unfortunately, this too was unsupported. I ultimately decided to parse the data on my local and paste the parsed data into an array.

Accomplishments that we're proud of 💪

Moving the barriers through the grid! This was difficult for two reasons: (1) each row needs to have barriers moving in one direction (2) the barriers need to be moving slow enough that the user can actually play the game.

To unravel the logic, I practiced rubber duck programming and explained my plan for execution to my parents. After that, I split all of the small steps up into individual functions:

  • One that determines where the barriers will be located on the grid
  • One that determines which row of the grid the barrier is in
  • One that assigns each row a random direction
  • One that actually moves the barrier in the corresponding direction

Breaking a large problem into smaller pieces was helpful. With this roadmap, I successfully made the barriers move. Unfortunately, they were too fast. My first attempt was to slow the frame rate. That resulted in me also slowing down everything else, making the app seem unnaturally laggy. I then tried implementing a delay, but that didn’t work. My final attempt was to increment the barrier’s position by a minuscule amount (ex. .02). This ended up working!

What we learned 📚

  • Object-oriented programming. I'm currently learning Java in my Computer Science class, this was my first application of that concept.
  • How to parse a CSV file. I learned about Java's createReader, line, and Table functions.

What's next for Barrier ✨

  • Include more disparities in mental health. Currently, Barrier compares Percent of Need Met between states, I'd like to potentially also include comparisons between different income brackets, ages, and races. I believe this would send a more powerful message.
  • A responsive design. I hope that each element can scale to the Canvas size.
  • A smart way to handle text in the Learn More page.
Share this project: