A tutorial on drawing particle motion with canvas formula in HTML5

Time:2021-12-30

Recently, I want to make a web page and put some demos I made in the process of learning HTML5 into a collection. However, if I just make a web page and arrange all demos one by one, I think it’s too ugly. Just think, since you have learned canvas, let’s toss the browser and make a small opening animation.

After thinking about the effect of the opening animation for a while, I decided to use particles, because I think particles are more fun. I still remember the first technical blog I wrote before, which talked about the graining of words and pictures:Text picture grainingAt that time, we only did linear motion and added a little 3D effect. The formula of motion is simple. So I think this opening animation should be more dynamic.

Go to demo first: http://2.axescanvas.sinaapp.com/demoHome/index.html

Is the effect more dynamic than linear motion? And it’s really simple. Don’t forget the title of this blog post, small formula, great fun. To make such an effect, only our junior high school is used.. Or the physics knowledge in high school, the formula of accelerating motion and decelerating motion. So it’s really a little formula. The landlord likes to toss some cool things. Although it may not be used at work, the fun is really fascinating. Moreover, doing these can also strengthen the thinking ability of programming.

No more nonsense. Let’s get into the subject. Let’s simply explain the principle~~~

The core code of particle motion is this:
 

XML/HTML CodeCopy contents to clipboard
  1. update:function(time){   
  2.             this.x += this.vx*time;   
  3.             this.y += this.vy*time;   
  4.     
  5.             if(!this.globleDown&&this.y>0){   
  6.                 var yc = this.toy – this.y;   
  7.                 var xc = this.tox – this.x;   
  8.     
  9.                 this.jl = Math.sqrt(xc*xc+yc*yc);   
  10.     
  11.                 var za = 20;   
  12.     
  13.                 var ax = za*(xc/this.jl),   
  14.                     ay = za*(yc/this.jl),   
  15.                     vx = (this.vx+ax*time)*0.97,   
  16.                     vy = (this.vy+ay*time)*0.97;   
  17.     
  18.                 this.vx = vx;   
  19.                 this.vy = vy;   
  20.     
  21.             }else {   
  22.                 var gravity = 9.8;   
  23.                 var vy = this.vy+gravity*time;   
  24.     
  25.                 if(this.y>canvas.height){   
  26.                     vy = -vy*0.7;   
  27.                 }   
  28.     
  29.                 this.vy = vy;   
  30.             }   
  31.         },   

Particles have two states in total, one is free fall, the other is suction. No more free fall. Paste the properties of particles before saying suction:
 

JavaScript CodeCopy contents to clipboard
  1. var Dot = function(x,y,vx,vy,tox,toy,color){   
  2.         this.x=x;   
  3.         this.y=y;   
  4.         this.vx=vx;   
  5.         this.vy=vy;   
  6.         this.nextox = tox;   
  7.         this.nextoy = toy;   
  8.         this.color = color;   
  9.         this.visible = true;   
  10.         this.globleDown = false;   
  11.         this.setEnd(tox , toy);   
  12.     }   
  13.     
  14. setEnd:function(tox , toy){   
  15.                 this.tox = tox;   
  16.                 this.toy = toy;   
  17.                 var yc = this.toy – this.y;   
  18.                 var xc = this.tox – this.x;   
  19.         },   
  20.   

x. Y is the position of the particle, VX is the horizontal velocity of the particle, and vy is the vertical velocity of the particle. It doesn’t matter whether you know nexttox or not, but you just save the variable temporarily. Tox and toy are the destination locations of the particles.

First, give all particles a destination, which will be said later. That is, where the particles arrive, and then define a variable Za as the acceleration. If you test the specific value, you will have approximate parameters. If I set it to 20, I feel almost. Za is the acceleration of the connecting line between the particle and the destination. Therefore, we can calculate the horizontal acceleration and vertical acceleration of the particle through the position of the particle and the position of the destination and through a simple trigonometric function
 

JavaScript CodeCopy contents to clipboard
  1. var ax = za*(xc/this.jl),   
  2.  ay = za*(yc/this.jl),     

With the horizontal acceleration and vertical acceleration, it is easier to directly calculate the increment of horizontal velocity and vertical velocity, so as to change the values of horizontal velocity and vertical velocity
 

XML/HTML CodeCopy contents to clipboard
  1. vx = (this.vx+ax*time)*0.97,   
  2. vy = (this.vy+ay*time)*0.97;  

The reason to multiply by 0.97 is to simulate energy loss so that the particles will slow down. Time is the time difference of each frame

After calculating the velocity, update the particle position.
 

XML/HTML CodeCopy contents to clipboard
  1. this.x += this.vx*time;   
  2. this.y += this.vy*time;  

Because the direction of the connecting line between the particle and the destination keeps changing during the flight, the horizontal acceleration and vertical acceleration of the particle must be recalculated at each frame.

That’s the principle of motion. Is it very simple.

After the motion principle is finished, let’s talk about the specific implementation of the above Animation: animation initialization, draw the desired words or pictures on an off screen canvas, and then obtain the pixels of the off screen canvas through the getimagedata method. Then use a loop to find the painted area in the off screen canvas. Because the data value in imagedata is an RGBA array, we judge that the last value, that is, the transparency greater than 128, is the painted area. Then get the XY value of the area. In order to prevent the page from getting stuck due to too many particle objects, we limit the number of particles. When taking pixels, the x value and y value increase by 2 each time, so as to reduce the number of particles.
 

XML/HTML CodeCopy contents to clipboard
  1. this.osCanvas = document.createElement(“canvas”);   
  2.         var osCtx = this.osCanvas.getContext(“2d”);   
  3.     
  4.         this.osCanvas.width = 1000;   
  5.         this.osCanvas.height = 150;   
  6.     
  7.         osCtx.textAlign = “center”;   
  8.         osCtx.textBaseline = “middle”;   
  9.         osCtx.font=“70px} Microsoft YaHei, bold”;   
  10.         osCtx.fillStyle = “#1D181F”  
  11.         osCtx.fillText(“WelCome” , this.osCanvas.width/2 , this.osCanvas.height/2-40);   
  12.         osCtx.fillText(“To wAxes’ HOME” , this.osCanvas.width/2 , this.osCanvas.height/2+40);   
  13.         var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);   
  14.     
  15.         dots = [];   
  16.     
  17.         for(var x=0;x<bigImageData.width;x+=2){   
  18.             for(var y=0;y<bigImageData.height;y+=2){   
  19.                 var i = (y*bigImageData.width + x)*4;   
  20.                 if(bigImageData.data[i+3]>128){   
  21.                     var dot = new Dot(   
  22.                         Math.random()>0.5?Math.random()*20+10:Math.random()*20+canvas.width-40,   
  23.                         -Math.random()*canvas.height*2,   
  24.                         0,   
  25.                         0,   
  26.                         x+(canvas.width/2-this.osCanvas.width/2),   
  27.                         y+(canvas.height/2-this.osCanvas.height/2),   
  28.                         “rgba(“+bigImageData.data[i]+”,”+bigImageData.data[i+1]+”,”+bigImageData.data[i+2]+”,1)”   
  29.                     );   
  30.                     dot.setEnd(canvas.width/2,canvas.height/2)   
  31.                     dots.push(dot);   
  32.                 }   
  33.             }   
  34.         }   

After obtaining the position XY value of the particle through circulation, the position is assigned to the particle to become the destination of the particle. Then, when the animation starts, you can make the effect of text and picture granulation.