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”
Thanks for leading us down this mathematical rabbit hole today.