We wanted to create a simple, fun web app that had a positive impact on people. It is inspired from a pen-and-paper collaborative drawing game where one player draws a simple form, and another player continues the drawing to turn it into something recognizable. It is also inspired through the metaphor of the Message in a Bottle, a means of communication that fit our vision of the game, and by the collaborative and creative impact it has.

What it does

The player automatically picks up a message in a bottle when they arrive at the site. Depending on the volume of images already in the "sea", the user will either be prompted to start a new picture, or continue an existing one. Then, they can throw the image back into the pool of messages, and will be picked up by another user, who will continue to collaborate on it.

How I built it

Front end (Javascript - JQuery) + BackEnd (PHP5) + GoogleMaps API

Challenges I ran into

Some challenges included setting up a web server in AWS, using GitHUb, deciding how to integrate front and back-end. For two of our less-experienced coders, it was a challenge to learn the ropes of some new programming languages (PHP, Javascript, CSS) to help with the project.

Accomplishments that I'm proud of

After the main part of the project was done, we used Google Maps API to track the geolocation of the users who contributed to each image. It definitely had a cool effect and showed how far the bottle can travel!

What I learned

We all learned something: setting up a web server, gaining experience with coding and an understanding of how design works.

What's next for Pen Bottle

  • Start populating the PenBottle community to have a larger bank of message exchanges
  • Investigating possible social impact (i.e. for kids, etc)
  • Possibly making available to contributors a view of the picture's transormation
Share this project: