npm - etro - Versions diffs - 0.6.0 - Mend

etro 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/.env +2 -0
package/.github/workflows/nodejs.yml +27 -0
package/CHANGELOG.md +109 -0
package/CODE_OF_CONDUCT.md +77 -0
package/CONTRIBUTING.md +155 -0
package/LICENSE +674 -0
package/README.md +57 -0
package/dist/etro.js +3397 -0
package/docs/effect.js.html +1215 -0
package/docs/event.js.html +145 -0
package/docs/index.html +81 -0
package/docs/index.js.html +92 -0
package/docs/layer.js.html +888 -0
package/docs/module-effect-GaussianBlurComponent.html +345 -0
package/docs/module-effect.Brightness.html +339 -0
package/docs/module-effect.Channels.html +319 -0
package/docs/module-effect.ChromaKey.html +611 -0
package/docs/module-effect.Contrast.html +339 -0
package/docs/module-effect.EllipticalMask.html +200 -0
package/docs/module-effect.GaussianBlur.html +202 -0
package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
package/docs/module-effect.GaussianBlurVertical.html +242 -0
package/docs/module-effect.Pixelate.html +330 -0
package/docs/module-effect.Shader.html +1227 -0
package/docs/module-effect.Stack.html +406 -0
package/docs/module-effect.Transform.Matrix.html +193 -0
package/docs/module-effect.Transform.html +1174 -0
package/docs/module-effect.html +148 -0
package/docs/module-event.html +473 -0
package/docs/module-index.html +186 -0
package/docs/module-layer-Media.html +1116 -0
package/docs/module-layer-MediaMixin.html +164 -0
package/docs/module-layer.Audio.html +1188 -0
package/docs/module-layer.Base.html +629 -0
package/docs/module-layer.Image.html +1421 -0
package/docs/module-layer.Text.html +1731 -0
package/docs/module-layer.Video.html +1938 -0
package/docs/module-layer.Visual.html +1698 -0
package/docs/module-layer.html +137 -0
package/docs/module-movie.html +3118 -0
package/docs/module-util.Color.html +702 -0
package/docs/module-util.Font.html +395 -0
package/docs/module-util.html +845 -0
package/docs/movie.js.html +689 -0
package/docs/scripts/collapse.js +20 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +83 -0
package/docs/styles/jsdoc.css +671 -0
package/docs/styles/prettify.css +79 -0
package/docs/util.js.html +503 -0
package/eslint.conf.js +28 -0
package/eslint.test-conf.js +4 -0
package/examples/application/readme-screenshot.html +86 -0
package/examples/application/video-player.html +131 -0
package/examples/application/webcam.html +28 -0
package/examples/introduction/audio.html +52 -0
package/examples/introduction/effects.html +56 -0
package/examples/introduction/export.html +70 -0
package/examples/introduction/functions.html +35 -0
package/examples/introduction/hello-world1.html +33 -0
package/examples/introduction/hello-world2.html +32 -0
package/examples/introduction/keyframes.html +67 -0
package/examples/introduction/media.html +55 -0
package/examples/introduction/text.html +27 -0
package/jsdoc.conf.json +3 -0
package/karma.conf.js +60 -0
package/package.json +63 -0
package/private-todo.txt +70 -0
package/rename-file.sh +18 -0
package/rename-versions.sh +14 -0
package/rename.sh +22 -0
package/rollup.config.js +31 -0
package/screenshots/2019-08-17_0.png +0 -0
package/scripts/gen-effect-samples.html +99 -0
package/scripts/save-effect-samples.js +43 -0
package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
package/spec/assets/effect/original.png +0 -0
package/spec/assets/effect/pixelate.png +0 -0
package/spec/assets/effect/transform/multiply.png +0 -0
package/spec/assets/effect/transform/rotate.png +0 -0
package/spec/assets/effect/transform/scale-fraction.png +0 -0
package/spec/assets/effect/transform/scale.png +0 -0
package/spec/assets/effect/transform/translate-fraction.png +0 -0
package/spec/assets/effect/transform/translate.png +0 -0
package/spec/assets/layer/audio.wav +0 -0
package/spec/assets/layer/image.jpg +0 -0
package/spec/effect.spec.js +352 -0
package/spec/event.spec.js +25 -0
package/spec/layer.spec.js +128 -0
package/spec/movie.spec.js +154 -0
package/spec/util.spec.js +285 -0
package/src/effect.js +1265 -0
package/src/event.js +78 -0
package/src/index.js +23 -0
package/src/layer.js +875 -0
package/src/movie.js +636 -0
package/src/util.js +487 -0

package/docs/effect.js.html ADDED Viewed

