混沌世界动画特效

代码语言: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