超酷粒子动画效果-html代码-BFW代码库

代码语言：html

所属分类：粒子

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

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

<title>Azimuthal Viscosity 3</title>
<style>
      * {
  border: none;
  margin: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
canvas {
  background: white;
  background: radial-gradient(#FFF, #DDD);
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.ui {
  display: none;
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  width: 120px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.ui p {
  font-size: 11px;
  font-weight: 700;
}
.ui p.zoom {
  margin-bottom: 5px;
}
.ui p.zoom span {
  margin-right: 5px;
  border: solid 1px #777;
  cursor: pointer;
  border-radius: 2px;
}
.ui p.zoom span.zoomin {
  padding: 2px 5px;
}
.ui p.zoom span.zoomout {
  padding: 2px 8px;
}
.ui p.zoom span:hover {
  background: black;
  color: white;
}

    </style>

</head>
<body translate="no">
<div class="ui">
<p class="zoom"><span class="zoom zoomin">+</span><span class="zoom zoomout">-</span></p>
<p class="zoomlevel"><span class="percent">100</span> % - (<span class="width"></span>px)(<span class="height"></span>px)</p>
<p>Dead: <span class="dead">0</span></p>
<p>Alive: <span class="alive">0</span></p>
<p>Drawn: <span class="drawn">0</span></p>
<p><span class="fps">0</span> FPS</p>
<a class="save" href="" download="capture.png">Save</a>
</div>

<script src='http://repo.bfw.wiki/bfwrepo/js/lodash.min.js'></script>
<script>
      /**
 * @author Alex Andrix <alex@alexandrix.com>
 * @since 2018-12-02
 */

var App = {};
App.setup = function () {
  var canvas = document.createElement('canvas');
  this.filename = "spipa";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  this.canvas = canvas;
  document.getElementsByTagName('body')[0].appendChild(canvas);
  this.ctx = this.canvas.getContext('2d');
  this.width = this.canvas.width;
  this.height = this.canvas.height;
  this.dataToImageRatio = 1;
  this.ctx.imageSmoothingEnabled = false;
  this.ctx.webkitImageSmoothingEnabled = false;
  this.ctx.msImageSmoothingEnabled = false;
  this.xC = this.width / 2;
  this.yC = this.height / 2;

  this.stepCount = 0;
  this.particles = [];
  this.lifespan = 1000;
  this.popPerBirth = 1;
  this.maxPop = 200;
  this.birthFreq = 1;

  // Build grid

  this.grid = [];
  var i = 0;
  var r = 200;
  this.grid.push({ x: -r * Math.sqrt(3) / 2, y: 0, spotIndex: 1 });
  this.grid.push({ x: r, y: -r, spotIndex: 2 });
  this.grid.push({ x: r, y: r, spotIndex: 3 });
  this.gridMaxIndex = 3;

  // Counters for UI
  this.drawnInLastFrame = 0;
  this.deathCount = 0;

  this.initDraw();
};
App.evolve = function () {
  var time1 = performance.now();

  this.stepCount++;

  // Rotate grid (triangle)
  var angle = this.stepCount / 500,
  r = 200;
  this.grid[0].x = r * Math.cos(angle);
  this.grid[0].y = r * Math.sin(angle);
  angle += 2 * Math.PI / 3;
  this.grid[1].x = r * Math.cos(angle);
  this.grid[1].y = r * Math.sin(angle);
  angle += 2 * Math.PI / 3;
  this.grid[2].x = r * Math.cos(angle);
  this.grid[2].y = r * Math.sin(angle);

  if (this.stepCount % this.birthFreq == 0 && this.particles.length + this.popPerBirth < this.maxPop) {
    this.birth();
  }
  App.move();
  App.draw();

  var time2 = performance.now();

  // Update UI
  document.getElementsByClassName('dead')[0].textContent = this.deathCount;
  document.getElementsByClassName('alive')[0].textContent = this.particles.length;
  document.getElementsByClassName('fps')[0].textContent = Math.floor(1000 / (time2 - time1));
  document.getElementsByClassName('drawn')[0].textContent = this.drawnInLastFrame;

};
App.birth = function () {
  var x, y;
  var gridSpotIndex = Math.floor(Math.random() * this.gridMaxIndex),
  gridSpot = this.grid[gridSpotIndex],
  //x = gridSpot.x, y = gridSpot.y;
  x = 300 * (2 * Math.random() - 1),y = 300 * (2 * Math.random() - 1);

  var particle = {
    hue: 200, // + Math.floor(50*Math.random()),
    sat: 95, //30 + Math.floor(70*Math.random()),
    lum: 20 + Math.floor(40 * Math.random()),
    x: x, y: y,
    xLast: x, yLast: y,
    xSpeed: 0, ySpeed: 0,
    age: 0,
    attractorIndex: gridSpotIndex,
    name: 'seed-' + Math.ceil(10000000 * Math.random()) };

  this.particles.push(particle);
};
App.kill = function (particleName) {
  var newArray = _.reject(this.particles, function (seed) {
    return seed.name == particleName;
  });
  this.particles = _.cloneDeep(newArray);
};
App.move = function.........完整代码请登录后点击上方下载按钮下载查看