混沌世界动画特效-html代码-BFW代码库

代码语言：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, yLast: y,
    xSpeed: 0, ySpeed: 0,
    age: 0,
    name: 'seed-' + Math.ceil(10000000 * Math.random()) };


  this.particles.push(particle);
};
App.kill = function (deadParticleName) {
  this.particles = this.particles.filter(p => p.name !== deadParticleName);
};
App.move = function () {
  for (let i = 0; i < this.particles.length; i++) {
    // Get particle
    let p = this.particles[i];

    // Save last position
    p.xLast = p.x;
    p.yLast = p.y;

    // Reset velocity, as we're dealing with velocity fields and not forces
    p.xSpeed = 0;p.ySpeed = 0;

    // Eddies, boys
    let eddies = [],baseK = 7;
    eddies.push({ x: -300, y: -300, K: 10 * baseK, r0: 180 });
    eddies.push({ x: 300, y: -300, K: 15 * baseK, r0: 150 });
    eddies.push({ x: 300, y: 300, K: 10 * baseK, r0: 250 });
    eddies.push({ x: -300, y: 300, K: 15 * baseK, r0: 150 });
    eddies.push({ x: 0, y: 0, K: 5 * baseK, r0: 20 });

    for (var e = 0; e < eddies.length; e++) {
      let eddy = eddies[e];
      let dx = p.x - eddy.x,
      dy = p.y - eddy.y,
      r = Math.sqrt(dx * dx + dy * dy),
      theta = Utils.segmentAngleRad(0, 0, dx, dy, true),
      cos = Math.cos(theta),sin = Math.sin(theta),
      K = eddy.K, // intensity
      r0 = eddy.r0;

      let er = { x: cos, y: sin },
      eO = { x: -sin, y: cos };

      let radialVelocity = -0.003 * K * Math.abs(dx * dy) / 3000.........完整代码请登录后点击上方下载按钮下载查看