JavaFX script - functional and procedural programming, and animation

Functional programming and procedural programming often provide different views of the same thing. When I declare a mathematical function, such as

   y = 2x

I may think of this as a procedure (sequential process): "Give me something, I'll double it, and then I'll give it back to you". However, I may also think of it as simply an expression of unchanging state: for example as an infinite line on a graph, without regard to any real process that may produce it.

In natural language, and in the language of the mind it's clear that both conceptualizations are useful and constantly used.

In JavaFX script, functional relationships may be expressed using the bind operator. Meanwhile, procedural code may sequentially change the values of the independent variables of such expressions over time and the system will automatically maintain those relationships.

Both procedural state changes and functional relationships derived from them are conceptually "instantaneous".

By contrast, "animation" describes what we perceive to be continuous state changes over time.

Any JavaFX script variable may be "animated" - not just those that represent properties of actual visual elements. Animating a variable amounts to assigning a new value to it "often enough" to create the perception of continuous change. For smooth animation of graphics "often enough" means at the refresh rate of your display (60 times per second for a typical LCD display).

Although possible, it would be quite onerous to specify each discrete change for each variable procedurally at each time step, and equally onerous to attempt to specify every variable as a function of time.

Fortunately, traditional animators invented an easier system, which has been adopted in computer animation. The animator (or programmer in the case of JavaFX script) specifies only the "key" states of a variable at various points along the time dimension, and provides an interpolation function to automatically compute the "in-between" states.

Although an animation can target any JavaFX script variable, it isn't necessary for the animation itself to directly modify all the variables it may affect. Instead, the programmer can place bindings and triggers on the variables targeted by the animation, which express additional effects.

So, for example, if I wanted to have a rectangle whose height was twice its width and whose size was animated over one second I could write something like this:

    var width: Number;  // animation target
    var height = bind width \* 2; // height has functional dependency on width

    var t = Timeline {
        keyFrames:   // list of key states
        [KeyFrame {
            time: 0s
            values: width => 100 // width is 100 at zero seconds
        },
        KeyFrame {
            time: 1s
            values: width => 200 tween LINEAR  // width is 200 at one second (and linearly interpolated in between)
        }]
    }

    t.play(); // procedurally start the animation
Although the code only animates the width variable, the height variable is also animated as a side effect of its functional dependency.

You've probably noticed there's no actual rectangle here. That's intentional. I can connect a visual rectangle to this logic separately in a decoupled way using additional functional dependencies:


   Rectangle {
       height: bind height
       width: bind width
       fill: BLUE
   }

Throwing that onto a Stage/Scene would give me graphical animation of a blue rectangle.
Comments:

Do you think binding to and from POJOs will ever be done with JavaFX? I have a large set of Java business objects and would like to add a GUI on top of it. Problem is that I can't change all those classes to fire property change events. Since JavaFX is already providing reactive programming, would it be also possible to extend this to POJOs? Basically most of us have getters and setters. If JavaFX could somehow transparently wrap these Java objects, then it would be great.

Posted by guest on December 12, 2008 at 05:57 AM PST #

http://www.Sohbetizm.Net
thnkS. see you. very good blog.

Posted by çet on May 17, 2009 at 09:23 PM PDT #

http://www.smsmatbaa.com

Posted by matbaa on June 22, 2009 at 02:56 AM PDT #

Simple and Nice example !

Posted by شات on December 15, 2010 at 03:46 AM PST #

Post a Comment:
  • HTML Syntax: NOT allowed
About

user12610627

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today