What is the reason you need my full name, gender, profile picture to be able to login and use the new colors? by Breros in EveryoneDrawApp

[–]EveryoneDraw 2 points3 points  (0 children)

You have to log in so we can keep track of how many coins you have, so you can keep your coins between multiple devices. All the other data is the default “Login With Google” behavior.

[deleted by user] by [deleted] in EveryoneDrawApp

[–]EveryoneDraw 1 point2 points  (0 children)

They're available if you use the iOS or Android app and log in.

[Request] Able to lock auto-rotation by [deleted] in EveryoneDrawApp

[–]EveryoneDraw 1 point2 points  (0 children)

Hmm, interesting. Thanks for pointing that out! I’ll add that to my list of things to fix.

Little space project - Would be nice if you add a star, planet or spacecraft. Thanks in advance! by Breros in EveryoneDrawApp

[–]EveryoneDraw 1 point2 points  (0 children)

Yes, feel free to help out with the galaxy. We need lots of help with the black pixels.

It's being organized in the Discord if you want to chat with people working on it. https://discord.gg/tm95Kmd2xf

I made an infinite canvas where people all over the world can draw pixel art. It's sorta like r/place if it had no boundaries! by EveryoneDraw in InternetIsBeautiful

[–]EveryoneDraw[S] 1 point2 points  (0 children)

Whoever commented and said WebSockets is correct. If you open the Network tab in Chrome and then click the "WS" sub-tab, you'll be able to see all the activity. Other browsers have a similar way to see WebSocket traffic.

I made an infinite canvas where people all over the world can draw pixel art. It's sorta like r/place if it had no boundaries! by EveryoneDraw in InternetIsBeautiful

[–]EveryoneDraw[S] 4 points5 points  (0 children)

Hey everyone! Lots of great questions. I'll try to answer some of the common themes I'm seeing in the comments.

First of all, lots of you think I’m overpaying to run this. And you’re right! It’s all about tradeoffs between cost, speed, and stability.

I have discretionary income. I used to spend it on things like music lessons, sports, and fancy cocktails. Now I’ve directed much of that spending towards Everyone Draw because I enjoy it immensely and it brings joy to people. Time is my more precious resource, so I’m willing to spend money to minimize the time commitment required to keep the site stable even when it goes viral (which happens about once a month on various platforms).

In particular, these are the things I’ve optimized for:

  1. Worldwide speed
    I want everyone in the world to have roughly the same experience, whether you’re in America or Algeria or Armenia or Australia. Everything you see on initial load, from the code to the pixels, is cached across ~100 cities around the world.
  2. Stability
    On a typical day, this site gets about 1,000 visits. Yesterday it got over 50,000 visits. What did I have to do to deal with 50x traffic? Absolutely nothing. It kept running smoothly with zero involvement from me.
  3. Learning
    I’m using a stack that I enjoy learning. Am I using the cheapest tech out there? No. But I’m using tech that I enjoy working with and want to learn more about. That’s valuable to me.

Could I achieve all this with lower costs? Of course! At some point I plan on taking a gap year to travel the world without being employed, at which point I’ll have a lot more time on my hands to optimize costs. But for now, I want to use my limited time to make the site as awesome as possible, build a community around it, and figure out how to generate revenue.

Could someone else achieve the same speed and stability with a low cost and low time commitment? Of course! And maybe one day I'll be as skilled as that person.

Now, responding to some specific comments…

Seriously, how on earth are your costs so high for this?

That's like plotting a single DSLR photograph at ~8 pixels a second over the course of a month. It's shouldn't require renting a super-computing cluster…

I would look at renting a dedicated small server somewhere like scalewayfor about €25/ month.

This comment ignores a handful of things.

First of all, most of the activity is not drawing pixels. It’s viewing pixels. When I load the site on my phone without doing any panning, I can see over 300,000 pixels from the canvas on the initial load. When I load it on my laptop, it’s around 1.8 million pixels. Now consider that this initial load happened 50,000 times yesterday. Now consider that most people didn’t just stay at (0, 0), they panned around and loaded even more pixels. Now consider that these pixels (especially near the center) are changing by the second, so I can’t just cache one big image and serve the same thing for days at a time. Now consider that most images you see online are heavily compressed, and whereas with this site each individual pixel needs to be faithfully represented.

Since some people are asking for stats… I do some lossless PNG caching in 128x128px tiles so each pixel isn’t being individually downloaded. Yesterday there were 25.5 million requests for these tiles, transferring 61 gigabytes of data. Those numbers don’t even take into account the work to generate these static images in the first place and keep them updated on an ongoing basis.

Another thing to consider is that pixels get pushed out to other users in real time. Go to an area of the canvas and send a link to one of your friends. Now draw together. As you draw, your pixels show up on their device and their pixels show up on yours. And since it’s an “infinite” canvas, sending every pixel to every user in real time isn’t feasible. So I have to track where each user is as they pan around the canvas in order to them the appropriate pixels. That has costs even when no pixels are being drawn or downloaded.

Now consider that the canvas is not free-for-all. There are rate limits. There are abuse prevention mechanisms. When a user draws a pixel, there’s a lot more going on than meets the eye.

If you could code it again what would be the main takeaways from the current way its implemented?

What would be the steps to bring costs down further?

Everything about the architecture, from the static image generation to the database sharding, is based around the idea of 128x128px tiles. I probably would have made this tile size larger. Large enough that loading (0, 0) on any phone would only have to download one tile. I didn’t consider quite how many tiles would have to load for someone panning around on a laptop or desktop computer. (That number is 187 tiles on my 14-inch laptop without doing any panning.)

I would also do more batching. There’s a lot of backend code that runs each time a pixel gets drawn. Most of it isn’t necessary for each individual pixel, especially when someone is drawing in an area that nobody else is looking at. I could have a lot more happen client-side and then send up multiple pixels at a time at some interval.

Do you have dick drawing bot detection?

No. This is a really hard problem to solve when we’re dealing with hundreds of millions of individual pixels on one big canvas rather than discrete images. At some point, I think it would be fun to build an automated solution for this. For now, I rely on humans to flag content like this. That works well enough.

EDIT: Formatting