It is currently Sun Sep 24, 2017 10:26 am

All times are UTC - 8 hours [ DST ]




Post new topic Reply to topic  [ 34 posts ]  Go to page 1, 2  Next
Author Message
Offline
 Post subject: For developers: Easy ways to render nice stone graphics
Post #1 Posted: Tue Apr 29, 2014 10:09 am 
Dies in gote
User avatar

Posts: 29
Liked others: 8
Was liked: 53
KGS: Hayang
Tygem: curtana
Wbaduk: 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:
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.


Last edited by Hayang on Tue Apr 29, 2014 6:38 pm, edited 1 time in total.

This post by Hayang was liked by 5 people: betterlife, Bonobo, EdLee, oca, RBerenguel
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #2 Posted: Tue Apr 29, 2014 10:15 am 
Gosei
User avatar

Posts: 1585
Location: Barcelona, Spain (GMT+1)
Liked others: 577
Was liked: 298
Rank: KGS 5k
KGS: RBerenguel
Tygem: rberenguel
Wbaduk: JohnKeats
Kaya handle: RBerenguel
Online playing schedule: KGS on Saturday I use to be online, but I can be if needed from 20-23 GMT+1
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

_________________
Geek of all trades, master of none: the motto for my blog mostlymaths.net

Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #3 Posted: Tue Apr 29, 2014 10:47 am 
Gosei
User avatar

Posts: 2000
Location: Germany
Liked others: 7223
Was liked: 809
Rank: OGS + EGF DDK
OGS: trohde
Interesting, I prefer the gradient stone as it is not as blindingly bright as the flat one.

_________________
“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  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #4 Posted: Tue Apr 29, 2014 11:11 am 
Gosei
User avatar

Posts: 1585
Location: Barcelona, Spain (GMT+1)
Liked others: 577
Was liked: 298
Rank: KGS 5k
KGS: RBerenguel
Tygem: rberenguel
Wbaduk: JohnKeats
Kaya handle: RBerenguel
Online playing schedule: KGS on Saturday I use to be online, but I can be if needed from 20-23 GMT+1
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.)

_________________
Geek of all trades, master of none: the motto for my blog mostlymaths.net

Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #5 Posted: Tue Apr 29, 2014 1:16 pm 
Dies in gote

Posts: 50
Liked others: 25
Was liked: 57
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 :))


This post by anoek was liked by 2 people: Bonobo, EdLee
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #6 Posted: Tue Apr 29, 2014 1:19 pm 
Dies in gote
User avatar

Posts: 34
Location: Washington, DC
Liked others: 12
Was liked: 29
Rank: AGA 2 kyu
KGS: 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.

_________________
Nate Eagle

"You see, this is why go is so difficult. But also why go is so interesting." --Yuan Zhou


This post by cloudbrows was liked by 2 people: Bonobo, Hayang
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #7 Posted: Tue Apr 29, 2014 6:33 pm 
Dies in gote
User avatar

Posts: 29
Liked others: 8
Was liked: 53
KGS: Hayang
Tygem: curtana
Wbaduk: 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:
Image
Image
Image


This post by Hayang was liked by: Bonobo
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #8 Posted: Tue Apr 29, 2014 6:46 pm 
Dies in gote
User avatar

Posts: 34
Location: Washington, DC
Liked others: 12
Was liked: 29
Rank: AGA 2 kyu
KGS: 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.

_________________
Nate Eagle

"You see, this is why go is so difficult. But also why go is so interesting." --Yuan Zhou


This post by cloudbrows was liked by: Bonobo
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #9 Posted: Tue Apr 29, 2014 7:16 pm 
Dies in gote
User avatar

Posts: 29
Liked others: 8
Was liked: 53
KGS: Hayang
Tygem: curtana
Wbaduk: 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)
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.


This post by Hayang was liked by 2 people: Bonobo, cloudbrows
Top
 Profile  
 
Offline
 Post subject:
Post #10 Posted: Tue Apr 29, 2014 7:50 pm 
Judan
User avatar

Posts: 7533
Location: Santa Barbara, CA
Liked others: 275
Was liked: 1676
GD Posts: 312
Hi Hayang, Thank you so much for this thread. Every Go app developer should read it! :salute:


This post by EdLee was liked by 3 people: Bonobo, cloudbrows, Hayang
Top
 Profile  
 
Offline
 Post subject:
Post #11 Posted: Tue Apr 29, 2014 10:47 pm 
Judan
User avatar

Posts: 7533
Location: Santa Barbara, CA
Liked others: 275
Was liked: 1676
GD Posts: 312
Perhaps an example of inconsistent design in the light source:
Attachment:
cc.jpg
cc.jpg [ 184.69 KiB | Viewed 2711 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.

Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #12 Posted: Tue Apr 29, 2014 11:11 pm 
Lives in gote
User avatar

Posts: 699
Location: Switzerland
Liked others: 485
Was liked: 166
Rank: DDK
KGS: aco
IGS: oca
OGS: 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 ;)

