@luceosports/play-rendering 1.19.0 → 2.0.0

package/src/math/LineDrawingMath.ts

@@ -0,0 +1,573 @@
+import { CourtPoint, LinePart } from '../types';
+import { matrix, Matrix, multiply, ones } from 'mathjs';
+
+const sinusoidNumberOfPoints = 1000;
+
+export function adjustedBezierCurveWithExclusionZones(
+  controlPoints: CourtPoint[],
+  startZoneRadius = null,
+  startAnchor = null,
+  endZoneRadius = null,
+  endAnchor = null
+) {
+  let curve = [...controlPoints];
+  if (startZoneRadius && startAnchor) {
+    const controlPointsMat = controlPointsMatFromPoints(controlPoints);
+    const tVal = firstTValForPointOnCurveOutsideCircle(controlPointsMat, startAnchor, startZoneRadius);
+    const splitCurves = splitBezierCurveAtTVal(controlPoints, tVal);
+    curve = [...splitCurves].pop();
+  }
+
+  if (endZoneRadius && endAnchor) {
+    const reverseControlPoints = [].concat(curve).reverse(); // reverse array without changing the original
+    const reverseControlPointsMat = controlPointsMatFromPoints(reverseControlPoints);
+    const reverseTVal = firstTValForPointOnCurveOutsideCircle(reverseControlPointsMat, endAnchor, endZoneRadius);
+    const tVal = 1.0 - reverseTVal;
+    const splitCurves = splitBezierCurveAtTVal(curve, tVal);
+    curve = splitCurves[0];
+  }
+  return curve as LinePart['controlPoints'];
+}
+
+// export function sinusodialBezierPathsForBezierPaths(
+//   controlPointPaths: LinePart[],
+//   waveLength: number,
+//   amplitude: number
+// ) {
+//   const [pointsOnCurve, tangentAnglesToPointsOnCurve] = evenlySpacedPointsOnCurveWithTangentAngles(
+//     controlPointPaths,
+//     waveLength / 2.0
+//   );
+//
+//   const returnPaths = [];
+//   let normal_PI_inc = Math.PI / 2;
+//   let index = 0;
+//
+//   while (index < pointsOnCurve.length - 4) {
+//     const beginPoint = pointsOnCurve[index];
+//     const midPoint = pointsOnCurve[index + 1];
+//     const endPoint = pointsOnCurve[index + 2];
+//     const midPointNormalAngle = tangentAnglesToPointsOnCurve[index + 1] + normal_PI_inc;
+//
+//     const controlPoint = {
+//       x: midPoint.x + amplitude * Math.cos(midPointNormalAngle),
+//       y: midPoint.y + amplitude * Math.sin(midPointNormalAngle)
+//     };
+//
+//     returnPaths.push([beginPoint, controlPoint, endPoint]);
+//     normal_PI_inc *= -1.0;
+//     index += 2;
+//   }
+//
+//   const lastPoint = [...[...returnPaths].pop()].pop();
+//   if (lastPoint) {
+//     const lastCp = [...[...controlPointPaths].pop().controlPoints].pop();
+//     returnPaths.push([lastPoint, lastCp]);
+//   }
+//   return returnPaths;
+// }
+
+export function distanceBetweenPoints(point1: CourtPoint, point2: CourtPoint) {
+  const xDist = point1.x - point2.x;
+  const yDist = point1.y - point2.y;
+  return Math.sqrt(xDist * xDist + yDist * yDist);
+}
+
+// function evenlySpacedPointsOnCurveWithTangentAngles(controlPointPaths: LinePart[], distanceBetweenPoints: number) {
+//   const returnPoints = [];
+//   const returnTangentAngles = [];
+//
+//   controlPointPaths.forEach((linePath, pathIndex) => {
+//     const { controlPoints } = linePath;
+//     const helperMat = helperMatrixForDegree(controlPoints.length - 1);
+//     const tMat = preCalculatedTMatrixForDegree(controlPoints.length - 1);
+//     const controlPointsMat = controlPointsMatFromPoints(controlPoints);
+//     const testPoints = multiply(helperMat, controlPointsMat);
+//     const testPointsTangentRatiosMat = slopesOnCurveAtTVals(controlPointsMat, tMat);
+//     const distancesBetweenPoints = distanceBetweenPointsOnCurve(testPoints);
+//     if (pathIndex === 0) {
+//       const tpFirstRowVector0 = subset(testPointsTangentRatiosMat, index(0, [0]));
+//       const tpFirstRowVector1 = subset(testPointsTangentRatiosMat, index(0, [1]));
+//       returnTangentAngles.push(Math.atan2(tpFirstRowVector1, tpFirstRowVector0));
+//       returnPoints.push({ x: tpFirstRowVector0, y: tpFirstRowVector1 });
+//     }
+//
+//     let currentDistance = 0.0;
+//     distancesBetweenPoints.forEach((dist, i) => {
+//       currentDistance += dist;
+//       if (currentDistance >= distanceBetweenPoints) {
+//         const tpAdjustedStartVectorX = subset(testPointsTangentRatiosMat, index(i, [0]));
+//         const tpAdjustedStartVectorY = subset(testPointsTangentRatiosMat, index(i, [1]));
+//         returnTangentAngles.push(Math.atan2(tpAdjustedStartVectorY, tpAdjustedStartVectorX));
+//         returnPoints.push({ x: tpAdjustedStartVectorX, y: tpAdjustedStartVectorY });
+//         currentDistance = 0.0;
+//       }
+//     });
+//   });
+//
+//   return [returnPoints, returnTangentAngles];
+// }
+
+// function distanceBetweenPointsOnCurve(points: Matrix) {
+//   // Creates a copy of the vector with points offset by 1 in order to calculate the relative distances between points
+//   const [pointsNumberOfRows] = points.size();
+//
+//   const xPointsVector = [];
+//   points.forEach(value => xPointsVector.push(value));
+//
+//   const oneOffSetXPoints = [...xPointsVector];
+//   oneOffSetXPoints.splice(0, 2);
+//   oneOffSetXPoints.push(xPointsVector[xPointsVector.length - 2]);
+//   oneOffSetXPoints.push(xPointsVector[xPointsVector.length - 1]);
+//
+//   const yPointsVector = [...xPointsVector];
+//   yPointsVector.splice(0, 1);
+//
+//   const oneOffSetYPoints = [...oneOffSetXPoints];
+//   oneOffSetYPoints.splice(0, 1);
+//
+//   const xPointsVectorStrideAdjusted = [];
+//   const oneOffSetXPointsStrideAdjusted = [];
+//   const yPointsVectorStrideAdjusted = [];
+//   const oneOffSetYPointsStrideAdjusted = [];
+//   xPointsVector.forEach((p, index) => {
+//     if (!(index % 2)) xPointsVectorStrideAdjusted.push(p);
+//   });
+//   oneOffSetXPoints.forEach((p, index) => {
+//     if (!(index % 2)) oneOffSetXPointsStrideAdjusted.push(p);
+//   });
+//   yPointsVector.forEach((p, index) => {
+//     if (!(index % 2)) yPointsVectorStrideAdjusted.push(p);
+//   });
+//   oneOffSetYPoints.forEach((p, index) => {
+//     if (!(index % 2)) oneOffSetYPointsStrideAdjusted.push(p);
+//   });
+//
+//   const distance = [];
+//   for (let n = 0; n < pointsNumberOfRows; ++n) {
+//     distance.push(
+//       Math.sqrt(
+//         (xPointsVectorStrideAdjusted[n] - oneOffSetXPointsStrideAdjusted[n]) ** 2 +
+//           (yPointsVectorStrideAdjusted[n] - oneOffSetYPointsStrideAdjusted[n]) ** 2
+//       )
+//     );
+//   }
+//   return distance;
+// }
+
+// function slopesOnCurveAtTVals(controlPointsMat: Matrix, tVals: Matrix) {
+//   const [cpMatNumberOfRows] = controlPointsMat.size();
+//
+//   if (cpMatNumberOfRows === 2) {
+//     const xPoints = [];
+//     const yPoints = [];
+//
+//     controlPointsMat.forEach((value, [, col]) => {
+//       switch (col) {
+//         case 0: {
+//           xPoints.push(value);
+//           break;
+//         }
+//         case 1: {
+//           yPoints.push(value);
+//           break;
+//         }
+//         default: {
+//           break;
+//         }
+//       }
+//     });
+//
+//     const xDiff = xPoints[1] - xPoints[0];
+//     const yDiff = yPoints[1] - yPoints[0];
+//
+//     const matrixRows = [];
+//     const [tValsNumberOfRows] = tVals.size();
+//     for (let i = 0; i < tValsNumberOfRows; i++) {
+//       matrixRows.push([xDiff, yDiff]);
+//     }
+//
+//     return matrix(matrixRows);
+//   }
+//
+//   let fixedMat: Matrix;
+//   if (cpMatNumberOfRows === 3) {
+//     fixedMat = quadraticDerivativeMatrix();
+//   } else {
+//     fixedMat = cubicDerivativeMatrix();
+//   }
+//
+//   console.log({ tVals, fixedMat, controlPointsMat });
+//
+//   const slopeRatios = calculatedPointsOnCurve(tVals, controlPointsMat, fixedMat);
+//
+//   console.log({ slopeRatios });
+//
+//   return slopeRatios;
+// }
+
+// function calculatedPointsOnCurve(tValMatrix: Matrix, controlPointsMatrix: Matrix, fixedMatrix: Matrix) {
+//   return multiply(tValMatrix, fixedMatrix, controlPointsMatrix);
+// }
+
+export function splitBezierCurveAtTVal(controlPoints: CourtPoint[], tVal: number) {
+  switch (controlPoints.length) {
+    case 2:
+      return splitLinearBezierCurveAtTVal(controlPoints, tVal);
+    case 3:
+      return splitQuadraticCurveAtTVal(controlPoints, tVal);
+    case 4:
+      return splitCubicCurveAtTVal(controlPoints, tVal);
+    default:
+      return null;
+  }
+}
+
+function linearPointAtTVal(controlPoints: CourtPoint[], tVal: number) {
+  const [firstControlPoint] = controlPoints;
+  const lastControlPoint = [...controlPoints].pop();
+  const xt = firstControlPoint.x + (lastControlPoint.x - firstControlPoint.x) * tVal;
+  const yt = firstControlPoint.y + (lastControlPoint.y - firstControlPoint.y) * tVal;
+  return { y: yt, x: xt };
+}
+
+function splitLinearBezierCurveAtTVal(controlPoints: CourtPoint[], tVal: number) {
+  // Comment from prev dev:
+  // this could be faster by doing calculations directly.. but who cares
+  const midPoint = linearPointAtTVal(controlPoints, tVal);
+  return [
+    [controlPoints[0], midPoint],
+    [midPoint, [...controlPoints].pop()]
+  ];
+}
+
+function splitQuadraticCurveAtTVal(controlPoints: CourtPoint[], tVal: number) {
+  const firstTwoPoints = [controlPoints[0], controlPoints[1]];
+  const lastTwoPoints = [controlPoints[1], controlPoints[2]];
+  const control1 = linearPointAtTVal(firstTwoPoints, tVal);
+  const control2 = linearPointAtTVal(lastTwoPoints, tVal);
+  const breakPoint = linearPointAtTVal([control1, control2], tVal);
+  return [
+    [controlPoints[0], control1, breakPoint],
+    [breakPoint, control2, controlPoints[2]]
+  ];
+}
+
+function splitCubicCurveAtTVal(controlPoints: CourtPoint[], tVal: number) {
+  const firstTwoPoints = [controlPoints[0], controlPoints[1]];
+  const middleTwoPoints = [controlPoints[1], controlPoints[2]];
+  const lastTwoPoints = [controlPoints[2], controlPoints[3]];
+
+  const firstTwoMidPoint = linearPointAtTVal(firstTwoPoints, tVal);
+  const middleTwoMidPoint = linearPointAtTVal(middleTwoPoints, tVal);
+  const lastTwoMidPoint = linearPointAtTVal(lastTwoPoints, tVal);
+
+  const midPoint123 = linearPointAtTVal([firstTwoMidPoint, middleTwoMidPoint], tVal);
+  const midPoint234 = linearPointAtTVal([middleTwoMidPoint, lastTwoMidPoint], tVal);
+  const breakPoint = linearPointAtTVal([midPoint123, midPoint234], tVal);
+
+  return [
+    [controlPoints[0], firstTwoMidPoint, midPoint123, breakPoint],
+    [breakPoint, midPoint234, lastTwoMidPoint, controlPoints[3]]
+  ];
+}
+
+function firstTValForPointOnCurveOutsideCircle(controlPointsMat: Matrix, anchorPoint: CourtPoint, radius: number) {
+  const [numberOfRows] = controlPointsMat.size();
+  const helperMat = helperMatrixForDegree(numberOfRows - 1);
+  const pointsOnCurveMat = multiply(helperMat, controlPointsMat);
+  const distances = distancesFromPointToPoints(anchorPoint, pointsOnCurveMat);
+
+  // Comment from prev dev:
+  // We're assuming that point 0 is the closest to the anchor point... So we could use a binary search here to save a bit of time
+  // Chances are is that the tVal will actually be near the beginning however due to the way the function i used at this time
+
+  let indexOfPoint = distances.length - 1;
+  for (let i = 0; i < distances.length; i++) {
+    if (distances[i] >= radius) {
+      indexOfPoint = i;
+      break;
+    }
+  }
+
+  const tInc = 1.0 / sinusoidNumberOfPoints;
+  return indexOfPoint * tInc;
+}
+
+function distancesFromPointToPoints(anchorPoint: CourtPoint, pointsOnCurveMat: Matrix) {
+  const xPointAdjustFromOrigin = -anchorPoint.x;
+  const yPointAdjustFromOrigin = -anchorPoint.y;
+
+  const adjustedXPoints = [];
+  const adjustedYPoints = [];
+
+  pointsOnCurveMat.forEach((value, [, col]) => {
+    switch (col) {
+      case 0: {
+        adjustedXPoints.push(value + xPointAdjustFromOrigin);
+        break;
+      }
+      case 1: {
+        adjustedYPoints.push(value + yPointAdjustFromOrigin);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  });
+
+  const distances = [];
+  for (let i = 0; i < adjustedXPoints.length; i++) {
+    distances.push(Math.sqrt(adjustedXPoints[i] * adjustedXPoints[i] + adjustedYPoints[i] * adjustedYPoints[i]));
+  }
+  return distances;
+}
+
+function helperMatrixForDegree(degree: number) {
+  switch (degree) {
+    case 1: {
+      return linearHelperMatrix();
+    }
+    case 2: {
+      return quadraticHelperMatrix();
+    }
+    case 3: {
+      return cubicHelperMatrix();
+    }
+    default: {
+      return null;
+    }
+  }
+}
+
+// function preCalculatedTMatrixForDegree(degree: number) {
+//   switch (degree) {
+//     case 1: {
+//       return linearTMatSinusoid();
+//     }
+//     case 2: {
+//       return quadraticTMatSinusoid();
+//     }
+//     case 3: {
+//       return cubicTMatSinusoid();
+//     }
+//     default: {
+//       return null;
+//     }
+//   }
+// }
+
+function linearBezierMatrix() {
+  return matrix([
+    [1, 0],
+    [-1, 1]
+  ]);
+}
+
+function quadraticBezierMatrix() {
+  return matrix([
+    [1, 0, 0],
+    [-2, 2, 0],
+    [1, -2, 1]
+  ]);
+}
+
+function cubicBezierMatrix() {
+  return matrix([
+    [1, 0, 0, 0],
+    [-3, 3, 0, 0],
+    [3, -6, 3, 0],
+    [-1, 3, -3, 1]
+  ]);
+}
+
+// function cubicDerivativeMatrix() {
+//   return matrix([
+//     [-3, 3, 0, 0],
+//     [6, -12, 6, 0],
+//     [-3, 9, -9, 3],
+//     [0, 0, 0, 0]
+//   ]);
+// }
+//
+// function quadraticDerivativeMatrix() {
+//   return matrix([
+//     [-2, 2, 0],
+//     [2, -4, 2],
+//     [0, 0, 0]
+//   ]);
+// }
+
+function linearHelperMatrix() {
+  return multiply(linearTMatSinusoid(), linearBezierMatrix());
+}
+
+function quadraticHelperMatrix() {
+  return multiply(quadraticTMatSinusoid(), quadraticBezierMatrix());
+}
+function cubicHelperMatrix() {
+  return multiply(cubicTMatSinusoid(), cubicBezierMatrix());
+}
+
+function linearTMatSinusoid() {
+  return tMatrixForEvenlyDistributedTValues(sinusoidNumberOfPoints, 1);
+}
+
+function quadraticTMatSinusoid() {
+  return tMatrixForEvenlyDistributedTValues(sinusoidNumberOfPoints, 2);
+}
+
+function cubicTMatSinusoid() {
+  return tMatrixForEvenlyDistributedTValues(sinusoidNumberOfPoints, 3);
+}
+
+function tMatrixForEvenlyDistributedTValues(numberOfPoints: number, degreeOfCurve: number) {
+  const increment = 1.0 / numberOfPoints;
+  let tVal = 0;
+  const returnArray = (ones(numberOfPoints + 1, degreeOfCurve + 1) as Matrix).map((value, [, col]) => {
+    let resVal = null;
+    switch (col) {
+      case 0: {
+        resVal = 1.0;
+        break;
+      }
+      case 1: {
+        resVal = tVal;
+        break;
+      }
+      case 2: {
+        resVal = tVal * tVal;
+        break;
+      }
+      case 3: {
+        resVal = tVal * tVal * tVal;
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+    tVal += increment;
+    return resVal;
+  });
+
+  return matrix(returnArray);
+}
+
+function controlPointsMatFromPoints(controlPoints: CourtPoint[]) {
+  const controlPointsVec = controlPoints.map(cp => {
+    return [cp.x, cp.y];
+  });
+  return matrix(controlPointsVec);
+}
+
+export function bezierBoundingBox(controlPoints: LinePart['controlPoints']) {
+  if (controlPoints.length === 3) {
+    throw new Error('bezierBoundingBox function supports only linear and cubic bezier curves for now');
+  }
+
+  const bMinMax = controlPoints.length === 2 ? linearBezierMinMax(controlPoints) : cubicBezierMinMax(controlPoints);
+
+  // Extend bounding box for straight lines
+  const yAxisOffset = controlPoints.length === 2 ? 1 : 0;
+
+  return [
+    {
+      x: bMinMax.min.x,
+      y: bMinMax.min.y - yAxisOffset
+    },
+    {
+      x: bMinMax.max.x,
+      y: bMinMax.min.y - yAxisOffset
+    },
+    {
+      x: bMinMax.max.x,
+      y: bMinMax.max.y + yAxisOffset
+    },
+    {
+      x: bMinMax.min.x,
+      y: bMinMax.max.y + yAxisOffset
+    }
+  ];
+}
+
+function linearBezierMinMax([p0, p1]: [CourtPoint, CourtPoint]) {
+  const xValues = [p0.x, p1.x];
+  const yValues = [p0.y, p1.y];
+  return {
+    min: { x: Math.min.apply(0, xValues), y: Math.min.apply(0, yValues) },
+    max: { x: Math.max.apply(0, xValues), y: Math.max.apply(0, yValues) }
+  };
+}
+
+function cubicBezierMinMax([p0, p1, p2, p3]: [CourtPoint, CourtPoint, CourtPoint, CourtPoint]) {
+  const tValues: number[] = [];
+  const xValues: number[] = [];
+  const yValues: number[] = [];
+  let a: number;
+  let b: number;
+  let c: number;
+  let t: number;
+  let t1: number;
+  let t2: number;
+  let b2ac: number;
+  let sqrtb2ac: number;
+  for (let i = 0; i < 2; ++i) {
+    if (i === 0) {
+      b = 6 * p0.x - 12 * p1.x + 6 * p2.x;
+      a = -3 * p0.x + 9 * p1.x - 9 * p2.x + 3 * p3.x;
+      c = 3 * p1.x - 3 * p0.x;
+    } else {
+      b = 6 * p0.y - 12 * p1.y + 6 * p2.y;
+      a = -3 * p0.y + 9 * p1.y - 9 * p2.y + 3 * p3.y;
+      c = 3 * p1.y - 3 * p0.y;
+    }
+    if (Math.abs(a) < 1e-12) {
+      if (Math.abs(b) < 1e-12) {
+        continue;
+      }
+      t = -c / b;
+      if (t > 0 && t < 1) {
+        tValues.push(t);
+      }
+      continue;
+    }
+    b2ac = b * b - 4 * c * a;
+    if (b2ac < 0) {
+      if (Math.abs(b2ac) < 1e-12) {
+        t = -b / (2 * a);
+        if (t > 0 && t < 1) {
+          tValues.push(t);
+        }
+      }
+      continue;
+    }
+    sqrtb2ac = Math.sqrt(b2ac);
+    t1 = (-b + sqrtb2ac) / (2 * a);
+    if (t1 > 0 && t1 < 1) {
+      tValues.push(t1);
+    }
+    t2 = (-b - sqrtb2ac) / (2 * a);
+    if (t2 > 0 && t2 < 1) {
+      tValues.push(t2);
+    }
+  }
+
+  let j = tValues.length;
+  let mt: number;
+  while (j--) {
+    t = tValues[j];
+    mt = 1 - t;
+    xValues[j] = mt * mt * mt * p0.x + 3 * mt * mt * t * p1.x + 3 * mt * t * t * p2.x + t * t * t * p3.x;
+    yValues[j] = mt * mt * mt * p0.y + 3 * mt * mt * t * p1.y + 3 * mt * t * t * p2.y + t * t * t * p3.y;
+  }
+
+  xValues.push(p0.x, p3.x);
+  yValues.push(p0.y, p3.y);
+
+  return {
+    min: { x: Math.min.apply(0, xValues), y: Math.min.apply(0, yValues) },
+    max: { x: Math.max.apply(0, xValues), y: Math.max.apply(0, yValues) }
+  };
+}

package/src/models/{Animation.js → AnimationModel.ts}

@@ -1,15 +1,24 @@
-const _ = require('lodash');
-const config = require('../config');
-const Frame = require('./Frame');
-const Line = require('./Line');
-
-class Animation {
-  constructor(ctx, play) {
-    this.ctx = ctx;
+import _ from 'lodash';
+import { debug } from '../config';
+import FrameModel from './FrameModel';
+import LineModel from './LineModel';
+import PlayModel from './PlayModel';
+
+export default class AnimationModel {
+  private play: PlayModel;
+  private readonly playBase: PlayModel;
+  private animationFrame: FrameModel;
+  private loopId: number | null;
+  private running: boolean;
+  private framesLoadTime: number[];
+  private timeStart: number | null;
+  private timeElapsed: number;
+  private timeElapsedSaved: number;
+
+  constructor(private ctx: CanvasRenderingContext2D, play: PlayModel) {
     this.play = _.cloneDeep(play);
     this.playBase = _.cloneDeep(play);
-
-    this.animationFrame = new Frame(this.play, this.currentPlayPhase, this.globalProgress).setContext(this.ctx);
+    this.animationFrame = new FrameModel(this.play, this.currentPlayPhase, this.globalProgress).setContext(this.ctx);
 
     this.loopId = null;
     this.running = false;
@@ -37,8 +46,8 @@ class Animation {
     return parseInt(phaseInterval ? phaseInterval[0] : Object.keys(this.linesPhaseIntervals).pop());
   }
 
-  get linesPhaseIntervals() {
-    const result = {};
+  get linesPhaseIntervals(): Record<number, { min: number; max: number }> {
+    const result: Record<number, { min: number; max: number }> = {};
     this.play.playData.lines.forEach(line => {
       if (!result[line.phase]) result[line.phase] = { min: 0, max: 0 };
       line.animations.forEach(({ keyTimes }) => {
@@ -53,13 +62,13 @@ class Animation {
 
   get lastLineAnimationMax() {
     return this.play.playData.lines.reduce((result, line) => {
-      const lineModel = new Line(line);
+      const lineModel = new LineModel(line);
       return result > lineModel.lastAnimEndTime ? result : lineModel.lastAnimEndTime;
     }, 0);
   }
 
-  start(finishCallback, progressCallback) {
-    if (config.debug) {
+  start(finishCallback: () => void, progressCallback: (progress: number) => void) {
+    if (debug) {
       console.log('Animate stared with duration', this.play.playData.animationDuration);
       console.log('this.play.playData.players', this.play.playData.players);
       console.log('this.play.playData.lines', this.play.playData.lines);
@@ -75,7 +84,7 @@ class Animation {
     this.timeElapsedSaved = this.timeElapsed;
   }
 
-  setProgress(progress) {
+  setProgress(progress: number) {
     const elapsed = this.countTimeElapsedFromProgress(progress);
     this.timeElapsed = elapsed;
     this.timeElapsedSaved = elapsed;
@@ -88,7 +97,7 @@ class Animation {
   }
 
   drawPreviewFrame() {
-    new Frame(this.play, this.currentPlayPhase, this.globalProgress).setContext(this.ctx).draw();
+    new FrameModel(this.play, this.currentPlayPhase, this.globalProgress).setContext(this.ctx).draw();
   }
 
   reset() {
@@ -98,11 +107,11 @@ class Animation {
     this.play = _.cloneDeep(this.playBase);
   }
 
-  countTimeElapsedFromProgress(progress) {
+  countTimeElapsedFromProgress(progress: number) {
     return this.animationDuration * 1000 * progress;
   }
 
-  drawFrame(finishCallback, progressCallback, timestamp) {
+  drawFrame(finishCallback: () => void, progressCallback: (progress: number) => void, timestamp: number) {
     if (!this.running) return;
 
     if (this.globalProgress >= this.lastLineAnimationMax) {
@@ -124,7 +133,7 @@ class Animation {
 
     this.timeElapsed = timestamp - this.timeStart + this.timeElapsedSaved;
 
-    if (config.debug) {
+    if (debug) {
       console.log(
         `Frames: ${this.framesLoadTime.length}, Avg frame time: ${this.framesLoadTime.reduce((a, b) => a + b) /
           this.framesLoadTime.length}`
@@ -141,5 +150,3 @@ class Animation {
     requestAnimationFrame(this.drawFrame.bind(this, finishCallback, progressCallback));
   }
 }
-
-module.exports = Animation;

package/src/models/Base/InternalFrameModel.ts

@@ -0,0 +1,23 @@
+import { Line, Player, Note, Shape } from '../../types';
+import { LineAdjusted } from '../LineModel';
+
+export default class Model<M extends Line | Player | Note | Shape, A extends LineAdjusted | Player | Note | Shape> {
+  public readonly originalData: M;
+  private readonly adjustedData: A;
+  constructor(data: M) {
+    this.originalData = JSON.parse(JSON.stringify(data));
+    this.adjustedData = JSON.parse(JSON.stringify(data));
+  }
+
+  _getAttrOriginal<K extends keyof M>(attr: K) {
+    return typeof this.originalData[attr] !== 'undefined' ? this.originalData[attr] : null;
+  }
+
+  _getAttr<K extends keyof A>(attr: K) {
+    return typeof this.adjustedData[attr] !== 'undefined' ? this.adjustedData[attr] : null;
+  }
+
+  _setAttr<K extends keyof A>(attr: K, value: A[K]) {
+    this.adjustedData[attr] = value;
+  }
+}