sexta-feira, 23 de janeiro de 2015

Exporting JavaFX application as an animated GIF

To try to export an animation from a JavaFX app to an animated GIF, I started on this thread in StackOverflow, then this class from Eliot Kroo, which I am sharing on gist in case his site goes down.

Right now I am going to try his class on a JavaFX application and I will share the results here.

A sample animation

This is the animation I generated using my code :




The source for this animation is here:



Based on Eliot's class, I created one which will take an amount of screenshots based on the given period and write an animated GIF on the given path(well, right now I didn't create the source yet, hope I will be able to make it work):



This code have no great performance since the snapshot method is not "performatic". If we set a small period to collect the GIF's frames, we will face slowness.
That's all, folks! Now you can use the above code in your application to export GIT animations from your JavaFX applications!

quarta-feira, 21 de janeiro de 2015

Stacker Game in JavaFX

In this post I am going to share with you this simple game I created using JavaFX.

The Stacker game


The goal of the game is to reach the top by stacking rectangles. This is a well known game where when you reach the top you earn some gifts. Here is a video I took from youtube of someone playing this game:


Our game is a little different. We will will only stack 1 rectangle, but the rectangle can be adjacent of the below rect, not exactly on top of it. The number of rectangles to fill will be increasing according to the level and also the speed.

The game in Processing

The game was previously created in Processing, but most of the code I could reuse in the JavaFX version! You can find the source for the processing version in my github.


Stacker


Creating games with JavaFX


JavaFX was always a platform for games since its 1.0 version. I remember we even had a blog specific for JavaFX script games. Since the end of JavaFX Script and with JavaFX 2, we have some samples that might be downloaded in Oracle's site.
To get start with games on JavaFX I recommend this series of posts by Carl Dea.
JavaFX have all resources we need to create games: animations, resources to detect collision, special effects, play sounds, etc...

Our stacker game implementation


The game is basically based on update a boolean matrix and read it to create a visual representation. When the user click on the game, we make a loop in the matrix to see if the block in the previous line  is true or if the block in the current line is adjacent to the block in the previous line.
The two important classes in our program is the Game Engine and the game itself. The game engine is responsible to make the game alive, because it will make the game update the screen on a given frequency and make it draw itself.
The game is responsible to draw and update the scenario according to time and user's input. Here is the code of these two classes:

There are classes that does nothing. We need to create a concrete class, so we did, we created the StackerGame  class. It contains the matrix that represents the game and will draw the grid and the rectangles according to the time, level and user's input.
The logic of the game is basically move a boolean in the matrix and fix it when the user clicks. If the user click was done when the rectangle had a block below it or adjacent, the game will continue, if not, we will call game over and when the user click again, the game will start from beginning. Note that the score is higher when the user makes a perfect stack and lower when the user stack using an adjacent block.  The game is drawn in a canvas, which is easier to control in our case(we are coming from Processing!).
Notice that we expose some variable using javaFX properties. These properties are used in our main application to display the score, level and eventually the game over label. See the all the code of these two classes:


Here is the game in action:


Possible Improvements


Unfortunately the game has no sounds and the effects are poor. Also, if the user reach the level 20, the game will bug! So, the possible improvements are:

* Improve the look of the game;
* Add sounds;
* Handle the end of the game event.

Conclusion


It was a simple demonstration of a game using JavaFX. As usual, it was done for fun, in a few hours... Don't judge possible bad code... The source is in my github.

JavaFX is fun, is enterprise, is good for game programming, for data visualizations, for learning Java...

quarta-feira, 7 de janeiro de 2015

My experience with Processing programming language (and JavaFX X Processing)

Processing is the main language used to create Arduino code. It is also a great language to create visual applications. In this post I am going to share you some processing sketches I created and the way to follow if you are looking to have fun with this great programming language based in Java.

Having fun with processing


Simplicity is the word for processing. You can sit, open the IDE, have some random idea and in a few minutes you will implement it. Here are some random fun stuff I created in a few minutes

Spiral

As a first test with angular motion, I created a sketch to draw lines which when connected create a spiral:

TV out of tune


To experiment the noise function, a sketch using this function was to simulate an old TV of tune effect:



"The Thing"

Angular motion is always exciting. In this example I created a class called TheThing, which makes use of angular motion. I won't post all the code here, but you can see in my github.



Particle generation


I already made tests with particle generation using HTML 5 at this blog, but it was really simpler to create one with Processing:



I have a lot of other sketches, but I didn't added to github yet. Here is the code of the sketches above:



Where you can find inspiration and more information?

That is an interesting question. I am watching Processing videos on Vimeo and reading two books. It all started when my teacher twitter about Shiffman's videos. I felt in love with the Nature of Code video series and I watched almost all videos and now I decided to play with it and make the Nature of Code's exercises. The material I have about processing are:


So, what Processing is useful for?

In my opinion, Processing is great for creating visualizations and to learn programming. Yeah, learn how to program. Here's why:

  • Unlike Python, Processing syntax is close to Java and C, two of most used programming languages in the world. It makes  easier for beginners to jump to a language more used in the market;
  • Processing is cool and at first steps, the beginners will be creating useful and exciting sketches;
  • There's great and didactic material for teachers. For example, Shiffman put some slides in the Learning Processing book's page;
  • In a course, the same language can be used also in Arduino, so the students won't have difficult applying their processing knowledge when studying Hardware or IoT;
  • Not convinced yet? Watch the Hour of Code video for processing.
But of course, processing goes beyond teaching. With processing you can:
  • Create artistic and beautiful visualization of data, or no data. For example, see this tumblr, where the author is creating 1 sketch per day during one year;
  • Processing is built on top of Java, which means that it should possible to use existing Java libraries (I never tested, but I used other classes from JavaSE on it);
  • Processing is flexible and can be ported to run on Web pages as javascript and/or Android devices!

The weak points of Processing

I understand processing is used mainly to draw and create visualization, so I think it is so hard to create UI elements such as buttons, labels, etc. I also found the text functionalities so poor, but perhaps I am not so familiar with it.

Processing X JavaFX

No, I will not "abandon" JavaFX. In fact, I check processing sources to see if it could be possible to port Processing to run inside a JavaFX app, but it makes high use of the "old" Java graphical stack (Java2d and AWT). In any case, I plan to reuse a game I created inside a JavaFX application using Canvas.
I generally prefer JavaFX for visual applications because it has a rich UI library and built-in features to create animations, but when I want to create visualizations, I should use processing.
In fact, in a future post I plan to share my experiences when migrating a game from processing to run inside a JavaFX app.
http://cdn.sandsmedia.com/ps/onlineartikel/pspic/picture_file/65/toedter_ab4f8abeee9b4f8.png
JavaFX Ensemble application is a great tool to explore JavaFX feature


Conclusion

Processing is a great tool to create visualizations. It is simply and easy to learn. Java programmers automatically know Processing!

On my next post I will try to describe a simple and silly game I created for fun and after this I will try to reuse the processing code to run this game inside a JavaFX app.