JSFiddle - React, Tailwind, and code Playground

by Chris Maloney

HTML

<script src="http://nicolausmaloney.org/temp/matrix.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

CSS

canvas { border: 1px solid red; }

JavaScript

class AnimationContext {

  // Constructor. If _previous is null or absent, then this is the root, and 
  // none of the following arguments will be used.
  // If _relativeTime is null, then this is a "stop".
  constructor(_opts, _prev, _relTimeArg, _matrix) {
    this.opts = utils.extend(AnimationContext.defaults, _opts);

    const prev = this.prev = _prev || null;
    const isRoot = this.isRoot = (_prev == null);

    // relTime, the member, is always a number
    this.relTime = 
        isRoot ? 0 
      : (_relTimeArg || 0);

    this.time = 
        isRoot ? 0 
      : prev.time + this.relTime;

    const isStop = this.isStop = 
        isRoot ? true 
      : (_relTimeArg != null);

    this.prevStop = 
        isRoot ? null 
      : prev.isStop ? prev 
      : prev.prevStop;

    const matrix = this.matrix = 
        isRoot ? new Matrix() 
      : _matrix;

    // The transformation matrix since (but not including) the last stop
    this.stopProduct = 
        (isRoot || prev.isStop) ? matrix 
      : prev.stopProduct.clone().multiply(matrix);

    // The cumulative transform -- only set for stops
    this.product = 
        isRoot ? matrix 
      : isStop ? this.prevStop.matrix.clone().multiply(this.stopProduct)
      : null;
  }



  // All of the following return a new AnimationContext object that describes
  // an interpolated transformation of this one. 
  // Almost all of these are derived from, and delegate to, methods defined in 
  // the Matrix object. See 
  // https://github.com/epistemex/transformation-matrix-js#quick-overview.

  // Some of these delegate to Matrix class methods, that create new Matrix 
  // objects, while others to methods that mutate the Matrix objects. In the 
  // latter case, we call clone() first.

  // The `t` parameter is either null or a relative time in seconds. When 
  // non-null, it sets a "stop", such that the effective transform at any time
  // before t is the iterpolation of all of the transforms since the...