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:

Click Here To Show Diagram Code

[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]

Click Here To Show Diagram Code

[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:

Click Here To Show Diagram Code

[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)

_________________
be immersed

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.

_________________
be immersed

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.

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.

_________________
be immersed

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.

_________________
The really most difficult Go problem ever: https://igohatsuyoron120.de/index.htm
Igo Hatsuyōron #120 (really solved by KataGo)

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.

_________________
be immersed

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

I prefer the old colour scheme, though

_________________
“The only difference between me and a madman is that I’m not mad.” — Salvador Dali ★ Play a slooooow correspondence game with me on OGS?

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

_________________
Occupy Babel!

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

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

_________________
be immersed

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

_________________
be immersed

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

_________________
The Adkins Principle:
At some point, doesn't thinking have to go on?
— Winona Adkins

Visualize whirled peas.

Everything with love. Stay safe.

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.

Cool, I had no idea they required JS.

Edit: corrected quoting

_________________
Occupy Babel!

Yeah. To give some background, the way godiscussions.com did this was a little different, and it was somewhat of a blocker for getting L19 running. According to the owner of godiscussions.com, the capacity they had was being overrun on the server due to amount of images that were stored on the server, and it caused response time to be very slow. I have no idea if this is actually the reason for the slowness or not, but in order to make a comparable site, we needed to get diagrams working in phpBB. Jordus let me know about this, and I'm the one that set this part of L19 up initially.

I don't know how they did it on godiscussions.com, but basically, instead of storing an image on the server with a particular filename or something and retrieving it for display, the method I used was to generate the image on the fly by passing the diagram code through the URL. So you can technically create diagram images by making your own URL and passing it as a variable.

The contents of what phpBB sees from a post has different data than what the script expects. For example, when you post, you have "br" line breaks which should be newline characters, etc., and these need to be in html format to pass through the URL. I use javascript to convert the text from the post into this format so that it can be sent through the URL to generate an image.

Anyway, the current stuff I'm messing with basically increases the javascript content that occurs and decreases the use of php. In fact, I'm still using the php script to generate the SGF that you can download when you click on the diagram. Since I'm concerned mainly with adjusting the way the diagram looks, I don't see a reason to do away with the part that generates the SGF itself.

_________________
be immersed

Okay, I tried to compile some of the suggestions on board appearance. Here are the same examples with the updates (or you can look at the OP):

Click Here To Show Diagram Code

[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]

Click Here To Show Diagram Code

[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]

FWIW, here is what things looked like with the texture that I was working on preloading:


As you can see, the textured image has a lot more stuff, but perhaps it's too distracting for a diagram.

I'm not a graphics expert, but in my opinion right now, it's not clear to me whether the white stones need an outline like in the existing diagrams. Based on feedback in this thread, we should get rid of the surrounding circle, but what do you think given what it looks like here?

_________________
be immersed

Any other thoughts on improving appearance? Should white stones have an outline? Any other textured effects? Anything else?

_________________
be immersed

For 2D stones, I would add a thin outline.

Oh I must confess that when I wrote that I preferred the “old color scheme”, I confused that with the Eidogo color scheme (which my eyes really like).

_________________
“The only difference between me and a madman is that I’m not mad.” — Salvador Dali ★ Play a slooooow correspondence game with me on OGS?