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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看