Fried chicken with simple canvas particles (Shandong Shumanjianghu)

The reason why bitmap canvas has never been compared to svg. As the saying goes, Sumeru mustard seeds are said to be big, and there is also the saying that small sees big, particles are enough to build a grand effect. This is a simple canvas particle tutorial for fried chicken. It mainly talks about the principle of particle special effects and a little formula in motion.

be prepared

First of all, when we know the effect of particles, we have to think about how we can achieve it, and we have to face our dear objects as much as possible, so we have the following thinking.

have particles
Particles are in motion, and motion requires speed
uniform motion/variable motion
What needs to be done outside of exercise

Eternity in the world

Here I define the time and the number of particles to generate, and a particle pool.

It may be very strange, each frame is time in the process of moving, why do we need to set this time again, the rendering of the browser can be regarded as the normal elapsed time, here timeis the relative time if you feel dizzy ,

Here is a small plum:

Light travels in a straight line in the world. The moonlight you can see now is the moonlight from a long time ago, which means that the moonlight from a long time ago has been spreading, and it also means that all your actions are still spreading. You are fast enough to catch up with your past.

Just kidding, in fact, time means that your 1s is 2s for the small ball, and the time set by the browser rendering is just to make your vision not see the image lag.

const time=2;
const num=20;
var dots=[];

particle class

function dot(x,y,vx,vy){
  //接收粒子点的坐标与方向速度量
  this.x=x;
  this.y=y;
  this.vx=vx;
  this.vy=vy;
  //随机粒子大小
  this.size=Math.ceil(Math.random()*3+2);
  this.ctx={};
}
  //粒子渲染
dot.prototype.render = function(ctx) {
  ctx.save();
  this.ctx=ctx;
  this.ctx.beginPath();
  this.ctx.fillStyle='lightgray';
  this.ctx.arc(this.x-this.size/2,this.y-this.size/2,this.size,0,Math.PI*2);
  this.ctx.closePath();
  this.ctx.fill();
  ctx.restore();
};
  //对当前粒子属性做逻辑计算
dot.prototype.update = function() { this.ctx.clearRect(0,0,canvas.width,canvas.heihgt); this.x=this.x+this.vx*time; this.y=this.y+this.vy*time; this.vx = (this.x < canvas.width && this.x > 0) ? this.vx : (-this.vx); this.vy = (this.y < canvas.height && this.y > 0) ? this.vy : (-this.vy); this.render(this.ctx); };

In the current particle class, I only give the direction of the speed, because we only require the particles to move at a uniform speed, and the calculation formula here is x=vt( x: displacement v: average speed t: movement time )

If you want to apply force or variable speed motion to the particles, you need this.a=ato add an acceleration attribute. Then make horizontal and vertical decomposition according to the direction of acceleration, and act on the direction of speed, so as to carry out variable speed movement, the formula here is as follows

v=at
x=(v0+at/2)*t
v0 is the initial velocity, a is the direction of the acceleration, and x is the displacement in the direction

The particles of the chaotic world

for(let i=0;i<num;i++){
  var x=Math.ceil(Math.random()*canvas.width);
  var y=Math.ceil(Math.random()*canvas.height);
  var vx=Math.ceil(Math.random()*2);
  var vy=Math.ceil(Math.random()*2);
  var d=new dot(x,y,vx,vy);
  d.render(ctx);
  dots.push(d);
}

A random coordinate point is obtained by randomly rounding the width and height of the canvas. And instantiate our particle. and pushed into the particle pool. Here, because we updatewill call it directly in the method , we only need to pass in the environment renderonce when instantiating it , and then we can hand over it all to complete.renderctxupdate

Shake it up with particle balls

requestAnimFrame(anim);
function anim(){
  for(let i=0;i<dots.length;i++){ dots[i].update(); } requestAnimFrame(anim); }

Here we only need to continuously update the data of the particles in the particle pool to make the particles run.

The tutorial of particles is relatively simple, but it is the basis of almost all particle effects. The particles can already be generated, so we only need to make the particles move on our specified path to achieve the effect we need.

Expand your mind

Zhihu background mesh effect

Iterate over all particle points, if in range, use moveToand l lineToto generate connecting lines.
particles into words

First draw the text on the off-screen canvas, and then return the coordinates of all opaque pixels. You can traverse directly when traversing, or you can use widthand heightto calculate. If the current point needs to be drawn, particles are generated.

The reason why the pixels are opaque here is because on the canvas, as long as you don't set it, the default is that there is no background color. That is to say, all drawn pixels can be judged by judging whether their alphavalue is 0, or by setting alphaThreshold to discard some points with insufficient filling degree. For example, when the alphacorresponding value is 128, the transparency is about 0.5, which is why many people use the judgment value of 128 in their blogs.

There are also many effects, and particle effects are a big topic. For example, AE Unity and other software will have built-in particle plug-ins and a large number of external particle effect plug-ins.

I will write some high-level particle effects later.

The related technical tutorials of canvas and svg are updated from time to time, including actual combat type and main principle type. 2d, 2.5d and 3d will be included, and the basic knowledge of linear algebra, physical graphics, etc. will be involved.

This demo source code: particle effect