HTML5 Particle Editor

Write in front

Before reading this article, you can read a Miloyip: Use JavaScript to play the game Physics (a) kinematics simulation and particle system, read this article after reading, it is easier to understand.

The particles used by Miloyip are the circles drawn in the canvas, and some of the particle effects are based on pixel levels, such as flame characters, but the cost of using pixels is too high, because the number of particles required is too large, even with some nosie algorithms, such as (Perlin Nosie), the computational amount is too high.

Therefore, the general design of the particle texture (each texture is assumed to be 32*32, a particle contains more than 900 pixels), so that the number of particles required, the amount of computation is not large, the cost of managing particles is not high (the particle additions and deletions).

Canvas Globalcompositeoperation

When is the particle system the most beautiful? At night! So when you draw the texture, you need to set the value of globalcompositeoperation to lighter. The effect is: where the graphics overlap, the color is determined by the addition of two color values.

Globalcompositeoperation also has a lot of properties to set, see details: W3school.

Particle systems

The essence of particle systems is actually the process of particles from launch to disappearance. So, you can immediately think of some configuration items:

1. Launch speed (speed, direction, angle range of each particle)

2. Launch area (point emission, or in a certain area)

3. Gravitational field (whether you are launching on the moon or on earth, or weightless state of space)

4. Particle texture (Whether you're emitting a laser, a pentagram, or a smoke)

5. Texture filter (laser is red or blue)

6. Transmit frequency (you are fired once a second, or 100 times a second)

Changes in each parameter can result in a different rendering effect.

Mathematics and Physics

For example, the independence of the movement direction, 2-dimensional space can use new Vector2 to describe the speed, the speed is divided into the x and Y direction, 1 for the x-axis direction of the speed, 2 for the y-axis direction of the speed

Similarly, the gravitational field can be unpacked into two directions. such as New Vector2 (0,0.98), 0 for the x-axis direction of the speed, 0.98 for the y-axis direction of the speed

Simple integral idea: (for example: speed is the accumulation of acceleration in time, the distance is the accumulation of speed in time and so on).

Of course, it sounds like calculus can be written in the particle system, but in fact, calculus is no longer in the program, because the program/game inside the core loop,loop inside the thing is the integral ... Like what:

function () {this.    velocity.add (this. acceleration);    this. Position.add (this. velocity.multiply (0.1));    this. rotatingspeed+=. rotatingacceleration;     This this. rotatingspeed;     This this. hidespeed;}

So with this thought on the line, there is no need to be calculus = =!

Canvas UI Widgets

All the controls in the entire editor are written in canvas and feel like three words: simple, rude, direct. It is also very convenient to use. For example, the following controls control the emission range, particle, direction:

Code to use the control:

var dirctrl=new PE. Circleadjust ({    min: 0,    max:    ten    , Rotation: -30, Value: ANGLERANGE:50,    function (value, angle) {        ps.setangle (angle);        Ps.setspeed (value);    },    renderTo:document.getElementById ("Emitanglectrl")});

Of course, this is not a negative dom write control, but, sometimes, canvas writing UI is more advantageous. There are also scenarios where DOM write controls cannot be implemented. (such as global filter effects, wave effects, etc., which are related to pixels, the DOM is relatively weak)

Other

The particle editor also uses some HTML5 features such as drag-and-drop, FileReader, and blob download. For example, a BLOB-based wrapper has a tool function for downloading files:

util.downloadfile=function(code, fileName) {    if (window. Url.createobjecturl) {        var fileparts = [code];        var New Blob (Fileparts, {            "Text/plain"        });        var dnlnk = window. Url.createobjecturl (BB);        var dllink = document.createelement ("a");        Dllink.setattribute ("href", dnlnk);        Dllink.setattribute ("Download", fileName);        Dllink.click ();    }}

Portal

demo:http://alloyteam.github.io/particleeditor/

Github:https://github.com/alloyteam/particleeditor

PS: Editor using quiz: Can you use the Demo particle editor to achieve the following penguin effect? :)

HTML5 Particle Editor