Would love to know about some of the tech you used to build it
Would love to know about some of the tech you used to build it
It's TypeScript, canvas, React (for the UI elements), NodeJS and socket.io on the server. The entire simulation is run on the client. It is deterministic so it is just replaying the action stream identically to all the other clients to stay synced. The server is running a pretty simple loop really, every 32 milliseconds it collects all the actions and broadcasts them to all the clients. If there is anything else you want to know, feel free to ask, I'm happy to talk about it :).
There are actually 5 canvases stacked on top of each other - background, glows, objects, interface, cursor. The glows layer has a CSS blur property on it, which lets it be done on the GPU. Initially I just used the canvas shadowBlur everywhere but it was horribly slow, so this was one of the biggest performance boosts. The other layers are just there because they're invalidated/refreshed at different rates for performance reasons. The interface layer is particularly slow to update as its got to draw all the button icon paths, so it only ever rerenders the parts as they change, as opposed to some of the other layers which rerender every frame.