canvas+SmallPRNG.js实现随机颜色粒子流流动动画效果代码

代码语言:html

所属分类:粒子

代码描述:canvas+SmallPRNG.js实现随机颜色粒子流流动动画效果代码

代码标签: canvas SmallPRNG.js 随机 颜色 粒子 流动 动画

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body,html{margin:0;padding:0}body canvas{display:block;cursor:crosshair}
</style>
</head>

<body>
<canvas id="swarm"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/SmallPRNG.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/codepen-utilities.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script >
+(function(a) {
    var c = function c(d, e, f) {
            this.set(d, e, f)
        },
        b = c.prototype;
    b.dot2d = function(d, e) {
        return ((this.x * d) + (this.y * e))
    };
    b.dot3d = function(d, e, f) {
        return ((this.x * d) + (this.y * e) + (this.z * f))
    };
    b.set = function(d, e, f) {
        this.x = d;
        this.y = e;
        this.z = f;
        return this
    };
    b.add = function(d) {
        if (typeof d === "number") {
            this.x += d, this.y += d, this.z += d;
            return this
        }
        this.x += d.x, this.y += d.y, this.z += d.z;
        return this
    };
    b.sub = function(d) {
        if (typeof d === "number") {
            this.x -= d, this.y -= d, this.z -= d;
            return this
        }
        this.x -= d.x, this.y -= d.y, this.z -= d.z;
        return this
    };
    b.mul = function(d) {
        if (typeof d === "number") {
            this.x *= d, this.y *= d, this.z *= d;
            return this
        }
        this.x *= d.x, this.y *= d.y, this.z *= d.z;
        return this
    };
    b.div = function(d) {
        if (typeof d === "number") {
            this.x /= d, this.y /= d, this.z /= d;
            return this
        }
        this.x /= d.x, this.y /= d.y, this.z /= d.z;
        return this
    };
    b.move = function(d) {
        if (d instanceof c) {
            d.x = this.x, d.y = this.y, d.z = this.z
        }
        return this
    };
    b.within2d = function(d) {
        return (this.x >= 0 && this.x < d.x && this.y >= 0 && this.y < d.y)
    };
    b.wrap2d = function(d) {
        if (this.x > d.x) {
            this.x = 0;
            return true
        }
        if (this.x < 0) {
            this.x = d.x;
            return true
        }
        if (this.y > d.y) {
            this.y = 0;
            return true
        }
        if (this.y < 0) {
            this.y = d.y;
            return true
        }
    };
    b.eq = function(d) {
        return (d instanceof c) && this.x === d.x && this.y === d.y && this.z === d.z
    };
    b.distance = function(f) {
        var d = (this.x - f.x),
            e = (this.y - f.y);
        return Math.sqrt(d * d + e * e)
    };
    b.clone = function() {
        return new c(this.x, this.y, this.z)
    };
    a.Vector3D = c
}(window)); + (function(c) {
    var a = function a() {
            this.grad3 = [new Vector3D(1, 1, 0), new Vector3D(-1, 1, 0), new Vector3D(1, -1, 0), new Vector3D(-1, -1, 0), new Vector3D(1, 0, 1), new Vector3D(-1, 0, 1), new Vector3D(1, 0, -1), new Vector3D(-1, 0, -1), new Vector3D(0, 1, 1), new Vector3D(0, -1, 1), new Vector3D(0, 1, -1), new Vector3D(0, -1, -1)];
            this.p = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180];
            this.permutation = new Array(512);
            this.gradP = new Array(512);
            this.F2 = (0.5 * (Math.sqrt(3) - 1));
            this.G2 = ((3 - Math.sqrt(3)) / 6);
            this.F3 = (1 / 3);
            this.G3 = (1 / 6)
        },
        b = a.prototype;
    b.init = function(e) {
        if (typeof e !== "function") {
            throw new TypeError("prng needs to be a function returning an int between 0 and 255")
        }
        for (var d = 0; d < 256; d += 1) {
            var f = (this.p[d] ^ e());
            this.permutation[d] = this.permutation[d + 256] = f;
            this.gradP[d] = this.gradP[d + 256] = this.grad3[f % this.grad3.length]
        }
    };
    b.simplex3d = function(I, N, S) {
        var v, w, A, B, l, o, r, m, p, u, K, P, U, L, Q, V, M, R, W, d, e, f, g, E, F, G, H, C = ((I + N + S) * this.F3),
            h = Math.floor(I + C),
            n = Math.floor(N + C),
            q = Math.floor(S + C),
            D = ((h + n + q) * this.G3),
            J = (I - h + D),
            O = (N - n + D),
            T = (S - q + D);
        if (J >= O) {
            if (O >= T) {
                l = 1;
                o = 0;
                r = 0;
                m = 1;
                p = 1;
                u = 0
            } else {
                if (J >= T) {
                    l = 1;
                    o = 0;
                    r = 0;
                    m = 1;
                    p = 0;
                    u = 1
                } else {
                    l = 0;
                    o = 0;
                    r = 1;
                    m = 1;
                    p = 0;
                    u = 1
                }
            }
        } else {
            if (O < T) {
                l = 0;
                o = 0;
                r = 1;
                m = 0;
                p = 1;
                u = 1
            } else {
                if (J < T) {
                    l = 0;
                    o = 1;
                    r = 0;
                    m = 0;
                    p = 1;
                    u = 1
                } else {
                    l = 0;
                    o = 1;
                    r = 0;
                    m = 1;
                    p = 1;
                    u = 0
                }
            }
        }
        K = (J - l + this.G3), P = (O - o + this.G3), U = (T - r + this.G3);
        L = (J - m + 2 * this.G3), Q = (O - p + 2 * this.G3), V = (T - u + 2 * this.G3);
        M = (J - 1 + 3 * this.G3), R = (O - 1 + 3 * this.G3), W = (T - 1 + 3 * this.G3);
        h &= 255, n &= 255, q &= 255;
        d = this.gradP[h + this.permutation[n + this.........完整代码请登录后点击上方下载按钮下载查看

网友评论0