Shulou(Shulou.com)06/01 Report--

This article shows you how HTML5 canvas makes a simple and flirtatious particle engine, which is concise and easy to understand. I hope you can get something through the detailed introduction of this article.

Well, whether it's a "particle engine" or a boastful title is still a long way from the real particle engine.

Cut the crap and look at [demo] first.

Teach you to make a simple canvas particle maker (hereinafter referred to as engine).

one。 World outlook

This simple engine requires three elements: World, Launcher, and Grain. To sum up, the emitter exists in the world, the emitter makes particles, and both the world and the emitter affect the state of the particles, and each particle, after the influence of the world and the emitter, calculates the position of the next moment and draws itself.

1. World (World)

The so-called "world" is the environment that affects the particles that exist in this "world" as a whole. If a particle chooses to exist in the "world", then the particle will be affected by the "world".

two。 Transmitter (Launcher)

A unit used to emit particles. They can control the properties of the particles generated by the particles. As the parents of particles, the emitter can control the birth properties of particles: position of birth, size of birth, lifespan, whether it is affected by "World", whether it is affected by "Launcher" itself, and so on.

In addition, the emitter itself has to clean up the dead particles that it has born.

3. Particles (Grain)

The smallest basic unit is each agitated individual. Each individual has its own location, size, lifespan, whether affected by the degree of the same name and other attributes, so that they can accurately describe their shape on canvas all the time.

two。 Particle rendering master logic

This is the main logic of particle drawing.

Let's take a look at what the world needs.

three。 Create a world

I don't know why I take it for granted that the world should have gravitational acceleration. But gravitational acceleration alone can't show a lot of tricks, so here I added two other influencing factors: hot air and wind. The direction of gravity acceleration and heat is vertical, and the direction of wind influence is horizontal. With these three things, we can make the particles move very coquettish.

Some states (such as the survival of particles) need to be time-stamped, so let's add time to the world to facilitate time pauses and countercurrent effects later on.

Define (function (require, exports, module) {

Var Util = require ('. / Util')

Var Launcher = require ('. / Launcher')

/ * *

* World constructor

* @ param config

* backgroundImage background image

* canvas canvas reference

* context of context canvas

*

* time Universal time

*

* gravity gravity acceleration

*

* heat thermal power

* heatEnable thermal switch

* minHeat random minimum heat

* maxHeat random maximum heat

*

* wind wind power

* windEnable wind switch

* minWind random minimum wind

* maxWind random maximum wind force

*

* timeProgress unit of time progress, used to control time speed

* launchers belongs to the transmitter queue of this world

* @ constructor

, /

Function World (config) {

/ / too long. Omit the details.

}

World.prototype.updateStatus = function () {}

World.prototype.timeTick = function () {}

World.prototype.createLauncher = function (config) {}

World.prototype.drawBackground = function () {}

Module.exports = World

});

As we all know, animating is constantly redrawing, so we need to expose a method to provide an external loop call:

/ * *

* Loop trigger function

* triggered when the condition is met

* for example, the RequestAnimationFrame callback or the loop triggered after the setTimeout callback

* to maintain the life of World

, /

