boona13/crowds-system-js

crowds-system-js is a zero-dependency, single-file browser playground that simulates hundreds to thousands of pedestrians wandering on an HTML canvas. There are no sprite sheets, no skeletons, and no GPU shaders involved. Every character is a static four-direction PNG that gets sliced into horizontal rows and animated with simple 2D canvas calls, which is enough to make a single image read as a full walk cycle. The trick the README describes works like this. For each person the engine keeps a four-direction base sprite (down, up, left, right), a shirt colour picked from a small palette, and a gait phase that advances each frame. The renderer cuts the sprite into a configurable number of slices and shifts them with a sine wave driven by the gait phase. Rows below the hip line act as legs and swing forward and back, rows above act as torso and head and sway with a counter-motion. At foot-plant moments the legs squash vertically. Tinted canvases are cached per hue, so the 2D context only sees N times M textures for N characters and M shirt colours. The author claims 2000 plus pedestrians at 60 fps in a regular browser tab. Running it needs no build step. You just serve the folder over a static file server (python3 -m http.server 8000, or npx serve .) and open localhost in a browser. Keys 1 through 4 switch between wander, crossroads, circle orbit, and follow-cursor mob modes. Space pauses, R respawns, D toggles debug rings. A right-side panel exposes every tweakable parameter live, including count, size, palettes, slice count, bob amplitude, body sway, head counter-sway, leg swing, foot-plant squash, lean, hip line, cadence, cadence variance, forward speed, turn rate, mode, and ground theme. The repo ships four hand-drawn characters (little girl, dad, grandfather, grandmother) plus a generic hero sprite in four facings. The character folder is intentionally misspelled as charachters because it mirrors the upstream game project's hard-coded path. Adding a new character means dropping a folder of four named PNGs and adding an entry to the CHARACTERS array around line 690 of index.html; the sprite-grid UI picks it up on next load. The project is MIT-licensed and made by Ibrahim Boona, who lists X, Instagram, and GitHub handles in the README.