超酷粒子动画效果
代码语言: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