Pixel Kanvas

Inspiration

Pixel Kanvas was inspired by several of our favorite attributes of Minecraft. We wanted to empower a different type of creativity, while encouraging the same collaboration and exploration that has proven to be so enjoyable.

What it does

Pixel Kanvas is a real-time collaborative HTML5 Canvas used to build pixel art on your own or with a friend! The massive grid can be explored to see the creations of others too! You can move around the grid by zooming, panning, or jumping to any location on the grid, allowing you to share your work with friends!

How I built it

Pixel Kanvas is built on the Firebase platform. We initially intended to use node.js and socket.io to send information about users actions back and forth, but quickly settled up Firebase following its presentation. We were blown away by how powerful it was, especially considering the low barrier to entry. We created our canvas in HTML5, the markup in CSS, and everything else in JavaScript. We used BitBucket to collaborate together and share our work as a team.

Challenges I ran into

We faced several challenges while building Pixel Kanvas. The biggest was learning new APIs, including Firebase, a canvas scroller, and a custom color selector tool. Redrawing such a complex canvas following pan and zoom events also proved tricky.

Accomplishments that I'm proud of

It was neat to see how quickly we got a working model up on our domain! We had our friends and family stress test our site and they were able to make amazing pixel art together. It was cool to see that our idea was really exciting to people!

What I learned

First and foremost, we learned how to use Firebase. We all improved our abilitiy with JavaScript, CSS, and HTML, especially Canvas.

What's next for Pixel Kanvas

We see a ton of avenues to take Pixel Kanvas in the future! If we implemented login accounts, we could let users earn points, badges, achievements, and level up! We hope to create a feature that allows a user to generate a URL directly to their creation. The grid could be erased every so often to maintain plenty of area to work! The site could be monetized by selling a block of the grid. This would allow the user a space that wouldn't be drawn on by others or erased with the rest of the grid. Future developments will depend on how much traction Pixel Kanvas gains, but we intend to continue to work on Pixel Kanvas after the hackathon regardless of our finish.