← Back

Travelling Salesman Problem

An interactive route visualiser built with WebGL and WebAssembly.

After writing one of my first tutorials on the Travelling Salesman Problem, I wanted to revisit it with a slightly more technical stack. The backend is written in Zig (compiled to WebAssembly), and the rendering is done directly in WebGL instead of p5.js or Raylib.

This project was also inspired by sphaerophoria who started a series on creating his own map.

Drag points around the canvas and watch the route update in real time.

HTML5 canvas not supported in browser
36 points

Tip: click and drag a point to recompute the route.

Technical Details

The backend is written in Zig, and the route is built in two passes: a nearest-neighbour pass followed by a 2-opt local search.

Point coordinates are stored in WebAssembly memory, and the route order is recalculated whenever the layout changes. Rendering is handled in WebGL to keep interaction smooth as the point count increases.