Drawing on Everyone

This week I worked with Rubin Huang to make a website that uses Web-RTC, HTML5 Canvas, and Web Sockets. We came up with the idea to allow our classmates to draw on each other's faces using live streaming video.

Drawing on Everyone Screenshot

When you open up the chat you are assigned someone's video stream to draw on. Someone else will receive your stream to draw on you. While designing the experience for our class, we thought it would be fun to create a web of everyone drawing everyone. The algorithm Rubin designed also makes sure no one gets left out of the circle waiting for a partner.

When you are done drawing you can hit send. The final screen from the video with the canvas drawing will get sent to the person you drew. It can be updated many times. Hopefully receiving silly drawings of yourself will encourage you to draw something more ridiculous.

The first version has a few bugs. I have not created any default interactions for when you aren't immediately assigned a partner. I think people may want to see themselves and/or some instructions to refresh and wait a second.

My code only allows for users to draw a single connected line in one random color. This is quite limiting, so I'd think about changing that, but not to anything very complex. It's important to move quickly. We have also talked about adding a timer, so you are immediately assigned someone new at the end of 30seconds or so. We are thinking of other ways to make this app more game-like and fun.