canvas实现引力通道动画模拟效果代码-html代码-BFW代码库

canvas实现引力通道动画模拟效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现引力通道动画模拟效果代码，引力通道是一种天文学中的现象，通常指质量很大的星体（如星系、恒星等）在宇宙中运动时所产生的引力效应，使得周围的物质沿着引力场的通道运动。这种引力通道可以将物质集中到某一区域，从而形成星系、星团等天体结构。

代码标签： 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 i>
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;
      X = S(p = A(X, Z) + Yw) * (d = H(X, Z));
      Z = C(p) * d;
      Y = S(p = A(Y, Z) + Pt) * (d = H(Y, 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;

    cl = 3;
    iPc = 60;
    Pheight = 70;
    Pwidth = 40;
    P = Array(iPc).fill().map((v, i) => {
      ls = Pwidth * (1 - i / iPc);
      X = S(p = Math.PI * 2 * cl / iPc * i - Math.PI / 2) * ls;
      Y = (i / iPc - .5) * Pheight;
      Z = C(p) * ls;
      if (!i) {
        cx = X;
        cy = Y;
        cz = Z;
      }
      return [X, Y, Z];
    });

    Rn = Math.random;

    B = [], iBv = .2, iBvariance = 1;
    spawnB = () => {
      X = cx;
      Y = cy;
      Z = cz - 16;
      vx = 0 + (Rn() - .5) * iBvariance;
      vy = 0 + (Rn() - .5) * iBvariance;
      vz = iBv;
      B = [...B, [.........完整代码请登录后点击上方下载按钮下载查看