simplex-noise实现一个闪电粒子特效动画代码-html代码-BFW代码库

simplex-noise实现一个闪电粒子特效动画代码

代码语言：html

所属分类：粒子

代码描述：simplex-noise实现一个闪电粒子特效动画代码

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

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

<head>

    <meta charset="UTF-8">



    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            overflow: hidden;
        }

        body {
            position: relative;
            background-color: #000;
        }
    </style>

</head>

<body translate="no">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>

    <script>

        class Tool {
            // random number.
            static randomNumber(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min);
            }
            // random color rgb.
            static randomColorRGB() {
                return (
                    "rgb(" +
                    this.randomNumber(0, 255) +
                    ", " +
                    this.randomNumber(0, 255) +
                    ", " +
                    this.randomNumber(0, 255) +
                    ")");

            }
            // random color hsl.
            static randomColorHSL(hue, saturation, lightness) {
                return (
                    "hsl(" +
                    hue +
                    ", " +
                    saturation +
                    "%, " +
                    lightness +
                    "%)");

            }
            // gradient color.
            static gradientColor(ctx, cr, cg, cb, ca, x, y, r) {
                const col = cr + "," + cg + "," + cb;
                const g = ctx.createRadialGradient(x, y, 0, x, y, r);
                g.addColorStop(0, "rgba(" + col + ", " + ca * 1 + ")");
                g.addColorStop(0.5, "rgba(" + col + ", " + ca * 0.5 + ")");
                g.addColorStop(1, "rgba(" + col + ", " + ca * 0 + ")");
                return g;
            }
            // framerate
            static calcFPS() {
                const now = +new Date();
                const fps = 1000 / (now - lastTime);
                lastTime = now;
                return fps.toFixed();
            }}


        /*
       When want to use angle.
     */

        class Angle {
            constructor(angle) {
                this.a = angle;
                this.rad = this.a * Math.PI / 180;
            }

            incDec(num) {
                this.a += num;
                this.rad = this.a * Math.PI / 180;
                return this.rad;
            }}


        /*
       When want to use vector.
     */

        class Vector2d {
            constructor(x, y) {
                this.vx = x;
                this.vy = y;
            }

            scale(scale) {
                this.vx *= scale;
                this.vy *= scale;
            }

            add(vec2) {
                this.vx += vec2.vx;
                this.vy += vec2.vy;
            }

            sub(vec2) {
                this.vx -= vec2.vx;
                this.vy -= vec2.vy;
            }

            negate() {
                this.vx = -this.vx;
                this.vy = -this.vy;
            }

            length() {
                return Math.sqrt(this.vx * this.vx + this.vy * this.vy);
            }

            lengthSquared() {
                return this.vx * this.vx + this.vy * this.vy;
            }

            normalize() {
                let len = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
                if (len) {
                    this.vx /= len;
                    this.vy /= len;
                }
                return len;
            }

            rotate(angle) {
                let vx = this.vx;
                let vy = this.vy;
                let cosVal = Math.cos(angle);
                let sinVal = Math.sin(angle);
                this.vx = vx * cosVal - vy * sinVal;
                this.vy = vx * sinVal + vy * cosVal;
            }

            toString() {
                return '(' + this.vx.toFixed(3) + ',' + this.vy.toFixed(3) + ')';
            }}


        /*
       When want to use time.
     */

        class Stopwatch {
            constructor(time) {
                this.startTime = 0;
                this.running = false;
                this.elapsed = undefined;
            }

            start() {
                this.startTime = +new Date();
                this.elapsedTime = null;
                this.running = true;
            }

            stop() {
                this.elapsed = +new Date() - this.startTime;
                this.running = false;
            }

            getElepsedTime() {
                if (this.running) {
                    return +new Date() - this.startTime;
                } else {
                    return this.elapsed;
                }
            }

            isRunning() {
                return this.running;
            }

            reset() {
                this.elapsed = 0;
            }}


        /*
       When want to use controller.
     */

        class Controller {
            constructor(id) {
                this.id = document.getElementById(id);
            }
            getVal() {
                return this.id.value;
            }}


        let canvas;
        let lastTime = 0; // to use framerate.
        const simplex = new SimplexNoise();

        class Canvas {
            constructor(bool) {
                // create canvas.
                this.canvas = document.crea.........完整代码请登录后点击上方下载按钮下载查看