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 (i<5) {10} else if(i>5) {-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 },
        ]
    }
}

2 Responses to “JavaFX Coverflow Part 2”

  1. wyz writes:

    Hi, thanks for your example. I was planing to do the same thing. Actually it is possible to chain effects in Java FX, since there is one attribute named input of Effect, for example, you can use

    PerspectiveTransform
    {
    input: Reflection { topOffset:0.0 topOpacity:0.30}
    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)
    }

    instead.

  2. Recent Links Tagged With "coverflow" - JabberTags writes:

    [...] Feature Request: Coverflow for Contacts on the iPhone Saved by sykmyn on Wed 01-10-2008 JavaFX Coverflow Part 2 Saved by lewiscb on Wed 01-10-2008 Lukas: Local.ch Coverflow Clone goes open source Saved by [...]

Leave a Reply