simplex-noise散花粒子动画效果-html代码-BFW代码库

simplex-noise散花粒子动画效果

代码语言：html

所属分类：粒子

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

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

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
        }

        canvas {
            background: #000;
        }
    </style>

</head>
<body translate="no">
    <canvas class="js-canvas"></canvas>

  <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>
    <script>
        const distanceBetween = (vec1, vec2) => Math.hypot(vec2.x - vec1.x, vec2.y - vec1.y);

        const simplex = new SimplexNoise();

        const canvas = document.querySelector('.js-canvas');
        const ctx = canvas.getContext('2d');

        const TAU = Math.PI * 2;

        const width = 500;
        const height = 500;

        const midX = width >> 1;
        const midY = height >> 1;
        const hypo = distanceBetween({
            x: 0, y: 0
        }, {
            x: midX, y: midY
        });

        canvas.width = width;
        canvas.height = height;

        let frame = 0;
        let phase = 0;
        const phaseSpeed = 0.005;

        class Trail {
            constructor(position, angle, detail, spacing, velocity) {
                this.position = position;
                this.angle = angle;
                this.heading = angle;

                this.velocity = velocity;

                this.spacingCurrent = 1;
                this.spacing = spacing;

                this.detail = detail;
                this.trail = new Array(this.detail).fill();

                this.initTrail();
            }

            initTrail() {
                this.trail = this.trail.map((_, i) => {
                    return {
                        x: Math.cos(this.angle) * (this.spacingCurrent * i),
                        y: Math.sin(this.angle) * (this.spacingCurrent * i)
                    };

                });
            }

            update(phase, index) {
                const tip = {
                    ...this.trail[this.detail - 1]
                };

                const scale = 0.02;
                const noise = simplex.noise3D(tip.x * scale, tip.y * scale, (this.angle + index) * scale);
                const angleModifier = 0.75 * noise;
                this.angle = this.heading + angleModifier;

                const newTip = {
                    x: tip.x + Math.cos(this.angle) * this.velocity,
                    y: tip.y + Math.sin(this.angle) * this.velocity
                };


                const totalTravelledPercent = distanceBetween({
                    x: 0, y: 0
                }, newTip) / hypo;
                const tipTravelPercent = distanceBetween(newTip, tip) / this.spacingCurrent;

                for (let i = 0; i < this.detail - 1; i++) {
                    const p1 = this.trail[i];
                    const p2 = this.trail[i + 1];

                    p1.x += (p2.x - p1.x) * tipTravelPercent;
.........完整代码请登录后点击上方下载按钮下载查看