能量传输多触角运动效果-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 {
   .........完整代码请登录后点击上方下载按钮下载查看