A rectangle orbiting about a point.

rectangle-orbiting-about-point.js

class Rectangle {
  constructor(gl, color, width, height) {
    this.gl     = gl;
    this.color  = color;
    this.width  = width;
    this.height = height;

    // Rotation, updated before each render.
    this.rotation = gl.mat2d.create();

    // Translation1: The radius of orbit.
    this.radiusTranslation = gl.mat2d.fromTranslation(
      gl.mat2d.create(),
      gl.vec2.fromValues(40, 0));

    // Translation2: The center of the orbit.
    this.orbitTranslation = gl.mat2d.fromTranslation(
      gl.mat2d.create(),
      gl.vec2.fromValues(100, 100));
  }

  /**
   * Update the Rectangle's transformation matrix before a render.
   */
  update(elapsedMs) {
    // Rotate PI per second.
    this.gl.mat2d.rotate(this.rotation, this.rotation,
      Math.PI * elapsedMs / 1000);
  }

  /**
   * Get the Rectangle's transformation matrix.
   */
  getTransformation() {
    // transformation = translate(P) * rotate(θ) * translate(r, 0)
    const transformation = this.gl.mat2d.create();
    
    this.gl.mat2d.multiply(
      transformation,
      this.orbitTranslation,
      this.rotation);

    this.gl.mat2d.multiply(
      transformation,
      transformation,
      this.radiusTranslation);
    
    return transformation;
  }
}