This is the first iteration of a short game I’m making that tries to interactively explain some of my favorite math questions / ideas. My goal is mostly to get the player curious and not necessarily to explain absolutely everything.

There were a lot of fun technical parts to building this:

- For implementation reasons, it’s much easier if the lines all have integer intersection points with each other. To do this, when a new line is added I “cheat” by rounding intersections to integers and then splitting the old lines at the intersection into new linds (with potentially different slopes) going through the rounded point

- I had to draw semi accurate maps of actual places (UK, South America, US west coast) in the HTML canvas using just line segments. I tried a few different solutions, including using SVG data. I ended up using the topojson library to give nice line approximations to GeoJSON maps

- I use a simple backtracking algorithm to handle the live coloring of graphs

- I use turf.js’s polygonize function to handle finding polygons from line segments (very happy I didn’t have to implement this myself!)

- I wanted to make the game as mobile friendly as possible (don’t think I’ve nailed this quite yet)

There were also a few tradeoffs I made:

- I wanted give links earlier in the game for players to learn more, but I decided to wait until the end to maintain the flow of the game

- In order to make the game more mobile-friendly, I generally stuck to maps with a small number of regions (at least for maps people have to interact with them). So for the most part all of the instances in the game are “easy”