phenomenon.iife实现粒子风暴喷射动画效果代码-html代码-BFW代码库

phenomenon.iife实现粒子风暴喷射动画效果代码

代码语言：html

所属分类：粒子

代码描述：phenomenon.iife实现粒子风暴喷射动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
</style>
</head>
<body>

<canvas />

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/phenomenon.iife.js"></script><script >
      const multiplier = 40000;
const begin = 0.4;
const duration = 0.6;

function h2r(p, q, t) {
  if (t < 0) t += 1;
  if (t > 1) t -= 1;
  if (t < 1 / 6) return p + (q - p) * 6 * t;
  if (t < 1 / 2) return q;
  if (t < 2 / 3) return p + (q - p) * 6 * (2 / 3 - t);
  return p;
};

function getHSL(h, s, l) {
  h = (h % 1 + 1) % 1;
  s = Math.max(0, Math.min(1, s));
  l = Math.max(0, Math.min(1, l));
  if (s === 0) return [l, l, l];
  const p = l <= 0.5 ? l * (1 + s) : l + s - l * s;
  const q = 2 * l - p;
  return [h2r(q, p, h + 1 / 3), h2r(q, p, h), h2r(q, p, h - 1 / 3)];
};

function getRandom(value) {
  const floor = -value;
  return floor + Math.random() * value * 2;
}

const attributes = [
{
  name: "aPositionStart",
  data: (index, total) => {
    return [
    0,
    -1,
    0];

  },
  size: 3 },

{
  name: "aControlPointOne",
  data: (index, total) => {
    const angle = index * (2 * Math.PI / total);
    return [
    Math.cos(angle) * 1.5 + getRandom(0.5),
    1.5 + getRandom(0.5),
    Math.sin(angle) * 1.5];

  },
  size: 3 },

{
  name: "aControlPointTwo",
  data: (index, total) => {
    const angle = index * (2 * Math.PI / total);
    return [
    Math.cos(angle) + getRandom(1),
    1 + getRandom(0.5),
    Math.sin(angle) + getRandom(1)];

  },
  size: 3 },

{
  name: "aPositionEnd",
  data: (index, total) => {
    const angle = index * (2 * Math.PI .........完整代码请登录后点击上方下载按钮下载查看