Skip to main content

bindings and sequences

10 replies [Last post]
kram
Offline
Joined: 2007-10-23

I am having a little play with JavaFX and I have a very basic setup where I want the user to click on the main rectangle, then have expanding circles appear. This I can do, but I want to remove the circles once their radius' reach a certain limit.

So I used the "delete" keyword to remove the instance from the array, but when I do this, no more circles ever get added to the main rectangle, when I remove the "delete" code it works well...

code:

<br />
var width = 400;<br />
var height = 250;</p>
<p>var nodesList:Node[] = [<br />
    Rectangle {<br />
        x: 0,<br />
        y: 0,<br />
        width: width,<br />
        height: height,<br />
        fill: Color.WHITE<br />
    }<br />
];</p>
<p>Frame {<br />
    title: "My Mouse Testing App"<br />
    width: width<br />
    height: height<br />
    closeAction: function() {<br />
        java.lang.System.exit( 0 );<br />
    }<br />
    visible: true</p>
<p>    stage: Stage {<br />
        content: [<br />
            Group {<br />
                content: bind nodesList;<br />
                onMouseClicked: function( e: MouseEvent ):Void {<br />
                    var newCircle = MyCircle {<br />
                        fill: Color.BLACK;<br />
                        centerX: e.getX();<br />
                        centerY: e.getY();<br />
                        radius: 1;<br />
                    };</p>
<p>                    java.lang.System.out.println("array size before: " + sizeof nodesList);<br />
                    insert newCircle into nodesList;<br />
                    newCircle.arrayIndex = sizeof nodesList - 1;<br />
                    java.lang.System.out.println("array size after: " + sizeof nodesList);<br />
                    java.lang.System.out.println(nodesList);<br />
                }<br />
            }<br />
        ]<br />
    }<br />
}</p>
<p>class MyCircle extends Circle {<br />
    attribute arrayIndex: Integer;</p>
<p>    attribute expandingRadiusTimeLine : Timeline = Timeline {<br />
        repeatCount: Timeline.INDEFINITE<br />
        keyFrames : [<br />
            KeyFrame {<br />
                time : 25ms,<br />
                action: function() {<br />
                    radius += 1;<br />
                    if (radius > 25) {<br />
                        //delete nodesList[arrayIndex];<br />
                    }<br />
                }<br />
            }<br />
        ]<br />
    }</p>
<p>    init {<br />
        expandingRadiusTimeLine.start();<br />
    }<br />
}<br />

as you can see, I have commented out the "delete" line, but when I leave it in, no clicks add circles to the rectangle anymore... please help anyone???

Thanks

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
kram
Offline
Joined: 2007-10-23

Ok, so I tried your example, and although it does technically work, it does not quite do what I was hoping for. I want the radius of the circle to "grow", not just "instantly expand" after the 625ms. Am I missing something here?

michael_heinrichs
Offline
Joined: 2007-11-15

Are you using the preview-release of the SDK? In that case you have to set the interpolation to be linear. (This was fixed recently, so in more current builds linear is the default interpolation. I totally forgot that. Sorry!)

Please try this code:

[code]
values: radius => 26 tween Interpolator.LINEAR

[/code]

kram
Offline
Joined: 2007-10-23

Thanks Michael, that worked great!

kram
Offline
Joined: 2007-10-23

Ok, so I'll have a go at what your code says, could you (or someone) please correct me if I am wrong?

So the Timeline has 1 keyframe. This keyframe's [i]time[/i] property is set to: 25 * 25ms, which is a [b]Duration[/b] data type.

Does this translate (roughly) to, the keyframe will run 25 times, for 25 milliseconds each frame, which will set the radius to ... [i]something[/i]? This is the part I dont get... interpolation is confusing!

michael_heinrichs
Offline
Joined: 2007-11-15

Sorry, for answering so late. I was quite busy in the last couple of days.

I think your understanding of the classes Timeline and KeyFrame is not correct yet. So maybe the example becomes more obvious when I rewrite it:

[code]
var t: Timeline = Timeline {
keyFrames : [
KeyFrame { time : 0ms, values : radius => 1 }
KeyFrame { time : 625ms, values : radius => 26 }
]
}
[/code]

I removed the delete-function, because it is not needed to understand this script, and added another KeyFrame to the list. When the timeline is started, the first KeyFrame is executed immediately. It sets the radius to 1. The next KeyFrame will be after 625ms (25*25ms, remember? I hoped to make it more clear with that. Looks like I confused you even more. Sorry!).

In the second KeyFrame the target-value for radius is 26, which means that radius is interpolated between 1 at the start of the timeline and 26 after 625ms. (E.g. after half the time, radius will be 13 or 14.) The animation-runtime is doing that automatically, you just have to specify the start-point and the end-point of the animation, the rest is taken care of.

The first KeyFrame can be omitted in your example, because radius is already 1, when the animation starts.

Hope this makes more sense to you.

kram
Offline
Joined: 2007-10-23

That completly makes sense, thanks Michael, I will have a go at it tonight and i will add in the delete function too.

I will post back my results when I have had a try at it!

bigalvarado
Offline
Joined: 2008-07-29

You can also hide them instead of deleting them.

...
var newCircle = MyCircle {
fill: Color.BLACK;
centerX: e.getX();
centerY: e.getY();
radius: 1;
visible: radius<25
};
...

Maybe is not what you are looking for, but it's just an idea

kram
Offline
Joined: 2007-10-23

Thanks for the reply, but you are right, although this would work, its more of a work around I think.

michael_heinrichs
Offline
Joined: 2007-11-15

The timeline of your circle runs forever and it keeps deleting circles. You either have to stop it manually or you have to make sure, that it stops automatically after the circle was deleted.

For example you can set the repeatCount to 25 or rewrite the whole timeline like this:

[code]
attribute expandingRadiusTimeLine : Timeline = Timeline {
keyFrames : [
KeyFrame {
time : 25 * 25ms,
values : radius => 26,
action: function() {
delete nodesList[arrayIndex];
}
}
]
}
[/code]

kram
Offline
Joined: 2007-10-23

I see, so I'm trying to just figure out what your code change is doing, as I have not done too much with the timeline stuff yet, could you just explain a little bit?