For developers: Easy ways to render nice stone graphics

[Hayang]

Hi all, I'm posting a simple demonstration of how to render a nice-looking go stone with a minimal number of shapes and gradients. Perhaps it will be a useful suggestion for a javascript/HTML5 applet, and a prettier alternative to the usual radial gradient.

Here is the graphic:


- You use two circles, one for the whole stone and one white "highlight" circle for the shadow, about 3/5 of the stone's diameter.
- You set the highlight circle to ~15% opacity for the black stone and 100% opacity for the white stone.
- Optionally, you can set a gradient with three stops to color the whole stone, with either end having a lighter color.
- Finally, you add a blurred drop shadow set at some distance from the stone.
- The shadow for the white stone should be redder and lighter than that for the black stone.

I would encourage people to try coding this in javascript, especially for an existing applet like WGo.js. Hope this is interesting to you!

Please share other ways of making pretty stones, with a graphical demo if possible.

EDIT NOTE: It's also important to have a very slight ring of dark black around the edge of the black stones, representing the beginning of the rounded edge of the biconvex stone. The same goes for white stones, with a white ring. See this picture.

[RBerenguel]

Hi all, I'm posting a simple demonstration of how to render a nice-looking go stone with a minimal number of shapes and gradients. Perhaps it will be a useful suggestion for a javascript/HTML5 applet, and a prettier alternative to the usual radial gradient.

Here is the graphic:


- You use two circles, one for the whole stone and one white "highlight" circle for the shadow, about 3/5 of the stone's diameter.
- You set the highlight circle to ~15% opacity for the black stone and 100% opacity for the white stone.
- Optionally, you can set a gradient with three stops to color the whole stone, with either end having a lighter color.
- Finally, you add a blurred drop shadow set at some distance from the stone.
- The shadow for the white stone should be redder and lighter than that for the black stone.

I would encourage people to try coding this in javascript, especially for an existing applet like WGo.js. Hope this is interesting to you!

Please share other ways of making pretty stones, with a graphical demo if possible.

The flat white stone looks better than the gradient one. But good work, they look very well. Since you can draw SVG graphics in a canvas element, doing this should be straightforward

[Bonobo]

Interesting, I prefer the gradient stone as it is not as blindingly bright as the flat one.

[RBerenguel]

Interesting, I prefer the gradient stone as it is not as blindingly bright as the flat one.

That's a good point. But reminds me of my own white stones (not the shell ones, the ceramic ones.)

[anoek]

This might be a different kind of simple than what you're aiming for, but since you mentioned coding stones in javascript I thought I'd mention that generating stones procedurally using a simple phong reflection model worked out pretty well for us at OGS:




the main loop that draws those is only a few lines of code (with probably about 50 lines of support code). Once we had that in place, making a new stone look was as easy as tweaking the phong parameters (specular hardness, light distance, ambient light, etc..). It also makes it easy to add more lights, change the direction or color of those lights, and that sort of thing. So it's a really easy way to make a variety of stones that look pretty good (at least i think they look decent )

[cloudbrows]

Here's a relatively quick implementation of your glass stones in HTML/CSS:

http://codepen.io/neagle/pen/tkimn/

I also made a very quick rendition using the same code of a more traditional radial gradient effect, which makes them look like Yunzi stones to me:

http://codepen.io/neagle/pen/GDylI

Anyone is welcome to mess with these examples for their own edification or amusement.

[Hayang]

Thanks for the sweet implementation cloudbrows! This is awesome, I've never worked with SCSS before so this is pretty cool.
I tried adjusting the colors just a tad for subtlety.
http://codepen.io/anon/pen/eiGyb

anoek, I like OGS but I've thought the shading of stones was a little weird, especially in the black stones. Biconvex stones usually don't get that kind of jellybean-shaped highlight isolated in the midpoint between the center and the edge except when there is one strong bar of focused light high above the stone.

The most common highlight shape is a round cone projecting radially outward from the center, due to high diffuse light coming from a certain direction. It looks like this:

[cloudbrows]

Two other things: I think it's awesomer than awesome that you're bringing up design-related topics for go.

I'm also planning on working on customizing the renderer for WGo.js at some point (a project I only recently found out about), so maybe when I get to that I'll throw some prototypes out to the forum.

[Hayang]

Thanks cloudbrows! I hope the Go community doesn't get left in the dust in a very designed world.

PLEASE work with WGo! I think it has so much potential. The code is very easy to read and work with.
And look how pretty it can look (I tweaked the colors and textures, and CSS)


I've asked the main developer of WGo to consider doing blurred shadows and modifying the stone shading, and he is interested but busy for the next month or two.

[EdLee]

Hi Hayang, Thank you so much for this thread. Every Go app developer should read it!

[EdLee]

Perhaps an example of inconsistent design in the light source:

cc.jpg (184.69 KiB) Viewed 20437 times

• A. Peg holes. Shadow. Light source = upper left.
• B. 4x4 square. Highlight & shadow. Light source = upper left.
• C. Long rectangle. Highlight & shadow. Light source = upper left.
• D. Baby pegs. Highlight & shadow. Light source = upper left.
• E. Check button. Highlight. Light source = upper left.

• F. Color pieces. Highlight & shadow. Light source = Straight Up.

[oca]

and for the wood of the goban :
http://www.svgeneration.com/generate/Wood-Grain

ok... "c'est pas beau" but that's funny for a coder

[RBerenguel]

By the way, I think one of my posts in a related topic got "lost" because it was in my study blog. It's about using sgftopng to render better-looking diagrams.

[cloudbrows]

Perhaps an example of inconsistent design in the light source:

cc.jpg

• A. Peg holes. Shadow. Light source = upper left.
• B. 4x4 square. Highlight & shadow. Light source = upper left.
• C. Long rectangle. Highlight & shadow. Light source = upper left.
• D. Baby pegs. Highlight & shadow. Light source = upper left.
• E. Check button. Highlight. Light source = upper left.

• F. Color pieces. Highlight & shadow. Light source = Straight Up.

Nice analysis. I once wrote a whole article on the basics of consistent design regarding light source in relation to drop shadows and gradients, specifically: http://www.webdesignerdepot.com/2010/01 ... metaphors/

That was back in my designer days... I spend almost all my time coding these days. But I love getting specific about details like this.

[oca]

Not really what I will call a "nice stone graphics"
but I went to that page
http://29a.ch/2010/2/10/hand-drawn-line ... nvas-html5

and could not resist to try to apply that with a game of go

http://picshell.ovh.org/go/test_hand.html

I suppose I will not really enjoy playing with that but it's funny.