This site is awesome with JavaScript enabled — you should try that!

NoahW.Design Simulation

Rust ThreeJS WebSocket Scripting

Background Scriptable Server Authoratative Simulation “Game”

Created custom for this portfolio site, the “state” of the simulation, lies solely on the server, with events streamed from the server to all clients via WebSocket. Clients’ can send data back over the same connection, that can modify the determinism of the simulation, such as user script updates, and user online status.

The “Agents,” controlled by Luau script, is executed sandboxed on the server, updating the global state once per tick, at a rate of one tick per second. This tickrate helps to keep data transfer expenses low, only sending about 250kb per hour per client.

Update packets are sent as compressed Binary data. The updates are sent as 2 types, state and delta. State packets contain the full relevant state a new client requires to fully understand the current server state, and delta are changes from the last packet frame, only sending data that is relevant to the most recent frame.

The WebSocket also contains visitor mouse positions, allowing all visitors to see other visitors mouse position within the 3D world on their screen. You may even see one now! These updates are sent at 4 per second, and are interpolated client side, to smooth their movements.

The Agents move to pick up “gems,” from inputs, and move to outputs, increasing a counter, increasing the “Factory Tier,” acting more as an incremental game. The inputs and outputs locations will randomize over time and move, changing the grid landscape, and allowing the agents to move about the grid in new and interesting ways.

Any and all users can customize the script the Agents are using, by hiding the site UI in the bottom right, and opening the “Edit Agent Script” window.

The simulation has safeguards and deadlock prevention to always keep the site interesting, and the agents moving!

Dark Theme Simulation Screenshot Dark Theme Simulation Screenshot

Light Theme Simulation Screenshot Light Theme Simulation Screenshot