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