Show HN: I made a puzzle game that gently introduces my favorite math mysteries
1054 points| MCSP | 1 year ago |rahulilango.com
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”
bgoated01|1 year ago
Thanks for leading us down this mathematical rabbit hole today.
ianseyer|1 year ago
You could take a piece of paper (much larger than the picture/book), and cut out a waldo-shaped hole it and position the paper such that he is shown in the hole. Then, when you show it to the challenger, they know that you have found him without you revealing where he is.
dmurray|1 year ago
pwmtr|1 year ago
guyomes|1 year ago
[1]: https://en.wikipedia.org/wiki/Heawood_conjecture
enlyth|1 year ago
So by doing this over and over again, if the two you choose are always different colors, you approach a 100% certainty that it's legit.
You never really get a 100% proof but the more times you repeat the closer you are to being sure. At 99.999999% after repeating this enough times, you'd most likely be satisfied.
Aardwolf|1 year ago
EDIT: yep looks like it, the leftmost picture under 'snapshots' here is a 2D map of what's on the torus and looking at e.g. the blue band, it touches all 6 others (just barely the cyan and yellow ones with a few pixels of its tips when wrapping between top/bottom): https://demonstrations.wolfram.com/SevenColoringOfATorus/
armchairhacker|1 year ago
First, both you and the oracle know what the uncolored map looks like, and what the 3 colors are.
Step 1: The oracle sends the entire 3-colored map, but asymmetrically encrypted. So you can't see the map, but the oracle can't "un-send" it. If no 3-coloration of the map exists, the oracle has to send you something, and because you know what the map and colors look like, the only thing they can send is a map where some two adjacent regions have the same color.
Steps 2&3: You randomly pick two adjacent regions and ask the oracle for their decryption keys, so you can see their colors. When you initially received the encrypted map, you could not know whether it had two same-colored adjacent regions. But, if you happen to randomly choose the same-colored regions, the oracle has no way of not telling you. If the oracle refuses to send the decryption keys for those regions, or sends ones that don't successfully decrypt, you'll know something is up, and can assume the regions are the same color. And the only keys that successfully decrypt the regions' colors, decrypt into their original colors; so the regions will only decrypt into different colors, if they were different colors in the encrypted map the oracle originally sent.
To further illuminate: the "random pick after the map is received" ensures that the oracle must send you a map where all adjacent regions have different colors, even though you can't see all the colors yourself. Otherwise, the oracle can't guarantee that you won't ask for the two regions with different colors (because they sent the map before you randomly pick), and if you do ask for those regions, they can't respond in a way that re-assures you the colors are different (because the only way to do so is send keys that decrypt the regions into separate colors, and since they decrypt into the same color, such keys don't exist).
Step 4: Repeat steps 1-3 an unbounded number of times. This is necessary because in a single iteration, there's a chance that the oracle sends a map with two adjacent same-colored regions, but you pick two different regions; so the map is un-3-colorable, but you don't find out. In fact, this is a very high chance if it's a large map and only a single pair of adjacent regions have the same color. But more iterations increase the probability that you do find out indefinitely; with enough iterations, the probability that one of them you get lucky and select the same-colored region is 99.999...%.
Also, each time you repeat steps 1-3, the oracle sends the map with a different coloration. Otherwise, you'd slowly reveal the colors to get the fully-colored map, so it wouldn't be a zero-knowledge proof (two colors in each of two maps with different colors doesn't give you any more information than two colors in one map, so even with unbounded iterations the original coloration isn't revealed). If the map isn't 3-colorable, the randomization doesn't affect the probability: when the oracle randomizes the map, they could choose an entirely different coloration and give two different adjacent regions the same color, but the probability of you randomly choosing those two regions stays the same, so the probability of "getting lucky" in one of enough iterations also stays the same, at 99.999...%.
helboi4|1 year ago
franciscop|1 year ago
I knew that 4 colours sufficed for any arbitrary map from back in the day when I learned this, but still I found it VERY rewarding by attempting to draw a map that needed 5 colors, and how intuitive this demo was for getting a "feel" for a thing that I knew only theoretically! Like I needed an impossible geometry to fit, either an area that stretched to a zero-width path (which would becomes a point, and thus 2 areas, so doesn't fit) or some other "impossible" geometry. Loved it, congrats on a really well executed idea!
8organicbits|1 year ago
genewitch|1 year ago
zamadatix|1 year ago
It feels like something that got detached from the things that make it work during simplification. Or it could be that I just have a misunderstanding/oversight in the zero knowledge proof :).
In an unrelated note: I colored the larger graph and it didn't even play along!
MCSP|1 year ago
For the ZK example, the math behind it is this: if there are m bordering regions and I am lying, you have a 1/m chance of catching me each time. Thus after k repetitions the chance you haven't caught me is (1-1/m)^k \approx e^{-k/m} which is extremely small for k sufficiently larger than m.
Now, you may rightfully say: hey that's still not a "proof," you could still be lying! There are two responses to this:
1. The probability can be made incredibly small, like smaller than the the chance, say, your computer got hit by a gamma ray burst that would flip bits from 0 to 1 (I really have no idea if this actually happens but people have said it to me).
2. It turns out it is mathematically impossible to get the zero knowledge property if you want true proofs (i.e., no probability of being wrong). So, there's a trade off: if you want zero knowledge, you have to accept some (small) failure probability
P.S. Adding an easter egg for coloring the larger graph is on the todo list :)
quuxplusone|1 year ago
And the demo could also tell you the expected number of iterations to catch the lie with (50/90/99%) probability. It'd be a pretty large number even for such a small graph, I'd bet.
(Of course the computer could also lie about the factorizations, since it's unlikely a human would bother to catch it in that kind of lie; but let's assume it doesn't ever do that.)
Readers might also be interested in the https://mathworld.wolfram.com/McGregorMap.html (reported, on 1 April 1975, to require five colors!)
raincole|1 year ago
So isn't it possible that there is a polynomial time algorithm for integer factorization, but no polynominal time algorithm for 3-coloring, and therefore the "zero knowledge proof" actually reveals the answer?
DoktorL|1 year ago
That's fine though, because the point isn't really to publish math papers without disclosing proofs. For example, presenting a valid digital signature is sometimes colloquially called a proof that you had the private key, even though there is 1 in gazillion chance that you didn't. For such practical tasks, very high chance tends to be good enough.
esquivalience|1 year ago
This confused me at first.
chromy|1 year ago
romwell|1 year ago
Many, many people have died for this triviality.
"Somewhat fraught" is a very interesting choice of words, but then again, so is "The Troubles" (when the subject matter is decades of bombings and killings).
MCSP|1 year ago
nirolo|1 year ago
Very well done, I'll try to see if my children will enjoy that already too.
wrsh07|1 year ago
I'm happy to find a contact there if you want
tzs|1 year ago
> Step 2. You click any two bordering regions, and I pull off their post-its
> Step 3. You check that the revealed colors are different
I would add explicitly in step 1 that you tell me what 3 colors you used, and in step 3 that I check that the revealed colors are different from each other and are both from that set of 3. Similar in the explanation of why this should convince me.
gkoberger|1 year ago
This was so much cooler than just being told that 4 colors is enough for every map – this one will stick with me.
It would be wonderful if schools taught a bit more like this – I almost felt like I discovered it myself!
baruchel|1 year ago
I understand that you want to emphasize the fact that no human can understand the proof with a full overview, but I wonder whether the current sentence will not make people think mathematicians are not perfectly sure of the proof.
TheNewAndy|1 year ago
https://github.com/clarus/falso
Proof and belief I think are pretty strongly intertwined, but I'm not going to pretend to have a particularly rigorous philosophy on the matter. Similarly, when the proof of Fermat's last theorem was published, I don't know if I should consider that to be a proof because it is well beyond my comprehension. I have no reason to question it, but should I consider it a proof? I know that people smarter than me (e.g. Wiles) thought the original version of it was a proof, but it had a subtle error in it which required a fix. While I haven't looked at the proof and revision, I would be surprised if I could look at the two versions as labelled and tell which one is the correct version.
MCSP|1 year ago
gergo_barany|1 year ago
And those many jobXtoY.v and taskXtoY.v files sure look like they also do the same as the Appel and Haken proof, namely enumerate lots and lots of cases that are then machine-checked. So I don't think the computerized Coq proof is really qualitatively different from other computerized proofs that enumerate so many cases that a manual check would be impractical.
AndrewOMartin|1 year ago
MCSP|1 year ago
hcs|1 year ago
I'm not sure how it works with the example of the primes, I lost the link to the later pages of the game so I can't read over it again, but I think it's guaranteed because there's just one number encoding all the assignments and you just get to unlock a single pair with the key given in response to your choice. There's an assumption that there isn't enough information in the key to fake any response, it has to reveal something that was already in there.
MrZander|1 year ago
I can't seem to wrap my head around why this isn't 3 colors.
unknown|1 year ago
[deleted]
namjh|1 year ago
My two cents of the ZKP illustration is that directly using hashes are more likely to convince "computer-friendly" people to introduce the commitment scheme.
pontifier|1 year ago
trirpi|1 year ago
MCSP|1 year ago
jostylr|1 year ago
sn41|1 year ago
gpnt|1 year ago
I think "very difficult" is misleading here. It implies there is an answer if you try hard enough.
zild3d|1 year ago
a better experience might be having the warning reveal more after a few attempts, but I don't mind starting with a "warning it's surprisingly tricky"
kzrdude|1 year ago
genewitch|1 year ago
williamDafoe|1 year ago
gexaha|1 year ago
https://en.wikipedia.org/wiki/Snark_(graph_theory)
First is that "One of the equivalent forms of the four color theorem is that every snark is a non-planar graph". Second, is as strengthened form of the four color theorem: "every snark has the Petersen graph as a minor", which is kind of proven (already 25 years ago), but still lacks 1 paper: https://thomas.math.gatech.edu/FC/generalize.html https://math.stackexchange.com/questions/3692582/what-is-the...
And another related concept is of nowhere-zero flows, and even more stronger conjecture that "every bridgeless graph with no Petersen minor has a nowhere zero 4-flow". https://en.wikipedia.org/wiki/Nowhere-zero_flow
hooby|1 year ago
And there I sit, knowing that every map of CONTIGUOUS territories can be colored with 4 colors - but on real world maps, there are enclaves - little islands that belong to a country that they have not connection to. And if those shall have the same color as their parent country, then 4 colors is not enough...
So I pick the answer "NO".
> you are wrong!!!!! every map can be colored with 4 colors! it has been proven!!!!!
N0b8ez|1 year ago
Can you give an example of one that can't be colored with 4 colors?
OmarShehata|1 year ago
(I bought Paul Lockhart's "measurements" but gave up because I felt like I needed a sandbox to play with and little hints. Like, I don't want to be told the answer but I want to know feedback exactly like this demo. Very simple: "this is not right" or "this is right, but can be done with fewer")
(My dream is to have a little game jam where we make interactive versions of these concepts as puzzle)
umvi|1 year ago
In order to need 5 colors, you'd need to construct a graph with 5 nodes where each of the nodes connects to all other nodes, but without any edges crossing: https://imgur.com/U52SFSi
You can just tell after playing around with the graph that it's impossible to move the nodes around on a 2d plane without an edge crossing; you need a 3rd dimension.
tomsmeding|1 year ago
Side note: indeed, 5-cliques are not planar: that is to say, there is no map you can draw that has five regions all bordering each other. This is not too difficult to prove, actually. Proving that 4 colours is enough is a whole different league!
[1]: https://en.wikipedia.org/wiki/Clique_(graph_theory)
[2]: https://www.rahulilango.com/coloring/wus
SamBam|1 year ago
A 0-dimensional space needs up to: 1 color.
A 1-dimensional space needs up to: 2 colors.
A 2-dimensional space needs up to: 4 colors.
A 3-dimensional space needs up to: ∞ colors.
I can easily picture why a 3D space has no limit to the number of colors (personally I always imagine color blocks hanging in space connected to every other color block by bendable wires), but I don't quite understand why the pattern is that way.
soneca|1 year ago
The final though seemed like a huge leap for me, who don’t know anything about those math mysteries (which I assume is your target audience).
First I was curious to learn how is the fast way to understand that 1, 2, or 4 colors suffice. And why finding out such a way for 3 is so hard.
The zero-knowledge proof demonstration felt like “changing the subject”. Probably I missed the connection there.
gowld|1 year ago
It would help to clarify that in the beginning. The game is a bit of a shaggy dog tail. It would be good to give an outline and progress bar at the start (without spoilers)
sverona|1 year ago
aib|1 year ago
Very nice wording on the 5-color challenge! I think it was the perfect balance.
One thing I was missing was the ability to move the points already on canvas. I assume you already considered, though. (As well as right-click-to-remove?)
Guvante|1 year ago
Well beyond effectively trivial ones where you try over and over again.
But the algorithm for coloring with five is pretty easy (relatively speaking still involves fun graph theory)
noodlesUK|1 year ago
There’s not a 100% great term for the collective unit of land. Generally people go with “UK & Ireland” if they’re trying to be sensitive.
HeatrayEnjoyer|1 year ago
MCSP|1 year ago
L3viathan|1 year ago
joshlk|1 year ago
On another note, I dislike how “Zero-Knowledge Proofs” are called proofs. It’s not a proof. You iteratively increase your belief that the result is true, like in experimentation, but that’s not a proof.
tyilo|1 year ago
I guess you also don't like the name Proof of Work.
hcs|1 year ago
fragmede|1 year ago
unknown|1 year ago
[deleted]
next_xibalba|1 year ago
Timwi|1 year ago
JohnMakin|1 year ago
hgyjnbdet|1 year ago
dunefox|1 year ago
MCSP|1 year ago
gsuuon|1 year ago
AlexDragusin|1 year ago
snthpy|1 year ago
I knew the 4-colour theorem but the zero knowledge proof illustration was great. I didn't get it initially but the FAQ cleared it up and I felt like I learned something as it wasn't obvious on the first look.
ModernMech|1 year ago
Only thing I would change is to make it so clicking on the picture doesn't trigger a text select, it was hard to play because a context menu kept popping up every time I changed map color.
NegativeLatency|1 year ago
zaik|1 year ago
riffraff|1 year ago
Good job, would love to see more.
your_friend|1 year ago
personjerry|1 year ago
namjh|1 year ago
Note that the entire map is sent again, shuffled its color each time after you choose the two points.
mbivert|1 year ago
As a suggestion, I would dearly enjoy a follow-up rigorously connecting those visual, intuitive ideas to actual mathematics.
sakras|1 year ago
windowshopping|1 year ago
teddarific|1 year ago
3 was a lot harder than expected — a great exercise for anyone honestly. I'm a math nerd so this was cool visualized!
genewitch|1 year ago
|-/|\-|
yochem|1 year ago
passwordoops|1 year ago
barbariangrunge|1 year ago
andrei-akopian|1 year ago
ceva|1 year ago
ehershey|1 year ago
neuron-enix|1 year ago
Well in the end it was fun, but the warning is very misleading at least from a game perspective. I have played games at the same level but it certainly wasnt this hard, haha...
But hey, saying that it was difficult, was the only thing that kept me going for 2hrs, only to be annoyed and have a face palm moment after seeing the answer.
Nonetheless it's good post
js98|1 year ago
poopcat|1 year ago
dcastm|1 year ago
xg15|1 year ago
Thanks a lot for the game. I really enjoyed it and it got me thinking about the coloring problem.
I wonder if it could be interesting to also add some bits of the corresponding graph problem into the game. This might be able to make the coloring problem a bit less "mysterious", but not less interesting.
Some shower thoughts:
It's easy to see that if you start with an arbitrary "country map", you can easily convert it into a graph with the same coloring properties: Just draw a node into the center of each region, then, if two regions have a shared border somewhere, connect their nodes with an edge.
The coloring problem is now the task of coloring all the nodes, so that no two nodes that are directly connected with an edge have the same color.
The solution to that task is also easy to see: If you have n nodes where each nodes has edges to all the other nodes, then you need n colors. The more "missing" edges you have in the graph, the less colors you can get away with. (The location of the missing edges is important though: As soon as there a group of n fully connected nodes, you need at least n colors, no matter how many additional nodes and missing edges there are)
Does that mean you can construct graphs that need 5 colors or more? Yes, just make the desired number of nodes and draw edges between all of them.
So then, where does the limit of 4 come from? There it gets interesting: Because not every graph con be converted back into a country map: Only planar graphs, i.e. graphs where no edges cross if you lie it out on a plane have a corresponding country map, otherwise you'll get an "impossible geometry".
So the coloring problem "really" shows that you can have at most 4 fully connected nodes in a planar graph - if you have graphs with more connections, you will always have at least two edges crossing, no matter how you arrange the nodes and edges on the plane.
This might also explain why it is so hard to produce good visualisations for arbitrary graphs.
An interesting question might be how the planar criterion works for other geometries, e.g. if you lay out the graph on a sphere or torus or multi-hole torus.
Another aside: In real life, states are not always continous regions on a map. There are a lot of nations that have enclaves, oversea territories or for other reasons consist of more than one geographical region. So in theory, a "map of nation states" instead of a "map of regions" could represent a nonplanar graph and could have a coloring number greater than 4. I'm not sure if there is actually such a situation anywhere on the globe though.
stop50|1 year ago
PUSH_AX|1 year ago
segfaltnh|1 year ago
SilasX|1 year ago
[1] sorry, 3-chromatic or whatever
MCSP|1 year ago
vavooom|1 year ago
zem|1 year ago
gcyjjkjg|1 year ago
[deleted]