cLabs: SimpleAlphaTechnique

(Article 1 in a potential series on rendering a translucent look and feel - see GlassLook)

I like reading Romain Guy's blog. He works with the Swing team at Sun and usually has some interesting articles on doing sharp things with Swing. Recently, he had an article that touched on translucent effects and included a bit of code for the simple gradient painting that made it happen in his sample:

        // top gradient
        g2.setPaint(new GradientPaint(0.0f, y,
                                      new Color(220, 220, 220, 140),
                                      0.0f, y + height / 2.0f,
                                      new Color(220, 220, 220, 80)));
        g2.fillRect(x, y, width, height / 2);

        // bottom gradient
        g2.setPaint(new GradientPaint(0.0f, y + height / 2.0f + 5.0f,
                                      new Color(255, 255, 255, 0),
                                      0.0f, y + height,
                                      new Color(255, 255, 255, 70)));
        g2.fillRect(x, y + height / 2, width, height / 2);

This piqued my interest and I decided to give it a shot in the world of .NET. Source code is available here. Here's a simple black rectangle using the above technique:

What's happening is 3 things. First, a plain black rectangle is painted. Second, the top half has a silver gradient applied, with the alpha channel set to 140 at the top of the top half and 80 at the bottom of the top half. Third, the bottom half has a white gradient applied, the alpha channel being 0 (which totally squelches the white) at the top of the bottom half, and 70 at the bottom of the bottom half.

All in all, especially for so simple an approach, the effect works. How about some other colors? Here's Dark Blue:

Blue:

and ... huh. The bottom half looks bright (for whatever that's worth), but the top half is dull and has lost that shiny effect. It doesn't look translucent anymore. How about Light Blue?

Same problem. Top half looks dull. So now what?

[Hate to leave you hanging, but that's all I got right now. If you've a pointer, add a Comment]

tags: ComputersAndTechnology