Exquisite Corpse

home page background, created in illustrator
background, created in illustrator
header, created in illustrator
created in illustrator

Inspiration

We were inspired by the Exquisite Corpse drawing game, usually played with a piece of paper folded into as many parts as there are players. Players will draw one part of the figure and then fold their section back before giving the paper to the next person to draw so each person draws without seeing the other parts of the figure until the end of the round. Our online version can be played by three players and implements a time limit for each user.

What it does

This project lets the user select a time limit for the players. Within each of their time slots, each user will draw one part of the figure (head, torso, or body), being able to change color and line width while not knowing what the others are drawing. At the end, all the drawings will be shown stacked on top of each other, having created an "exquisite corpse."

How we built it

We used HTML, JavaScript, and CSS to build our project. Preliminary sketches for the UI were made using Procreate, and Illustrator was used to make the header and homepage background. VSCode and GitHub repositories were used for collaboration.

We split the work between ourselves and either worked individually, in pairs, or a trio. Once we were done with each of our parts, we combined them by pushing and pulling from GitHub and then modified our code altogether.

Challenges we ran into

One challenge we ran into was regarding collaboration, in particular the pushing and pulling of our code. Sometimes our code would work as it was supposed to, but when we pulled what others had been working on, issues arose that had not been there before and we would have to further modify our code.

We also had trouble storing the drawings the players had created on the canvases so they could all be displayed together at the end. We solved this by storing the drawings as strings in local storage so they could be accessed again.

Another issue was getting the "Settings" popup to show up and then disappear. We tried several methods that did not work, and then we used Inspect Element on our HTML in Chrome to see exactly what the issue was. This way, we were able to modify our code and wound up having to create a separate JavaScript file for one of our other HTML files, which we would not have realized otherwise.

Accomplishments that we're proud of

We are proud of everything we learned throughout this project, both relating to the coding languages and collaboration. After troubleshooting different methods, we were able to determine a method of collaboration that worked best by allowing each of us to work on separate parts or split into pairs and then combine everything. We are also proud that we were able to figure out the settings popup and allow the game timer to change based on what the user selected. The design and layout of our pages are another aspect of our project that we are glad we were able to perfect.

Lastly, a big accomplishment was figuring out how to access the drawings that users had created and then lay them out at the end for a final "exquisite corpse." This required a lot of help and troubleshooting with various methods, most of which did not work as expected, until we figured out how to store the drawings as local variables. This was a very important and difficult part of our project and we are proud that we were able to execute this effectively.

What we learned

We became more proficient in the languages we used. We all started with a fairly basic understanding of each, but as we researched each element of our project and asked the mentors for help and guidance, we were able to explore different features and aspects of these coding languages, creating a deeper and slightly more advanced understanding of our work.

What's next for Exquisite Corpse

Next, we will add game modes to our project. For example, in one mode, the first player can write a 2-word description of what they had drawn for the other two players to base their drawings on.