Creating a Canvas Particle Effect

0
JavaScript

Preview: Canvas Simple Particle Effect Preview

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Canvas Simple Particle Effect Preview</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <canvas id="dotCanvas"></canvas>
    <script>
        (function () {
            var domConvas = document.getElementById("dotCanvas");
            var oCanvas = domConvas.getContext("2d");

            var winWidth = document.documentElement.clientWidth;
            var winHeight = document.documentElement.clientHeight;

            domConvas.width = winWidth;
            domConvas.height = winHeight;

            var dots = [];
            for (var i = 0; i < 300; i++) {
                dots.push({
                    x: Math.random() * winWidth >> 0,
                    y: Math.random() * winHeight >> 0,
                    xm: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
                    ym: (amen() ? 1 : 2.5) * (amen() ? -1 : 1),
                    max: 6000
                })
            }

            function amen() {
                return !!(Math.random() * 10 >> 0) % 2
            }

            dotMove();

            function dotMove() {
                oCanvas.clearRect(0, 0, winWidth, winHeight)

                dots.forEach(function (dot, index) {
                    dot.x = dot.x + dot.xm;
                    dot.y = dot.y + dot.ym;

                    if (dot.x < 0 || dot.x > winWidth) {
                        dot.xm = dot.xm * -1
                    }

                    if (dot.y < 0 || dot.y > winHeight) {
                        dot.ym = dot.ym * -1
                    }

                    oCanvas.fillRect(dot.x, dot.y, 2, 2);

                    for (var i = 0; i < dots.length; i++) {
                        var dot2 = dots[i];
                        if (dot2 == dot) continue;

                        var gou = dot.y - dot2.y;
                        var gu = dot.x - dot2.x;

                        var xian = gou * gou + gu * gu;
                        
                        if (xian < dot2.max) {
                            oCanvas.beginPath();
                            oCanvas.strokeStyle = 'rgba(0,0,0,1)';
                            oCanvas.lineWidth=1;
                            oCanvas.moveTo(dot.x, dot.y);
                            oCanvas.lineTo(dot2.x,dot2.y)
                            oCanvas.stroke()
                        }
                    }
                })

                requestAnimationFrame(dotMove)
            }

        })()
    </script>
</body>

</html>

Article Link:

/en/archive/canvas-particle-effect/

# Related Articles