Pictionary Discord Bot

Inspiration

We all like to play skribbl.io and we use discord a lot so we decided to make a discord bot where we could play pictionary on discord

What it does

Sends the drawer a unique link where they can draw their picture
The website stores the drawing strokes and sends them to a web server using socket.io
The discord bot requests to the server to get the updated drawing strokes
The discord bot redraws the drawing and sends it to the discord server

How we built it

We used discord.js for the bot and socket.io for live interaction between the server and the website We used p5.js to implement the drawing feature on the website We used canvas to redraw the lines onto the discord server

Challenges we ran into

A challenge we ran into was to display an updated image on discord while the drawer was drawing on the website. We solved this problem by storing all the x,y coordinates of the lines (drawing strokes) and redrawing them whenever there were new lines.

Accomplishments that we're proud of

We are proud that we were actually able to make the discord bot fully functional There were a lot of times where it was difficult to figure out what we needed to do next, but we were able to succeed in the end

What we learned

We learned how to use socket.io to let the website communicate with the discord bot We learned how to create a web server with express.js We learned how to create a discord bot with discord.js

What's next for Pictionary Discord Bot

We plan to add more features to the bot like custom words and better drawing tools We also plan to publicly release the bot so that everyone can enjoy pictionary on discord in their own servers