It is currently Tue Jun 27, 2017 3:29 am

All times are UTC - 8 hours [ DST ]




Post new topic Reply to topic  [ 45 posts ]  Go to page 1, 2, 3  Next
Author Message
Offline
 Post subject: prototype for new go diagram format
Post #1 Posted: Thu Nov 24, 2016 1:06 am 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
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: :b2:
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . 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)

_________________
Discipline is remembering what you want. -David Campbell


This post by Kirby was liked by 7 people: Bonobo, Charlie, daal, dfan, EdLee, emeraldemon, Monadology
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #2 Posted: Thu Nov 24, 2016 7:18 am 
Lives with ko
User avatar

Posts: 243
Location: Nürnberg, Bayern
Liked others: 89
Was liked: 96
Rank: EGF 5 kyu
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.


This post by Charlie was liked by: Kirby
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #3 Posted: Thu Nov 24, 2016 8:06 am 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
Charlie wrote:
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.

_________________
Discipline is remembering what you want. -David Campbell


This post by Kirby was liked by: Charlie
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #4 Posted: Thu Nov 24, 2016 8:14 am 
Lives in sente

Posts: 861
Liked others: 376
Was liked: 197
Rank: AGA 4k KGS 4k
GD Posts: 61
KGS: 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.


This post by dfan was liked by: Kirby
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #5 Posted: Thu Nov 24, 2016 8:17 am 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
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.

_________________
Discipline is remembering what you want. -David Campbell

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #6 Posted: Thu Nov 24, 2016 9:08 am 
Lives in gote
User avatar

Posts: 694
Liked others: 6
Was liked: 85
Rank: German 1 Kyu
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: http://igohatsuyoron120.de/index.htm
Igo Hatsuyoron #120 (still unresolved by professionals, maybe solved by three amateurs)


This post by Cassandra was liked by: Kirby
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #7 Posted: Thu Nov 24, 2016 9:22 am 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
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. :tmbup:

_________________
Discipline is remembering what you want. -David Campbell

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #8 Posted: Thu Nov 24, 2016 9:49 am 
Gosei
User avatar

Posts: 1994
Location: Germany
Liked others: 7171
Was liked: 809
Rank: OGS + EGF DDK
OGS: trohde
Awesome work, thanks for the dedicating time on improving L19 for all of us!

I prefer the old colour scheme, though

_________________
“Whenever you find yourself on the side of the majority, it is time to pause and reflect.” — Mark Twain ★ Come and play on OGS


This post by Bonobo was liked by: Kirby
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #9 Posted: Thu Nov 24, 2016 10:09 am 
Oza

Posts: 3982
Location: North Carolina
Liked others: 393
Was liked: 656
Rank: AGA 3k
GD Posts: 65
OGS: Hyperpape 4k
So, is this being rendered client side from the ascii version of the diagram? If so, is there a <noscript> backup?

_________________
Occupy Babel!

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #10 Posted: Thu Nov 24, 2016 10:22 am 
Gosei
User avatar

Posts: 1894
Location: Groningen, NL
Liked others: 187
Was liked: 1011
Rank: Dutch 4D
GD Posts: 645
Universal go server handle: herminator
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 :)


This post by HermanHiddema was liked by: dfan
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #11 Posted: Thu Nov 24, 2016 11:14 am 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
hyperpape wrote:
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.

_________________
Discipline is remembering what you want. -David Campbell

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #12 Posted: Thu Nov 24, 2016 11:25 am 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
HermanHiddema wrote:
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 ;-)

_________________
Discipline is remembering what you want. -David Campbell

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #13 Posted: Thu Nov 24, 2016 11:36 am 
Judan

Posts: 6173
Liked others: 1454
Was liked: 2356
Kirby wrote:
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. :)

_________________
"Drooling Banjos"


This post by Bill Spight was liked by 2 people: Charlie, Kirby
Top
 Profile  
 
Offline
 Post subject:
Post #14 Posted: Thu Nov 24, 2016 2:57 pm 
Judan
User avatar

Posts: 7417
Location: Santa Barbara, CA
Liked others: 269
Was liked: 1662
GD Posts: 312
Quote:
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.


This post by EdLee was liked by: Kirby
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #15 Posted: Thu Nov 24, 2016 3:43 pm 
Oza

Posts: 3982
Location: North Carolina
Liked others: 393
Was liked: 656
Rank: AGA 3k
GD Posts: 65
OGS: Hyperpape 4k
Kirby wrote:
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

_________________
Occupy Babel!

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #16 Posted: Thu Nov 24, 2016 4:04 pm 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
hyperpape wrote:
Kirby wrote:
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.


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.

_________________
Discipline is remembering what you want. -David Campbell

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #17 Posted: Thu Nov 24, 2016 4:24 pm 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
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: :b2:
$$ ---------------------------------------
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . . . . . . . . . . . . . . . . |
$$ | . . . . 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:
Image

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?

_________________
Discipline is remembering what you want. -David Campbell


This post by Kirby was liked by: Bonobo
Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #18 Posted: Thu Nov 24, 2016 4:27 pm 
Judan

Posts: 7424
Liked others: 1347
Was liked: 1141
KGS: Kirby
Tygem: 커비라고해
Any other thoughts on improving appearance? Should white stones have an outline? Any other textured effects? Anything else?

_________________
Discipline is remembering what you want. -David Campbell

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #19 Posted: Thu Nov 24, 2016 4:31 pm 
Lives in sente

Posts: 861
Liked others: 376
Was liked: 197
Rank: AGA 4k KGS 4k
GD Posts: 61
KGS: dfan
For 2D stones, I would add a thin outline.

Top
 Profile  
 
Offline
 Post subject: Re: prototype for new go diagram format
Post #20 Posted: Thu Nov 24, 2016 4:36 pm 
Gosei
User avatar

Posts: 1994
Location: Germany
Liked others: 7171
Was liked: 809
Rank: OGS + EGF DDK
OGS: trohde
Oh :oops: 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).

_________________
“Whenever you find yourself on the side of the majority, it is time to pause and reflect.” — Mark Twain ★ Come and play on OGS

Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 45 posts ]  Go to page 1, 2, 3  Next

All times are UTC - 8 hours [ DST ]


Who is online

Users browsing this forum: Yahoo [Bot] and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group