added dreamfade efffect, added Array.from polyfill

Author: Matthew Shotton

dist/videocontext.commonjs2.js

@@ -18,6 +18,7 @@
   "devDependencies": {
     "babel-core": "^5.6.5",
     "babel-loader": "^5.1.4",
+    "babel-polyfill": "^6.16.0",
     "chai": "3.4.1",
     "eslint-loader": "^1.4.0",
     "http-server": "^0.8.5",

dist/videocontext.commonjs2.js.map

@@ -16,10 +16,13 @@ import aaf_video_position from "./aaf_video_position.js";
 import aaf_video_crop from "./aaf_video_crop.js";
 import staticDissolve from "./staticDissolve.js";
 import staticEffect from "./staticEffect.js";
+import dreamfade from "./dreamfade.js";
+
 
 let DEFINITIONS = {
     AAF_VIDEO_SCALE: aaf_video_scale,
     CROSSFADE: crossfade,
+    DREAMFADE: dreamfade,
     HORIZONTAL_WIPE:horizontalWipe,
     VERTICAL_WIPE:verticalWipe,
     RANDOM_DISSOLVE:randomDissolve,

dist/videocontext.js

@@ -0,0 +1,40 @@
+let dreamfade = {
+    "title":"Dream-Fade",
+    "description": "A wobbly dream effect. Typically used as a transistion.",
+    "vertexShader" : "\
+    attribute vec2 a_position;\
+    attribute vec2 a_texCoord;\
+    varying vec2 v_texCoord;\
+    void main() {\
+        gl_Position = vec4(vec2(2.0,2.0)*a_position-vec2(1.0, 1.0), 0.0, 1.0);\
+        v_texCoord = a_texCoord;\
+    }",
+    "fragmentShader" : "\
+    precision mediump float;\
+    uniform sampler2D u_image_a;\
+    uniform sampler2D u_image_b;\
+    uniform float mix;\
+    varying vec2 v_texCoord;\
+    varying float v_mix;\
+    void main(){\
+        float wobble = 1.0 - abs((mix*2.0)-1.0);\
+        vec2 pos = vec2(v_texCoord[0] + ((sin(v_texCoord[1]*(10.0*wobble*3.14) + wobble*10.0)/13.0)), v_texCoord[1]);\
+        vec4 color_a = texture2D(u_image_a, pos);\
+        vec4 color_b = texture2D(u_image_b, pos);\
+        color_a[0] *= mix;\
+        color_a[1] *= mix;\
+        color_a[2] *= mix;\
+        color_a[3] *= mix;\
+        color_b[0] *= (1.0 - mix);\
+        color_b[1] *= (1.0 - mix);\
+        color_b[2] *= (1.0 - mix);\
+        color_b[3] *= (1.0 - mix);\
+        gl_FragColor = color_a + color_b;\
+    }",
+    "properties":{
+        "mix":{"type":"uniform", "value":0.0}
+    },
+    "inputs":["u_image_a","u_image_b"]
+};
+
+export default dreamfade;

dist/videocontext.js.map

@@ -13,20 +13,22 @@ let staticEffect = {
             precision mediump float;\
             uniform sampler2D u_image;\
             uniform float currentTime;\
+            uniform float amount;\
             varying vec2 v_texCoord;\
             uniform vec3 weight;\
             float rand(vec2 co, float currentTime){\
                return fract(sin(dot(co.xy,vec2(12.9898,78.233))+currentTime) * 43758.5453);\
             }\
             void main(){\
                 vec4 color = texture2D(u_image, v_texCoord);\
-                color[0] = color[0] + (2.0*(clamp(rand(v_texCoord, currentTime),  0.01, 1.001)-0.5)) * weight[0];\
-                color[1] = color[1] + (2.0*(clamp(rand(v_texCoord, currentTime),  0.01, 1.001)-0.5)) * weight[1];\
-                color[2] = color[2] + (2.0*(clamp(rand(v_texCoord, currentTime),  0.01, 1.001)-0.5)) * weight[2];\
+                color[0] = color[0] + (2.0*(clamp(rand(v_texCoord, currentTime),  0.01, 1.001)-0.5)) * weight[0] * amount;\
+                color[1] = color[1] + (2.0*(clamp(rand(v_texCoord, currentTime),  0.01, 1.001)-0.5)) * weight[1] * amount;\
+                color[2] = color[2] + (2.0*(clamp(rand(v_texCoord, currentTime),  0.01, 1.001)-0.5)) * weight[2] *amount;\
                 gl_FragColor = color;\
             }",
     "properties":{
-        "weight":{"type":"uniform", "value":[1.0,1.0,1.0]}
+        "weight":{"type":"uniform", "value":[1.0,1.0,1.0]},
+        "amount":{"type":"uniform", "amount":1.0}
     },
     "inputs":["u_image"]
 };

package.json

@@ -1,5 +1,6 @@
 //Matthew Shotton, R&D User Experience,© BBC 2015
 
+import "babel-polyfill";
 import VideoNode from "./SourceNodes/videonode.js";
 import ImageNode from "./SourceNodes/imagenode.js";
 import CanvasNode from "./SourceNodes/canvasnode.js";