The most subtle part of Canvas is the ability to operate on pixels, which is probably why canvas, as a bitmap, will never be inferior to SVG. As the saying goes, Mustard seed, is the size of the say, there are also small to see the big say, particles, enough to build a grand effect. This is a fried chicken simple canvas particle tutorial, is mainly about how to particle effect principle, a little formula in the movement.

Be prepared

First of all, when we know the effect of making 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.

  1. Have the particles
  2. Particles are moving, and they need speed to move
  3. Constant/variable speed motion
  4. What needs to be done outside of exercise

Permanence in the global

Here I’ve defined time and the number of particles, and a particle pool.

Maybe it’s a little strange, we’re moving each frame as time, why do we have to set this time again, the browser rendering can be viewed as normal elapsed time, here time is relative time if you feel dizzy,

Here’s an example of Leo:

Light travels in a straight line through the world, and the moonlight you can see now is the moonlight of a long time ago, which means that the moonlight of a long time ago has been traveling. It also means that everything you do is still traveling, and if you’re moving fast enough, you can catch up with your past.

Just kidding, time means that your 1s is 2s for the ball, and the browser’s rendering time is only set so that the image doesn’t lag visually

const time=2;
const num=20;
var dots=[];
Copy the code

Particle class

functionDot (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={}; } // Particle render 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(); }; // Make a logical calculation of the current particle properties dot.prototype.update =function() {enclosing CTX. ClearRect (0, 0, canvas width, canvas. The 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); };Copy the code

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

If you want to apply force or variable speed motion to the particle, you need this.a=a to add an acceleration attribute. Then, the horizontal and vertical decomposition is made according to the direction of acceleration, and the direction quantity of velocity is acted on, so as to carry out variable speed motion. The formula here is as follows

  1. v=at
  2. X =(v0+at/2) times t. V0 is the initial velocity, A is the directional amount of acceleration, and x is the directional displacement

The particles that plague the world

for(leti=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); }Copy the code

Random coordinate points can be obtained by randomly rounding the width and height of canvas. And instantiate our particles. And pushed into the particle pool. Since we call Render directly in the UPDATE method, we only need to execute render once to pass in the CTX environment at instantiation time, and then update can do all the work.

Stir the ball of particles

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

Here we just need to keep updating the data of the particles in the particle pool, and we can make them run.

Particle tutorial is relatively simple, but it is the basis of almost all particle effects, particles can already be generated, so just let the particle in our specified path, we can achieve the desired effect.

Expand thought

  1. Net effect of zhihu background

    Iterate over all particle points, using moveTo and llineTo to generate join lines if they are in range.

  2. Particles into words

    The text is first drawn on the off-screen canvas, and then the coordinates of all opaque pixels are returned. The traversal can be directly traversed, or width and height can be used to calculate. If the current point needs to be drawn, particles will be generated.

    The reason why pixels are opaque here is that on canvas, there is no background color by default as long as you do not set it. That is to say, all pixels drawn can be judged by determining whether their alpha value is 0 or not, and some points with insufficient filling can also be removed by setting the threshold of alpha. For example, when alpha is 128, transparency is about 0.5, which is why many people use 128 in their blogs.

    There are a lot of effects, particle effects is a big topic, such as AE Unity and other software will have a built-in particle plug-in and a large number of external particle effects plug-in.

I will also write some particle effects with some height

The related technical tutorials of Canvas and SVG will be updated from time to time. There will be practical ones, master principles ones, 2D 2.5D 3D ones, and linear algebra, physical graphics and other related basic knowledge will be involved.

The demo source code: particle effect

Welcome guests to collect attention, throw coins to feed.

At the same time, thank you for my shortcomings and problems in the article ~