d3实现鱼群游动前行粒子效果代码
代码语言:html
所属分类:粒子
代码描述:d3实现鱼群游动前行粒子效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
background: #333;
display:flex;
align-items: center;
}
svg {
max-height:500px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 1) 3%,
rgba(1, 118, 142, 1) 100%
);
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.js"></script>
<script type="module">
class Vector {
constructor(x, y) {
this.x = x;
this.y = y;
this.max = null;
}
setLength(newLength) {
const length = Math.sqrt(this.x * this.x + this.y * this.y);
this.x *= newLength / length;
this.y *= newLength / length;
}
add(vector) {
this.x += vector.x;
this.y += vector.y;
}
sub(vector) {
this.x -= vector.x;
this.y -= vector.y;
}
mul(val) {
this.x *= val;
this.y *= val;
}
div(val) {
if (val != 0) {
this.x /= val;
this.y /= val;
}
}
checkMax() {
if (this.max) {
const length = Math.sqrt(this.x * this.x + this.y * this.y);
if (length > this.max) {
this.setLength(this.max);
}
}
}
angle() {
let angle = (Math.atan(this.y / this.x) * 180) / Math.PI;
if (this.x < 0) {
angle += 180;
}
return angle;
}
limit(max) {
this.max = max;
this.checkMax();
}
static add(vector1, vector2) {
return new Vector(vector1.x + vector2.x, vector1.y + vector2.y);
}
static sub(vector1, vector2) {
return new Vector(vector1.x - vector2.x, vector1.y - vector2.y);
}
static dist(vector1, vector2) {
return Math.sqrt(Math.pow(vector1.x - vector2.x, 2) + Math.pow(vector1.y - vector2.y, 2));
}
}
const randBetween = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
};
class Boid {
constructor(width, height) {
this.width = width;
this.height = height;
this.position = new Vector(randBetween(0, width), randBetween(0, height));
this.velocity = new Vector(randBetween(-100, 100), randBetwee.........完整代码请登录后点击上方下载按钮下载查看
网友评论0