Paint By Campus

Painting your favorite places, number by number

Comment

Inspiration

We were inspired by the addictive exploration mechanics of Pokémon GO combined with the relaxing nature of paint-by-numbers art. We wanted to create an experience that gets students out exploring their campus while creating art and celebrating LGBTQ+ identity.

What it does

Paint By Campus is a location-based art adventure that combines real-world exploration with digital painting:

  • Open the interactive map to discover nearby campus landmarks
  • Physically visit locations to "unlock" them for painting (like catching Pokémon!)
  • Once at a location, take or upload a photo of the landmark
  • The app transforms your photo into a pride-themed paint-by-numbers
  • Choose from different pride flag color themes to customize your artwork
  • Complete your collection by visiting and painting all campus landmarks
  • Track your progress and discoveries on the interactive map
  • Unlock achievements for exploring new locations and completing paintings

How we built it

  • Next.js and TypeScript for the core application
  • Geolocation API to track user position and proximity to landmarks
  • Google Maps API for the interactive exploration map
  • Canvas API for image processing and painting functionality

Custom algorithms for:

  • Location-based unlocking system
  • Image to paint-by-numbers conversion
  • Flood fill painting mechanics
  • Pride flag color theme mapping

Challenges we ran into

  • Implementing accurate geolocation checking for landmark proximity
  • Creating an engaging "discovery" system similar to Pokémon GO
  • Handling the paint-by-numbers generation from user-taken photos
  • Balancing the gaming aspects with the art creation experience
  • Managing location data and unlock states across the application

Accomplishments that we're proud of

  • Created an engaging blend of location-based gaming and digital art
  • Built a system that encourages real-world campus exploration
  • Developed a unique approach to art creation tied to physical locations
  • Implemented an inclusive design celebrating campus diversity
  • Successfully merged gaming mechanics with creative expression

What's next for Paint By Campus

  • Social features to see other painters nearby
  • Limited-time special locations to discover
  • Collaborative painting when multiple users are at the same location
  • Seasonal themes and special events
  • Achievement system with real-world rewards
  • AR features to preview paintings in real-time
  • Integration with university events and locations
  • Community challenges and competitions

Built With

  • MongoDB
  • next.js
  • typescript
  • tailwindcss
  • react
  • google-maps-api
  • canvas-api
  • geolocation-api
  • javascript
  • scikit
  • python
  • flask
  • pillow

Built With

Share this project:

Updates