能量传输多触角运动效果-html代码-BFW代码库

能量传输多触角运动效果

代码语言：html

所属分类：粒子

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

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

    <title> Electric strings</title>
    <script>
        window.requestAnimFrame = (function() {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback);
                }
            );
        });

        function init(elemid) {
            let canvas = document.getElementById(elemid),
            c = canvas.getContext("2d"),
            w = (canvas.width = window.innerWidth),
            h = (canvas.height = window.innerHeight);
            c.fillStyle = "rgba(30,30,30,1)";
            c.fillRect(0, 0, w, h);
            return {
                c: c,
                canvas: canvas
            };
        }
    </script>
    <style>
        body,
        html {
            margin: 0px;
            padding: 0px;
            position: fixed;
            background: rgb(30,30,30);
        </style>

    </head>
    <body translate="no">
        <canvas id="canvas"></canvas>

        <script>
            window.onload = function () {
                let c = init("canvas").c,
                canvas = init("canvas").canvas,
                w = canvas.width = window.innerWidth,
                h = canvas.height = window.innerHeight,
                mouse = {
                    x: false,
                    y: false
                },
                last_mouse = {};

                //initiation

                function dist(p1x, p1y, p2x, p2y) {
                    return Math.sqrt(Math.pow(p2x - p1x, 2) + Math.pow(p2y - p1y, 2));
                }

                class segment {
                    constructor(parent, l, a, first) {
                        this.first = first;
                        if (first) {
                            this.pos = {
                                x: parent.x,
                                y: parent.y
                            };

                        } else {
                            this.pos = {
                                x: parent.nextPos.x,
                                y: parent.nextPos.y
                            };

                        }
                        this.l = l;
                        this.ang = a;
                        this.nextPos = {
                            x: this.pos.x + this.l * Math.cos(this.ang),
                            y: this.pos.y + this.l * Math.sin(this.ang)
                        };

                    }
                    update(t) {
                        this.ang = Math.atan2(t.y - this.pos.y, t.x - this.pos.x);
                        this.pos.x = t.x + this.l * Math.cos(this.ang - Math.PI);
                        this.pos.y = t.y + this.l * Math.sin(this.ang - Math.PI);
                        this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
                        this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
                    }
                    fallback(t) {
                        this.pos.x = t.x;
                        this.pos.y = t.y;
                        this.nextPos.x = this.pos.x + this.l * Math.cos(this.ang);
                        this.nextPos.y = this.pos.y + this.l * Math.sin(this.ang);
                    }
                    show() {
                        c.lineTo(this.nextPos.x, this.nextPos.y);
                    }}


                class tentacle {
                    constructor(x, y, l, n, a) {
                        this.x = x;
                        this.y = y;
                        this.l = l;
                        this.n = n;
                        this.t = {};
                        this.rand = Math.random();
                        this.segments = [new segment(this, this.l / this.n, 0, true)];
                        for (let i = 1; i < this.n; i++) {
                            this.segments.push(
                                new segment(this.segments[i - 1], this.l / this.n, 0, false));

                        }
                    }
                    move(last_target, target) {
                        this.angle = Math.atan2(target.y - this.y, target.x - this.x);
                        this.dt = dist(last_target.x, last_target.y, target.x, target.y) + 5;
                        this.t = {
                            x: target.x - 0.8 * this.dt * Math.cos(this.angle),
                            y: target.y - 0.8 * this.dt * Math.sin(this.angle)
                        };

                        if (this.t.x) {
                            this.segments[this.n - 1].update(this.t);
                        } else {
                            this.segments[this.n - 1].update(target);
                        }
                        for (let i = this.n - 2; i >= 0; i--) {
                            this.segments[i].update(this.segments[i + 1].pos);
                        }
                        if (
                            dist(this.x, this.y, target.x, target.y) <=
                            this.l + dist(last_target.x, last_target.y, target.x, target.y)) {
                            this.segments[0].fallback({
                                x: this.x, y: this.y
                            });
                            for (let i = 1; i < this.n; i++) {
                       .........完整代码请登录后点击上方下载按钮下载查看