Volunteer Website opened when you search your location in our bar
Pollution Map 1: EPA 2020 Data of General AQI
Pollution Map 1: Preview of search bar feature
Pollution Map 2: Preview of hover for stats feature
Game Page: Instructions + Link to Pygame in Browser through Repl
Pygame in Browser through Repl
Pygame in Progress through actual Python code in VS Code
Pygame Lose Screen through actual Python code in VS Code
About Us Page!
Air Pollution is such a vast problem globally from small urban sprawls to large metropolises, and caused by our negligence for the environment. We’re sure you’ve probably heard this MANY times, and, while it’s true, our source of inspiration was a little different.
We’ve all come from families with backgrounds of asthma and breathing issues due to the air pollution present in their homelands, and were brought together by the realization that even the citizens of our own nation don’t have enough knowledge about pollution and climate change. Even our president is skeptical about climate change sometimes! So, in order to combat this issue and inform people, we created Hactre(e)s!
We’re so grateful we got this opportunity to meet someone new across the nation and bring our minds together to produce this idea!
What it Does
Hactre(e)s is a recreational platform meant to educate the user regarding the current global issue of Air Pollution through an interactive game and several helpful visuals. The product contains three individual features to the HTML webpage:
A custom location-based volunteer search bar that connects the user with opportunities to help combat pollution (in another web page that searches for volunteer opportunities).
Two heatmaps that visually display carbon production and general AQI data from EPA and EIA reports (2020 and 2017). They contain a geolocating feature and embedded search bar to look up your location on the map and find data near you.
Terra vs Train, an educational PYTHON (pygame) game that encourages users to plant and collect trees, and watch their carbon footprint at the same time.
How we built it
The platform for our project was created using HTML and CSS through the github server. We embedded two heat maps which were created using Qgis. Qgis programming includes the languages C++, Python and QT. Additionally, we also included a recreational and educative game called Terra and Train which was a pollution spin off of the popular snake game. Terra and Train was built using Python and Pygame.
Challenges we ran into
We wanted to make our game available to all (no pygame installation required), but it was difficult to embed our pygame into the html webpage; we instead made it available on a web browser by running the game in Ripl.
Another issue we faced was creating and inserting our maps into an iframe, it was difficult to get our map (with over 19,000 rows of data) to display and load properly.
Lastly, coding the game TerravTrain was actually pretty hard, as we’re all new to pygame. However, with the help of a mentor we got it done!
Accomplishments that we're proud of
We’re first of all super proud of our website display and our page organization through buttons (considering one of our members was brand new to HTML and CSS and another completely new to our team in general and so far away!). Also, coding the python game was very satisfying, as was learning so much more about how pygame works and different shortcuts in the code. Lastly, creating the map with so much data was so tough, and when it finally displayed as the heat map we wanted, it was a moment of complete glee before we got back to work.
What we learned
Through this process, we all strengthened our confidence and skill in the varying languages that were utilized for the project including HTML, CSS, pygame, Python, and C++. The use of Github, Virtual Studio Code Live Share, Google Meets, and Slack for communication and collaboration, also taught us how to be more flexible and adapt to quick changes, as we worked together virtually. Most importantly, we learned how to troubleshoot both efficiently and effectively; with all the small challenges that we faced along the way, all members were able to better solve these issues in quick and creative ways.
What's next for Hactre(e)s
Our next steps for Hactre(e)s is to reach a bigger platform and larger audience. We hope to improve our website styling to be more appealing as well as include a myriad of maps (water, land, and soil pollution hopefully), covering information from across the globe to better inform the users. It would be nice if we could learn to make our heatmaps with R rather than relying on QGIS, as well. Additionally, our team plans on adding a wider variety of games (and maybe levels to the Terrav.Train game) so that the user can better engage with our webpage. We might even code our next one in C++ and figure out how to display it directly in the website.