js实现canvas台风飓风粒子聚集动画效果代码-html代码-BFW代码库

js实现canvas台风飓风粒子聚集动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas台风飓风粒子聚集动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
  margin: 0;
  font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
.f {
  position: fixed;
  bottom: 5px;
  right: 15px;
  font-family: 'Arial';
  font-size: 0.7rem;
  color: #32234a;
  text-align: center;
}
.f a {
  font-size: 0.8rem;
  color: #d90368;
}
.slider {
  width: 56% !important;
}
</style>



</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script >
/**/ /* ---- CORE ---- */
/**/const canvas = document.createElement('canvas');
/**/const context = canvas.getContext('2d');
/**/let windowWidth = canvas.width = window.innerWidth;
/**/let windowHeight = canvas.height = window.innerHeight;
/**/let origin = { x: windowWidth * 0.5, y: windowHeight * 0.5 };
/**/context.translate(origin.x, origin.y);
/**/canvas.id = 'canvas';
/**/document.body.insertBefore(canvas, document.body.firstChild);
/**/window.onresize = () => {
  /**/windowWidth = canvas.width = window.innerWidth;
  /**/windowHeight = canvas.height = window.innerHeight;
  /**/};
/**/ /* ---- CORE END ---- */


/* ---- CREATING ZONE ---- */
/* ---- SETTINGS ---- */
const COLORS = ['#32234A', '#820263', '#D90368', '#883677', '#CA61C3'];

const props = {
  PARTICLE_NUMBERS: 500,
  LINE_WIDTH: 5,

  DEMISE_DISTANCE: 20,
  APPARITION_DISTANCE: 350,

  ROTATION_FORCE: 10,

  VEL_MAX: 5.5,
  VEL_MIN: 0,
  VEL_BRAKE_MIN: 0.65,
  VEL_BRAKE_MAX: 0.95,

  ATT_AMPL: 3.8, // To reduce the force of the attraction at cente,
  ATT_ZONE: 0.8,
  ATT_FORCE: 0.02 };



// Helpers 1
const gui = new dat.GUI();
gui.close();
const particleNumbers = gui.add(props, 'PARTICLE_NUMBERS', 1, 1500);
gui.add(props, 'LINE_WIDTH', 1, 10);
gui.add(props, 'DEMISE_DISTANCE', 0, 100);
gui.add(props, 'APPARITION_DISTANCE', 0, windowWidth);
gui.add(props, 'ROTATION_FORCE', 0, 100);

const velocity = gui.addFolder('Velocity');
const velMin = velocity.add(props, 'VEL_MIN', 0, 80);
const velMax = velocity.add(props, 'VEL_MAX', 0, 80);
const velBrakeMin = velocity.add(props, 'VEL_BRAKE_MIN', 0, 1);
const velBrakeMax = velocity.add(props, 'VEL_BRAKE_MAX', 0, 1);

const attraction = gui.addFolder('Attraction');
attraction.add(props, 'ATT_AMPL', 0, 10);
attraction.add(props, 'ATT_ZONE', 0, 1);
attraction.add(props, 'ATT_FORCE', 0, 0.1);


Math.sqr = a => a * a;
Math.randomF = (min, max) => Math.random() * (max - min) + min;
const getDist = (x1, y1, x2, y2) => Math.sqrt(Math.sqr(y2 - y1) + Math.sqr(x2 - x1));
const getRandomAngle = () => Math.random() * Math.PI * 2;

const getRandomVelMax = () => Math.randomF(props.VEL_MIN, props.VEL_MAX);
const getRandomVelBrake = () => Math.randomF(props.VEL_BRAKE_MIN, props.VEL_BRAKE_MAX);

/* ---- PARTICLE ---- */
class Particle {
  constructor(x, y) {
    this.init(x, y);
    this.life = 0;
    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];
  }

  init(x, y) {
    const angle = getRandomAngle();
    const radius = Math.randomF(0, props.APPARITION_DISTANCE);
    this.x = x || Math.cos(angle) * radius;
    this.y = y || Math.sin(angle) * radius;
    this.train = [];
    this.vel = {
      x: 0,
      y: 0,
      max: getRandomVelMax(),
      brake: getRandomVelBrake() };

  }

  render() {
    context.beginPath();
    context.strokeStyle = this.color;
 .........完整代码请登录后点击上方下载按钮下载查看