@@ -0,0 +1,1215 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>effect.js - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-effect.Brightness.html">Brightness</a></li><li><a href="module-effect.Channels.html">Channels</a></li><li><a href="module-effect.ChromaKey.html">ChromaKey</a></li><li><a href="module-effect.Contrast.html">Contrast</a></li><li><a href="module-effect.EllipticalMask.html">EllipticalMask</a></li><li><a href="module-effect.GaussianBlur.html">GaussianBlur</a></li><li><a href="module-effect.GaussianBlurHorizontal.html">GaussianBlurHorizontal</a></li><li><a href="module-effect.GaussianBlurVertical.html">GaussianBlurVertical</a></li><li><a href="module-effect.Pixelate.html">Pixelate</a></li><li><a href="module-effect.Shader.html">Shader</a><ul class='methods'><li data-type='method'><a href="module-effect.Shader.html#._initBuffer">_initBuffer</a></li><li data-type='method'><a href="module-effect.Shader.html#._loadTexture">_loadTexture</a></li><li data-type='method'><a href="module-effect.Shader.html#_prepareValue">_prepareValue</a></li></ul></li><li><a href="module-effect.Stack.html">Stack</a><ul class='methods'><li data-type='method'><a href="module-effect.Stack.html#addEffect">addEffect</a></li></ul></li><li><a href="module-effect.Transform.html">Transform</a><ul class='methods'><li data-type='method'><a href="module-effect.Transform.html#.Matrix#cell">Matrix#cell</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#multiply">Matrix#multiply</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#rotate">Matrix#rotate</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#scale">Matrix#scale</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#translate">Matrix#translate</a></li></ul></li><li><a href="module-effect.Transform.Matrix.html">Matrix</a></li><li><a href="module-effect-GaussianBlurComponent.html">GaussianBlurComponent</a></li><li><a href="module-layer.Audio.html">Audio</a></li><li><a href="module-layer.Base.html">Base</a><ul class='methods'><li data-type='method'><a href="module-layer.Base.html#_render">_render</a></li></ul></li><li><a href="module-layer.Image.html">Image</a></li><li><a href="module-layer.Text.html">Text</a></li><li><a href="module-layer.Video.html">Video</a></li><li><a href="module-layer.Visual.html">Visual</a><ul class='methods'><li data-type='method'><a href="module-layer.Visual.html#_render">_render</a></li><li data-type='method'><a href="module-layer.Visual.html#addEffect">addEffect</a></li></ul></li><li><a href="module-layer-Media.html">Media</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.Color.html">Color</a><ul class='methods'><li data-type='method'><a href="module-util.Color.html#toString">toString</a></li></ul></li><li><a href="module-util.Font.html">Font</a><ul class='methods'><li data-type='method'><a href="module-util.Font.html#toString">toString</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-effect.html">effect</a></li><li><a href="module-event.html">event</a><ul class='methods'><li data-type='method'><a href="module-event.html#.publish">publish</a></li><li data-type='method'><a href="module-event.html#.subscribe">subscribe</a></li></ul></li><li><a href="module-index.html">index</a></li><li><a href="module-layer.html">layer</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.html">util</a><ul class='methods'><li data-type='method'><a href="module-util.html#.parseColor">parseColor</a></li><li data-type='method'><a href="module-util.html#.parseFont">parseFont</a></li><li data-type='method'><a href="module-util.html#.watchPublic">watchPublic</a></li><li data-type='method'><a href="module-util.html#~isKeyFrames">isKeyFrames</a></li></ul></li></ul><h3>Mixins</h3><ul><li><a href="module-layer-MediaMixin.html">MediaMixin</a></li></ul>
+</nav>
+<div id="main">
+    <h1 class="page-title">effect.js</h1>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * @module effect
+ *
+ * @todo Investigate why an effect might run once in the beginning even if its layer isn't at the beginning
+ * @todo Add audio effect support
+ * @todo Move shader source to external files
+ */
+import { publish, subscribe } from './event.js'
+import { val, watchPublic } from './util.js'
+/**
+ * Any effect that modifies the visual contents of a layer.
+ *
+ * &lt;em>Note: At this time, simply use the &lt;code>actx&lt;/code> property of the movie to add audio nodes to a
+ * layer's media. TODO: add more audio support, including more types of audio nodes, probably in a
+ * different module.&lt;/em>
+ */
+export class Base {
+  constructor () {
+    const newThis = watchPublic(this) // proxy that will be returned by constructor
+    subscribe(newThis, 'effect.attach', event => {
+      newThis._target = event.layer || event.movie // either one or the other (depending on the event caller)
+    })
+    // Propogate up to target
+    subscribe(newThis, 'effect.change.modify', event => {
+      if (!newThis._target) {
+        return
+      }
+      const type = `${newThis._target._type}.change.effect.modify`
+      publish(newThis._target, type, { ...event, target: newThis._target, source: newThis, type })
+    })
+    return newThis
+  }
+  // subclasses must implement apply
+  /**
+   * Apply this effect to a target at the given time
+   *
+   * @param {module:movie|module:layer.Base} target
+   * @param {number} reltime - the movie's current time relative to the layer (will soon be replaced with an instance getter)
+   * @abstract
+   */
+  apply (target, reltime) {
+    throw new Error('No overriding method found or super.apply was called')
+  }
+  get _parent () {
+    return this._target
+  }
+}
+// id for events (independent of instance, but easy to access when on prototype chain)
+Base.prototype._type = 'effect'
+Base.prototype._publicExcludes = []
+/**
+ * A sequence of effects to apply, treated as one effect. This can be useful for defining reused effect sequences as one effect.
+ */
+export class Stack extends Base {
+  constructor (effects) {
+    super()
+    /**
+     * @type module:effect.Base[]
+     */
+    this.effects = effects
+  }
+  /**
+   * Convenience method for chaining
+   * @param {module:effect.Base} effect - the effect to append
+   */
+  addEffect (effect) {
+    this.effects.push(effect)
+    return this
+  }
+  apply (target, reltime) {
+    for (let i = 0; i &lt; this.effects.length; i++) {
+      const effect = this.effects[i]
+      effect.apply(target, reltime)
+    }
+  }
+}
+/**
+ * A hardware-accelerated pixel mapping
+ * @todo can `v_TextureCoord` be replaced by `gl_FragUV`
+ */
+export class Shader extends Base {
+  /**
+   * @param {string} fragmentSrc
+   * @param {object} [userUniforms={}]
+   * @param {object[]} [userTextures=[]]
+   * @param {object} [sourceTextureOptions={}]
+   */
+  constructor (fragmentSrc = Shader._IDENTITY_FRAGMENT_SOURCE, userUniforms = {}, userTextures = [], sourceTextureOptions = {}) {
+    super()
+    // TODO: split up into multiple methods
+    // Init WebGL
+    this._canvas = document.createElement('canvas')
+    const gl = this._canvas.getContext('webgl')
+    if (gl === null) {
+      throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
+    }
+    this._program = Shader._initShaderProgram(gl, Shader._VERTEX_SOURCE, fragmentSrc)
+    this._buffers = Shader._initRectBuffers(gl)
+    const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)
+    if (userTextures.length > maxTextures) {
+      console.warn('Too many textures!')
+    }
+    this._userTextures = {}
+    for (const name in userTextures) {
+      const userOptions = userTextures[name]
+      // Apply default options.
+      const options = { ...Shader._DEFAULT_TEXTURE_OPTIONS, ...userOptions }
+      if (options.createUniform) {
+        // Automatically, create a uniform with the same name as this texture, that points to it.
+        // This is an easy way for the user to use custom textures, without having to define multiple properties in the effect object.
+        if (userUniforms[name]) {
+          throw new Error(`Texture - uniform naming conflict: ${name}!`)
+        }
+        // Add this as a "user uniform".
+        userUniforms[name] = '1i' // texture pointer
+      }
+      this._userTextures[name] = options
+    }
+    this._sourceTextureOptions = { ...Shader._DEFAULT_TEXTURE_OPTIONS, ...sourceTextureOptions }
+    this._attribLocations = {
+      textureCoord: gl.getAttribLocation(this._program, 'a_TextureCoord')
+    }
+    this._uniformLocations = {
+      // modelViewMatrix: gl.getUniformLocation(this._program, "u_ModelViewMatrix"),
+      source: gl.getUniformLocation(this._program, 'u_Source'),
+      size: gl.getUniformLocation(this._program, 'u_Size')
+    }
+    // The options value can just be a string equal to the type of the variable, for syntactic sugar.
+    //  If this is the case, convert it to a real options object.
+    this._userUniforms = {}
+    for (const name in userUniforms) {
+      const val = userUniforms[name]
+      this._userUniforms[name] = typeof val === 'string' ? { type: val } : val
+    }
+    for (const unprefixed in userUniforms) {
+      // property => u_Property
+      const prefixed = 'u_' + unprefixed.charAt(0).toUpperCase() + (unprefixed.length > 1 ? unprefixed.slice(1) : '')
+      this._uniformLocations[unprefixed] = gl.getUniformLocation(this._program, prefixed)
+    }
+    this._gl = gl
+  }
+  // Not needed, right?
+  /* watchWebGLOptions() {
+        const pubChange = () => {
+            this.publish("change", {});
+        };
+        for (let name in this._userTextures) {
+            watch(this, name, pubChange);
+        }
+        for (let name in this._userUniforms) {
+            watch(this, name, pubChange);
+        }
+    } */
+  apply (target, reltime) {
+    // TODO: split up into multiple methods
+    const gl = this._gl
+    // TODO: Change target.canvas.width => target.width and see if it breaks anything.
+    if (this._canvas.width !== target.canvas.width || this._canvas.height !== target.canvas.height) { // (optimization)
+      this._canvas.width = target.canvas.width
+      this._canvas.height = target.canvas.height
+      gl.viewport(0, 0, target.canvas.width, target.canvas.height)
+    }
+    gl.clearColor(0, 0, 0, 0) // clear to transparency; TODO: test
+    // gl.clearDepth(1.0);         // clear everything
+    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)
+    gl.enable(gl.BLEND)
+    gl.disable(gl.DEPTH_TEST) // gl.depthFunc(gl.LEQUAL);
+    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
+    // Tell WebGL how to pull out the positions from buffer
+    {
+      const numComponents = 2
+      const type = gl.FLOAT // the data in the buffer is 32bit floats
+      const normalize = false // don't normalize
+      const stride = 0 // how many bytes to get from one set of values to the next
+      // 0 = use type and numComponents above
+      const offset = 0 // how many bytes inside the buffer to start from
+      gl.bindBuffer(gl.ARRAY_BUFFER, this._buffers.position)
+      gl.vertexAttribPointer(
+        this._attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset)
+      gl.enableVertexAttribArray(
+        this._attribLocations.vertexPosition)
+    }
+    // tell webgl how to pull out the texture coordinates from buffer
+    {
+      const numComponents = 2 // every coordinate composed of 2 values (uv)
+      const type = gl.FLOAT // the data in the buffer is 32 bit float
+      const normalize = false // don't normalize
+      const stride = 0 // how many bytes to get from one set to the next
+      const offset = 0 // how many bytes inside the buffer to start from
+      gl.bindBuffer(gl.ARRAY_BUFFER, this._buffers.textureCoord)
+      gl.vertexAttribPointer(this._attribLocations.textureCoord, numComponents, type, normalize, stride, offset)
+      gl.enableVertexAttribArray(this._attribLocations.textureCoord)
+    }
+    // TODO: figure out which properties should be private / public
+    // Tell WebGL we want to affect texture unit 0
+    // Call `activeTexture` before `_loadTexture` so it won't be bound to the last active texture.
+    gl.activeTexture(gl.TEXTURE0)
+    this._inputTexture = Shader._loadTexture(gl, target.canvas)
+    // Bind the texture to texture unit 0
+    gl.bindTexture(gl.TEXTURE_2D, this._inputTexture)
+    {
+      const i = 0
+      for (const name in this._userTextures) {
+        const options = this._userTextures[name]
+        const source = this[name]
+        // Call `activeTexture` before `_loadTexture` so it won't be bound to the last active texture.
+        // TODO: investigate better implementation of `_loadTexture`
+        gl.activeTexture(gl.TEXTURE0 + Shader.INTERNAL_TEXTURE_UNITS + i) // use the fact that TEXTURE0, TEXTURE1, ... are continuous
+        const preparedTex = Shader._loadTexture(gl, val(source, this, reltime), options) // do it every frame to keep updated (I think you need to)
+        gl.bindTexture(gl[options.target], preparedTex)
+      }
+    }
+    gl.useProgram(this._program)
+    // Set the shader uniforms
+    // Tell the shader we bound the texture to texture unit 0
+    // All base (Shader class) uniforms are optional
+    if (this._uniformLocations.source) {
+      gl.uniform1i(this._uniformLocations.source, 0)
+    }
+    // All base (Shader class) uniforms are optional
+    if (this._uniformLocations.size) {
+      gl.uniform2iv(this._uniformLocations.size, [target.width, target.height])
+    }
+    for (const unprefixed in this._userUniforms) {
+      const options = this._userUniforms[unprefixed]
+      const value = val(this[unprefixed], this, reltime)
+      const preparedValue = this._prepareValue(val(value, this, reltime), options.type, reltime, options)
+      const location = this._uniformLocations[unprefixed]
+      gl['uniform' + options.type](location, preparedValue) // haHA JavaScript (`options.type` is "1f", for instance)
+    }
+    gl.uniform1i(this._uniformLocations.test, 0)
+    {
+      const offset = 0
+      const vertexCount = 4
+      gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount)
+    }
+    /* let ctx = target.cctx || target._movie.cctx,    // always render to movie canvas
+            movie = target instanceof Movie ? target : target._movie,
+            x = val(target.x) || 0,  // layer offset
+            y = val(target.y) || 0,  // layer offset
+            width = val(target.width || movie.width),
+            height = val(target.height || movie.height);
+        // copy internal image state onto movie
+        ctx.drawImage(this._canvas, x, y, width, height); */
+    // clear the target, in case the effect outputs transparent pixels
+    target.cctx.clearRect(0, 0, target.canvas.width, target.canvas.height)
+    // copy internal image state onto target
+    target.cctx.drawImage(this._canvas, 0, 0)
+  }
+  /**
+     * Converts a value of a standard type for javascript to a standard type for GLSL
+     * @param value - the raw value to prepare
+     * @param {string} outputType - the WebGL type of |value|; example: &lt;code>1f&lt;/code> for a float
+     * @param {number} reltime - current time, relative to the target
+     * @param {object} [options] - Optional config
+     */
+  _prepareValue (value, outputType, reltime, options = {}) {
+    const def = options.defaultFloatComponent || 0
+    if (outputType === '1i') {
+      /*
+       * Textures are passed to the shader by both providing the texture (with texImage2D)
+       * and setting the |sampler| uniform equal to the index of the texture.
+       * In etro shader effects, the subclass passes the names of all the textures ot this base class,
+       * along with all the names of uniforms. By default, corresponding uniforms (with the same name) are
+       * created for each texture for ease of use. You can also define different texture properties in the
+       * javascript effect by setting it identical to the property with the passed texture name.
+       * In WebGL, it will be set to the same integer texture unit.
+       *
+       * To do this, test if |value| is identical to a texture.
+       * If so, set it to the texture's index, so the shader can use it.
+       */
+      let i = 0
+      for (const name in this._userTextures) {
+        const testValue = val(this[name], this, reltime)
+        if (value === testValue) {
+          value = Shader.INTERNAL_TEXTURE_UNITS + i // after the internal texture units
+        }
+        i++
+      }
+    }
+    if (outputType === '3fv') {
+      // allow 4-component vectors; TODO: why?
+      if (Array.isArray(value) &amp;&amp; (value.length === 3 || value.length === 4)) {
+        return value
+      }
+      // kind of loose so this can be changed if needed
+      if (typeof value === 'object') {
+        return [
+          value.r !== undefined ? value.r : def,
+          value.g !== undefined ? value.g : def,
+          value.b !== undefined ? value.b : def
+        ]
+      }
+      throw new Error(`Invalid type: ${outputType} or value: ${value}`)
+    }
+    if (outputType === '4fv') {
+      if (Array.isArray(value) &amp;&amp; value.length === 4) {
+        return value
+      }
+      // kind of loose so this can be changed if needed
+      if (typeof value === 'object') {
+        return [
+          value.r !== undefined ? value.r : def,
+          value.g !== undefined ? value.g : def,
+          value.b !== undefined ? value.b : def,
+          value.a !== undefined ? value.a : def
+        ]
+      }
+      throw new Error(`Invalid type: ${outputType} or value: ${value}`)
+    }
+    return value
+  }
+}
+// Shader.prototype.get_publicExcludes = () =>
+Shader._initRectBuffers = gl => {
+  const position = [
+    // the screen/canvas (output)
+    -1.0, 1.0,
+    1.0, 1.0,
+    -1.0, -1.0,
+    1.0, -1.0
+  ]
+  const textureCoord = [
+    // the texture/canvas (input)
+    0.0, 0.0,
+    1.0, 0.0,
+    0.0, 1.0,
+    1.0, 1.0
+  ]
+  return {
+    position: Shader._initBuffer(gl, position),
+    textureCoord: Shader._initBuffer(gl, textureCoord)
+  }
+}
+/**
+ * Creates the quad covering the screen
+ */
+Shader._initBuffer = (gl, data) => {
+  const buffer = gl.createBuffer()
+  // Select the buffer as the one to apply buffer operations to from here out.
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW)
+  return buffer
+}
+/**
+ * Creates a webgl texture from the source.
+ * @param {object} [options] - optional WebGL config for texture
+ * @param {number} [options.target=gl.TEXTURE_2D]
+ * @param {number} [options.level=0]
+ * @param {number} [options.internalFormat=gl.RGBA]
+ * @param {number} [options.srcFormat=gl.RGBA]
+ * @param {number} [options.srcType=gl.UNSIGNED_BYTE]
+ * @param {number} [options.minFilter=gl.LINEAR]
+ * @param {number} [options.magFilter=gl.LINEAR]
+ */
+Shader._loadTexture = (gl, source, options = {}) => {
+  options = { ...Shader._DEFAULT_TEXTURE_OPTIONS, ...options } // Apply default options, just in case.
+  const target = gl[options.target] // When creating the option, the user can't access `gl` so access it here.
+  const level = options.level
+  const internalFormat = gl[options.internalFormat]
+  const srcFormat = gl[options.srcFormat]
+  const srcType = gl[options.srcType]
+  const minFilter = gl[options.minFilter]
+  const magFilter = gl[options.magFilter]
+  // TODO: figure out how wrap-s and wrap-t interact with mipmaps
+  // (for legacy support)
+  // let wrapS = options.wrapS ? options.wrapS : gl.CLAMP_TO_EDGE,
+  //     wrapT = options.wrapT ? options.wrapT : gl.CLAMP_TO_EDGE;
+  const tex = gl.createTexture()
+  gl.bindTexture(target, tex)
+  // TODO: figure out how this works with layer width/height
+  // TODO: support 3d textures (change texImage2D)
+  // set to `source`
+  gl.texImage2D(target, level, internalFormat, srcFormat, srcType, source)
+  // WebGL1 has different requirements for power of 2 images
+  // vs non power of 2 images so check if the image is a
+  // power of 2 in both dimensions.
+  // Get dimensions by using the fact that all valid inputs for
+  // texImage2D must have `width` and `height` properties except
+  // videos, which have `videoWidth` and `videoHeight` instead
+  // and `ArrayBufferView`, which is one dimensional (so don't
+  // worry about mipmaps)
+  const w = target instanceof HTMLVideoElement ? target.videoWidth : target.width
+  const h = target instanceof HTMLVideoElement ? target.videoHeight : target.height
+  if ((w &amp;&amp; isPowerOf2(w)) &amp;&amp; (h &amp;&amp; isPowerOf2(h))) {
+    // Yes, it's a power of 2. Generate mips.
+    gl.generateMipmap(target)
+  } else {
+    // No, it's not a power of 2. Turn off mips and set
+    // wrapping to clamp to edge
+    gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+    gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+    gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minFilter)
+    gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magFilter)
+  }
+  return tex
+}
+const isPowerOf2 = value => (value &amp;&amp; (value - 1)) === 0
+// https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+Shader._initShaderProgram = (gl, vertexSrc, fragmentSrc) => {
+  const vertexShader = Shader._loadShader(gl, gl.VERTEX_SHADER, vertexSrc)
+  const fragmentShader = Shader._loadShader(gl, gl.FRAGMENT_SHADER, fragmentSrc)
+  const shaderProgram = gl.createProgram()
+  gl.attachShader(shaderProgram, vertexShader)
+  gl.attachShader(shaderProgram, fragmentShader)
+  gl.linkProgram(shaderProgram)
+  // check program creation status
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    console.warn('Unable to link shader program: ' + gl.getProgramInfoLog(shaderProgram))
+    return null
+  }
+  return shaderProgram
+}
+Shader._loadShader = (gl, type, source) => {
+  const shader = gl.createShader(type)
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  // check compile status
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.warn('An error occured compiling shader: ' + gl.getShaderInfoLog(shader))
+    gl.deleteShader(shader)
+    return null
+  }
+  return shader
+}
+/**
+ * WebGL texture units consumed by &lt;code>Shader&lt;/code>
+ */
+Shader.INTERNAL_TEXTURE_UNITS = 1
+Shader._DEFAULT_TEXTURE_OPTIONS = {
+  createUniform: true,
+  target: 'TEXTURE_2D',
+  level: 0,
+  internalFormat: 'RGBA',
+  srcFormat: 'RGBA',
+  srcType: 'UNSIGNED_BYTE',
+  minFilter: 'LINEAR',
+  magFilter: 'LINEAR'
+}
+Shader._VERTEX_SOURCE = `
+  attribute vec4 a_VertexPosition;
+  attribute vec2 a_TextureCoord;
+  varying highp vec2 v_TextureCoord;
+  void main() {
+      // no need for projection or model-view matrices, since we're just rendering a rectangle
+      // that fills the screen (see position values)
+      gl_Position = a_VertexPosition;
+      v_TextureCoord = a_TextureCoord;
+  }
+`
+Shader._IDENTITY_FRAGMENT_SOURCE = `
+  precision mediump float;
+  uniform sampler2D u_Source;
+  uniform float u_Brightness;
+  varying highp vec2 v_TextureCoord;
+  void main() {
+      gl_FragColor = texture2D(u_Source, v_TextureCoord);
+  }
+`
+/* COLOR &amp; TRANSPARENCY */
+// TODO: move shader source code to external .js files (with exports)
+/**
+ * Changes the brightness
+ */
+export class Brightness extends Shader {
+  /**
+   * @param {number} [brightness=0] - the value to add to each pixel's channels [-255, 255]
+   */
+  constructor (brightness = 0.0) {
+    super(`
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform float u_Brightness;
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          vec3 rgb = clamp(color.rgb + u_Brightness / 255.0, 0.0, 1.0);
+          gl_FragColor = vec4(rgb, color.a);
+      }
+    `, {
+      brightness: '1f'
+    })
+    /**
+     * The value to add to each pixel's channels [-255, 255]
+     * @type number
+     */
+    this.brightness = brightness
+  }
+}
+/**
+ * Changes the contrast
+ */
+export class Contrast extends Shader {
+  /**
+   * @param {number} [contrast=1] - the contrast multiplier
+   */
+  constructor (contrast = 1.0) {
+    super(`
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform float u_Contrast;
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          vec3 rgb = clamp(u_Contrast * (color.rgb - 0.5) + 0.5, 0.0, 1.0);
+          gl_FragColor = vec4(rgb, color.a);
+      }
+    `, {
+      contrast: '1f'
+    })
+    /**
+     * The contrast multiplier
+     * @type number
+     */
+    this.contrast = contrast
+  }
+}
+/**
+ * Multiplies each channel by a different number
+ */
+export class Channels extends Shader {
+  /**
+   * @param {module:util.Color} factors - channel factors, each defaulting to 1
+   */
+  constructor (factors = {}) {
+    super(`
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform vec4 u_Factors;
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          gl_FragColor = clamp(u_Factors * color, 0.0, 1.0);
+      }
+    `, {
+      factors: { type: '4fv', defaultFloatComponent: 1 }
+    })
+    /**
+     * Channel factors, each defaulting to 1
+     * @type module:util.Color
+     */
+    this.factors = factors
+  }
+}
+/**
+ * Reduces alpha for pixels which are close to a specified target color
+ */
+export class ChromaKey extends Shader {
+  /**
+   * @param {module:util.Color} [target={r: 0, g: 0, b: 0}] - the color to remove
+   * @param {number} [threshold=0] - how much error is allowed
+   * @param {boolean} [interpolate=false] - true value to interpolate the alpha channel,
+   *  or false value for no smoothing (i.e. 255 or 0 alpha)
+   * @param {number} [smoothingSharpness=0] - a modifier to lessen the smoothing range, if applicable
+   * @todo Use &lt;code>smoothingSharpness&lt;/code>
+   */
+  constructor (target = { r: 0, g: 0, b: 0 }, threshold = 0, interpolate = false/*, smoothingSharpness=0 */) {
+    super(`
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform vec3 u_Target;
+      uniform float u_Threshold;
+      uniform bool u_Interpolate;
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          float alpha = color.a;
+          vec3 dist = abs(color.rgb - u_Target / 255.0);
+          if (!u_Interpolate) {
+              // Standard way that most video editors probably use (all-or-nothing method)
+              float thresh = u_Threshold / 255.0;
+              bool transparent = dist.r &lt;= thresh &amp;&amp; dist.g &lt;= thresh &amp;&amp; dist.b &lt;= thresh;
+              if (transparent)
+                  alpha = 0.0;
+          } else {
+              /*
+                  better way IMHO:
+                  Take the average of the absolute differences between the pixel and the target for each channel
+              */
+              float transparency = (dist.r + dist.g + dist.b) / 3.0;
+              // TODO: custom or variety of interpolation methods
+              alpha = transparency;
+          }
+          gl_FragColor = vec4(color.rgb, alpha);
+      }
+    `, {
+      target: '3fv',
+      threshold: '1f',
+      interpolate: '1i'
+    })
+    /**
+     * The color to remove
+     * @type module:util.Color
+     */
+    this.target = target
+    /**
+     * How much error is alloed
+     * @type number
+     */
+    this.threshold = threshold
+    /**
+     * True value to interpolate the alpha channel,
+     *  or false value for no smoothing (i.e. 255 or 0 alpha)
+     * @type boolean
+     */
+    this.interpolate = interpolate
+    // this.smoothingSharpness = smoothingSharpness;
+  }
+}
+/* BLUR */
+/**
+ * Applies a Gaussian blur
+ *
+ * @todo Improve performance
+ * @todo Make sure this is truly gaussian even though it doens't require a standard deviation
+ */
+export class GaussianBlur extends Stack {
+  constructor (radius) {
+    // Divide into two shader effects (use the fact that gaussian blurring can be split into components for performance benefits)
+    super([
+      new GaussianBlurHorizontal(radius),
+      new GaussianBlurVertical(radius)
+    ])
+  }
+}
+/**
+ * Render Gaussian kernel to a canvas for use in shader.
+ * @param {number[]} kernel
+ * @private
+ *
+ * @return {HTMLCanvasElement}
+ */
+GaussianBlur.render1DKernel = kernel => {
+  // TODO: Use Float32Array instead of canvas.
+  // init canvas
+  const canvas = document.createElement('canvas')
+  canvas.width = kernel.length
+  canvas.height = 1 // 1-dimensional
+  const ctx = canvas.getContext('2d')
+  // draw to canvas
+  const imageData = ctx.createImageData(canvas.width, canvas.height)
+  for (let i = 0; i &lt; kernel.length; i++) {
+    imageData.data[4 * i + 0] = 255 * kernel[i] // Use red channel to store distribution weights.
+    imageData.data[4 * i + 1] = 0 // Clear all other channels.
+    imageData.data[4 * i + 2] = 0
+    imageData.data[4 * i + 3] = 255
+  }
+  ctx.putImageData(imageData, 0, 0)
+  return canvas
+}
+GaussianBlur.gen1DKernel = radius => {
+  const pascal = GaussianBlur.genPascalRow(2 * radius + 1)
+  // don't use `reduce` and `map` (overhead?)
+  let sum = 0
+  for (let i = 0; i &lt; pascal.length; i++) {
+    sum += pascal[i]
+  }
+  for (let i = 0; i &lt; pascal.length; i++) {
+    pascal[i] /= sum
+  }
+  return pascal
+}
+GaussianBlur.genPascalRow = index => {
+  if (index &lt; 0) {
+    throw new Error(`Invalid index ${index}`)
+  }
+  let currRow = [1]
+  for (let i = 1; i &lt; index; i++) {
+    const nextRow = []
+    nextRow.length = currRow.length + 1
+    // edges are always 1's
+    nextRow[0] = nextRow[nextRow.length - 1] = 1
+    for (let j = 1; j &lt; nextRow.length - 1; j++) {
+      nextRow[j] = currRow[j - 1] + currRow[j]
+    }
+    currRow = nextRow
+  }
+  return currRow
+}
+/**
+ * Shared class for both horizontal and vertical gaussian blur classes.
+ * @todo If radius == 0, don't affect the image (right now, the image goes black).
+ */
+class GaussianBlurComponent extends Shader {
+  /**
+   * @param {string} src - fragment src code specific to which component (horizontal or vertical)
+   * @param {number} radius
+   */
+  constructor (src, radius) {
+    super(src, {
+      radius: '1i'
+    }, {
+      shape: { minFilter: 'NEAREST', magFilter: 'NEAREST' }
+    })
+    /**
+     * @type number
+     */
+    this.radius = radius
+    this._radiusCache = undefined
+  }
+  apply (target, reltime) {
+    const radiusVal = val(this.radius, this, reltime)
+    if (radiusVal !== this._radiusCache) {
+      // Regenerate gaussian distribution.
+      this.shape = GaussianBlur.render1DKernel(
+        GaussianBlur.gen1DKernel(radiusVal)
+      ) // distribution canvas
+    }
+    this._radiusCache = radiusVal
+    super.apply(target, reltime)
+  }
+}
+/**
+ * Horizontal component of gaussian blur
+ */
+export class GaussianBlurHorizontal extends GaussianBlurComponent {
+  /**
+   * @param {number} radius
+   */
+  constructor (radius) {
+    super(`
+      #define MAX_RADIUS 250
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform ivec2 u_Size;   // pixel dimensions of input and output
+      uniform sampler2D u_Shape;  // pseudo one-dimension of blur distribution (would be 1D but webgl doesn't support it)
+      uniform int u_Radius;   // TODO: support floating-point radii
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          vec4 avg = vec4(0.0);
+          // GLSL can only use constants in for-loop declaration, so start at zero, and stop before 2 * u_Radius + 1,
+          // opposed to starting at -u_Radius and stopping _at_ +u_Radius.
+          for (int i = 0; i &lt; 2 * MAX_RADIUS + 1; i++) {
+              if (i >= 2 * u_Radius + 1)
+                  break;  // GLSL can only use constants in for-loop declaration, so we break here.
+              // u_Radius is the width of u_Shape, by definition
+              float weight = texture2D(u_Shape, vec2(float(i) / float(2 * u_Radius + 1), 0.0)).r;   // TODO: use single-channel format
+              vec4 sample = texture2D(u_Source, v_TextureCoord + vec2(i - u_Radius, 0.0) / vec2(u_Size));
+              avg += weight * sample;
+          }
+          gl_FragColor = avg;
+      }
+    `, radius)
+  }
+}
+/**
+ * Vertical component of gaussian blur
+ */
+export class GaussianBlurVertical extends GaussianBlurComponent {
+  /**
+   * @param {number} radius
+   */
+  constructor (radius) {
+    super(`
+      #define MAX_RADIUS 250
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform ivec2 u_Size;   // pixel dimensions of input and output
+      uniform sampler2D u_Shape;  // pseudo one-dimension of blur distribution (would be 1D but webgl doesn't support it)
+      uniform int u_Radius;   // TODO: support floating-point radii
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          vec4 avg = vec4(0.0);
+          // GLSL can only use constants in for-loop declaration, so start at zero, and stop before 2 * u_Radius + 1,
+          // opposed to starting at -u_Radius and stopping _at_ +u_Radius.
+          for (int i = 0; i &lt; 2 * MAX_RADIUS + 1; i++) {
+              if (i >= 2 * u_Radius + 1)
+                  break;  // GLSL can only use constants in for-loop declaration, so we break here.
+              // u_Radius is the width of u_Shape, by definition
+              float weight = texture2D(u_Shape, vec2(float(i) / float(2 * u_Radius + 1), 0.0)).r;   // TODO: use single-channel format
+              vec4 sample = texture2D(u_Source, v_TextureCoord + vec2(0.0, i - u_Radius) / vec2(u_Size));
+              avg += weight * sample;
+          }
+          gl_FragColor = avg;
+      }
+    `, radius)
+  }
+}
+/**
+ * Makes the target look pixelated
+ * @todo just resample with NEAREST interpolation? but how?
+ */
+export class Pixelate extends Shader {
+  /**
+   * @param {number} pixelSize
+   */
+  constructor (pixelSize = 1) {
+    super(`
+      precision mediump float;
+      uniform sampler2D u_Source;
+      uniform ivec2 u_Size;
+      uniform int u_PixelSize;
+      varying highp vec2 v_TextureCoord;
+      void main() {
+          // Floor to nearest pixel (times pixel size), not nearest edge of screen
+          ivec2 loc = ivec2(vec2(u_Size) * v_TextureCoord);   // screen location
+          int ps = u_PixelSize;
+          vec2 flooredTexCoord = float(ps) * floor(vec2(loc) / float(ps))
+              / vec2(u_Size);
+          gl_FragColor = texture2D(u_Source, flooredTexCoord);
+      }
+    `, {
+      pixelSize: '1i'
+    })
+    /**
+     * @type number
+     */
+    this.pixelSize = pixelSize
+  }
+  apply (target, reltime) {
+    const ps = val(this.pixelSize, target, reltime)
+    if (ps % 1 !== 0 || ps &lt; 0) {
+      throw new Error('Pixel size must be a nonnegative integer')
+    }
+    super.apply(target, reltime)
+  }
+}
+// TODO: implement directional blur
+// TODO: implement radial blur
+// TODO: implement zoom blur
+/* DISTORTION */
+/**
+ * Transforms a layer or movie using a transformation matrix. Use {@link Transform.Matrix}
+ * to either A) calculate those values based on a series of translations, scalings and rotations)
+ * or B) input the matrix values directly, using the optional argument in the constructor.
+ */
+export class Transform extends Base {
+  /**
+   * @param {module:effect.Transform.Matrix} matrix - how to transform the target
+   */
+  constructor (matrix) {
+    super()
+    /**
+     * How to transform the target
+     * @type module:effect.Transform.Matrix
+     */
+    this.matrix = matrix
+    this._tmpMatrix = new Transform.Matrix()
+    this._tmpCanvas = document.createElement('canvas')
+    this._tmpCtx = this._tmpCanvas.getContext('2d')
+  }
+  apply (target, reltime) {
+    if (target.canvas.width !== this._tmpCanvas.width) {
+      this._tmpCanvas.width = target.canvas.width
+    }
+    if (target.canvas.height !== this._tmpCanvas.height) {
+      this._tmpCanvas.height = target.canvas.height
+    }
+    this._tmpMatrix.data = val(this.matrix.data, target, reltime) // use data, since that's the underlying storage
+    this._tmpCtx.setTransform(
+      this._tmpMatrix.a, this._tmpMatrix.b, this._tmpMatrix.c,
+      this._tmpMatrix.d, this._tmpMatrix.e, this._tmpMatrix.f
+    )
+    this._tmpCtx.drawImage(target.canvas, 0, 0)
+    // Assume it was identity for now
+    this._tmpCtx.setTransform(1, 0, 0, 0, 1, 0, 0, 0, 1)
+    target.cctx.clearRect(0, 0, target.canvas.width, target.canvas.height)
+    target.cctx.drawImage(this._tmpCanvas, 0, 0)
+  }
+}
+/**
+ * @class
+ * A 3x3 matrix for storing 2d transformations
+ */
+Transform.Matrix = class Matrix {
+  constructor (data) {
+    this.data = data || [
+      1, 0, 0,
+      0, 1, 0,
+      0, 0, 1
+    ]
+  }
+  identity () {
+    for (let i = 0; i &lt; this.data.length; i++) {
+      this.data[i] = Transform.Matrix.IDENTITY.data[i]
+    }
+    return this
+  }
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {number} [val]
+   */
+  cell (x, y, val) {
+    if (val !== undefined) {
+      this.data[3 * y + x] = val
+    }
+    return this.data[3 * y + x]
+  }
+  /* For canvas context setTransform */
+  get a () {
+    return this.data[0]
+  }
+  get b () {
+    return this.data[3]
+  }
+  get c () {
+    return this.data[1]
+  }
+  get d () {
+    return this.data[4]
+  }
+  get e () {
+    return this.data[2]
+  }
+  get f () {
+    return this.data[5]
+  }
+  /**
+   * Combines &lt;code>this&lt;/code> with another matrix &lt;code>other&lt;/code>
+   * @param other
+   */
+  multiply (other) {
+    // copy to temporary matrix to avoid modifying `this` while reading from it
+    // http://www.informit.com/articles/article.aspx?p=98117&amp;seqNum=4
+    for (let x = 0; x &lt; 3; x++) {
+      for (let y = 0; y &lt; 3; y++) {
+        let sum = 0
+        for (let i = 0; i &lt; 3; i++) {
+          sum += this.cell(x, i) * other.cell(i, y)
+        }
+        TMP_MATRIX.cell(x, y, sum)
+      }
+    }
+    // copy data from TMP_MATRIX to this
+    for (let i = 0; i &lt; TMP_MATRIX.data.length; i++) {
+      this.data[i] = TMP_MATRIX.data[i]
+    }
+    return this
+  }
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  translate (x, y) {
+    this.multiply(new Transform.Matrix([
+      1, 0, x,
+      0, 1, y,
+      0, 0, 1
+    ]))
+    return this
+  }
+  /**
+   * @param {number} x
+   * @param {number} y
+   */
+  scale (x, y) {
+    this.multiply(new Transform.Matrix([
+      x, 0, 0,
+      0, y, 0,
+      0, 0, 1
+    ]))
+    return this
+  }
+  /**
+   * @param {number} a - the angle or rotation in radians
+   */
+  rotate (a) {
+    const c = Math.cos(a); const s = Math.sin(a)
+    this.multiply(new Transform.Matrix([
+      c, s, 0,
+      -s, c, 0,
+      0, 0, 1
+    ]))
+    return this
+  }
+}
+/**
+ * The identity matrix
+ */
+Transform.Matrix.IDENTITY = new Transform.Matrix()
+const TMP_MATRIX = new Transform.Matrix()
+/**
+ * Preserves an ellipse of the layer and clears the rest
+ * @todo Parent layer mask effects will make more complex masks easier
+ */
+export class EllipticalMask extends Base {
+  constructor (x, y, radiusX, radiusY, rotation = 0, startAngle = 0, endAngle = 2 * Math.PI, anticlockwise = false) {
+    super()
+    this.x = x
+    this.y = y
+    this.radiusX = radiusX
+    this.radiusY = radiusY
+    this.rotation = rotation
+    this.startAngle = startAngle
+    this.endAngle = endAngle
+    this.anticlockwise = anticlockwise
+    // for saving image data before clearing
+    this._tmpCanvas = document.createElement('canvas')
+    this._tmpCtx = this._tmpCanvas.getContext('2d')
+  }
+  apply (target, reltime) {
+    const ctx = target.cctx; const canvas = target.canvas
+    const x = val(this.x, target, reltime); const y = val(this.y, target, reltime)
+    const radiusX = val(this.radiusX, target, reltime); const radiusY = val(this.radiusY, target, reltime)
+    const rotation = val(this.rotation, target, reltime)
+    const startAngle = val(this.startAngle, target, reltime); const endAngle = val(this.endAngle, target, reltime)
+    const anticlockwise = val(this.anticlockwise, target, reltime)
+    this._tmpCanvas.width = target.canvas.width
+    this._tmpCanvas.height = target.canvas.height
+    this._tmpCtx.drawImage(canvas, 0, 0)
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.save() // idk how to preserve clipping state without save/restore
+    // create elliptical path and clip
+    ctx.beginPath()
+    ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+    ctx.closePath()
+    ctx.clip()
+    // render image with clipping state
+    ctx.drawImage(this._tmpCanvas, 0, 0)
+    ctx.restore()
+  }
+}
+</code></pre>
+        </article>
+    </section>
+</div>
+<br class="clear">
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Sun Oct 13 2019 15:38:43 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>