For April Fool's Day 2017, Reddit introduced r/place - a subreddit where members could add a pixel to a giant collaborative canvas. While some drew silly pictures or tried to add slogans, alliances grew among groups of Redditors, reminiscent of those in various Twitch audiences. While some Twitchers tune in to see GM Hikaru's Bongcloud antics, others want to see him trying his hardest. While some are rooting for the veteran pro players, others are supporting the underdogs, but they are all united in their love of games. We wanted to give Twitchers the opportunity to leave their mark on the streams that they love most, and both foster a sense of unity and allow for individual expression.

What it does

The extension places a small hideable canvas on the stream, and when users have redeemed sufficient channel points, they can place a coloured pixel anywhere on the canvas. The pixel will last forever, or at least until someone else fills that pixel with a different colour - it could be years, it could be seconds!

How we built it

We have been experimenting with collaborative real-time software for a long time, and decided to set ourselves a challenge, building this without React! It was also an opportunity for us to use Firebase for the first time.

Challenges we ran into

Manipulating the HTML canvas is always tricky, and we struggled with striking a balance between intuitive UI and including all of the features that we wanted.

Accomplishments that we're proud of

The zoom feature is really useful and vital to the functionality of the application. By allowing users to zoom in to the area that they are placing a pixel, we provide accuracy, without compromising the larger vision of the work that they're creating.

What we learned

We learned how to use GSAP and Pixi.js, which neither of us had used before.

What's next for Twitch Place Canvas

As an artistic medium, the canvas is pretty basic, but there are lots of features we would like to add - moving pixels, changing colour, fading pixels. Ultimately, we'd like it to become a regular feature on Twitch, allowing true real-time collaboration between viewers and streamers alike.

Built With

Share this project: