introduction

A trial on making particles effects online by yourself.

Results turn out to be that a lot of work should be taken if we want a complete online particle editor

Conclusion is that you'd better choose a specific particle effect and enable it to modulate parameters, rather than build a catch-all system.

start to try it

run following commandline

 npm install
 sudo clam on

visit localhost/2d.html for 2d editor

visit localhost/3d.html for 3d editor

2d editor

Try to make a fire text!

1. First of all, fix the width and height of canvas (on the top of the tool panel)

2. Our particle system is based on layers, check the layer panel ,and create a layer as follows:

3. Focus on the color panel, and then modulate the parameters as follows:

these settings restrict the color of the particle to specifc range, namely rgba(252, 255, 34) to rgba(249, 111, 55, 0.84)

4. Choose the emit action to "area emit", then upload an PNG picture which draw a five in center and background is transparent

Now if you preview the effect, it should be like this:

5. Since the fire is lack of dynamics, we can add air force to make it more real. Do the settings now:

Then, it looks better!

3d editor

0. Do the same thing as 2d editor to fix the canvas and create a layer

1. Choose the colorful particles, at default, it will show view as follows.

2. Choose emit area to person, well, the effect makes sense now.

3. Adjust the position of the figure, and add another figure to this scence by creating a new layer.

Looks awesome!