Paint In!

• 

• 

• 

• 

• 

• 

• 

  Canvas

• 

• 

Inspiration

We were inspired by online games like skribbl.io and codewords where multiple players could play and work together to achieve victory. We wanted to emphasize the cooperative aspect of these experiences and recreate the face-to-face fun that we no longer have.

What it does

Paint In is an online game that tests players' abilities to work together and their creativity. The objective of the game is to recreate an image or a painting that has been randomly selected. Each player is only given a limited palette of colors, so they must work together in order to fully accomplish the task. The game was designed so that verbal communication is essential between the players. They do not possess an erase function or an undo function, instead they must work together to cover the mistake and move on. We have included a timing element as well, and players can admire their great works of art after the time ends.

How I built it

To achieve simultaneous painting, we used socket.io and emitted events on both client and server side to synchronize each player's state. The backend was written in Node.js and the frontend with HTML and CSS.

Challenges we ran into

A major challenge we ran into was simply getting the shared canvas to work at all! Initially, the only thing our canvas could do was draw very thin lines, anything larger would look blocky, ugly, and unwieldy. After lots of finetuning of the socket-based canvas synchronization mechanism, we managed to create something that exceeded our initial goals for the canvas.

Probably the hardest task was parallelizing the tasks. At the beginning of the project, half of us were hard-blocked as we struggled to get started. But, as the code took shape, and we understood the scope of our project better, we were able to understand the remaining tasks better and parallelize our work.

Accomplishments that we're proud of

One of our proudest accomplishments is our UI. We dedicated many man hours towards providing a thematic and fluid-feeling UI to provide users the feeling of free-flowing creativity. Our design went through many iterations, ranging from the initial ugly dark mode of white text on black, to a completely unreadable background, to the current modern design.

Other major aspect we're prod of is the color palette system. Initially, artists were only given a single color, and we only considered having multiple colors as a stretch feature. But, after seamlessly integrating it into the game, it's hard for us to imagine the game without it!

What we learned

One major framework/technology that we had little prior experience working in was with web sockets. Our entire game system is driven and structured around the sockets.io system that we used.

Another thing we learned is task parallelization and coordination. Although it took us time to initially figure out how to parallelize our work, once we got started, we quickly found our rhythm for adding features and fixing bugs.

What's next for Paint In

• User accounts to track history and past paintings
• Scoreboard system to quantify user performance, perhaps with other users rating your work of art
• Display the most recently created magnum opus's in the gallery
• Specify foyer size to allow for even more (or less) players!
• Integrated voice chat and text chat
• Allow artists to upload their own image prompts to draw from and associated color palette

Built With

• css
• html
• javascript
• socket.io