JSFiddle - React, Tailwind, and code Playground

by Sergey khorev

HTML

<div id="sphere-wrap">
    <canvas id="sphere"></canvas>
</div>

CSS

#sphere-wrap {
    height: 500px;
}
#sphere {
    width: 100%;
    height: 100%;
    background-image: url('bg.jpg');
    background-size: cover;
}

JavaScript

window.addEventListener("load", windowLoadHandler, false);
let sphereRad = 280; // радиус
let scale = 1; // масштаб
function windowLoadHandler() {
  canvasApp();
}

function canvasApp() {
  let theCanvas = document.getElementById("sphere");
  let sphere_wrap = document.getElementById("sphere-wrap");
  let context = theCanvas.getContext("2d");
  let displayWidth;
  let displayHeight;
  let timer;
  let wait;
  let count;
  let numToAddEachFrame;
  let particleList;
  let recycleBin;
  let particleAlpha;
  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;
  let p;
  let outsideTest;
  let nextParticle;
  let sinAngle;
  let cosAngle;
  let rotX, rotZ;
  let depthAlphaFactor;
  let i;
  let theta, phi;
  let x0, y0, z0;
  init();
  window.addEventListener('resize', init, false);

  function init() {
    wait = 1;
    count = wait - 1;
    numToAddEachFrame = 8;
    rgbString = "rgba(169,195,238,"; // цвет частиц
    particleAlpha = 1;
    displayWidth = theCanvas.width = sphere_wrap.offsetWidth;
    displayHeight = theCanvas.height = sphere_wrap.offsetHeight;
    fLen = 320;
    projCenterX = displayWidth / 3; // центр сферы по оси X
    projCenterY = displayHeight / 2; // центр сферы по оси Y
    zMax = fLen - 2;
    particleList = {};
    recycleBin = {};
    randAccelX = 0.1;
    randAccelY = 0.1;
    randAccelZ = 0.1;
    gravity = -0;
    particleRad = 2.5; // размер частиц
    sphereCenterX = 0;
    sphereCenterY = 0;
    sphereCenterZ = -3 - sphereRad;
    zeroAlphaDepth = -750;
    turnSpeed = 2 * Math.PI / 1200; // скорость вращения сферы
    turnAngle = 0;
    timer = setInterval(onTimer, 10 / 24);
  }

  function onTimer() {
    count++;
    if (count >= wait) {
      count = 0;
      for (i = 0; i < numToAddEachFrame; i++) {
        theta...