混沌世界动画特效
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A world of Turbulence</title>
<style>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
border: none;
margin: 0;
}
</style>
</head>
<body translate="no">
<script>
/**
* @author Alex Andrix <alex@alexandrix.com>
* @since 2019
*/
let App = {};
App.setup = function () {
// The setup function initializes everything in a permanent way (will never be set anew)
const canvas = document.createElement('canvas');
//const maxWidth = 9933, maxHeight = 14043
//const quality = 0.1
//this.filename = "artwork"
this.canvas = canvas;
this.canvas.width = window.innerWidth; //maxWidth * quality//window.innerWidth
this.canvas.height = window.innerHeight; //maxHeight * quality//3370//window.innerHeight
this.ctx = this.canvas.getContext('2d');
this.width = this.canvas.width;
this.height = this.canvas.height;
this.dataToImageRatio = Math.max(this.width, this.height) / 1000;
// Blend mode /!\ Don't use if you can! Can be a mega source of lag, proportional to canvas size
this.ctx.globalCompositeOperation = 'darker'; // This one is OK
//this.ctx.globalCompositeOperation = 'lighter'// This one is OK
this.ctx.imageSmoothingEnabled = false;
this.ctx.webkitImageSmoothingEnabled = false;
this.ctx.msImageSmoothingEnabled = false;
this.xC = this.width / 2;
this.yC = this.height / 2;
document.getElementsByTagName('body')[0].appendChild(canvas);
// Particle system properties
this.lifespan = 300;
this.popPerBirth = 5;
this.maxPop = 1500;
this.birthFreq = 1;
};
App.start = function () {
// The start function sets, and potentially resets things that will change over time
this.stepCount = 0;
this.particles = [];
// Counters for UI
this.drawnInLastFrame = 0;
this.deathCount = 0;
// Initial paint (background most often)
this.initDraw();
};
App.evolve = function () {
let time1 = performance.now();
this.stepCount++;
// Use birth control
if (this.stepCount % this.birthFreq == 0 && this.particles.length + this.popPerBirth < this.maxPop) {
for (let n = 0; n < this.popPerBirth; n++) {
this.birth();
}
}
// Core sequence: MOVE everything then DRAW everything
App.move();
App.draw();
let time2 = performance.now();
};
App.birth = function () {
let x = -800 + 1600 * Math.random(),
y = -800 + 1600 * Math.random();
let particle = {
hue: 190 + 3 * Math.floor(3 * Math.random()),
sat: 60 + 30 * Math.random(),
lum: 15 + Math.floor(50 * Math.random()),
x,
y,
xLast: x, yL.........完整代码请登录后点击上方下载按钮下载查看
网友评论0