prototype for new go diagram format

[Kirby]

I had a little bit of free time, and I'm a little bit tired of how the go diagrams look, so I made a prototype for a new implementation of the go diagrams.

The go diagram code is the same, but you can use "go-beta" tags instead of "go" tags to try it out.

Here are some examples:
[go-beta]$$Wcm31 Example using some of the existing markups
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . . . . . . . . . . . . . ? ? ? ? ? |
$$ | . . X X X . . A . * . V . . O O O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . B . . . . . C . . . . . W . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . # . . . . . S . . . . . @ . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Y . . . . . T . . . . . Q . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . Z . . . . . M . . . . . P . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . 1 . 2 . 3 . 4 . 5 . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . , . . . . . , . . . . . , . . . |
$$ | . . . a . b . c . d . x . y . z . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta]

[go-beta]$$Bcm61 Prisoners:
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . O . X . . O . . . . X . . . . |
$$ | . O . O . . . . X O . X . . . , X O . |
$$ | . . O O X X . . X O . . . . . . X . . |
$$ | . O . . O X . . . . O . . . . . . . . |
$$ | . X O O O X . O O . . . . . . . . . . |
$$ | . . X X X X X . . . . . . . . . . . . |
$$ | . . . . . O . . O . . . . . . . . . . |
$$ | . . . X X . X 1 2 , . . . . . , . . . |
$$ | . . O O O O . . O . . . . . . X . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . O X . . . . . . . . . . . . . . . |
$$ | . . O . . . . . . X . . . O . . O . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . O . X . X . . . , . . . . . O . . . |
$$ | . . X . . . . . . X . . . X . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ ---------------------------------------[/go-beta]
(stolen from Joaz Banbeck vs TegaiS malkovich game)

It's something I just started, so it's not fully compatible with all of the features of the existing script. Some known limitations:
* Arrows are not yet supported.
* There are some minor graphic bugs (e.g. the image above has a small line on top)
* Smaller boards haven't been tested that much. They should work in theory, but there is definitely still work to do - for example, the board size won't shrink right now to accommodate the fewer intersections.
* The "-" dividers don't work. For now, if you try to use it, I revert to the old diagram format like below:
[go-beta]$$W
$$ -------------------------------
$$ - . . . . . . . - . . . . . . .
$$ - . . . . . . . - . . 1 . . . .
$$ - . 0 3 X . . . - . X O X 3 . .
$$ - . . 4 5 . . . - . . X O . . .
$$ - . . 6 1 . . . - . 2 X O . . .
$$ - . 9 7 8 . . . - . O O X 5 . .
$$ - . . 2 . . . . - . 4 X 6 . . .
$$ - . . . . . . . - . . . . . . .
$$ - . . . . . . . - . . . . . . .[/go-beta]

* I have an image texture that I prefer to the plain color board that I have here, but I haven't figured out how to reliably preload the image - so you have to submit twice sometimes to get the image to load.

---

Anyway, since some basic functionality is already implemented, which covers most use cases I've seen lately on this forum, I decided to let you know about it so that you can use it if you'd like, as I continue to fix it and improve it.

If you encounter any bugs or have suggestions (e.g. the way it looks), let me know in this thread.

Happy Thanksgiving (if you celebrate that kind of thing)

[Charlie]

Hmm... to be honest, I like the old ones better.

On the new one, I think the lines on the board are a bit too heavy and the shadows around the stones are really distracting. The specular highlight also interferes with the legibility of the numbers when the stones are numbered.

[Kirby]

Hmm... to be honest, I like the old ones better.

On the new one, I think the lines on the board are a bit too heavy and the shadows around the stones are really distracting. The specular highlight also interferes with the legibility of the numbers when the stones are numbered.

Sure. The good part is that the new method is easy to update.

It's not hard for me to make updates for the three points you make here. I am not experienced in this kind of design, so ideas to make it look better are welcome.

Any other suggestions?

It's my first time to try using canvas, so recommendations for making it look better would be great.

[dfan]

Nice work! I like that it is anti-aliased (I think). The jaggies of the current diagrams are really old-school and this looks much more modern. The numbers also look a lot nicer.

Some of my preferences may just be the usual resistance to change that gradually melts away eventually, but:

• I also find the stone shadows distracting.
• In fact I usually like to minimize the 3D-ness of my go diagrams, so I personally would dial back the highlight on the stones a touch. On the other hand, I may be an outlier; I even turn off 3D stones in cgoban.

