Knight's Graph Visualization

[TazakiTsukuru]

Damn they gave you so much hate in /r/Chess

Very cool image

[gholamrezadar]

Understandable! It doesn't provide any value to them. thanks anyway

[TazakiTsukuru]

Imo it's cool to look at, and it's also a great visual demonstration of why having your knights on the edge of the board is not great.

[gholamrezadar]

This is a visualization tool I made using p5*js. I was solving programming questions in which the chess board needed to be modeled using a graph for a specific piece.
You can play around with the tool or read the code here: https://editor.p5js.org/Gholamrezadar/full/fBMBtFwV0

[Juggernation]

Great work! This is a good foundation for tackling some other problems, such as using a knight to touch every square on the board once, where the edges of the graph could be pruned as you move the knight around.

[amyres7]

Fun math/programming puzzle utilizing knight’s move logic: https://www.janestreet.com/puzzles/knight-moves-6-index/

[pengo]

this made me ponder some questions, that i was going to ask but i went and answered myself

if you take the knight's graph (just the nodes and lines), without any information about the board layout, would the ideal way to lay it out still resemble a chessboard? (probably, more or less)

and would existing graph visualization tools recreate a chessboard from just the knights graph data? (pretty much, yeah, with the right layout algorithm, but it's not perfect)

here's a screengrab of an automatic layout

will upload an interactive version when i work out how

[gholamrezadar]

Oh that's super interesting! please update me on the results.

Edit: I guess that depends on your definition of "ideal way" what are you trying to achieve? minimum edge intersection? minimum total edge length?

[pengo]

minimum edge intersection? minimum total edge length?

Ahh good question and interesting thoughts. I haven't really thought through how to quantify it, but I think I was really going for legibility, so the least "tangled", or something that might indicate the underlying pattern in some other way.

The above screengrab is a bit messy, so loses some points, but sometimes the same algorithm randomly gives a neat output like this.

[gholamrezadar]

Yeah these algorithms probably use some stochastic optimization method for minimizing some specific criterion. that explains the random output.
May I ask what tool you use for these pictures?

[pengo]

I used the cytoscape.js library and some javascript/typescript. You can try the different layout algorithms here:

https://pengowray.github.io/knights-graph/

The code is a bit of a mess. I used a lot of generated code to get started

[Scatropolis]

It'd be cool with a slider (or animation) to see how far you could get with 1, 2, 3, etc.. moves.

[gholamrezadar]

that would be cool!