Проблемы с холстом Не в состоянии воспроизвести дизайн

Question

Мне нужно создать анимацию холста, как требует дизайн. Я провожу почти 3 дня, но я не могу делать ничего, как в дизайне. Здесь ЗАПРОШЕННЫЙ дизайн!, А здесь - то, что у меня есть сейчас: текущая реализация, которая определенно не та, что требовалась от дизайна. Мне нужна только анимация планеты из частиц на заднем плане (также весь процесс анимации изменяется во времени, он начинается с нескольких частиц, но затем количество растет и направления движения частиц изменяются)

вот мой текущий код:

export class CanvasComponent implements OnInit {

  sphereRad = 280;
  radius_sp = 1;
  distance = 600;
  particle_size = 0.7;
  constructor() { }

  ngOnInit() {
    this.canvasApp();
  }

  canvasApp () {
    const canvas = document.querySelector('canvas');
    const context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let displayWidth;
    let displayHeight;
    let wait;
    let count;
    let numToAddEachFrame;
    let particleList;
    let recycleBin;
    let particleAlpha;
    let r, g, b;
    let fLen;
    let m;
    let projCenterX;
    let projCenterY;
    let zMax;
    let turnAngle;
    let turnSpeed;
    let sphereCenterX, sphereCenterY, sphereCenterZ;
    let particleRad;
    let zeroAlphaDepth;
    let randAccelX, randAccelY, randAccelZ;
    let gravity;
    let rgbString;
    // we are defining a lot of letiables used in the screen update functions globally so that they don't have to be redefined every frame.
    let p;
    let outsideTest;
    let nextParticle;
    let sinAngle;
    let cosAngle;
    let rotX, rotZ;
    let depthAlphaFactor;
    let i;
    let theta, phi;
    let x0, y0, z0;

    // INITIALLI
    const init = () => {
      wait = 1;
      count = wait - 1;
      numToAddEachFrame = 30;

      // particle color
      r = 255;
      g = 255;
      b = 255;

      rgbString = 'rgba(' + r + ',' + g + ',' + b + ','; // partial string for color which will be completed by appending alpha value.
      particleAlpha = 1; // maximum alpha

      displayWidth = canvas.width;
      displayHeight = canvas.height;

      fLen = this.distance; // represents the distance from the viewer to z=0 depth.

      // projection center coordinates sets location of origin
      projCenterX = displayWidth / 2;
      projCenterY = displayHeight / 2;

      // we will not draw coordinates if they have too large of a z-coordinate (which means they are very close to the observer).
      zMax = fLen - 2;

      particleList = {};
      recycleBin = {};

      // random acceleration factors - causes some random motion
      randAccelX = 0.1;
      randAccelY = 0.1;
      randAccelZ = 0.1;

      gravity = -0; // try changing to a positive number (not too large, for example 0.3), or negative for floating upwards.

      particleRad = this.particle_size;

      sphereCenterX = 0;
      sphereCenterY = 0;
      sphereCenterZ = -3 - this.sphereRad;

      // alpha values will lessen as particles move further back, causing depth-based darkening:
      zeroAlphaDepth = 0;

      turnSpeed = 2 * Math.PI / 1200; // the sphere will rotate at this speed (one complete rotation every 1600 frames).
      turnAngle = 0; // initial angle

      // timer = setInterval(onTimer, 10 / 24);
      onTimer();
    }

    const onTimer = () => {
      // if enough time has elapsed, we will add new particles.
      count++;
      if (count >= wait) {

        count = 0;
        for (i = 0; i < numToAddEachFrame; i++) {
          theta = Math.random() * 2 * Math.PI;
          phi = Math.acos(Math.random() * 2 - 1);
          x0 = this.sphereRad * Math.sin(phi) * Math.cos(theta);
          y0 = this.sphereRad * Math.sin(phi) * Math.sin(theta);
          z0 = this.sphereRad * Math.cos(phi);

          // We use the addParticle function to add a new particle. The parameters set the position and velocity components.
          // Note that the velocity parameters will cause the particle to initially fly outwards away from the sphere center (after
          // it becomes unstuck).
          const p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.002 * x0, 0.002 * y0, 0.002 * z0);

          // we set some 'envelope' parameters which will control the evolving alpha of the particles.
          p.attack = 50;
          p.hold = 50;
          p.decay = 100;
          p.initValue = 0;
          p.holdValue = particleAlpha;
          p.lastValue = 0;

          // the particle will be stuck in one place until this time has elapsed:
          p.stuckTime = 90 + Math.random() * 20;

          p.accelX = 0;
          p.accelY = gravity;
          p.accelZ = 0;
        }
      }

      // update viewing angle
      turnAngle = (turnAngle + turnSpeed) % (2 * Math.PI);
      sinAngle = Math.sin(turnAngle);
      cosAngle = Math.cos(turnAngle);

      // background fill
      context.fillStyle = '#000000';
      context.fillRect(0, 0, displayWidth, displayHeight);

      // update and draw particles
      p = particleList.first;
      while (p != null) {
        // before list is altered record next particle
        nextParticle = p.next;

        // update age
        p.age++;

        // if the particle is past its 'stuck' time, it will begin to move.
        if (p.age > p.stuckTime) {
          p.velX += p.accelX + randAccelX * (Math.random() * 2 - 1);
          p.velY += p.accelY + randAccelY * (Math.random() * 2 - 1);
          p.velZ += p.accelZ + randAccelZ * (Math.random() * 2 - 1);

          p.x += p.velX;
          p.y += p.velY;
          p.z += p.velZ;
        }

        /*
              We are doing two things here to calculate display coordinates.
              The whole display is being rotated around a vertical axis, so we first calculate rotated coordinates for
              x and z (but the y coordinate will not change).
              Then, we take the new coordinates (rotX, y, rotZ), and project these onto the 2D view plane.
              */
        rotX =  cosAngle * p.x + sinAngle * (p.z - sphereCenterZ);
        rotZ =  -sinAngle * p.x + cosAngle * (p.z - sphereCenterZ) + sphereCenterZ;
        // m = this.radius_sp * fLen / (fLen - rotZ);
        m = this.radius_sp;
        p.projX = rotX * m + projCenterX;
        p.projY = p.y * m + projCenterY;
        p.projZ = rotZ * m + projCenterX;
        // update alpha according to envelope parameters.
        if (p.age < p.attack + p.hold + p.decay) {
          if (p.age < p.attack) {
            p.alpha = (p.holdValue - p.initValue) / p.attack * p.age + p.initValue;
          } else if (p.age < p.attack + p.hold) {
            p.alpha = p.holdValue;
          } else if (p.age < p.attack + p.hold + p.decay) {
            p.alpha = (p.lastValue - p.holdValue) / p.decay * (p.age - p.attack - p.hold) + p.holdValue;
          }
        } else {
          p.dead = true;
        }

        // see if the particle is still within the viewable range.
        if ((p.projX > displayWidth) || (p.projX < 0) || (p.projY < 0) || (p.projY > displayHeight) || (rotZ > zMax)) {
          outsideTest = true;
        } else {
          outsideTest = false;
        }
        if (outsideTest || p.dead ||
          (p.projX  > displayWidth / (2 + (1 - Math.random())) && p.projZ + displayWidth * 0.1  > displayWidth / 2) ||
          (p.projX < displayWidth / (2 - (1 - Math.random()))  && p.projZ + displayWidth * 0.25  < displayWidth / 2)
        ) {
          recycle(p);
        } else {
          // depth-dependent darkening
          // console.log(turnAngle, rotZ)
          depthAlphaFactor = 1;
          // depthAlphaFactor = (1 - (1.5 + rotZ / 100));
          depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor < 0) ? 0 : depthAlphaFactor);
          context.fillStyle = rgbString + depthAlphaFactor * p.alpha + ')';
          // draw
          context.beginPath();
          context.arc(p.projX, p.projY, m * particleRad, 0, 2 * Math.PI, false);
          context.closePath();
          context.fill();
        }

