When thinking about project ideas, our minds wandered back to our primary school days. In particular, a game called Exquisite Corpse. In this game, paper is divided into thirds. Players take turns drawing on their third, then they fold the paper over and pass it to the next person, ensuring they connect their drawings together. In our version, we separated the page into a 2x2 grid.

What it does

Players take turns drawing their quadrant of the image, with only the very edges of the other quadrants visible. When everyone is done, the masterpiece is revealed!

How we built it

Quadoodle was built with React, using Firestore to store all our data and Typescript to implement our game logic.

Challenges we ran into

A major issue we faced was with our drawing canvas. Coordinates were not properly mapped to position on canvas, so the drawing position was not the same as the cursor position. This was particularly challenging because the problem seemed to disappear and reappear at random. Eventually we found the root of the issue and now it is fixed.

Accomplishments that we're proud of

Live updates & multiplayer support

What we learned

We learned how to:

  • structure our data and application
  • query Firestore
  • interact with HTML5 Canvas
  • use React with Bootstrap
  • play sounds in-browser
  • take canvas image data and store it, stitch it together, and make it downloadable as a PNG file
  • take libraries we are already familiar with and make it compatible with React

What's next for Quadoodle

  • Groupchat to communicate with other players in-game
  • More social features (post art to social media)
  • More drawing options such as brush colour, width, fill, clear screen, and more.

Built With

Share this project: