A rectangle rotating at a point.

rectangle-rotating-at-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();

    // Translation--the point about which the Rectangle should rotate.
    this.translation = gl.mat2d.fromTranslation(
      gl.mat2d.create(),
      gl.vec2.fromValues(40, 40));
  }

  /**
   * 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() {
    // Rotate then translate.
    return this.gl.mat2d.multiply(
      this.gl.mat2d.create(),
      this.translation,
      this.rotation);
  }
}