pixi+victor实现跟随鼠标彩虹发光烟花粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:pixi+victor实现跟随鼠标彩虹发光烟花粒子动画效果代码
代码标签: pixi victor 跟随 鼠标 彩虹 发光 烟花 粒子 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html, body {
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.7.2.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/victor.1.1.0.js"></script>
<script type="module">
console.clear();
const SHOW_FLOW_FIELD = false;
const PARTICLE_COUNT = 30000;
const GRID_RESOLUTION = 30;
function hslToHex(h, s, l) {
l /= 100;
const a = s * Math.min(l, 1 - l) / 100;
const f = n => {
const k = (n + h / 30) % 12;
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
};
return `#${f(0)}${f(8)}${f(4)}`;
}
class Walker {
constructor (texture, size, radius) {
this.radius = radius
this.size = size;
this.speed = 0;
this.startSpeed = 10;
this.hue = 0;
this.sparkleCount = 1;
this.vectorWeight = 1;
this.sprite = new PIXI.Sprite(texture);
this.sprite.anchor.set(0.5);
this.vector = new Victor( Math.random() * 2 - 1, Math.random() * 2 - 1)
this.sprite.x = (this.size.x * 0.5) * (this.size.grid + this.size.gutter)
this.sprite.y = (this.size.y * 0.5) * (this.size.grid + this.size.gutter)
this.sprite.scale.set(0)
}
reset(position, direction, distance, hue, explode) {
this.hue = hue
this.startSpeed = Math.max(3, Math.min(explode ? 15 : 10, distance))
this.vector = direction
this.sparkleCount = 0.2;
this.speed = this.startSpeed * (explode ? 0.7 + Math.random() * 0.3 : Math.random() * 1);
this.sprite.x = position.x;
this.sprite.y = position.y;
if(explode) this.vectorWeight = 0;
}
move(gridVector, delta) {
this.vectorWeight += 0.05 * delta;
if(this.vectorWeight > 1) this.vectorWeight = 1;
this.speed -= 0.06 * delta ;
if(this.speed <= 0.06) this.speed = 0
this.vector..........完整代码请登录后点击上方下载按钮下载查看
















网友评论0