Life In 19x19
http://www.lifein19x19.com/

For developers: Easy ways to render nice stone graphics
http://www.lifein19x19.com/viewtopic.php?f=10&t=10226		 Page 1 of 2
Author:  Hayang [ Tue Apr 29, 2014 10:09 am ]
Post subject:  For developers: Easy ways to render nice stone graphics
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:
Image

- 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.
Author:  RBerenguel [ Tue Apr 29, 2014 10:15 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
Hayang wrote:
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:
Image

- 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
Author:  Bonobo [ Tue Apr 29, 2014 10:47 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
Interesting, I prefer the gradient stone as it is not as blindingly bright as the flat one.
Author:  RBerenguel [ Tue Apr 29, 2014 11:11 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
Bonobo wrote:
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.)
Author:  anoek [ Tue Apr 29, 2014 1:16 pm ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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:

Image
Image

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 :))
Author:  cloudbrows [ Tue Apr 29, 2014 1:19 pm ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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.
Author:  Hayang [ Tue Apr 29, 2014 6:33 pm ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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:
Image
Image
Image
Author:  cloudbrows [ Tue Apr 29, 2014 6:46 pm ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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.
Author:  Hayang [ Tue Apr 29, 2014 7:16 pm ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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)
Image

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.
Author:  EdLee [ Tue Apr 29, 2014 7:50 pm ]
Post subject: 
Hi Hayang, Thank you so much for this thread. Every Go app developer should read it! :salute:
Author:  EdLee [ Tue Apr 29, 2014 10:47 pm ]
Post subject: 
Perhaps an example of inconsistent design in the light source:
Attachment:
cc.jpg
cc.jpg [ 184.69 KiB | Viewed 19521 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 :black: :white: pegs. Highlight & shadow. Light source = upper left.
  • E. Check button. Highlight. Light source = upper left.

  • F. Color pieces. Highlight & shadow. Light source = Straight Up.
Author:  oca [ Tue Apr 29, 2014 11:11 pm ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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 ;)
Author:  RBerenguel [ Wed Apr 30, 2014 12:41 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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.
Author:  cloudbrows [ Wed Apr 30, 2014 8:44 am ]
Post subject:  Re:
EdLee wrote:
Perhaps an example of inconsistent design in the light source:
Attachment:
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 :black: :white: 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.
Author:  oca [ Fri May 02, 2014 3:08 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
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.
Author:  RBerenguel [ Fri May 02, 2014 3:40 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
Oh crap, now I want to add this to my edited sgftopng. I still remember a "hack" in Bing maps a few years ago: Napkin-drawing maps. It was a lovely idea, like XKCD styled graphs :)
Author:  RBerenguel [ Fri May 02, 2014 8:15 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
Imagemagick's MVG format does not have proper "close" for bezier-defined paths, so it was either leaving it as it is now or changing too many commands into paths. So, for now I'm happy with the results (well, I'm not, but I'll think I am for a while.) Generated with yet another option of my version of sgftopng, -wiggle.

Attachment:
asdf-1.png
asdf-1.png [ 420.84 KiB | Viewed 19250 times ]
Author:  RBerenguel [ Fri May 02, 2014 8:51 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
RBerenguel wrote:
Imagemagick's MVG format does not have proper "close" for bezier-defined paths, so it was either leaving it as it is now or changing too many commands into paths. So, for now I'm happy with the results (well, I'm not, but I'll think I am for a while.) Generated with yet another option of my version of sgftopng, -wiggle.

Attachment:
The attachment asdf-1.png is no longer available


For kicks (using "composite")

Attachment:
final.jpg
final.jpg [ 353.13 KiB | Viewed 19237 times ]
Author:  cloudbrows [ Fri May 02, 2014 9:05 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
oca wrote:
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.


This is totally charming.
Author:  Bonobo [ Fri May 02, 2014 9:09 am ]
Post subject:  Re: For developers: Easy ways to render nice stone graphics
RBerenguel wrote:
[..]

For kicks (using "composite")

Attachment:
final.jpg

Yes, thx, that gave me a kick :-D but for some reason I can’t explain I’d prefer the stones to be above the coffee (or whatever) stains.

Greetz, Tom
Page 1 of 2 All times are UTC - 8 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/