Pular para o conteúdo principal

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).

Marcadores

Marcadores:

Comentários

  1. s@mara2 de dezembro de 2011 às 04:38

    It is so interesting ;)
    Very good post!

    ResponderExcluir
  2. дядя Олег13 de maio de 2016 às 12:37

    bkoken link :(

    ResponderExcluir
    Respostas
    1. William27 de junho de 2016 às 16:14

      Sorry, it is too old example. I recommend you to take a look at this post from Daniel Shiffman

      http://natureofcode.com/book/chapter-4-particle-systems/

      Excluir

Postar um comentário

Postagens mais visitadas deste blog

Dancing lights with Arduino - The idea

I have been having fun with Arduino these days! In this article I am going to show how did I use an electret mic with Arduino to create a Dancing Lights circuit. Dancing Lights   I used to be an eletronician before starting the IT college. I had my own electronics maintenance office to fix television, radios, etc. In my free time I used to create electronic projects to sell and I made a few "reais" selling a version of Dancing lights, but it was too limited: it simply animated lamps using a relay in the output of a 4017 CMOS IC. The circuit was a decimal counter  controlled by a 555. 4017 decimal counter. Source in the image When I met Arduino a few years ago, I was skeptical because I said: I can do this with IC, why should I use a microcontroller. I thought that Arduino was for kids. But now my pride is gone and I am having a lot of fun with Arduino :-) The implementation of Dancing Lights with Arduino uses an electret mic to capture the sound and light leds...
Postar um comentário
Leia mais

Simplest JavaFX ComboBox autocomplete

Based on this Brazilian community post , I've created a sample Combobox auto complete. What it basically does is: When user type with the combobox selected, it will work on a temporary string to store the typed text; Each key typed leads to the combobox to be showed and updated If backspace is type, we update the filter Each key typed shows the combo box items, when the combobox is hidden, the filter is cleaned and the tooltip is hidden:   The class code and a sample application is below. I also added the source to my personal github , sent me PR to improve it and there are a lot of things to improve, like space and accents support.
2 comentários
Leia mais

Genetic algorithms with Java

One of the most fascinating topics in computer science world is Artificial Intelligence . A subset of Artificial intelligence are the algorithms that were created inspired in the nature. In this group, we have Genetic Algorithms  (GA). Genetic Algorithms  To find out more about this topic I recommend the following MIT lecture and the Nature of Code book and videos created by Daniel Shiffman. Genetic Algorithms using Java After I remembered the basics about it, I wanted to practice, so I tried my own implementation, but I would have to write a lot of code to do what certainly others already did. So I started looking for Genetic Algorithm libraries and found Jenetics , which is a modern library that uses Java 8 concepts and APIs, and there's also JGAP . I decided to use Jenetics because the User Guide was so clear and it has no other dependency, but Java 8. The only thing I missed for Jenetics are more small examples like the ones I will show i...
Postar um comentário
Leia mais