_________________
Converting the book Shape UP! by Charles Matthews/Seong-June Kim
to the gobook format. last updated april 2015 - Index of shapes, p.211 / 216


This post by oca was liked by 2 people: Bonobo, Hayang
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #13 Posted: Wed Apr 30, 2014 12:41 am 
Gosei
User avatar

Posts: 1585
Location: Barcelona, Spain (GMT+1)
Liked others: 577
Was liked: 298
Rank: KGS 5k
KGS: RBerenguel
Tygem: rberenguel
Wbaduk: JohnKeats
Kaya handle: RBerenguel
Online playing schedule: KGS on Saturday I use to be online, but I can be if needed from 20-23 GMT+1
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.

_________________
Geek of all trades, master of none: the motto for my blog mostlymaths.net


This post by RBerenguel was liked by: Bonobo
Top
 Profile  
 
Offline
 Post subject: Re:
Post #14 Posted: Wed Apr 30, 2014 8:44 am 
Dies in gote
User avatar

Posts: 34
Location: Washington, DC
Liked others: 12
Was liked: 29
Rank: AGA 2 kyu
KGS: cloudbrows
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.

_________________
Nate Eagle

"You see, this is why go is so difficult. But also why go is so interesting." --Yuan Zhou


This post by cloudbrows was liked by 2 people: Bonobo, Hayang
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #15 Posted: Fri May 02, 2014 3:08 am 
Lives in gote
User avatar

Posts: 699
Location: Switzerland
Liked others: 485
Was liked: 166
Rank: DDK
KGS: aco
IGS: oca
OGS: 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.

_________________
Converting the book Shape UP! by Charles Matthews/Seong-June Kim
to the gobook format. last updated april 2015 - Index of shapes, p.211 / 216


This post by oca was liked by 4 people: Bonobo, cloudbrows, ez4u, Hayang
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #16 Posted: Fri May 02, 2014 3:40 am 
Gosei
User avatar

Posts: 1585
Location: Barcelona, Spain (GMT+1)
Liked others: 577
Was liked: 298
Rank: KGS 5k
KGS: RBerenguel
Tygem: rberenguel
Wbaduk: JohnKeats
Kaya handle: RBerenguel
Online playing schedule: KGS on Saturday I use to be online, but I can be if needed from 20-23 GMT+1
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 :)

_________________
Geek of all trades, master of none: the motto for my blog mostlymaths.net

Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #17 Posted: Fri May 02, 2014 8:15 am 
Gosei
User avatar

Posts: 1585
Location: Barcelona, Spain (GMT+1)
Liked others: 577
Was liked: 298
Rank: KGS 5k
KGS: RBerenguel
Tygem: rberenguel
Wbaduk: JohnKeats
Kaya handle: RBerenguel
Online playing schedule: KGS on Saturday I use to be online, but I can be if needed from 20-23 GMT+1
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 2440 times ]

_________________
Geek of all trades, master of none: the motto for my blog mostlymaths.net


This post by RBerenguel was liked by: Bonobo
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #18 Posted: Fri May 02, 2014 8:51 am 
Gosei
User avatar

Posts: 1585
Location: Barcelona, Spain (GMT+1)
Liked others: 577
Was liked: 298
Rank: KGS 5k
KGS: RBerenguel
Tygem: rberenguel
Wbaduk: JohnKeats
Kaya handle: RBerenguel
Online playing schedule: KGS on Saturday I use to be online, but I can be if needed from 20-23 GMT+1
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 2427 times ]

_________________
Geek of all trades, master of none: the motto for my blog mostlymaths.net


This post by RBerenguel was liked by 4 people: Bonobo, cloudbrows, ez4u, oca
Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #19 Posted: Fri May 02, 2014 9:05 am 
Dies in gote
User avatar

Posts: 34
Location: Washington, DC
Liked others: 12
Was liked: 29
Rank: AGA 2 kyu
KGS: cloudbrows
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.

_________________
Nate Eagle

"You see, this is why go is so difficult. But also why go is so interesting." --Yuan Zhou

Top
 Profile  
 
Offline
 Post subject: Re: For developers: Easy ways to render nice stone graphics
Post #20 Posted: Fri May 02, 2014 9:09 am 
Gosei
User avatar

Posts: 2000
Location: Germany
Liked others: 7223
Was liked: 809
Rank: OGS + EGF DDK
OGS: trohde
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

_________________
“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: oca
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 34 posts ]  Go to page 1, 2  Next

All times are UTC - 8 hours [ DST ]


Who is online

Users browsing this forum: No registered users and 3 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