Joshua has posted his second doodle (he noticed the first Groodle thanks for the kind words!) so here goes my attempt for Groodle #2.

Reducing doodle #2 to its basic concepts reveals it is a custom shape (actually a rounded rectangle and a triangle mixed together) and some animations on its properties. Joshua uses a red rectangle to trigger animations over and over again. A couple of screenshots of groodle #2 first, for your viewing pleasure



I tweaked my version a bit to display a star instead of a rectangle, it also changes color when the mouse hovers on it and when you click it; the same TabRect shape is used to display the balloon popup.

Let's browse to the code step by step. First we will create a custom shape (as explained before here), let's recap:

In order to create a custom shape you may extend AbstractShapeGraphicsOperation, you'll get many things for free.

Following that advice yields this snippet
import groovy.swing.j2d.operations.shapes.AbstractShapeGraphicsOperation import java.awt.Shape import groovy.swing.j2d.* import java.beans.PropertyChangeEvent import groovy.swing.SwingBuilder class TabRect extends AbstractShapeGraphicsOperation { // mark the following properties as observable static required = ['x','y','width','height','tabSize','arc'] def x = 0 def y = 0 def width = 100 def height = 50 def tabSize = 10 def arc = 10 private path def gb TabRect(){ super('tabRect') // the following properties are common to all shapes // fill = 'red' borderColor = 'black' borderWidth = 3 } // called whenever a property of this shape changes value protected void localPropertyChange( PropertyChangeEvent event ){ super.localPropertyChange( event ) path = null } // called to obtain a shape when needed public Shape getShape( GraphicsContext context ) { if( path == null ){ calculatePath() } path.getShape(context) } private void calculatePath( GraphicsContext context ){ // create gb if it has not been set if( !gb ) gb = new GraphicsBuilder() // groodle #2 is actually a rounded rectangle + triangle path = gb.add { rect( x : x, y : y, width:width, height:height, arcWidth: arc, arcHeight: arc ) triangle( x: x+(width/2)-tabSize*1.5, y: y+height+tabSize, width: tabSize*3, height: tabSize*1.5, angle: 180, rotateAtCenter: true ) } } }
The previous custom shape example used Area operations directly, this time I chose to use GraphicsBuilder's nodes to build the mixed shape. This means that tabRect requires a GraphicsBuilder instance, which can be set as a property (non-observable). The other properties are (hopefully) self-explanatory if you follow Doodle #2 and previous postings on GraphicsBuilder. The next section of code will deal with registering the custom shape with GraphicsBuilder and registering aliases for some properties
def gb = new GraphicsBuilder() gb.registerGraphicsOperationBeanFactory( 'tabRect', TabRect ) // aliases are not automatically registered (yet) ['width':'w','height':'h','fill':'f', 'borderColor':'bc','borderWidth':'bw','opacity':'o'].each { prop, alias -> gb.addShortcut( 'tabRect', prop, alias ) }
Unfortunately as the commented code states, aliases are rather new, there is no metadata support (yet) to register them automatically. I hope to fill that gap soon. As you can see it is quite easy to register a new shape with GraphicsBuilder. Now on to the animation code it is, first I'll show you the definition of the animated shape. As Joshua noted, the animation syntax in JavaFX is shorter than the one found in GraphicsBuilder, perhaps it can be improved...tabRect(gb:gb,x:20,y:20, tabSize:animate(0..10, duration:300, start:no,id:'at',startDelay:1000), height: animate(0..100,duration:1000,start:no,id:'ah'), arc: animate(0..10, duration:1000,start:no,id:'aa'), opacity:animate(0f..1f,duration:1000,start:no,id:'o') ){ // let's use a multipaint to fill the shape multiPaint { // base color colorPaint( 'blue' ) // highlights linearGradient( x2: 0, y2:50 ){ stop( s: 0, c: color('white').derive(a:0.75) ) stop( s: 0.66, c: color('white').derive(a:0) ) } } }
Here you can see the first improvement over Doodle #2, as instead of going with a flat color fill I chose to use a multiPaint composed of a base blue color and a nice white based gradient that fades away. Notice that colors can be derived and that the derive operation supports aliases too (a stands for alpha). The id property of each animation is needed to later reference them in the code that will trigger them. Next is the white balloon with blue text
// this group is the ballon popup group( o: 0, id: 'popup', f: 'blue', bc: no ){ tabRect(gb:gb, x:140, y: 40, w: 80, h: 60, f: 'white', bw: 2 ) font( size: 20, style: 'bold' ) text( x: 158, y: 50, text: 'Click' ) text( x: 164, y: 70, text: 'me!' ) }
Both text operations share the same font because it was set at the group level. I set the opacity (aliased to o) of the whole group to zero, so that it will popup when you hover on the star. The following snippet shows the popup and animation trigger
def normal = color('red') def highlight = color('white') def pressed = color('green') // animation trigger star( cx: 180, cy: 130, f: normal, or: 15, ir: 8, id: 'star', mousePressed: {e -> star.fill = pressed at.restart() ah.restart() aa.restart() o.restart() }, mouseReleased: {e-> star.fill = highlight}, mouseEntered: {e-> star.fill = highlight popup.opacity = 1 }, mouseExited: {e-> star.fill = normal popup.opacity = 0 })
It is really quite simple, but one thing I do not like is having to restart each animation by itself when in this case all of them are bound to the same shape, perhaps this can also be improved somehow. To get groodle #2 running you will need to wrap the 3 snippets in a single group and set it into a GraphicsPanel, something like
// insert TabRect definition // insert TabRect registration with GraphicsBuilder def go = { // insert snippet 1 // insert snippet 2 // insert snippet 3 } def swing = SwingBuilder.build { frame( title: 'Groodle #2', size: [240,200], location: [100,100], show: true ){ panel( new GraphicsPanel(), graphicsOperation: go ) } }
Sweet!. Groodle #2 serves as a good example of what you can do to create your own shapes and also points out some areas for improvement.

Keep on Groovying!

Update: be aware that Groodle #1 & Groodle #2 require GraphicsBuilder 0.5-SNAPSHOT due to some new features and bug fixes.