canvas声波音频波动频谱动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas声波音频波动频谱动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  





  
  
  
<style>
body,html{
  background: #000;
  margin: 0;
  height: 100vh;
  overflow: hidden;
}
#c{
  background:#fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>

  
</head>

<body >
  <canvas id=c>

  
      <script>
c = document.querySelector('#c');
c.width = 1920;
c.height = 1080;
x = c.getContext('2d');
C = Math.cos;
S = Math.sin;
t = 0;
T = Math.tan;

rsz = window.onresize = () => {
  setTimeout(() => {
    if (document.body.clientWidth > document.body.clientHeight * 1.77777778) {
      c.style.height = '100vh';
      setTimeout(() => c.style.width = c.clientHeight * 1.77777778 + 'px', 0);
    } else {
      c.style.width = '100vw';
      setTimeout(() => c.style.height = c.clientWidth / 1.77777778 + 'px', 0);
    }
  }, 0);
};
rsz();

async function Draw() {

  if (!t) {
    R = (Rl, Pt, Yw, m) => {
      M = Math;
      A = M.atan2;
      H = M.hypot;
      X = S(p = A(X, Y) + Rl) * (d = H(X, Y));
      Y = C(p) * d;
      Y = S(p = A(Y, Z) + Pt) * (d = H(Y, Z));
      Z = C(p) * d;
      X = S(p = A(X, Z) + Yw) * (d = H(X, Z));
      Z = C(p) * d;
      if (m) {
        X += oX;
        Y += oY;
        Z += oZ;
      }
    };
    Q = () => [c.width / 2 + X / Z * 800, c.height / 2 + Y / Z * 800];
    I = (A, B, M, D, E, F, G, H) => (K = ((G - E) * (B - F) - (H - F) * (A - E)) / (J = (H - F) * (M - A) - (G - E) * (D - B))) >= 0 && K <= 1 && (L = ((M - A) * (B - F) - (D - B) * (A - E)) / J) >= 0 && L <= 1 ? [A + K * (M - A), B + K * (D - B)] : 0;

    Rn = Math.random;

    geoSphere = (mx, my, mz, iBc, size) => {
      let collapse = 0;
      let B = Array(iBc).fill().map(v => {
        X = Rn() - .5;
        Y = Rn() - .5;
        Z = Rn() - .5;
        return [X, Y, Z];
      });
      for (let m = 99; m--;) {
        B.map((v, i) => {
          X = v[0];
          Y = v[1];
          Z = v[2];
          B.map((q, j) => {
            if (j != i) {
              X2 = q[0];
              Y2 = q[1];
              Z2 = q[2];
              d = 1 + (Math.hypot(X - X2, Y - Y2, Z - Z2) * (3 + iBc / 40) * 3) ** 4;
              X += (X - X2) * 99 / d;
              Y += (Y - Y2) * 99 / d;
              Z += (Z - Z2) * 99 / d;
            }
          });
          d = Math.hypot(X, Y, Z);
          v[0] = X / d;
          v[1] = Y / d;
          v[2] = Z / d;
          if (collapse) {
            d = 25 + Math.hypot(X, Y, Z);
            v[0] = (X - X / d) / 1.1;
            v[1] = (Y - Y / d) / 1.1;
            v[2] = (Z - Z / d) / 1.1;
          }
        });
      }
      B.map(v => {
        v[0] *= size;
        v[1] *= size;
        v[2] *= size;
        v[0] += mx;
        v[1] += my;
        v[2] += mz;
      });
      return [mx, my, mz, size, B];
    };

    Cylinder = (rw, cl, ls1, ls2) => {
      let a = [];
      for (let i = rw; i--;) {
        let b = [];
        for (let j = cl; j--;) {
          X = S(p = Math.PI * 2 / cl * j) * ls1;
          Y = (1 / rw * i - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
        }
        //a = [...a, b]
        for (let j = cl; j--;) {
          b = [];
          X = S(p = Math.PI * 2 / cl * j) * ls1;
          Y = (1 / rw * i - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1;
          Y = (1 / rw * i - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          X = S(p = Math.PI * 2 / cl * (j + 1)) * ls1;
          Y = (1 / rw * (i + 1) - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          X = S(p = Math.PI * 2 / cl * j) * ls1;
          Y = (1 / rw * (i + 1) - .5) * ls2;
          Z = C(p) * ls1;
          b = [...b, [X, Y, Z]];
          a = [...a, b];
        }
      }
      b = [];
      for (let j = cl; j--;) {
        X = S(p = Math.PI * 2 / cl * j) * ls1;
        Y = ls2 / 2;
        Z = C(p) * ls1;
        b = [...b, [X, Y, Z]];
      }
      //a = [...a, b]
      return a;
    };

    Tetrahedron = size => {
      ret = [];
      a = [];
      let h = size / 1.4142 / 1.25;
      for (i = 3; i--;) {
        X = S(p = Math.PI * 2 / 3 * i) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = h;
        a = [...a, [X, Y, Z]];
      }
      ret = [...ret, a];
      for (j = 3; j--;) {
        a = [];
        X = 0;
        Y = 0;
        Z = -h;
        a = [...a, [X, Y, Z]];
        X = S(p = Math.PI * 2 / 3 * j) * size / 1.25;
        Y = C(p) * size / 1.25;
        Z = h;
        a = [...a, [X, Y, Z]];
        X = S(p = Math.PI * 2 / .........完整代码请登录后点击上方下载按钮下载查看