Step by step HTML5 particle editor and step by step html5 Particle

Step by step HTML5 particle editor and step by step html5 Particle
Preface

Before reading this article, you can read an article about MiloYip: using JavaScript to play with game Physics (I) Kinematics Simulation and particle system. After reading this article, you can read it more easily.

The MiloYip uses the circle drawn in the canvas, and some particle effects are pixel-level based, such as flame characters, but the computing cost of pixels is too high, because the number of particles required is too large, or even need to be combined with some nosie algorithms, such as (perlin nosie), the amount of computing is too large.

Therefore, we usually first design the texture of the particle (each texture is assumed to be 32*32, and a particle contains more than nine hundred pixels). This requires a small number of particles, the calculation amount is not large, and the cost of particle management is not high (adding, deleting, modifying, and querying particles ).

Canvas globalCompositeOperation

When is the particle system the most beautiful? Evening! Therefore, when creating a texture, you must set the value of globalCompositeOperation to lighter. Its function is: where the image overlaps, the color is determined by the value of the two colors.

GlobalCompositeOperation has many attributes to set. For details, see w3school.

Particle System

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

1. Emission speed (the velocity, direction, and angle range of each particle)

2. Launch area (fixed-point launch or launch in a certain area)

3. Gravity Field (whether you launch on the moon, on the earth, or in the weightless state of space)

4. Particle texture (whether you emit a laser, star, or smoke)

5. Texture filter (red or blue laser)

6. Launch frequency (whether you initiate a second or 100 times a second)

Changes in each parameter will lead to a completely different presentation effect.

Mathematics and Physics

For example, for the independence of the direction of motion, a two-dimensional space can use new Vector2 () to depict the speed, split the speed into the x and y directions, and 1 represents the speed of the x axis, 2 represents the speed in the Y axis.

Similarly, the gravity field can be split into two directions. For example, new Vector2 (0, 0.98), 0 represents the speed of the X axis, and 0.98 represents the speed of the Y axis.

Simple points: (for example, speed is the accumulation of acceleration on time, distance is the accumulation of speed on time, etc ).

Of course, it sounds like calculus is needed to write the particle system, but in fact calculus is not included in the program, because the program/game contains the core loop, and what the loop does is the points... For example:

tick: function () {    this.velocity.add(this.acceleration);    this.position.add(this.velocity.multiply(0.1));    this.rotatingSpeed+=this.rotatingAcceleration;    this.rotation += this.rotatingSpeed;    this.alpha -= this.hideSpeed;}

That's why we have this idea. We don't need calculus =!

Canvas UI widget

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

Code for using the control:

var dirCtrl=new PE.CircleAdjust({    min: 0,    max: 50,    rotation: -30,    value: 10,    angleRange:50,    change: function (value,angle) {        ps.setAngle(angle);        ps.setSpeed(value);    },    renderTo: document.getElementById("emitAngleCtrl") });

Of course, this is not a denial of dom writing control, but sometimes canvas writing UI is more advantageous. There are also some scenarios where dom write controls cannot be implemented. (For example, global filter effects and wave effects are related to pixels, and dom is relatively weak)

Others

The particle editor also uses HTML5 features, such as drag and drop, FileReader, and blob download. For example, a tool function is encapsulated based on blob to download files:

Util.downloadFile=function(code, fileName) {    if (window.URL.createObjectURL) {        var fileParts = [code];        var bb = new Blob(fileParts, {            type: "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: The editor uses quizzes: can you use the particle editor in the demo to implement the penguin effect below? :)