Thursday Aug 23, 2007

FX animations contd - A rudimentary screensaver

I was little off the hook with FX for a week now since Consumer JRE has taken up most of my time. As stated in Chet's blog, there is so much of cool stuff lined up for the Java community through consumer JRE and catch a glimpse of it when you get time.

Coming back to FX, I wanted to spend some time on Groups which can be considered as a non-visual container that offers the capability of combining multiple visual objects together and performing various transformations on the group as a whole. Groups by default introduces a new coordinate system and graphical objects assigned to the group are placed with respect to the group's origin.

The flexibility and convenience that the group offers to FX programmers is significant in my view and the ability to treat multiple objects as one and being able to perform operations/transformations on the group of objects as a whole is simply awesome. Groups directly exposes one of the primary advantages of the underlying scenegraph model, to the FX developer.

As I stated in one of my earlier postings, one of my other goals was to use pure FX animation loops in lieu of Swing Timer. But I was little short of ideas when it came to developing a small demo. Sitting in front of my machine, I was thinking for a while and fortunately it was long enough to trigger the screensaver on my linux box that broke my desktop into pieces. That gave me the necessary jolt to overcome the inertia and I came up with a small screensaver kind of application.

I still call it rudimentary because it is nowhere near the original screensaver that triggered it but nevertheless, it was a good starting point for me.

FX ScreenSaver

In this application, I am rotating and zooming various geometric objects individually and as a group as well. In addition to that, I am also trying animate multiple rectangles on the screen which would show the contents of the desktop right below it. All the objects would zoom out and zoom in repeatedly.

Click on the image to launch it. You would need JDK5+. While the screensaver is running, click on it to alternate between 'Transforming individual objects' vs 'Transforming a group'. You will see the difference pretty clearly. Right click on the screensaver to exit.

FX ScreenSaver

 
This animation is using Pure FX animation loops. It was little hard to get the synchronization right for zoom in/zoom out. Zooming should reverse only when all the objects reach the min/Max possible size and I am also changing the rotation angle at the same time alongwith opacity.

Take a look at the script -

screensaver.fx

Clipping 

I have slightly modified the screensaver demo given above to set the clipping region to the union of 4 different shapes shown in the screenshot, keeping the background intact. FX provides Clip class to this. I have defined the 'shape' attribute of the Clip class to be the union of 4 different shapes. Additions, Intersections, Subtractions, Xor of shapes can be achieved through built-in subclasses of Area - Add, Subtract, Intersect and XOR. That's pretty straight-forwrd. However, I am not clear why the commented part of the code inside the Clip construct in the source is not working?!!. That should ideally do the same what the uncommented piece of code does.

(Click on the screenshot to launch the application. You would need jdk5+. Click the mouse to exit)

Screenshot

Source Script -

clipping.fx

I am going to take a small break (perhaps a week!) from FX to get back to Consumer JRE. Stay Tuned ...   

Monday Aug 13, 2007

FX animations - Capture the falling objects

As a continuation of my learning process, I wanted to find out What would it take to write a blocks game in FX.  Though I have not made the progress that I promised on using the FX animation loops in lieu of Swing Timer, I made little progress over capturing keyboard interactions from the user using 'onKeyDown' of the Canvas and 'KeyboardAction'. In general, it was simple & straightforward to just associate a keystroke with an operation using the KeyboardAction, for any FX widget and there are enumerated values for most of the keystrokes. The same values could be used in the 'mnemonic' attribute as well.

But some mnemonics doesn't seem to work for me. For ex, I want to use ESCAPE as a mnemonic for a 'cancel' button in a dialog whose action would be close the dialog. I am still not successful in getting this work. I need to find out if ESC keystroke is getting consumed by the top-level or by the native.

FX Blocks 

Here is a small game where objects keep falling from the top and the player has to move the cup at the bottom using keyboard/mouse capture those objects. You can configure the size of the object and the speed with which the objects reach the bottom.

(Click on the image to launch the game. You would need jdk6+) 

FX Blocks

FX Blocks Script

Next I would like to go into transformations & clipping of individual objects and groups as a whole.. Stay tuned.
 

Wednesday Aug 08, 2007

Animation through FX and Java

With reference to what I have said in my earlier posting, I have made little progress over doing animations using FX syntax. I have tried this with another app before actually changing the PingPong code. Here also, I initially started with a Swing Timer but later replaced it with the FX's animation syntax - '[..] dur xx linear' and I have created a trigger for the above property that keeps changing at regular intervals.

Bouncing Balls (Click on it to launch)

(Click the left mouse button to add more balls and Click the right mouse button to quit)


 
Here is the script that use the Swing Timer

BouncingBalls.fx

I will have to tune the performance since the app slows down when I add more balls. Perhaps, I need to see if I can use different threads one for each ball, to animate it or I will have to increase the delta by which the balls move.

Bouncing Balls using FX animation loop (Click on it to launch)

(Click the left mouse button to add more balls and Click the right mouse button to quit)

Bouncing Balls using FX animation loop

Here is the script that use FX animation loop

FXBouncingBalls.fx

It is pretty simple indeed but one has to get the values right inside the FX animation syntax to get notification at correct intervals - especially the distribution of range of values over the given duration.

Tuesday Aug 07, 2007

Learning JavaFX? Join me..

JavaFX has been creating lot of buzz since JavaOne'2007 and I could not overcome the temptation to try it out myself and see how it brings down the complexity of developing Rich UI contents. I have been into the Quality side of Java2D/AWT area for quite sometime and my goal is to see how easy it is to develop some cool 2D graphics and animations in FX.  I am pretty much impressed with my first interaction with JavaFX.

I am still in the process of learning JavaFX and my Java knowledge hampers the learning process a bit. That's because JavaFX offers the flexibility of writing Java code and calling Java programs from within the FX script and I often tend to misuse that flexibility even in the places where FX offers much more easier ways of doing things than Java (primarily due to the declarative syntax for the UI). Due to this fact, I am getting more cautious now when I am about to write something in Java inside the FX script.

Nevertheless, it is good to share whatever I have developed so far -

PingPong

I had this game written in Java and I just wanted to port it to JavaFX. It was pretty easy in fact and I was able to do it in a few hours (That's actually good considering that I am just a newbie with FX syntax and semantics). But pardon me for some Java code that I have put in the script and I will be migrating them to FX as I climb up the FX ladder.

FX PingPong screenshot

 

I have used the Swing Timer class to do the animations to start with. I was really excited about the simplicity with which I can move the ball/bat, just by changing the x,y property and binding takes care of updating the UI.

Just try it yourself (You would need jdk6+. It might take a couple of minutes to load, the first time) -


Here is the script -

pingpong.fx

I am in the processing of writing few other apps in the 2D/Swing area and I swear it will have more FX stuff than Java. Stay Tuned !!

About

mohanpraveen

Search

Categories
Archives
« August 2007 »
SunMonTueWedThuFriSat
   
1
2
3
4
5
6
9
10
11
12
14
15
16
17
18
19
20
21
22
24
25
26
27
28
29
30
31
 
       
Today