粒子波流动特效

代码语言: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
              .........完整代码请登录后点击上方下载按钮下载查看

网友评论0