能量传输多触角运动效果
代码语言: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