canvas实现粒子文字交互聚集消散动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：canvas实现粒子文字交互聚集消散动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    *, *::before, *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{ font-size: 10px; }

html, body{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

canvas{
  display: block;
  cursor: crosshair;
}
</style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas></canvas>
    <!-- partial -->
    <script >
        (function (universe) {

  ///////////////////////////////////////////////////////////////////////////////
  // HEAVILY INSPIRED BY: https://codepen.io/ImagineProgramming/full/LpOJzM    //
  //                                                                           //
  // HERE ARE SOME TRULY AMAZING RESOURCES I USED TO LEARN ABOUT PERLIN NOISE: //
  // https://www.scratchapixel.com/                                            //
  // http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf           //
  ///////////////////////////////////////////////////////////////////////////////

  function perlinSmooth(t) {return t * t * t * (10 + (6 * t - 15) * t);}

  function lerp(t, v0, v1) {return v0 * (1 - t) + v1 * t;}

  class Vec3D {

    constructor(x = 0, y = 0, z = 0) {
      this.x = x;
      this.y = y;
      this.z = z;
      return this;
    }

    dot(x, y, z) {return this.x * x + this.y * y + this.z * z;}}



  const Perlin3D = function () {

    //private constants
    const _scrambledIndexes = [151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44, 154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180];

    const _gradients = [
    new Vec3D(1, 1, 0), new Vec3D(1, -1, 0), new Vec3D(-1, -1, 0), new Vec3D(-1, 1, 0),
    new Vec3D(1, 0, -1), new Vec3D(-1, 0, -1), new Vec3D(1, 0, 1), new Vec3D(-1, 0, 1),
    new Vec3D(0, 1, -1), new Vec3D(0, -1, -1), new Vec3D(0, 1, 1), new Vec3D(0, -1, 1)];


    const _permutationTable = new Array(512);

    for (let i = 0; i < 256; i++) {
      _permutationTable[i] = _permutationTable[i + 256] = _scrambledIndexes[i];
    }

    function noise(x, y, z) {

      //find the location of the cube the point we are considering sits in, in our imaginary lattice
      let X = Math.floor(x);
      let Y = Math.floor(y);
      let Z = Math.floor(z);

      //find the components of the vector describing the relative location of the point within the cube
      const tx = x - X;
      const ty = y - Y;
      const tz = z - Z;

      //wrap the coordinates of the cube if needed (just in case we are outside of the noise function's domain)
      X = X & 255;
      Y = Y & 255;
      Z = Z & 255;

      //find the index of a random gradient using an hash table
      const gradientIndex000 = _permutationTable[X + _permutationTable[Y + _permutationTable[Z]]] % _gradients.length;
      const gradientIndex001 = _permutationTable[X + _permutationTable[Y + _permutationTable[Z + 1]]] % _gradients.length;
      const gradientIndex010 = _permutationTable[X + _permutationTable[Y + 1 + _permutationTable[Z]]] % _gradients.length;
      const gradientIndex011 = _permutationTable[X + _permutationTable[Y + 1 + _permutationTable[Z + 1]]] % _gradients.length;
      const gradientIndex100 = _permutationTable[X + 1 + _permutationTable[Y + _permutationTable[Z]]] % _gradients.length;
      const gradientIndex101 = _permutationTable[X + 1 + _permutationTable[Y + _permutationTable[Z + 1]]] % _gradients.length;
      const gradientIndex110 = _permutationTable[X + 1 + _permutationTable[Y + 1 + _permutationTable[Z]]] % _gradients.length;
      const gradientIndex111 = _permutationTable[X + 1 + _permutationTable[Y + 1 + _permutationTable[Z + 1]]] % _gradients.length;

      //find the dot product between the gradients we just found and the initial point's relative position vector
      const dot000 = _gradients[gradientIndex000].dot(tx, ty, tz);
      const dot100 = _gradients[gradientIndex100].dot(tx - 1, ty, tz);
      const dot010 = _gradients[gradientIndex010].dot(tx, ty - 1, tz);
      const dot110 = _gradients[gradientIndex110].dot(tx - 1, ty - 1, tz);
      const dot001 = _gradients[gradientIndex001].dot(tx, ty, tz - 1);
      const dot101 = _gradients[gradientIndex101].dot(tx - 1, ty, tz - 1);
      const dot011 = _gradients[gradientIndex011].dot(tx, ty - 1, tz - 1);
      const dot111 = _gradients[gradientIndex111].dot(tx - 1, ty - 1, tz - 1);

      //remap the point's relative position vector's components using Perlin's fave polynomial function
      const smoothX = perlinSmooth(tx);
      const smoothY = perlinSmooth(ty);
      const smoothZ = perlinSmooth(tz);

      //start interpolating, one axis at a time
      const interpolX00 = lerp(smoothX, dot000, dot100);
      const interpolX01 = lerp(smoothX, dot001, dot101);
      const interpolX10 = lerp(smoothX, dot010, dot110);
      const interpolX11 = lerp(smoothX, dot011, dot111);

      const interpolXY0 = lerp(smoothY, interpolX00, interpolX10);
      const interpolXY1 = lerp(smoothY, interpolX01, interpolX11);

      const noise = lerp(smoothZ, interpolXY0, interpolXY1); //make some noise

      return noise;

    }

    return { noise };

  }();

  const particles = function () {

    //private variables
    let _x,_y,_hue = 0,_inFormation = false;

    let _RAINBOW = false;

    const _bounds = { x: undefined, y: undefined };
    const _particlesNumber = 8000;
  .........完整代码请登录后点击上方下载按钮下载查看