炫酷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.change);
  f1.add(ui, "hueRange", 0, 40).onChange(ui.change);
  f2.add(ui, "particleCount", 1000, 10000).step(100).onChange(ui.reset);
  f2.add(ui, "particleSize", 0.1, 3).onChange(ui.change);
  f2.add(ui, "trailLength", 0.05, 0.60).onChange(ui.bgColor);
  f2.add(ui, "maxSpeed", 1.0, 4.0).onChange(ui.change);
  f3.add(ui, "fieldSize", 5, 100).step(1).onChange(ui.change);
  f3.add(ui, "fieldForce", 0.05, 1).onChange(ui.change);
  f3.add(ui, "noiseSpeed", 0.001, 0.005).onChange(ui.change);
  f3.add(ui, "simplexOrPerlin").onChange(ui.change);
}

class Particle {
  constructor(x, y) {
    this.pos = new Vector(x, y);
    this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5);
    this.acc = new Vector(0, 0);
  }

  move(acc) {
    if (acc) {
      this.acc.addTo(acc);
    }
    this.vel.addTo(this.acc);
    this.pos.addTo(this.vel);
    if (this.vel.getLength() > maxSpeed) {
      this.vel.setLength(m.........完整代码请登录后点击上方下载按钮下载查看