In general I value readability and clarity over fanciness (like the 3D features above). So I bet I will prefer the current flat-shaded board to the texture you have waiting in the wings

I'd also be interested to see what the coordinates look like.

[Kirby]

Thanks, dfan.

It seems like a theme I am hearing is that trying to make a diagram look "3D" is not worth it, and I should aim for readability.

I'll make another iteration tonight.

[Cassandra]

Probably you might want to try stones that do not have a circumfence in the board's colour.

These additional lines around the stones (especially the black ones) are quite irritating, in my opinion.

[Kirby]

Thanks for all of the feedback so far, guys. I have no experience in "drawing" stuff on the web (or graphics in general, actually), so these ideas are very nice.

[Bonobo]

Awesome work, thanks for the dedicating time on improving L19 for all of us!

I prefer the old colour scheme, though

[hyperpape]

So, is this being rendered client side from the ascii version of the diagram? If so, is there a <noscript> backup?

[HermanHiddema]

This reminded me of some similar work I did a while ago, to turn diagrams into SVG (Scalable Vector Graphics).

Demo at:

http://hiddema.nl/svgodiagram/demo.html

This is a pure JavaScript implementation which finds text diagrams in the page and replaces them with an SVG. To make the effect visible, I've built in a slight delay.

Advantage of this over images is that it'll stay sharp at any scale (you can use ctrl-+ to zoom in, ctrl-- to zoom out, ctrl-0 to reset to default scale) so it should work well with accessibility plugins for people with poor eyesight.

Not a polished end product, but feel free to use the code or take inspiration from it

[Kirby]

So, is this being rendered client side from the ascii version of the diagram? If so, is there a <noscript> backup?

Probably will revert to the old diagrams for unsupported scenarios. The existing diagrams require Javascript already, by the way.

[Kirby]

This reminded me of some similar work I did a while ago, to turn diagrams into SVG (Scalable Vector Graphics).

Demo at:

http://hiddema.nl/svgodiagram/demo.html

This is a pure JavaScript implementation which finds text diagrams in the page and replaces them with an SVG. To make the effect visible, I've built in a slight delay.

Advantage of this over images is that it'll stay sharp at any scale (you can use ctrl-+ to zoom in, ctrl-- to zoom out, ctrl-0 to reset to default scale) so it should work well with accessibility plugins for people with poor eyesight.

Not a polished end product, but feel free to use the code or take inspiration from it

Interesting idea. I'm a bit of a newbie, so I'll have to read up on SVG.

I will do thing in this order:
1.) Address appearance concerns to get some sort of consensus on a good look.
2.) Since SVG may affect the implementation significantly, I'll look at this next.
3.) Implement missing features to make it fully compatible with the current diagrams.
4.) Fix any bugs I can find.
5.) Clean up the code (I was just playing around, so it's extremely sloppy right now.

I think 1 is the biggest blocker for this being useful on the forum, so I'll really prioritize this one.

So if anyone has any more annoyances with the look that haven't been mentioned, speak up

[Bill Spight]

It seems like a theme I am hearing is that trying to make a diagram look "3D" is not worth it, and I should aim for readability.

Readability is very important. And yes, IMX, 2-D is better for readability.

[EdLee]

a theme I am hearing is that trying to make a diagram look "3D" is not worth it, and I should aim for readability.

Hi Kirby,

I think it depends on the rendering.

Hard-to-read 3D is bad ; good-to-read 3D is good.

It's possible when the size reaches a certain minimum threshold, then 2D reads better than 3D.
Usually people wouldn't want to play on a small board with very small stones, like in the ( existing & beta ) diagrams.
When we play, we have no problem looking at real-world 3D stones.

But when we're looking at tiny boards and tiny stones in small diagrams,
maybe then the rendering in 2D v. 3D becomes significant.

Beautifully rendered 2D is better than lesser quality 2D, too. Anti-aliased 2D stones are nice.

Notice after Steve Jobs' passing, Sir Jon Ive removed all the 3D-ness and switched to 2D for both OSX and iOS UI elements.

[hyperpape]

Probably will revert to the old diagrams for unsupported scenarios. The existing diagrams require Javascript already, by the way.

Cool, I had no idea they required JS.

Edit: corrected quoting