World.prototype.timeTick = function () {

/ / update the various states of the world

This.updateStatus ()

This.context.clearRect (0century 0th.canvas.width.this.canvas.height)

This.drawBackground ()

/ / trigger the loop call function of all emitters

For (var I = 0 * * I this.maxAliveCount) {

/ / the number of old particles has not yet reached the maximum limit.

/ / the new count plus the old one exceeds the maximum limit

Count = this.maxAliveCount-this.grainList.length

} else {

Count = 0

}

For (var I = 0; I

< count; i++) { var _rd = Util.randomFloat(0, Math.PI * 2); var _grain = new Grain({/*粒子配置*/}); this.grainList.push(_grain); } }; 生完孩子，孩子死掉了还得打扫……（好悲伤，怪内存不够用咯） Launcher.prototype.swipeDeadGrain = function (grain_id) { for (var i = 0; i < this.grainList.length; i++) { if (grain_id == this.grainList[i].id) { this.grainList = this.grainList.remove(i);//remove是自己定义的一个Array方法 this.createGrain(1); break; } } }; 生完孩子，还得把孩子放出来玩： Launcher.prototype.paintGrain = function () { for (var i = 0; i < this.grainList.length; i++) { this.grainList[i].paint(); } }; 自己的内部小世界也不要忘了维护呀~(跟外面的大世界差不多) Launcher.prototype.updateLauncherStatus = function () { if (this.grainInfluencedByLauncherWind) { this.wind = Util.randomFloat(this.minWind, this.maxWind); } if(this.grainInfluencedByLauncherHeat){ this.heat = Util.randomFloat(this.minHeat, this.maxHeat); } }; 好了，至此，我们完成了世界上第一种生物的打造，接下来就是他们的后代了（呼呼，上帝好累） 子子孙孙，无穷尽也 出来吧，小的们，你们才是世界的主角！ 作为世界的主角，粒子们拥有各种自身的状态：位置、速度、大小、寿命长度、出生时间当然必不可少 define(function (require, exports, module) { var Util = require('./Util'); /** * 粒子构造函数 * @param config * id 唯一标识 * world 世界宿主 * launcher 发射器宿主 * * x 位置x * y 位置y * vx 水平速度 * vy 垂直速度 * * sizeX 横向大小 * sizeY 纵向大小 * * mass 质量 * life 生命长度 * birthTime 出生时间 * * color_r * color_g * color_b * alpha 透明度 * initAlpha 初始化时的透明度 * * influencedByWorldWind * influencedByWorldHeat * influencedByWorldGravity * influencedByLauncherWind * influencedByLauncherHeat * * @constructor */ function Grain(config) { //太长了，略去细节 } Grain.prototype.isDead = function () {}; Grain.prototype.calculate = function () {}; Grain.prototype.paint = function () {}; module.exports = Grain; }); 粒子们需要知道自己的下一刻是怎样子的，这样才能把自己在世界展现出来。对于运动状态，当然都是初中物理的知识了:-) Grain.prototype.calculate = function () { //计算位置 if (this.influencedByWorldGravity) { this.vy += this.world.gravity+Util.randomFloat(0,0.3*this.world.gravity); } if (this.influencedByWorldHeat && this.world.heatEnable) { this.vy -= this.world.heat+Util.randomFloat(0,0.3*this.world.heat); } if (this.influencedByLauncherHeat && this.launcher.heatEnable) { this.vy -= this.launcher.heat+Util.randomFloat(0,0.3*this.launcher.heat); } if (this.influencedByWorldWind && this.world.windEnable) { this.vx += this.world.wind+Util.randomFloat(0,0.3*this.world.wind); } if (this.influencedByLauncherWind && this.launcher.windEnable) { this.vx += this.launcher.wind+Util.randomFloat(0,0.3*this.launcher.wind); } this.y += this.vy; this.x += this.vx; this.alpha = this.initAlpha * (1 - (this.world.time - this.birthTime) / this.life); //TODO 计算颜色 和 其他 }; 粒子们怎么知道自己死了没？ Grain.prototype.isDead = function () { return Math.abs(this.world.time - this.birthTime)>

This.life

}

In what way should the particles show themselves?

Grain.prototype.paint = function () {

If (this.isDead ()) {

This.launcher.swipeDeadGrain (this.id)

} else {

This.calculate ()

This.world.context.save ()

This.world.context.globalCompositeOperation = 'lighter'

This.world.context.globalAlpha = this.alpha

This.world.context.drawImage (this.launcher.grainImage, this.x- (this.sizeX) / 2, this.y- (this.sizeY) / 2, this.sizeX, this.sizeY)

This.world.context.restore ()

}

}

The above is how HTML5 canvas makes a simple and smug particle engine. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.