« Extending Griffon with plugins | Main | Grails: Bootstrapping data with DomainBuilder »

Groovy Coffee Cup

Posted by: Andres Almiray on 12/14/2008

Following a recent tutorial about drawing a Coffee Cup with JavaFX I present you with the Groovy version

Transforming the JavaFX version into Groovy was, for most of it, pretty straight forward though some issues were found along the way, first let me show you the code as it currently looks

antialias on
background( 'black' )

group( id: 'plategroup', bc: 'none' ) {
  // gray ellipse under the plate
  ellipse( cx: 0, cy: 10, rx: 160, ry: 50, f: color('darkGray').brighter() )
  
  // thin 'lip' of the plate (provides a sense of 3D)
  ellipse( cx: 0, cy: 3, rx: 170, ry: 50, f: 'lavender' )
  
  // large plate
  ellipse( cx: 0, cy: 0, rx: 170, ry: 50 ) {
    radialGradient( cx: 1, cy: 1, fy: 100, r: 270 ) {
      stop( c: 'whiteSmoke', s: 0 )
      stop( c: 'lightGray',  s: 0.5 )
      stop( c: 'darkGray',   s: 1 )
    }
  }
  
  // recessed plate center
  ellipse( cx: 0, cy: 5, rx: 90, ry: 22 ) {
    radialGradient( cx: 1, cy: 1, fy: 20, r: 180 ) {
      stop( c: 'black', s: 0 )
      stop( c: 'lightGray', s: 0.4 )
      stop( c: color('white').darker(), s: 1 )
    }
  }
  
  transformations {
    translate( x: 250, y: 300 )
  }
}

group( id: 'cupgroup', bc: 'none' ) {
  subtract( id: 'cup', asShape: yes ) {
    circle( cx: 100, cy: 100, r: 50 ) 
    rect( x: 25, y:50, w: 150, h: 50 ) 
  }
  draw( cup, keepTrans: yes ) {
    radialGradient( cx: 0.4, cy: 0,  r: 100 ) {
      stop( c: 'whiteSmoke', s: 0 )
      stop( c: color('whiteSmoke').darker(), s: 1 )
    }
  }
  
  // outer rim
  ellipse( cx: 100, cy: 100, rx: 50, ry: 8, f: 'white' )
  
  // inner rim
  ellipse( cx: 100, cy: 100, rx: 48, ry: 7, id: 'innerRim' ) {
    linearGradient( y2: 1 ){
      stop( c: 'whiteSmoke', s: 0 )
      stop( c: color('whiteSmoke').darker(), s: 1 )
    }
  }
  
  intersect( f: color('darkOrange').darker().darker() ) {
    shape( innerRim )
    ellipse( cx: 100, cy: 102, rx: 46, ry: 6 )
  }

transformations {
    scale( x: 3, y: 4 )
    translate( x: -16, y: -70 )
  }
}

transformations {
  translate( x: -50, y: -50 )
}

In case you're seeing GraphicsBuilder code for the first time know that I made use of property aliases, which means that fill can be set as f, color as c an so on. Alright, let's visit those gotchas

line 13: radialGradient requires a radius as it doesn't infer it from its host, it also does not follows the shape of its host (as it is the case on JavaFX), this means that it will always have a circular profile.
lines 35-44: decided to improve the way the cup shape is created by using an intersect operation, problem is that the resulting shape didn't accept a nested paint node, that is why I had to save it as shape an then draw it again. When a shape is drawn this way it looses all local transformations, that is why a keepTrans property had to be set to true. While powerful the usage of draw is not intuitive.
line 57-60: this is not exactly a problem but a plus, as the innerRim shape is reused to create a composite shape based on an intersect operation.
lines 62-66: a local transformation is applied to the cup group, negative translation coordinates had to be specified given the relationship with the scale transformations, in other words, scaling is done at world coordinates, not local coordinates.

I'll take care of these issues with the next version of GraphicsBuilder, stay tuned!
Keep on Groovying!

Andres Almiray's complete blog can be found at: http://jroller.com/aalmiray

About Andres Almiray

Andres is a Java/Groovy developer and Java Champion, with more than 11 years of experience in software design and development. He has been involved in web and desktop application developments since the early days of Java. He has also been teacher of computer science courses in the most prestigious education institute in Mexico. His current interests include Groovy and Swing. He is a true believer of open source and has participated in popular projects like Groovy, Griffon, JMatter and DbUnit, as well as starting his own projects (Json-lib, EZMorph, GraphicsBuilder, JideBuilder). Founding member and current project lead of the Griffon framework. He blogs periodically at http://jroller.com/aalmiray. You can find him on twitter too as @aalmiray. He likes to spend time with his beloved wife, Ixchel, when not hacking around.

More About Andres »