JavaFX Coverflow Part 2

Continuing with our previous example, we now create a CustomNode Coverflows, which contain 11 covers.

A new function called positiveOrZero is introduced so that the tilt angle can be negative.
A fill attribute is introduced to the Cover class and it is bound to the Rectangle.

/**
 * Coverflow.fx
 **/
package coverflow;

import javafx.application.*;
import javafx.animation.*;
import javafx.input.*;
import javafx.scene.geometry.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import java.util.Random;

var rnd : Random = new Random();

class Cover extends CustomNode
{
  attribute height:Number = 100;
  attribute width:Number  = 100;
  attribute angle:Number  =  10; /* 0 to 10 */
  attribute fill:Color    = Color.WHITE;

  function positiveOrZero(v:Number):Number
  {
    if (v > 0) { return v; } else { return 0; }
  }

  function create():Node
  {
    this.opacity = 0.1;
    return
      Group
      {
        content:
        [
          Rectangle
          {
            width: 100 height: height x: 0 y: 0
            fill: this.fill;
            effect: Reflection { topOffset:0.0 topOpacity:0.30},
          },
        ]
        effect:
          PerspectiveTransform
          {
            llx: bind translateX+0.0    lly: bind translateY+height*2 - positiveOrZero(-angle)
            lrx: bind translateX+width  lry: bind translateY+height*2 - positiveOrZero(angle)
            ulx: bind translateX+0.0    uly: bind translateY          + positiveOrZero(-angle)
            urx: bind translateX+width  ury: bind translateY          + positiveOrZero(angle)
          }
      }
  }
}

class Covers extends CustomNode
{
  attribute covers:Cover[] =
    for (i in [0..10])
      Cover {
        translateX: if (i==5) {125+i*25} else if (i>5) {150+i*25} else {100+i*25}
        translateY: bind this.translateY
        angle: if (i5) {-10} else 0
        fill: Color.rgb(rnd.nextInt(255), rnd.nextInt(255), rnd.nextInt(255))
      }; 

  function create():Node
  {
    this.covers[5].opacity = 1.0;
    return
      Group
      {
          content: covers;
      }
  }
}

Frame
{
    visible: true
    title: "Coverflow Part 2"
    closeAction: function() { java.lang.System.exit(0); }
    width: 800 height: 300
    stage: Stage
    {
        fill: Color.BLACK
        content:
        [
            Covers { translateY: 20 },
        ]
    }
}

About this entry