Make a globe [3D-2D]

script.js

class Dot {
  constructor() {
    this.theta = Math.random() * 2 * Math.PI; // Random value between [0, 2Pi]
    this.phi = Math.acos((Math.random() * 2) - 1); // Random value between [0, Pi]
    
    // Calculate the [x, y, z] coordinates of the dot along the globe
    this.x = 0;
    this.y = 0;
    this.z = 0;
    
    this.xProjected = 0;
    this.yProjected = 0;
    this.scaleProjected = 0;
    
    TweenMax.to(this, 20 + Math.random() * 10, {
      theta: this.theta + Math.PI * 2,
      repeat: -1,
      ease: Power0.easeNone
    });
  }
  // Do some math to project the 3D position into the 2D canvas
  project() {
    this.x = GLOBE_RADIUS * Math.sin(this.phi) * Math.cos(this.theta);
    this.y = GLOBE_RADIUS * Math.cos(this.phi);
    this.z = GLOBE_RADIUS * Math.sin(this.phi) * Math.sin(this.theta) + GLOBE_RADIUS;
    
    this.scaleProjected = PERSPECTIVE / (PERSPECTIVE + this.z);
    this.xProjected = (this.x * this.scaleProjected) + PROJECTION_CENTER_X;
    this.yProjected = (this.y * this.scaleProjected) + PROJECTION_CENTER_Y;
  }
  // Draw the dot on the canvas
  draw() {
    this.project();
    ctx.globalAlpha = (this.scaleProjected - 0.5) * 2;
    ctx.fillRect(this.xProjected - DOT_RADIUS, this.yProjected - DOT_RADIUS, DOT_RADIUS * 2 * this.scaleProjected, DOT_RADIUS * 2 * this.scaleProjected);
  }
}