First let’s take a look at the particle animation effect we are going to do ~
Is this:
Or this:
Even this:
Very cool!
How to achieve particle animation like the above and even do more animation of other tracks according to your preferences ~ please see the detailed explanation below.
Technology selection
Since there are many particles and image pixel processing is involved, Canvas is the best choice here.
Note that the code shown below is only the key code, the focus is on the solution.
First, draw particle contour map
First of all, a contour graph composed of particles should be drawn on the canvas and the coordinates of each particle should be recorded, so as to have subsequent animations.
1. Create an element and get the Canvas Canvas rendering context
< canvas> is a double-label element that sets the size of the canvas using the width and height values. As for CTX (Canvas rendering context), it can be understood as the brush on the canvas. We can draw patterns on the canvas as we want through the brush. If the browser does not support Canvas, the text in the middle of the tag will be displayed. Of course, the middle of the tag can also be a picture that needs to be replaced when canvas is not supported.
2. Draw an image using canvas’s image manipulation API
Key API and parameter description of drawing image:
Referring to a diagram in MDN makes it clear what each parameter does:
DrawImage is to draw an image object or canvas (or even every frame on a video object) with a specified position and size onto the current canvas. In our case, we want to draw the entire image onto the canvas.
Corresponding browser to see the effect:
3. Obtain the pixel information of the image, and redraw the particle effect contour map according to the pixel information
Canvas has an interface called getImageData, through which you can get data of all pixels ata specified position on the canvas:
If you print the imageData to the console, you can see that imageData contains three properties:
Where, width and height are the width and height of the complete area to read image pixel information, and data is a one-dimensional array of the Uint8ClampedArray type, containing RGBA integer data of each pixel in the whole image area. It is important to understand the sorting rules for the pixel information stored in this array. See the data array shown below:
Each color value occupies one position in the index of the data array, and each pixel has four values (R, G, B, A) occupying four positions in the index of the array. According to the sequence rule, to obtain the pixel information of R, G and B of the NTH position (n starts from 1) is: Rn = (n-1)*4, Gn = (n-1)*4+1, Bn = (n-1)*4+2, so easy~ The n value is evaluated in the rectangle:
Rij = [(j-1)* imagedata.width + (i-1)]*4, Gij = [(j – 1) * imageData width + (I – 1)] * 4 + 1, Bij = [(j – 1) * imageData width + (I – 1)] * 4 + 2, Aij = [(j-1)*imageData.width + (i-1)]*4 + 3. Every pixel value is available now!
The next step is to draw the particle outline of the image. So, how to make this contour map, we first read the information of each pixel (using the calculation formula above), if the pixel color value is correct, we save it and use it to draw on the canvas. In addition, since the effect is made of particles, we only need to save part of the pixel particles and display them on the canvas.
To specify the number of particles to display in each row and column, respectively cols and rows. Each particle represents a cell, so the width and height of each cell are imageWidth/ COLs and imageHeight/rows. Then the loop judges whether the first pixel of each cell meets the condition of pixel value. If so, the coordinate of this cell is saved into the array for subsequent drawing.
Key reference codes:
With the complete code to make the demo and effect:
At this point, the particle profile has been completed.
Second, make particle animation
There are two kinds of particle animation:
One is particle floating class, which is relatively simple, just need to randomly change the position value of each particle, and then always execute setInterval or requestAnimationFrame to paint cloth, the specific effect is set according to people’s preferences, I will not explain in detail, do a simple particle floating example.
The other is particle trajectory animation, which is a bit more complicated. What is introduced here is that each particle moves in a specified time according to the specified track and finally converging into the animation effect of the specified pattern (namely, the dynamic effect at the beginning of the article). To make this kind of animation effect, two problems need to be solved: one is the animation track, and the other is the timing of each particle to perform the animation.
Particle animation trajectory
The most common trajectory of animation displacement is to change the fixed displacement value in unit time, so as to achieve animation effect. But you can’t do cool things with this kind of monotonous, fixed displacement. So the displacement can rely on the slow function to change the different displacement value in unit time, so as to achieve special effect.
There are two ways to make a slow effect:
One is to set the control points and then calculate the coordinate value of each unit of time by using bezier curve formula.
Quoting this image from Wikipedia:
The above two figures are both plotting a specific curve. It can be seen that the quadratic curve needs a specific control point P1, the cubic curve needs two specific control points P1 and P2 to determine a curve, and the higher-order curve even needs more control points to determine the curve trajectory.
The formula for the curve is based on de Castello’s algorithm, straight up the formula.
The formula for the conic curve is as follows:
The corresponding formula of cubic curve is as follows:
As can be seen from the formula, a curve can be determined as long as the coordinate of control point, initial coordinate and terminal coordinate is determined, and then the position value B(t) corresponding to each time t can be calculated according to the curve formula.
Of course, this method needs to formulate the coordinates of control points, and the calculation is complicated and the implementation is very tedious. Well, there are other ways to determine the curve.
Another method is to use the existing easing function, without the need to make their own control points. Here, we recommend the well-known Tween algorithm’s easing function, and use one of the easing functions to introduce parameter values. The parameter values passed by other easing functions are the same:
Does that sound familiar? Yes, jquery’s animation extension easing. Js is the easing function of the Tween algorithm. With this ready-made easing function, we can specify the particle’s start point, end point (the end point is the coordinate position of the pattern itself), and animation duration to do the desired effect.
Key reference codes:
Make an effect from the reference code:
Well, the animation is there, but it doesn’t feel right… Well, on closer inspection, it is the pattern animation execution that is too holistic, there is no obvious particle animation effect, which leads to another key point of particle animation, the timing of particle animation execution.
The timing of particle animation
To make the particle effect more obvious, it can not make the animation effect too whole, need to make each particle on the pattern start at different time intervals, according to a certain rule of staggered animation. There are two kinds of particle startup intervals here. One is the execution time interval of each line of particles, which should make the startup time of each line stagger regularly. The other is to stagger the startup time randomly between each row of particles, so that the particle animation can be executed with a sense of hierarchy and granularity of each particle having an independent animation. Take a look at the comparison with the particle startup interval:
It’s much better than the above without the particle startup interval.
Well, that’s about it. If the above methods still don’t solve the problem, there is a way… I’ve encapsulated the particle animation with Tween’s easing function. Direct configuration can be used. Create a canvas with an ID, set the width and height, introduce particle.min.js, and set the parameters.
Only canvasId, imgUrl, COLs, and Rows are mandatory. Other parameters are optional. ✧ (͡ ° ͜ ʖ ͡ °)
Some images in this article are quoted from
- developer.mozilla.org/
- zh.wikipedia.org
Tags: Canvas, javascript, dynamic effects, particle animation