Montage of creative works through CollabSketch!
My Painter Orpheus illustration. Orpheus is the mascot of Hack Club, the largest non-profit network of student-led high school coding clubs and the developer of the original Collaborative Sketch workshop.
WHAT IT DOES
It lets you and others draw cool stuff together! If you are familiar with Google Docs or any real-time collaboration apps, this one is a real-time collaborative canvas.
HOW IT’S BUILT
It uses p5.js to support the drawing functionality and jQuery for saving and deletion. Firebase, a key tool, provides instant back-end services so that you won’t lose your masterpiece when you close your browser.
Forming line drawings was a feature that I spent a good amount of time trying to figure out how it works correctly. It required changing up the algorithm that originally drew simple consecutive ellipses to an entirely different one. Originally ellipses were drawn and data were pushed into an array and up to Firebase. In order for line-drawing to work, the new drawing algorithm has to listen to mouse events and keep track of two locations where it will draw the line between.
WHAT I LEARNED
A change from dot-drawing to line-drawing might seem frivolous, but was actually an improvement on usability (was able to create much more sophisticated doodles).
Don’t be afraid to go the extra mile. You will be surprised by the amount of support and tools you need that’s out there!
TRY IT OUT
(This post is created from Devpost’s project story template)