Implementing Fire effect about libcanvas HOT 5 CLOSED

There are three ways to do it:

• Use getImageData and change pixels in it, adding new values to it using Alpha Compositing and such formula:

  resultColor = oldColor_(1-transparency) + newColor_transparency

• Create new empty layer and render pixel data there

• Prerender frames to hidden buffer and then just render buffer as image

Last way is most effective looking at speed - pixel manipulations are slow enough

from libcanvas.

Thanks will try that!

I tried creating new layer, but that did not work, was doing something wrong.... The problem with layers is also current libcanvas api doesnt provide a way of removing then, and I need a dynamic number of layers, one for each 'vehicle' (a vehicle is a set of simple shapers with animations) on the canvas, as the number of vehicles is data driven...

Ended up calling createBuffer on main libcanvas, which creates a new html canvas, then redering the flame inside the new buffer canvas (using getImageData, putImageData) and draw the buffer canvas into the 'main' libcanvas to get the transparency working. That works, but I doubt its good in terms of performance. What do u think?

from libcanvas.

I mean prepender several frames once and then just draw them first-second-third-first-second-...
You should try to avoid pixel manipulations.

from libcanvas.

I got u. The 'problem' is the algorithm is random and each frame is populated based on the previous frame, thus u never end up creating a loop that would smoothly transition between the last and first frame in the buffer...

Lets say I wont prerender, what is the best way to render the fllame each frame?

from libcanvas.

The better way is to change algorithm and run in without many calls of putImageData, but you can use first way, described in comment above - it is most correct.

from libcanvas.