        p = nextParticle;
      }
      window.requestAnimationFrame(onTimer);
    }

    const addParticle = (x0, y0, z0, vx0, vy0, vz0) => {
      let newParticle;
      // const color;


      // check recycle bin for available drop:
      if (recycleBin.first != null) {
        newParticle = recycleBin.first;
        // remove from bin
        if (newParticle.next != null) {
          recycleBin.first = newParticle.next;
          newParticle.next.prev = null;
        } else {
          recycleBin.first = null;
        }
      } else {
        newParticle = {};
      }
      // if the recycle bin is empty, create a new particle (a new empty object):
      // add to beginning of particle list
      if (particleList.first == null) {
        particleList.first = newParticle;
        newParticle.prev = null;
        newParticle.next = null;
      } else {
        newParticle.next = particleList.first;
        particleList.first.prev = newParticle;
        particleList.first = newParticle;
        newParticle.prev = null;
      }

      // initialize
      newParticle.x = x0;
      newParticle.y = y0;
      newParticle.z = z0;
      newParticle.velX = vx0;
      newParticle.velY = vy0;
      newParticle.velZ = vz0;
      newParticle.age = 0;
      newParticle.dead = false;

      if (Math.random() < 0.5) {
        newParticle.right = true;
      } else {
        newParticle.right = false;
      }
      return newParticle;
    }

    const recycle = (p) => {
      // remove from particleList
      if (particleList.first === p) {
        if (p.next != null) {
          p.next.prev = null;
          particleList.first = p.next;
        } else {
          particleList.first = null;
        }
      } else {
        if (p.next == null) {
          p.prev.next = null;
        } else {
          p.prev.next = p.next;
          p.next.prev = p.prev;
        }
      }
      // add to recycle bin
      if (recycleBin.first == null) {
        recycleBin.first = p;
        p.prev = null;
        p.next = null;
      } else {
        p.next = recycleBin.first;
        recycleBin.first.prev = p;
        recycleBin.first = p;
        p.prev = null;
      }
    };
    init();
  }
}

Поэтому я буду рад любой помощи, также возможна НАГРАДА (для полной реализации) (ETH, BTC в любой валюте, которую вы пожелаете).