How to Implement HTML5 Canvas Mouse Movement Grid Particle Glow Animation

How to Implement HTML5 Canvas Mouse Movement Grid Particle Glow Animation: BY Fred25 Nov,2020; Tags:
HTML5 Canvas HTML5 Animation

Introduction

Recently we have shared a lot of cool animations about HTML5 Canvas, most of which are particle-related animations. For example, this HTML5 Canvas mouse over particle squeeze animation and HTML5 Canvas 3D green particle animation are very good. This time I will also introduce a Canvas-based HTML5 particle animation. The particles form a grid shape. When the mouse moves in the grid, the grid particles move with the mouse, and the mouse will glow around.

How to Implement HTML5 Canvas Mouse Movement Grid Particle Glow Animation

Instructions

Css Code

body{ margin: 0; background: #000; }
canvas{ background: #000; width: 100vw; height: 100vh; }

Js Code

function create(){
    var d = 20;
    for(var i=-1; ++i<wide;){
        var x = Math.floor((((cb.width-padding*2) / (wide-1)) * i) + padding) * ratio;

        for(var j=-1; ++j<high;){

            var y = Math.floor((((cb.height-padding*2) / (high-1)) * j) + padding) * ratio;

            dots.push({
                x: x,
                y: y,
                ox: x,
                oy: y
            });
        }
    }
}
create();

function render(){

    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    ctx.fillStyle = '#fff';

    for(var i=0;i<dots.length;i++){
        var s = dots[i];

        var v = getV(s)

        ctx.beginPath();
        ctx.moveTo(s.x, s.y);
        ctx.lineTo(s.x + v.x, s.y + v.y);
        ctx.strokeStyle = '#333'
        ctx.lineWidth = 1 * ratio
        ctx.stroke();
        ctx.closePath();
    }

    for(var i=0;i<dots.length;i++){
        var s = dots[i];

        var v = getV(s)

        ctx.circle(s.x + v.x, s.y + v.y, s.size * ratio, true);
        ctx.fill();
    }    
}

VIEW NOW