hopILLINOIS

Inspiration

As students at the University of Illinois, we're amazed by the diverse range of events and activities available on campus. There's always something going on--but it can be a challenge to keep track of the many concurrent events spread across a vast campus. We wanted to create a solution that would make it easier for students to discover and participate in the events that interested them. By building a gamified, interactive map of campus that highlights ongoing events in real-time, we hope to encourage students to explore their campus and get more involved in their community. We believe that hopILLINOIS has the potential to help students discover new interests, make new friends, and become more engaged members of the campus community.

What it does

HopILLINOIS is a pixel world of the University of Illinois college campus (currently only the Bardeen Quad) that geolocates your phone and places your in-game avatar on the map location corresponding to where you are in the real world. Any user can seamlessly create an event that is visually displayed on everyone's map, where they can see the name and other info about it. Events could range from philanthropy opportunities, RSO meetings, impromptu study sessions, frisbee on the quad, etc.

How we built it

To create hopILLINOIS, we used various technologies and resources such as OpenAI's DALL-E 2.5 alpha for generating an Illini-colored tent asset, an open-source tool for dynamically generating custom avatars, and Google Earth for a top-down view of Bardeen, which we then hand-drew as pixel art. The backend is mostly Node.js/Express.js/MongoDB/Socket.io, and we wrote some Python scripts to assist with generating the art.

Challenges we ran into

Two of the main challenges we ran into were lag and coordinate drift. Coordinate drift stems from using a formula to translate a user's latitude and longitude into the game's coordinate system. Since the earth is a sphere, and we're treating the map as a square, 2-dimensional top-down view, there will be a small amount of error when using a conventional formula to do this translation. The error, or "drift," built up over the course of the map and prevented us from being as accurate as we wanted with the avatar placement. We worked around this issue by tieing sparse tiles down to a ground truth latitude/longitude taken from Google Earth, then interpolating between those.

The second issue, lag, made it difficult to use the site and distracted from its purpose. Occasional freezes were frustrating and made the multiplayer aspect impractical. Through rigorous trial and error, and continually compressing assets, we found out that the size of the assets played only a small role in the dropped frames. We realized that loading each image was more memory-intensive than we thought, and it's much better for performance to load a few big images than many small ones.

Accomplishments that we're proud of

One of the key achievements we're proud of is the collaboration between our team members with different skill sets. Our project required a strong integration of art, product design, and backend development to create an engaging user experience, and we're excited to see how users will respond to the final product.

What's next for hopILLINOIS

We have big plans! A logical next step is to expand the map to the entire campus, which will require some custom image-to-pixel-art scripts that capture our style. Some other features we're considering include leveling up your avatar by attending events, using GPT-3 to moderate profane or troll events, live chat, and so much more.