Visualising AI state

[jab_bott]

Is there a way to send commands to the visualiser that can draw lines, circles, boxes, text, etc. in different colours (and transparency), to overlay on top of the map during playback?

This would enable us to visualise our AI state (for example: waypoints, planned routes, known terrain, ant state, tracking objects/areas, search trees, etc.) and present ourselves with some stats. I'd personally find this really useful to help make sure my AI is doing what it's supposed to. Of course the online engine would ignore those commands (and you could enable/disable with a setup state too to speed up processing) - it would only be for local testing.

J

EDIT: If you're just reading this topic for the first time - things have moved on a lot. The upshot is there's a pretty-good working ai-state visualizer, instructions for how to use it are here:
https://github.com/j-h-a/aichallenge/bl ... OVERLAY.md
Even if you can't be bothered to read the whole topic, it's worth scanning through each page to see some of the pictures people have posted.

[jlgrall]

This would be awesome. A debug API.

Did my algorithm found all the relevant tiles ? Just mark the found tiles with the debug API, launch the game with debug activated, pause the game and check visually...

Why did my ant go there ? Lets map some informations on the map, then I can see whether they are correct...

Really nice idea

+1

[amstan]

+1 for this.

I made an issue: https://github.com/aichallenge/aichallenge/issues/336

[jab_bott]

Great to see some enthusiasm for this

I think the basic commands would be:

circle row col radius #RRGGBBAA fill [linewidth]
line row1 col1 row2 col2 #RRGGBBAA
tint row col #RRGGBBAA [linewidth]

Circle: Draws a circle of the specified radius with its centre at row, col. The row, col, and radius could be floating point values so that you can specify position and sizes on a sub-square resolution. The colour could be separate RGBA values but probably perhaps a #RRGGBBAA hex representation is the simplest. Fill would be 0 or 1 to specify a circle outline (0) or solid circle (1). If fill is 0 then linewidth specifies the thickness of the outline to be drawn - although I'm not sure if this should be in screen units or game units (i.e. 1.0 would be as thick as one game square) - logically it should be in game units, but as a visualiser aid it might be more practical to be in screen units so it looks the same on different map sizes.

Line: Draws a line from row1, col1 to row2, col2 - again these are floating point values so that you can draw lines from or along the edges of game squares. The integer at value would be the centre of the square, so for example the very top left of the board would be (-0.5, -0.5).

Tint: This would overlay the specified (integer) game square with the specified colour (users should use a transparent colour unless they want it to completely obscure the game board).

How's that for a starter, any ideas/comments/improvements?

[jlgrall]

It looks really nice ! Almost a finisher

I just thought about 1 thing.
It seams from the game specifications that the game engine likes lines beginning with a single character ("o" for order, "w" for water, "d" for dead ant, ...). Maybe to do it the same way, we could use as the first letter either:
- the first letter: "c", "l", "t".
- or a single letter that would mean draw or debug. We could use "d", followed by "circle" or "line" or "tint".

I don't know for the color representation. I would say that #RRGGBBAA is easier to read for a human, but in this case, the information is only to be read by a program, and it is much easier to parse values separated by spaces. So I would say separate each component.

Would it be better to use floats between 0 and 1 or integers between 0 and 255 to represent color components ?

Maybe we could also have a command to pause the visualizer ? I am not sure that it would be a good idea thought.

[jab_bott]

So how do we go about implementing this?

I had a quick look at the visualiser and it seems to be written in JavaScript - although there's a visualizer.jar file too so maybe it's in Java. However, it seems to take a big list of map states as input so we'd probably have to pass a separate list of overlay-states for each turn and of course generate this log-file too. What's the best way to get started?

[gvsmirnov]

Uh, I actually sort of implemented something like that, but it was only targeting a specific overlay layer for a specific AI info. Sending direct commands is a good idea, but as I see it, there should be a nearly-full replica of what canvas api can do.



P.S. The java visualizer uses the js-based one. It fires up a browser frame.

[jab_bott]

A full replica of canvas APIs would be great, but we've got to start somewhere. I don't really know JavaScript but I took a look anyway - CanvasElement.js seems to be where all the drawing takes place.

I figure if we have a separate list of overlay states for each turn that can be passed in, we can draw it here. The tint one is probably the easiest to implement, looks like you already did something similar in your screenshot. Can you give any pointers where to edit the JS, and also how you managed to get replay data for your AI state out and into the JS?

[imargonis]

This sounds like a really cool idea.

+1 from me

[jab_bott]

I've started looking into the visualiser. Here's my plan:

1: Define a prefix for visualiser commands. e.g. "#OVERLAY:"
2: Find the part of the game tools (engine.py I think) that outputs the html that is displayed by the visualiser and modify it to create an additional JSON component containing the filtered overlay commands.
3: Edit the visualiser code to draw the overlays (CanvasElementAntsMap in CanvasElement.js I thhink).

I don't know JavaScript or Python yet - so all help is appreciated