Cheers.
My initial implementation actually did exactly what you suggested where you could drag the mouse to draw. I ultimately moved away from that approach, mostly because it made it way too easy to "spam" the canvas by quickly drawing random pixels all over the screen. Requiring users to draw pixel-by-pixel forces drawings to be a bit more intentional. The UX also gets more complex when a drag can either mean "draw" or "pan", so having a drag always pan the canvas simplifies things.
As for an "export area" feature, I also considered that, but figured people would rather just use their device's screenshot functionality. It's still something on the backlog that I'll prioritize if I hear similar feedback though.
It’s inspired by Reddit’s r/place experiment from 2017, with four key differences:
- The canvas is infinite [1]
- There’s no time limit. The canvas can keep evolving forever.
- There’s no signup required. Just click the link and start drawing.
- You can randomly teleport far away from the center to start your own drawing that nobody will find without the link. For example: [2]
Everything displays in real time. It should be fun to watch when there are a bunch of people drawing simultaneously.
A few similar apps have popped up over the years, but I found them all to be a bit cluttered, so I wanted to build something with more of a focus on the art. When zoomed in, there’s minimal UI aside from what’s needed to select a color. When zoomed out, the canvas covers 100% of the viewport. I also tried to make drawing and navigating easy on both desktop and mobile.
The frontend is mostly custom built using native browser Canvas and Websocket APIs. The backend is Go code running on AWS Lambda with pixels stored in DynamoDB. I mostly optimized for making it cost as little as possible to run long-term. When there’s low usage, the AWS bill is $0.50 per month (for Route 53) and the actual hosting costs are free. I’m hoping to keep this running indefinitely without having to worry about cost and maintenance.
Draw something and let me know what you think! Happy to answer any questions about how it was built.
[1] Okay, the canvas isn’t actually infinite right now. Things stop working once you run up against Javascript’s MAX_SAFE_INTEGER. I plan on eventually having the canvas wrap around when it hits that value, making the canvas work for any huge number the user might hard-code into the URL.
edit wow, that got very 4chan, very fast in the hour since my comment. The Internet for ya!
Depending on how much time I feel like devoting to this, maybe I’ll turn that problem into a fun machine learning project. I know that won’t eliminate bad actors, but hopefully a combination of tactics will keep it to a minimum.
Again, thanks for this it was very fun while it lasted.
I’m hoping to revive this project at some point, with a bigger focus on preventing abuse. I have some ideas in mind :)
As for releasing the source, I don’t have any plans to release the full stack. However, I may extract out the main part of the frontend that controls the pixel canvas and open source that so people can play around with it locally.
Probably going to take a bit of a break from this project before doing any of that though. Stay tuned!
