View the simulation in your browser here. Should work on desktops/mobiles.
A couple years ago, I found a pretty cool reddit post that presented a time-lapse animation of ships traveling around the Hawaiian islands. I thought it was pretty well done, and it would come up from time to time in my brain as inspiration for game ideas - my imagination would often run wild with ideas of “island-based real-time-economics-trading-game” etc.
More recently, I was stuck on an far-too-long family trip, so I decided to use the time to try out ChatGPT and Github Copilot. My intention was to find a project that I had never worked on before, to see if I could create something usable, guided by AI tools. After some thought, the ship-animation reddit project I found was perfect. I have always wanted to do some 3D frontend work, and three.js provided enough abstraction over the low-level graphics rendering libraries for me to finish the trip with a will to live. I also was keen to learn about basic procedural generation, as it would be helpful for my future game development endevours.
The terrain generation algorithm uses simplex noise to create a 2D heightmap, with an “islandiser” function to ensure the edge of the map remains as water. From there, Ports are found by scanning the world in a very-much-unoptimal way: making a list of all “sand-points” - points where a given coordinate crosses the water-line (height=0), but is surrounded by “sand” (height=1) - and then choosing a few random points. I then use weighted A* algorithm to pre-calculate all the paths to every other port. The weighting prefers deeper ocean so that the boats don’t stick to the most “optimal path” which is as close to the shore as possible. The ships essentially move by “gravitating” towards a point that moves along the path between the ports. They have some inertia which gives the movement a smooth feeling.
Source code Link to heading
Available here (It’s a bit messy, as I wasn’t optimizing for super-clean code).