Particle animation has always been a relatively common type of HTML5 Canvas animation, and many developers also prefer to do this type of animation special effects. This time I bring you an HTML5 Canvas-based mouse over particle extrusion animation. There are many particle points on the page to form a canvas. When you move the mouse over this canvas, the particles will squeeze each other. Make your mouse unable to touch these particle points.
Advertisement
class Particle {
constructor(k, i, j) {
this.i = i;
this.j = j;
this.init();
this.x = this.x0;
this.y = this.y0;
this.pos = posArray.subarray(k * 3, k * 3 + 3);
this.pointer = pointer;
}
init() {
this.x0 = canvas.width * 0.5 + this.i * canvas.width / 240;
this.y0 = canvas.height * 0.5 + this.j * canvas.height / 160;
}
move() {
const dx = this.pointer.x - this.x;
const dy = this.pointer.y - this.y;
const d = Math.sqrt(dx * dx + dy * dy);
const s = 1000 / d;
this.x += -s * (dx / d) + (this.x0 - this.x) * 0.02;
this.y += -s * (dy / d) + (this.y0 - this.y) * 0.02;
// update buffer position
this.pos[0] = this.x;
this.pos[1] = this.y;
this.pos[2] = 0.15 * s * s;
}
}
html, body {
position: absolute;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background:#000;
touch-action: none;
content-zooming: none;
}
canvas {
position: absolute;
width: 100%;
height: 100%;
background:#000;
}
Advertisement
