炫酷canvas粒子动画特效-html代码-BFW代码库

炫酷canvas粒子动画特效

代码语言：html

所属分类：粒子

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Flowfield Particles 2</title>
<style>
      html, body{
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}
    </style>

</head>
<body translate="no">
<canvas id="canvas"></canvas>
<script src='http://repo.bfw.wiki/bfwrepo/js/BbBxRG.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/rRBKBm.js'></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/dat.gui.min.js'></script>
<script>

let canvas, ctx, field, w, h, fieldSize, columns, rows, noiseZ, particles, hue;
(noiseZ = 0);
particleCount = 2000;
particleSize = 0.9;
fieldSize = 70;
fieldForce = 0.15;
noiseSpeed = 0.003;
sORp = true;
trailLength = 0.15;
hueBase = 0;
hueRange = 3.5;
maxSpeed = 2.5;
enableGUI = true;

var ui = new function() {
  this.particleCount = particleCount;
  this.particleSize = particleSize;
  this.fieldSize = fieldSize;
  this.fieldForce = fieldForce;
  this.noiseSpeed = noiseSpeed;
  this.simplexOrPerlin = sORp;
  this.trailLength = trailLength;
  this.maxSpeed = maxSpeed;
  this.hueBase = hueBase;
  this.hueRange = hueRange;

  this.change = function() {
    particleSize = ui.particleSize;
    fieldSize = ui.fieldSize;
    fieldForce = ui.fieldForce;
    noiseSpeed = ui.noiseSpeed;
    maxSpeed = ui.maxSpeed;
    hueBase = ui.hueBase;
    hueRange = ui.hueRange;
    fieldColor = ui.fieldColor;
    ui.simplexOrPerlin?sORp=1:sORp=0;
  }
  
  this.reset = function() {
    particleCount = ui.particleCount;
    reset();
  }
  
  this.bgColor = function(){
    trailLength = ui.trailLength;
  }
}();

if(enableGUI){
  var gui = new dat.GUI();
  f1 = gui.addFolder("Color");
  f2 = gui.addFolder("Particle");
  f3 = gui.addFolder("Flowfield");
  f1.add(ui, "hueBase", 0, 360).onChange(ui.chang.........完整代码请登录后点击上方下载按钮下载查看