粒子波流动特效-html代码-BFW代码库

粒子波流动特效

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title> Particle Wave</title>
    <style>
        html, body {
            margin: 0;
            background-color: black;
        }

        #particle-canvas {
            width: 100%;
            height: 100vh;
            background: linear-gradient(tobottom, rgb(10, 10, 50) 0%,rgb(60, 10, 60) 100%);
            vertical-align: middle;
        }
    </style>

</head>
<body translate="no">
    <canvas id="particle-canvas"></canvas>

    <script>
        // modified version of random-normal
        function normalPool(o) {
            var r = 0; do {
                var a = Math.round(normal({
                    mean: o.mean, dev: o.dev
                })); if (a < o.pool.length && a >= 0) return o.pool[a]; r++;
            } while (r < 100);
        }function randomNormal(o) {
            if (o = Object.assign({
                mean: 0, dev: 1, pool: []
            }, o), Array.isArray(o.pool) && o.pool.length > 0) return normalPool(o); var r, a, n, e, l = o.mean, t = o.dev; do {
                r = (a = 2 * Math.random() - 1) * a + (n = 2 * Math.random() - 1) * n;
            } while (r >= 1); return e = a * Math.sqrt(-2 * Math.log(r) / r), t * e + l;
        }

        const NUM_PARTICLES = 600;
        const PARTICLE_SIZE = 0.5; // View heights
        const SPEED = 20000; // Milliseconds

        let particles = [];

        function rand(low, high) {
            return Math.random() * (high - low) + low;
        }

        function createParticle(canvas) {
            const colour = {
                r: 255,
                g: randomNormal({
                    mean: 125, dev: 20
                }),
                b: 50,
                a: rand(0, 1)
            };

            return {
                x: -2,
                y: -2,
                diameter: Math.max(0, randomNormal({
                    mean: PARTICLE_SIZE, dev: PARTICLE_SIZE / 2
                })),
                duration: randomNormal({
                    mean: SPEED, dev: SPEED * 0.1
                }),
                amplitude: randomNormal({
                    mean: 16, dev: 2
                }),
                offsetY: randomNormal({
                    mean: 0, dev: 10
                }),
                arc: Math.PI * 2,
                startTime: performance.now() - rand(0, SPEED),
                colour: `rgba(${colour.r}, ${colour.g}, ${colour.b}, ${colour.a})`
            };

        }

        function moveParticle(particle, canvas, time) {
            const progress = (time - particle.startTime) % particle.duration.........完整代码请登录后点击上方下载按钮下载查看