能量传输多触角运动效果

代码语言: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 {
   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0