make IDeformer an abstract class with basic implementation

examples/components/FaceMaskExample.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import { disposableEvent } from 'jsio-event-kit';
 
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
@@ -72,15 +73,15 @@ export default class FaceMaskExample extends VideoExample {
     // draw face deformation model
     const tracker = this.state.tracker;
     const deformer = this.state.deformer;
-    deformer.load(
-      video,
-      tracker.getCurrentPosition(),
-      tracker,
-      video
-    );
-
-    // hide video and score
-    this.setState({ hideMedia: true, showScore: false });
+    deformer.setTracker(tracker);
+    deformer.setMaskTexture(video);
+    deformer.setBackground(video);
+
+    const disposable = disposableEvent(tracker, 'converged', () => {
+      // hide video and score
+      this.setState({ hideMedia: true, showScore: false });
+      disposable.dispose();
+    });
   }
 
   _drawGridLoop () {

examples/reducers/examples.js

@@ -95,7 +95,7 @@ export const setExample = (example) => {
 
 // The reducers
 const DEFAULT_STATE = {
-  activeExample: EXAMPLES[0].id
+  activeExample: EXAMPLES[7].id
 };
 
 export default function (state = DEFAULT_STATE, action) {

js/deformers/Deformer.ts

@@ -0,0 +1,137 @@
+import { getWebGLContext } from 'clmtrackr/js/utils/webgl';
+import {
+  getBoundingBox,
+  generateTextureVertices
+} from 'clmtrackr/js/utils/points';
+import { getImageData } from 'clmtrackr/js/utils/image';
+
+
+abstract class Deformer {
+  protected _gl: WebGLRenderingContext;
+
+  protected _tracker;
+  protected _verticeMap;
+
+  protected _dynamicMaskTexture: boolean;
+  protected _maskTextureSrcElement: HTMLElement;
+  protected _maskTextureCanvas: HTMLCanvasElement;
+
+  protected _pointBB;
+  protected _maskTextureCoord;
+
+
+  abstract setBackground (element: HTMLElement): void;
+  abstract draw (points: number[][]): void;
+  abstract drawGrid (): void;
+
+
+  constructor () {
+    this._dynamicMaskTexture = false;
+    this._maskTextureSrcElement = null;
+    this._maskTextureCanvas = document.createElement('canvas');
+    this._pointBB = null;
+
+    this._maskTextureCoord = null;
+  }
+
+
+  public init (canvas: HTMLCanvasElement): void {
+    if (!canvas) {
+      throw new Error('canvas parameter is falsey');
+    }
+    this._gl = getWebGLContext(canvas);
+    if (!this._gl) {
+      throw new Error('Could not get a webgl context; have you already tried getting a 2d context on this canvas?');
+    }
+  }
+
+  public setTracker (tracker): void {
+    this._tracker = tracker;
+    // Set verts for this mask
+    this._verticeMap = tracker.model.path.vertices;
+  }
+
+  public setMaskTexture (element: HTMLElement): void {
+    this._maskTextureSrcElement = element;
+
+    const tagName = this._maskTextureSrcElement.tagName;
+    if (tagName === 'CANVAS') {
+      // Use the element as texture (its dynamic!)
+      this._dynamicMaskTexture = true;
+    } else {
+      // We need a still frame from it
+      this._dynamicMaskTexture = false;
+      this.updateMaskTexture();
+    }
+  }
+
+  public setPoints (points: number[][]): void {
+    if (!points) {
+      throw new Error('points is falsey');
+    }
+
+    // Find texture cropping from mask points
+    this._pointBB = getBoundingBox(points);
+
+    // correct points
+    let nupoints = points.map(p => [
+      p[0] - this._pointBB.minX,
+      p[1] - this._pointBB.minY
+    ]);
+
+    // create vertices based on points
+    this._maskTextureCoord = generateTextureVertices(
+      nupoints,
+      this._verticeMap,
+      1 / this._pointBB.width,
+      1 / this._pointBB.height
+    );
+
+    this.updateMaskTexture();
+  }
+
+  protected updateMaskTexture (): HTMLElement {
+    if (
+      !this._maskTextureSrcElement ||
+      !this._pointBB
+    ) {
+      return null;
+    }
+
+    if (!this._dynamicMaskTexture) {
+      // Draw the srcElement to the mask texture canvas
+      const {
+        minX, minY, width, height
+      } = this._pointBB;
+
+      const maskImage = getImageData(
+        this._maskTextureSrcElement,
+        minX,
+        minY,
+        width,
+        height
+      );
+
+      const canvas = this._maskTextureCanvas;
+      const ctx = canvas.getContext('2d');
+      canvas.width = width;
+      canvas.height = height;
+      ctx.putImageData(maskImage, 0, 0);
+
+      return canvas;
+    } else {
+      return this._maskTextureSrcElement;
+    }
+  }
+
+  public getGLContext (): WebGLRenderingContext {
+    return this._gl;
+  }
+
+  public clear (): void {
+    const gl = this.getGLContext();
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+}
+
+export default Deformer;

js/deformers/twgl/Background.ts

@@ -9,7 +9,7 @@ import IDeformer from '../IDeformer';
 export default class Background {
   private _deformer: IDeformer;
 
-  private _element;
+  private _element: HTMLElement;
 
   private _bgBufferInfo;
   private _bgProgramInfo;
@@ -30,7 +30,7 @@ export default class Background {
   /**
    * @param {*} element - This will be the source for the background
    */
-  setElement (element) {
+  public setElement (element): void {
     this._element = element;
     if (!this._element) {
       this._bgBufferInfo = null;
@@ -67,7 +67,7 @@ export default class Background {
     };
   }
 
-  draw () {
+  public draw (): void {
     if (!this._element) { return; }
 
     const gl = this._deformer.getGLContext();