Andres is a DZone Zone Leader and has posted 143 posts at DZone. You can read more from them at their website. View Full User Profile

GraphicsBuilder Tutorial III: Paints & Colors

02.26.2008
| 19575 views |
  • submit to reddit

Multipaints

The last painting option is rather unique to GraphicsBuilder, it allows you to apply a group of paints to the same shape, each one applied one after the other. The following example is taken from the Filthy Rich Clients book (highly recommended), you can see a similar picture in the chapter where Romain introduces gradients.

What you see is not what you think it is, there is no sphere but rather a circle with a series of gradients that yield the illusion of a sphere. The multipaint is composed of a base color, an ambient gradient that gives the sensation of depth (the spherical context), an specular gradient (bottom) and the highlight (or shine) at the top. If you think making this drawing with Java2D is complicated you are probably right unless you rely on GraphicsBuilder to ease up the process

// some useful variables
def width = 200
def height = 200
def cx = width/2 + 10
def cy = height/2 + 10
// turn on antialias
antialias on
// paint the background
rect( x: 0, y: 0, width: 220, height: 220, fill: 'white' )
// this is the base shape and color
circle( cx: cx, cy: cx, radius: width/2, borderColor: no, fill: 'blue' )
// sphere-like gradients
circle( cx: cx, cy: cx, radius: width/2, borderColor: no ){
multiPaint {
// ambient
radialGradient( cx: cx, cy: cy, radius: width/2 ) {
stop( offset: 0, color: color(red: 6, green: 76, blue: 160, alpha: 127) )
stop( offset: 1, color: color(alpha: 204) )
}
// specular
def lighting = color(red: 64, green: 142, blue: 203, alpha: 255)
radialGradient( cx: cx, cy: height*1.5,
fx: cx, fy: (height*1.75)+16,
radius: width/2, absolute: yes ) {
stop( offset: 0, color: lighting )
stop( offset: 0.8, color: lighting.derive(alpha:0) )
transformations{ scale(y:0.5) }
}
// shine
radialGradient( cx: cx, cy: cy,
fx: 55, fy: 35, radius: width/1.4 ){
stop( offset: 0, color: color('white').derive(alpha:0.5) )
stop( offset: 0.5, color: color('white').derive(alpha:0) )
}
}
}

Conclusion

There is another paint option we have not seen yet, texturePaint, as it requires knowledge of how images work in GraphicsBuilder, we will revisit that in a later chapter of this series. For now you already know how to change the colors of a shape, outline and even borders, which hopefully will lead you to hours of playful hacking with graphicsPad.

 

Published at DZone with permission of its author, Andres Almiray.