Groovy Coffee Cup

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!

About Andres Almiray

Why Attend the NFJS Tour?

Current Topics:

NFJS, the Magazine