Paint land and water on this map: (may not work on mobile)
The goal of this quick experiment was to make a particle system that shows tens of thousands of traders following the shortest path when traveling between regions. I don’t do anything with the output right now, but I might want to use it to build roads or cultural influences.
- Writeup: blog post
- Code: github[1]
- worker.ts: map generation, based on what you paint
- simulation.ts: a simulation layer, which draws on a separate overlay
There are several implementation details worth a quick mention:
- Instead of animating points between the midpoints of the edges, I pick a random position on the edge.
- Single source all paths can be used in either direction — all paths from X, or all paths to X. I tried both. Having all the traders starting from the same place at the same time looked much worse than having all the traders end up at the same place, but at different times.
- I divide the edges into one half for each movement direction, so that it looks like there are two lanes of traffic.
- Painting on the map can change the movement costs, so I use the movement costs to calculate the shortest path, then discard them and recalculate them as I’m moving along the path.
- It’s possible for traders to get stuck, so I remove them if they’ve been around too long.
- I’m rendering the 20,000 traders on the cpu by using the equivalent of putpixel().
- Storing paths in reverse allows me to pop them off the end of the array at each step (minor optimization).