Playing with HTML 5 Canvas: A particle generator

Unfortunately my original site is broken and I lost my app - you can check this post from Daniel Shiffman instead

I know this is a blog that was supposed to have JavaFX stuff, but I'm playing with HTML 5 last days due a book I bought in Amazon :).

It's been cool to play with HTML 5, and JavaScript, but after reading and creating some things with it, I realized that I like JavaFX for graphical things, because it has a lot of built in special effects and transitions. Also in JavaFX the view components can be directly handled, with no needs to get it from HTML.

What I'll show in this post is a simple particle generator which was inspired in Lucas Jordan's book JavaFX Special Effects. In charpter 2 of this book some particles systems are presented.

The code of the particle generator I created could be much better, I know that, but it was a test and If I start to improve things and add new controls I would never finish it, so I decided to put a end on it. The app is in my site and you can enjoy it. Click to see the source and all the javascript and CSS are in this single page!

The main challenge while creating this out was create more particles and set a good time interval. To create more particle I created a for in the main loop, it is not performatic, if you set a big particle life and the number of particles, sure you will see that it will start to slow down.

Other problem was related to the color. I know we have the input type color in HTML 5 but it is working only in Opera, so I decided to use three(RGB) slides to set the particle color and another three for the background color. A criticism is related to the way of Javascript deal with colors, I know it accepts a lot of color formats (rgb, rgba, #000000), but I really miss a class for color.

In my opinion Canvas is cool, sure, but It's only a "rectangle on page to paint". Sure we will need some Javascript libraries (we do have some) to make easier ti handle canvas. I still believe that Flash is necessary for the Rich WEB (even with recent adobe announcements) and JavaFX is much valid for creating rich applications ( not necessary in WEB).