超酷粒子动画效果

代码语言: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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0