Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Spicing up your drawings with filters

DZone's Guide to

Spicing up your drawings with filters

· Java Zone
Free Resource

The single app analytics solutions to take your web and mobile apps to the next level.  Try today!  Brought to you in partnership with CA Technologies

Anyone that has done serious development on Java2D has surely come acroos Jerry Huxtable's amazing filter collection, but creating such eye catching images may be a bit hard, but thanks to Groovy and Graphicsbuilder that task is easier than ever.

Starting with the next release of GraphicsBuilder (will be ready in a couple of days, I promise) you will be able to apply a set of Jerry's filters to any shape and or image, you can even combine them to produce something completely different from the original source. Let's see a quick example of some of those filters.

First we draw the base shape, in this case a rounded rectangle with a white-blue based gradient

 

[img_assist|nid=617|title=|desc=|link=none|align=undefined|width=220|height=200]

 

Next we apply the first filter, weave, which creates a weave-like effect, notice the little shadows

 

[img_assist|nid=618|title=|desc=|link=none|align=undefined|width=220|height=200]

 

Now we apply a kaleidoscope effect, which uses 2 mirrors to warp the image, we override the sides setting to 4 obtaining a clover like shape

 

[img_assist|nid=619|title=|desc=|link=none|align=undefined|width=220|height=200]

 

Looks good but a little flat, let's givig it a little bit of volume with a shapeBurst effect

 

[img_assist|nid=620|title=|desc=|link=none|align=undefined|width=220|height=200]

 

Much better but it made the whole image too dark, could we put some light into it? sure we can!

 

[img_assist|nid=621|title=|desc=|link=none|align=undefined|width=220|height=200]

 

And now for the final touch, let's tweak the lights with an ambient lime light located at the top left corner

 

[img_assist|nid=622|title=|desc=|link=none|align=undefined|width=220|height=200]

 

You'll probably be thinking by now how the code looks like, the rounded rectangle has suffered many transformations, surely that requires a fair amount of code, right?

antialias 'on'
rect( x: 20, y: 20, width: 180, height: 160,
arcWidth: 50, arcHeight: 50, borderColor: false ){
linearGradient {
stop( offset: 0.5, color: 'white' )
stop( offset: 1, color: 'blue' )
}
filters( offset: 50 ){
weave()
kaleidoscope( sides: 4 )
shapeBurst( merge: true, type: 'circle up' )
lights(){
ambientLight( color: color('lime').rgb(),
centreX: 0, centreY: 0 )
}
}
}

Short and to the point, notice that all of Jerry's filters use colors in compact mode, meaning that a 32 bit integer is enough to represent the color data. The Color class has a method named getRGB() that will give you that value, but when used with Groovy's property access it yields an ugly property like rGB, that is why GraphicsBuilder has enhanced the Color class with an rgb() method, an alias after all.

CA App Experience Analytics, a whole new level of visibility. Learn more. Brought to you in partnership with CA Technologies.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}