The introduction

A very classic special effects, took a little time to write a manual, above:

Detailed code

html

<canvas id="canvas_bg"></canvas>
Copy the code

css

html.body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#canvas_bg {
  display: block;
}
Copy the code

javascript

class circle {
 constructor(num) {
   this.canvas = document.getElementById('canvas_bg');
   this.canvas.width = document.documentElement.clientWidth;
   this.canvas.height = document.documentElement.clientHeight;
   this.ctx = this.canvas.getContext('2d');

   // Create a random state ball
   this.arr = Array.from(new Array(num)).map(item= > ({
     x: Math.random() * this.canvas.width,
     y: Math.random() * this.canvas.height,
     speed: Math.random() * 1.5 + 0.5.xDir: Math.random() > 0.5 ? -1:1.yDir: Math.random() > 0.5 ? -1:1.r: 2
   }))
   // The distance between the balls
   this.dist = 100

   this.animation()

   window.onresize = () = > {
     this.canvas.width = document.documentElement.clientWidth;
     this.canvas.height = document.documentElement.clientHeight; }}// Calculate the ball position and judge the direction and draw
 drawCircle() {
   this.arr.forEach(item= > {
     item.x += item.xDir * item.speed
     item.y += item.yDir * item.speed

     item.x <= 0 && (item.xDir = 1) 
     item.x > this.canvas.width - 1 && (item.xDir = -1, item.x = this.canvas.width - 1)

     item.y <= 0 && (item.yDir = 1) 
     item.y > this.canvas.height - 1 && (item.yDir = -1, item.y = this.canvas.height - 1)

     this.ctx.beginPath();
     this.ctx.arc(item.x, item.y, item.r, 0.2 * Math.PI);
     this.ctx.fill(); })}// Count the balls within the line distance
 calcLine() {
   var arr = this.arr.concat()
   this.lineArr = []
   for(var i = 0,len = arr.length; i < len; i++){
     for(let y = i+1; y < len; y++){
       let val = Math.sqrt(Math.pow(arr[i].x - arr[y].x, 2) + Math.pow(arr[i].y - arr[y].y, 2),2);
       if(val < this.dist){
         this.lineArr.push({
           start: arr[i],
           end: arr[y],
           val: val,
           ratio: (val / this.dist)
         })
       }
     }
   }
}

// Draw link lines
 drawLine() {
   while(this.lineArr.length){
     this.ctx.beginPath()
     let item = this.lineArr.shift();
     let c = 255 * item.ratio

     this.ctx.strokeStyle = `rgb(${c}.${c}.${c}) `
     this.ctx.moveTo(item.start.x, item.start.y)
     this.ctx.lineTo(item.end.x, item.end.y); 
     this.ctx.stroke(); }}// Animation transition
 animation() {
   this.canvas.width = this.canvas.width
   this.drawCircle()
   this.calcLine()
   this.drawLine()
   setTimeout(() = > {
     this.animation()
   }, 30)}}var circleObj = new circle(100);
Copy the code

The demo presentation

Click to enter the ball animation Demo

explain

The overall effect of this animation is actually very simple, leaving aside the canvas initialization.

1. Firstly, create some random balls, including position, moving direction, moving speed, etc

2. Determine the distance between each ball through a double-layer loop (just use the Pythagorean theorem, the sum of squares of two sides of a right triangle is equal to the square of the hypotenuse, the hypotenuse is the distance to the ball), and save everything that meets the criteria (I set less than 100)

3. Finally draw the balls and lines, add the animation render (HERE I render every 30 ms, recalculating the above parameters for each render)

conclusion

Take a detailed look at the above demo demo and code, the amount of code is very small, it is not difficult to understand, as long as you have junior high school knowledge can understand.

Any questions or omissions are welcome