创意多彩极光发光树发丝动态生长 js特效动画-html代码-BFW代码库

创意多彩极光发光树发丝动态生长 js特效动画

代码语言：html

所属分类：粒子

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <title>创意多彩极光发光树发丝动态生长js特效动画</title>

    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
            cursor: pointer;
        }

        .dg {
            opacity: 0.7;
        }
        .dg:hover {
            opacity: 1;
        }

    </style>
</head>

<body>
    <script src='http://repo.bfw.wiki/bfwrepo/js/p5.min.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/perlin.js'></script>
    <script src='http://repo.bfw.wiki/bfwrepo/js/dat.gui.min.js'></script>
    <script>
        class Branch {
            constructor () {
                this.v = [];
                this.x = width / 2;
                this.y = height;
                this.prevx = width / 2;
                this.prevy = height;
                this.color = color(random(uiColor.getValue(), uiColor.getValue() + 100), uiSaturation.getValue(), 100, uiOpacity.getValue());
                this.v.push({
                    x: this.x, y: this.y
                });
                this.moving = true;
                this.direction = {
                    x: random(-2, 2),
                    y: random(-0.2, -5)
                };
            }
            draw () {
                stroke(this.color);
                line(this.prevx, this.prevy, this.x, this.y);
            }
            update () {
                if (this.moving) {
                    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
                        this.moving = false;
                    }
                    this.move();
                    this.draw();
                    this.prevx = this.x;
                    this.prevy = this.y;
                }
            }
            move () {
                this.direction.x += (p.simplex3(this.x * 0.04 * uiRandom.getValue(), this.y * 0.04 * uiRandom.getValue(), millis() * 0.0001));
                this.direction.y -= abs((p.simplex3(this.y * 0.01, this.x * 0.01, millis() * 0.0001))) * 0.2;
                this.x += this.direction.x;
                this.y += this.direction.y;
                this.v.pu.........完整代码请登录后点击上方下载按钮下载查看