From cd66ae780e695fd9a7a726cac4c6d84635a7787d Mon Sep 17 00:00:00 2001
From: mike <mikedotalmond@googlemail.com>
Date: Thu, 14 Apr 2016 05:54:40 +0100
Subject: [PATCH 1/6] Slicer effect based on a shader I wrote for this
 http://mikedotalmond.co.uk/projects/horizon Includes camera and static image
 examples. Todo: tidy up and add slice position animation

---
 effects/seriously.slicer.js | 172 ++++++++++++++++++++++++++++++++++++
 examples/index.html         |   1 +
 examples/slicer/camera.html | 107 ++++++++++++++++++++++
 examples/slicer/index.html  | 100 +++++++++++++++++++++
 index.html                  |   1 +
 5 files changed, 381 insertions(+)
 create mode 100644 effects/seriously.slicer.js
 create mode 100644 examples/slicer/camera.html
 create mode 100644 examples/slicer/index.html

diff --git a/effects/seriously.slicer.js b/effects/seriously.slicer.js
new file mode 100644
index 0000000..b3614ff
--- /dev/null
+++ b/effects/seriously.slicer.js
@@ -0,0 +1,172 @@
+/* global define, require */
+(function (root, factory) {
+	'use strict';
+
+	if (typeof define === 'function' && define.amd) {
+		// AMD. Register as an anonymous module.
+		define(['seriously'], factory);
+	} else if (typeof exports === 'object') {
+		// Node/CommonJS
+		factory(require('seriously'));
+	} else {
+		if (!root.Seriously) {
+			root.Seriously = { plugin: function (name, opt) { this[name] = opt; } };
+		}
+		factory(root.Seriously);
+	}
+}(window, function (Seriously) {
+	'use strict';
+
+	Seriously.plugin('slicer',  function (options) {
+		
+		if(typeof options !== 'object') options = {};
+		
+		var u,
+			slicePositions,
+			updateSlices = function(){
+				u.slicesA = slicePositions.slice(0,4);
+				u.slicesB = slicePositions.slice(4);
+			},
+			reset = function(){
+				slicePositions=[];
+				for(var i=0; i<8; i++){ slicePositions[i] = i/7; }
+				updateSlices();
+			},
+			randomise = function(){
+				slicePositions=[];
+				for(var i=0; i<8; i++){ slicePositions[i] = i/7 + Math.random()*1/8; }
+				updateSlices();
+			};
+		
+		return {
+			initialize: function (initialize, gl) {
+				initialize();
+				u = this.uniforms;
+				
+				options.reset = reset;
+				options.randomise = randomise;	
+				
+				slicePositions=[];
+				for(var i=0; i<8; i++){ slicePositions.push(.0); }
+			},
+			resize: function () {
+				this.uniforms.invHeight = 1.0 / this.height;
+			},				
+			commonShader: true,
+			shader: function (inputs, shaderSource) {
+				
+				shaderSource.fragment = [
+					
+					'precision mediump float;',
+					
+					'const float noiseAmt = .04;', // just add a low level of noise. make configurable if you want...
+					
+					'varying vec2 vTexCoord;',
+					
+					'uniform sampler2D source;',
+					
+					'uniform vec4 slicesA;',
+					'uniform vec4 slicesB;',
+					
+					'uniform float seed;', 
+					'uniform float invHeight;',
+					'uniform float ySpread;',
+					
+					'float rnd(vec2 x) {',
+						'return fract(sin(dot(x.xy, vec2(12.9898, 78.233))) * 43758.5453);',
+					'}',
+					
+					'void main() {',
+					  
+					  'float vx = vTexCoord.x;',
+					  'float r = rnd(seed * vTexCoord);',
+					  
+					  // get y position, and add offsets to scale and position some Y noise
+					  'float y = vTexCoord.y + (r-.5) * ySpread * invHeight;',
+					  
+					  'vec2 sliceACoord = vec2(0, y);',
+					  'vec2 sliceBCoord = vec2(0, y);',
+					  
+					  'if(vx < slicesA[1]) {',
+						'sliceACoord.x = slicesA[0];',
+						'sliceBCoord.x = slicesA[1];',
+					  '}',
+					  'else if(vx < slicesA[2]) {',
+						'sliceACoord.x = slicesA[1];',
+						'sliceBCoord.x = slicesA[2];',
+					  '}',
+					  'else if(vx < slicesA[3]) {',
+						'sliceACoord.x = slicesA[2];',
+						'sliceBCoord.x = slicesA[3];',
+					  '}',
+					  'else if(vx < slicesB[0]) {',
+						'sliceACoord.x = slicesA[3];',
+						'sliceBCoord.x = slicesB[0];',
+					  '}',
+					  'else if(vx < slicesB[1]) {',
+						'sliceACoord.x = slicesB[0];',
+						'sliceBCoord.x = slicesB[1];',
+					  '}',
+					  'else if(vx < slicesB[2]) {',
+						'sliceACoord.x = slicesB[1];',
+						'sliceBCoord.x = slicesB[2];',
+					  '}',
+					  'else {',
+						'sliceACoord.x = slicesB[2];',
+						'sliceBCoord.x = slicesB[3];',
+					  '}',
+					  
+					  'float f2 =  (vx - sliceACoord.x) / (sliceBCoord.x - sliceACoord.x);',
+					 
+					  // lerp between the two sampling positions
+					  'vec4 c = mix(texture2D(source, sliceACoord), texture2D(source, sliceBCoord), f2);',
+					  
+					  // add noise (monochromatic)
+					  'c += (r - 0.5) * noiseAmt;',
+					  
+					  // output
+					  'gl_FragColor = c;',
+					'}'
+				].join('\n');
+				return shaderSource;
+			}
+		};
+	},
+	{	// meta
+		inPlace: true,
+		inputs: {
+			source: {
+				type: 'image',
+				uniform: 'source'
+			},
+			ySpread:{
+				type:'number',
+				uniform: 'ySpread',
+				min: 0,
+				max: 1024,
+				defaultValue:1.5
+			},
+			slicesA: {
+				type: 'vector',
+				dimensions: 4,
+				uniform: 'slicesA',
+				defaultValue: [.0, 1/7, 2/7, 3/7]
+			},
+			slicesB: {
+				type: 'vector',
+				dimensions: 4,
+				uniform: 'slicesB',
+				defaultValue: [4/7, 5/7, 6/7, 1.0]
+			},
+			seed: {
+				type: 'number',
+				uniform: 'seed',
+				min: 1,
+				max: 1024,
+				defaultValue: 1 + Math.random() * 1023
+			}
+		},
+		title: 'Slicer',
+		description: 'Slicer Effect'
+	});
+}));
diff --git a/examples/index.html b/examples/index.html
index 2b5c6f0..4404c06 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -43,6 +43,7 @@
 			<li><a href="demo/threejs-source.html">Three.js Source</a></li>
 			<li><a href="demo/threejs-target.html">Three.js Target</a></li>
 			<li><a href="mirror/">Mirror</a> (<a href="mirror/camera.html">Camera</a>)</li>
+			<li><a href="slicer/">Slicer</a> (<a href="slicer/camera.html">Camera</a>)</li>
 			<li>Transforms
 				<ul>
 					<li><a href="transform/reformat.html">Reformat</a></li>
diff --git a/examples/slicer/camera.html b/examples/slicer/camera.html
new file mode 100644
index 0000000..6a6b76b
--- /dev/null
+++ b/examples/slicer/camera.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<title>Seriously.js Camera Demo with slicer effect</title>
+	<style type="text/css">
+		body {
+			margin: 0;
+		}
+		img {
+			display: none;
+		}
+		#canvas {
+			position: relative;
+			top: 0;
+			left: 0;
+			width: 1024px;
+			display:block;
+		}
+		button {
+			padding:4px;
+			margin-bottom:8px;
+		}
+		.controls{
+			margin:16px;
+		}
+	</style>
+</head>
+<body>
+	<canvas id="target" width="640" height="480"></canvas>
+	
+	<div class="controls">
+		Slice positions &#160;
+		<button id="reset">Reset</button>&#160;
+		<button id="randomise">Randomise</button>&#160;
+		<button disabled id="animate">Animate</button>&#160;
+		<span>Todo: add slice position animation</span>
+		
+		<div>
+			<label for="ySpread">Y Spread</label>
+			<input type="range" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
+		</div>
+		<div>
+			<label for="blur-amount">Blur</label>
+			<input type="range" id="blur-amount" min="0" max="1" step="0.001" value=".25" style="width:512px" />
+		</div>
+	</div>
+	
+	<script src="../../seriously.js"></script>
+	<script src="../../sources/seriously.camera.js"></script>
+	<script src="../../effects/seriously.slicer.js"></script>
+	<script src="../../effects/seriously.blur.js"></script>
+	<script>
+	(function() {
+		//main code goes here
+
+		// declare our variables
+		var srsly, // the main object that holds the entire composition
+			source, // wrapper object for source video
+			slicer, // slicer effect
+			slicerOptions,
+			blur, // optional, add some blur to the output
+			target; // a wrapper object for our target canvas
+
+		if (Seriously.incompatible('camera')) {
+			document.body.appendChild(document.createTextNode('Sorry, your browser does not support getUserMedia'));
+			document.querySelector('canvas').style.display = 'none';
+			return;
+		}
+		
+		slicerOptions={};
+		// construct our seriously object
+		srsly = new Seriously();
+
+		source = srsly.source('camera');
+		target = srsly.target('#target');
+		slicer = srsly.effect('slicer', slicerOptions);
+		blur = srsly.effect('blur');
+		
+		// connect the nodes 
+		slicer.source = source;
+		blur.source = slicer;
+		target.source = blur;
+		
+		// 
+		// optional. some built-in utils - reset slices so they are evenly distributed, or randomise them.
+		document.getElementById('reset').addEventListener('click',function(){
+			slicerOptions.reset();
+		});
+		document.getElementById('randomise').addEventListener('click',function(){
+			slicerOptions.randomise();
+		});
+		
+		slicer.ySpread= '#ySpread';
+		blur.amount = '#blur-amount';
+
+		srsly.go(
+			function(){
+				// before render
+				slicer.seed = 1.0 + Math.random() * 1024;
+			}
+		);
+	}());
+	</script>
+	
+</body>
+</html>
diff --git a/examples/slicer/index.html b/examples/slicer/index.html
new file mode 100644
index 0000000..98b3104
--- /dev/null
+++ b/examples/slicer/index.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Seriously.js Slicer Example</title>
+	<meta name="viewport" content="width=device-width, user-scalable=no">
+	<style type="text/css">
+		img{
+			display:none;
+		}
+		body {
+			margin: 0;
+		}
+		#canvas {
+			position: relative;
+			top: 0;
+			left: 0;
+			width: 1024px;
+			display:block;
+		}
+		button {
+			padding:4px;
+			margin-bottom:8px;
+		}
+		.controls{
+			margin:16px;
+		}
+	</style>
+</head>
+<body>
+	<img src="../images/field.jpg" id="image"/>
+	<canvas id="canvas" width="1024" height="628"></canvas>	
+	
+	<div class="controls">
+		Slice positions &#160;
+		<button id="reset">Reset</button>&#160;
+		<button id="randomise">Randomise</button>&#160;
+		<button disabled id="animate">Animate</button>&#160;
+		<span>Todo: add slice position animation</span>
+		
+		<div>
+			<label for="ySpread">Y Spread</label>
+			<input type="range" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
+		</div>
+		<div>
+			<label for="blur-amount">Blur</label>
+			<input type="range" id="blur-amount" min="0" max="1" step="0.001" value=".25" style="width:512px" />
+		</div>
+	</div>
+		
+		
+	<script src="../../lib/require.js"></script>
+	<script>
+		require.config({
+			baseUrl: '../../'
+		});
+
+		require([
+			'seriously',
+			'effects/seriously.slicer',
+			'effects/seriously.blur'
+		], function (Seriously) {
+		
+			var seriously, 
+				target,
+				slicer, slicerOptions,
+				blur;
+
+			seriously = new Seriously();
+			target = seriously.target('#canvas');
+
+			slicerOptions={};
+			slicer = seriously.effect('slicer', slicerOptions);
+			
+			
+			slicer.ySpread= '#ySpread';
+			
+			blur = seriously.effect('blur');
+			blur.amount = '#blur-amount';
+
+			slicer.source = '#image';
+			blur.source = slicer;
+			target.source = blur;
+			
+			// optional. some built-in utils - reset slices so they are evenly distributed, or randomise them.
+			document.getElementById('reset').addEventListener('click',function(){
+				slicerOptions.reset();
+			});
+			document.getElementById('randomise').addEventListener('click',function(){
+				slicerOptions.randomise();
+			});
+			
+			seriously.go(
+				function(){ // before render
+					slicer.seed = Math.random() * 1024;
+				}
+			);
+		});
+	</script>	
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e6762ab..6adb390 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,7 @@
 		<script type="text/javascript" src="effects/seriously.vibrance.js"></script>
 		<script type="text/javascript" src="effects/seriously.vignette.js"></script>
 		<script type="text/javascript" src="effects/seriously.split.js"></script>
+		<script type="text/javascript" src="effects/seriously.slicer.js"></script>
 		<style>
 
 		body {

From 0c2fc907c48646e5126865ee62f3f51a3d3c3015 Mon Sep 17 00:00:00 2001
From: mike <mikedotalmond@googlemail.com>
Date: Thu, 14 Apr 2016 18:48:58 +0100
Subject: [PATCH 2/6] - Make noiseAmount a uniform value - Some changes to the
 slicerOptions functions - Still todo: example with animated slice positions

---
 effects/seriously.slicer.js | 51 ++++++++++++++++++++++---------------
 examples/slicer/camera.html | 22 ++++++++--------
 examples/slicer/index.html  | 41 +++++++++++++++++------------
 3 files changed, 65 insertions(+), 49 deletions(-)

diff --git a/effects/seriously.slicer.js b/effects/seriously.slicer.js
index b3614ff..c574bf1 100644
--- a/effects/seriously.slicer.js
+++ b/effects/seriously.slicer.js
@@ -21,37 +21,39 @@
 		
 		if(typeof options !== 'object') options = {};
 		
-		var u,
-			slicePositions,
-			updateSlices = function(){
-				u.slicesA = slicePositions.slice(0,4);
-				u.slicesB = slicePositions.slice(4);
+		var setSlicePositions = function(positions){
+				var u = options.effect.uniforms;
+				u.slicesA[0] = positions[0];
+				u.slicesA[1] = positions[1];
+				u.slicesA[2] = positions[2];
+				u.slicesA[3] = positions[3];
+				u.slicesB[0] = positions[4];
+				u.slicesB[1] = positions[5];
+				u.slicesB[2] = positions[6];
+				u.slicesB[3] = positions[7];
 			},
 			reset = function(){
-				slicePositions=[];
-				for(var i=0; i<8; i++){ slicePositions[i] = i/7; }
-				updateSlices();
+				var p = [];
+				for(var i=0; i<8; i++){ p[i] = i/7; }
+				setSlicePositions(p);
 			},
 			randomise = function(){
-				slicePositions=[];
-				for(var i=0; i<8; i++){ slicePositions[i] = i/7 + Math.random()*1/8; }
-				updateSlices();
+				var p=[];
+				for(var i=0; i<8; i++){ p[i] = i/7 + Math.random()*1/8; }
+				setSlicePositions(p);
 			};
-		
+			
 		return {
 			initialize: function (initialize, gl) {
 				initialize();
-				u = this.uniforms;
-				
+				options.effect = this;
 				options.reset = reset;
 				options.randomise = randomise;	
-				
-				slicePositions=[];
-				for(var i=0; i<8; i++){ slicePositions.push(.0); }
+				options.setSlicePositions = setSlicePositions;
 			},
 			resize: function () {
 				this.uniforms.invHeight = 1.0 / this.height;
-			},				
+			},
 			commonShader: true,
 			shader: function (inputs, shaderSource) {
 				
@@ -59,7 +61,6 @@
 					
 					'precision mediump float;',
 					
-					'const float noiseAmt = .04;', // just add a low level of noise. make configurable if you want...
 					
 					'varying vec2 vTexCoord;',
 					
@@ -69,6 +70,7 @@
 					'uniform vec4 slicesB;',
 					
 					'uniform float seed;', 
+					'uniform float noiseAmt;', // = .04;',
 					'uniform float invHeight;',
 					'uniform float ySpread;',
 					
@@ -132,8 +134,7 @@
 			}
 		};
 	},
-	{	// meta
-		inPlace: true,
+	{	// metadata
 		inputs: {
 			source: {
 				type: 'image',
@@ -158,6 +159,13 @@
 				uniform: 'slicesB',
 				defaultValue: [4/7, 5/7, 6/7, 1.0]
 			},
+			noiseAmount : {
+				type: 'number',
+				uniform: 'noiseAmt',
+				min: 0,
+				max: 1,
+				defaultValue: 0.05
+			},
 			seed: {
 				type: 'number',
 				uniform: 'seed',
@@ -166,6 +174,7 @@
 				defaultValue: 1 + Math.random() * 1023
 			}
 		},
+		inPlace: true,
 		title: 'Slicer',
 		description: 'Slicer Effect'
 	});
diff --git a/examples/slicer/camera.html b/examples/slicer/camera.html
index 6a6b76b..228a948 100644
--- a/examples/slicer/camera.html
+++ b/examples/slicer/camera.html
@@ -36,13 +36,17 @@
 		<button disabled id="animate">Animate</button>&#160;
 		<span>Todo: add slice position animation</span>
 		
+		<div>
+			<label for="noiseAmount">Noise Amount</label>
+			<input type="range" id="noiseAmount" min="0" max="1" step="0.001" value="0.05" style="width:512px" />
+		</div>
 		<div>
 			<label for="ySpread">Y Spread</label>
 			<input type="range" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
 		</div>
 		<div>
 			<label for="blur-amount">Blur</label>
-			<input type="range" id="blur-amount" min="0" max="1" step="0.001" value=".25" style="width:512px" />
+			<input type="range" id="blur-amount" min="0" max="1" step="0.001" value=".1" style="width:512px" />
 		</div>
 	</div>
 	
@@ -52,13 +56,12 @@
 	<script src="../../effects/seriously.blur.js"></script>
 	<script>
 	(function() {
-		//main code goes here
 
 		// declare our variables
 		var srsly, // the main object that holds the entire composition
 			source, // wrapper object for source video
 			slicer, // slicer effect
-			slicerOptions,
+			slicerControl,
 			blur, // optional, add some blur to the output
 			target; // a wrapper object for our target canvas
 
@@ -68,13 +71,11 @@
 			return;
 		}
 		
-		slicerOptions={};
 		// construct our seriously object
 		srsly = new Seriously();
-
 		source = srsly.source('camera');
 		target = srsly.target('#target');
-		slicer = srsly.effect('slicer', slicerOptions);
+		slicer = srsly.effect('slicer', slicerControl={});
 		blur = srsly.effect('blur');
 		
 		// connect the nodes 
@@ -84,14 +85,11 @@
 		
 		// 
 		// optional. some built-in utils - reset slices so they are evenly distributed, or randomise them.
-		document.getElementById('reset').addEventListener('click',function(){
-			slicerOptions.reset();
-		});
-		document.getElementById('randomise').addEventListener('click',function(){
-			slicerOptions.randomise();
-		});
+		document.getElementById('reset').addEventListener('click', slicerControl.reset);
+		document.getElementById('randomise').addEventListener('click',slicerControl.randomise);
 		
 		slicer.ySpread= '#ySpread';
+		slicer.noiseAmount= '#noiseAmount';
 		blur.amount = '#blur-amount';
 
 		srsly.go(
diff --git a/examples/slicer/index.html b/examples/slicer/index.html
index 98b3104..649eb74 100644
--- a/examples/slicer/index.html
+++ b/examples/slicer/index.html
@@ -37,6 +37,10 @@
 		<button disabled id="animate">Animate</button>&#160;
 		<span>Todo: add slice position animation</span>
 		
+		<div>
+			<label for="noiseAmount">Noise Amount</label>
+			<input type="range" id="noiseAmount" min="0" max="1" step="0.001" value="0.05" style="width:512px" />
+		</div>
 		<div>
 			<label for="ySpread">Y Spread</label>
 			<input type="range" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
@@ -50,9 +54,7 @@
 		
 	<script src="../../lib/require.js"></script>
 	<script>
-		require.config({
-			baseUrl: '../../'
-		});
+		require.config({ baseUrl: '../../' });
 
 		require([
 			'seriously',
@@ -62,36 +64,43 @@
 		
 			var seriously, 
 				target,
-				slicer, slicerOptions,
+				slicer, slicerControl,
 				blur;
 
 			seriously = new Seriously();
 			target = seriously.target('#canvas');
 
-			slicerOptions={};
-			slicer = seriously.effect('slicer', slicerOptions);
-			
-			
+			// make the slicer and assign some controls
+			slicer = seriously.effect('slicer', slicerControl = {});
+			slicer.noiseAmount= '#noiseAmount';
 			slicer.ySpread= '#ySpread';
 			
 			blur = seriously.effect('blur');
 			blur.amount = '#blur-amount';
-
+			
+			// connect the nodes together
 			slicer.source = '#image';
 			blur.source = slicer;
 			target.source = blur;
 			
-			// optional. some built-in utils - reset slices so they are evenly distributed, or randomise them.
-			document.getElementById('reset').addEventListener('click',function(){
-				slicerOptions.reset();
-			});
-			document.getElementById('randomise').addEventListener('click',function(){
-				slicerOptions.randomise();
-			});
+			document.getElementById('reset').addEventListener('click', slicerControl.reset);
+			document.getElementById('randomise').addEventListener('click', slicerControl.randomise);
+			
+			/*
+			 * 	Using slicerControl is optional. Has some utils for setting/controlling the slice positions. 
+			 *	You could just use the sliceA and sliceB uniforms exposed on the slicer object instead.
+			 *	
+			 *	reset()
+			 *	randomise()
+			 *	setSlicePositions(an8ElementArrayOfFloats)
+			*/
 			
 			seriously.go(
 				function(){ // before render
 					slicer.seed = Math.random() * 1024;
+				},
+				function(){ // after render
+					
 				}
 			);
 		});

From eff82db36e0563ce3bbe5bea90c3b8a4d6c24e88 Mon Sep 17 00:00:00 2001
From: mike <mikedotalmond@googlemail.com>
Date: Fri, 15 Apr 2016 02:18:28 +0100
Subject: [PATCH 3/6] tidied up slicer examples, added basic animation example

---
 effects/seriously.slicer.js |  22 ++++---
 examples/slicer/camera.html | 128 +++++++++++++++++++++++++++++-------
 examples/slicer/index.html  | 121 ++++++++++++++++++++++++++++------
 3 files changed, 217 insertions(+), 54 deletions(-)

diff --git a/effects/seriously.slicer.js b/effects/seriously.slicer.js
index c574bf1..8d32d65 100644
--- a/effects/seriously.slicer.js
+++ b/effects/seriously.slicer.js
@@ -21,16 +21,19 @@
 		
 		if(typeof options !== 'object') options = {};
 		
-		var setSlicePositions = function(positions){
+		var getSlicePositions = function(target){
 				var u = options.effect.uniforms;
-				u.slicesA[0] = positions[0];
-				u.slicesA[1] = positions[1];
-				u.slicesA[2] = positions[2];
-				u.slicesA[3] = positions[3];
-				u.slicesB[0] = positions[4];
-				u.slicesB[1] = positions[5];
-				u.slicesB[2] = positions[6];
-				u.slicesB[3] = positions[7];
+				for(var i=0;i<4;i++){
+					target[i] = u.slicesA[i];
+					target[i+4] = u.slicesB[i];
+				}
+			},
+			setSlicePositions = function(positions){
+				var u = options.effect.uniforms;
+				for(var i=0;i<4;i++){
+					u.slicesA[i] = positions[i];
+					u.slicesB[i] = positions[i+4];
+				}
 			},
 			reset = function(){
 				var p = [];
@@ -49,6 +52,7 @@
 				options.effect = this;
 				options.reset = reset;
 				options.randomise = randomise;	
+				options.getSlicePositions = getSlicePositions;
 				options.setSlicePositions = setSlicePositions;
 			},
 			resize: function () {
diff --git a/examples/slicer/camera.html b/examples/slicer/camera.html
index 228a948..dbad5a2 100644
--- a/examples/slicer/camera.html
+++ b/examples/slicer/camera.html
@@ -33,20 +33,25 @@
 		Slice positions &#160;
 		<button id="reset">Reset</button>&#160;
 		<button id="randomise">Randomise</button>&#160;
-		<button disabled id="animate">Animate</button>&#160;
-		<span>Todo: add slice position animation</span>
-		
+		<span>
+			<input type="checkbox" id="animation-toggle" name="animation-toggle" value="" />
+			<label for="animation-toggle">Animated</label>
+		</span>
+		<div id="animation-speed" style="opacity:0.5">
+			<label for="animation-speed">Animation Speed</label>
+			<input disabled type="range" name="animation-speed" min="0.001" max="0.02" step="0.0001" value=".003" style="width:512px" />
+		</div>
 		<div>
 			<label for="noiseAmount">Noise Amount</label>
-			<input type="range" id="noiseAmount" min="0" max="1" step="0.001" value="0.05" style="width:512px" />
+			<input type="range" name="noiseAmount" id="noiseAmount" min="0" max="1" step="0.001" value="0.05" style="width:512px" />
 		</div>
 		<div>
 			<label for="ySpread">Y Spread</label>
-			<input type="range" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
+			<input type="range" name="ySpread" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
 		</div>
 		<div>
 			<label for="blur-amount">Blur</label>
-			<input type="range" id="blur-amount" min="0" max="1" step="0.001" value=".1" style="width:512px" />
+			<input type="range" name="blur-amount" id="blur-amount" min="0" max="1" step="0.001" value=".1" style="width:512px" />
 		</div>
 	</div>
 	
@@ -57,11 +62,11 @@
 	<script>
 	(function() {
 
-		// declare our variables
-		var srsly, // the main object that holds the entire composition
+		var seriously, // the main object that holds the entire composition
 			source, // wrapper object for source video
 			slicer, // slicer effect
-			slicerControl,
+			slicerControl={}, sliceAnimator, lastTime=0,
+			animationSpeedSlider, animationSpeedSliderChange,
 			blur, // optional, add some blur to the output
 			target; // a wrapper object for our target canvas
 
@@ -72,34 +77,109 @@
 		}
 		
 		// construct our seriously object
-		srsly = new Seriously();
-		source = srsly.source('camera');
-		target = srsly.target('#target');
-		slicer = srsly.effect('slicer', slicerControl={});
-		blur = srsly.effect('blur');
+		seriously = new Seriously();
+		source = seriously.source('camera');
+		target = seriously.target('#target');
+		slicer = seriously.effect('slicer', slicerControl);
+		blur = seriously.effect('blur');
 		
 		// connect the nodes 
 		slicer.source = source;
 		blur.source = slicer;
 		target.source = blur;
 		
-		// 
-		// optional. some built-in utils - reset slices so they are evenly distributed, or randomise them.
-		document.getElementById('reset').addEventListener('click', slicerControl.reset);
-		document.getElementById('randomise').addEventListener('click',slicerControl.randomise);
-		
-		slicer.ySpread= '#ySpread';
-		slicer.noiseAmount= '#noiseAmount';
+		// bind ui controls for slicer uniforms
+		slicer.ySpread = '#ySpread';
+		slicer.noiseAmount = '#noiseAmount';
 		blur.amount = '#blur-amount';
-
-		srsly.go(
+		
+		/*
+		 * 	Using slicerControl is optional. Has some utils for setting/controlling the slice positions. 
+		 *	You could just use the vec4 sliceA and sliceB uniforms exposed on the slicer object instead.
+		 *	
+		 *	reset() // resets all slices to be evenly spread from left to right
+		 *	randomise() // randomise slice x positions
+		 *	setSlicePositions(an8ElementArrayOfFloats) // set the 8 slice positions manually - positions are normalised, use increasing values between 0 and 1
+		 *	getSlicePositions(targetArray) // sets the target array with the current slice positions, from 0 to 7
+		*/		
+		animationSpeedSlider=document.getElementsByName('animation-speed')[0];
+		animationSpeedSliderChange = function(){
+			var val = parseFloat(animationSpeedSlider.value);
+			sliceAnimator.sliceTransitionSpeed = val;
+			sliceAnimator.newSlicesSelectTime = 4000 - val*140000;
+		};
+		animationSpeedSlider.addEventListener('change',animationSpeedSliderChange);
+		animationSpeedSlider.addEventListener('input',animationSpeedSliderChange);
+		
+		document.getElementById('reset').addEventListener('click', function(){
+			slicerControl.reset();
+			sliceAnimator.reset();
+		});
+		document.getElementById('randomise').addEventListener('click', function(){
+			slicerControl.randomise();
+			sliceAnimator.reset();
+		});
+		document.getElementById('animation-toggle').addEventListener('click',function(){
+			var state = this.checked;
+			document.getElementById('animation-speed').style.opacity= state ? 1 : .5;;
+			document.getElementsByName('animation-speed')[0].disabled=!state;
+			if(state) sliceAnimator.reset();
+			sliceAnimator.enabled = state;
+			animationSpeedSliderChange();
+		});
+		
+		// a quick example animating the slice positions over time
+		sliceAnimator = {
+			enabled: false,
+			newSliceTimer: 1e6,
+			newSlicesSelectTime: 5000, // millis
+			sliceTransitionSpeed: .003,
+			
+			currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
+			targetSlices: new Float32Array([.5,.5,.5,.5,.5,.5,.5,.5]),
+			
+			reset:function(){ // set the current values here to the values in the shader
+				slicerControl.getSlicePositions(this.currentSlices);
+				this.pickNewTargets();
+			},
+			updateSlices: function(dt){
+				var t = this;
+				var targets=t.targetSlices;
+				var current=t.currentSlices;
+				
+				t.newSliceTimer += dt;
+				if (t.newSliceTimer >= t.newSlicesSelectTime) t.pickNewTargets();
+				
+				// move slices toward targets...
+				var c;
+				for (var i=0; i<8; i++) {
+					var c = current[i];
+					current[i] += (targets[i] - c) * t.sliceTransitionSpeed;    
+				}
+				
+				slicerControl.setSlicePositions(t.currentSlices);
+			},
+			pickNewTargets: function(){
+				this.newSliceTimer = 0;
+				var count = Math.round(4 + (Math.random() * 3));
+				var stripWidth = 1.0 / count;
+				for (var i=0; i<8; i++) this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+			}
+		};
+		
+		seriously.go(
 			function(){
 				// before render
+				var now = performance.now();
+				var dt = now - lastTime;
+				lastTime = now;
+				
 				slicer.seed = 1.0 + Math.random() * 1024;
+				
+				if(sliceAnimator.enabled) sliceAnimator.updateSlices(dt);
 			}
 		);
 	}());
 	</script>
-	
 </body>
 </html>
diff --git a/examples/slicer/index.html b/examples/slicer/index.html
index 649eb74..d59c321 100644
--- a/examples/slicer/index.html
+++ b/examples/slicer/index.html
@@ -34,20 +34,25 @@
 		Slice positions &#160;
 		<button id="reset">Reset</button>&#160;
 		<button id="randomise">Randomise</button>&#160;
-		<button disabled id="animate">Animate</button>&#160;
-		<span>Todo: add slice position animation</span>
-		
+		<span>
+			<input type="checkbox" id="animation-toggle" name="animation-toggle" value="" />
+			<label for="animation-toggle">Animated</label>
+		</span>
+		<div id="animation-speed" style="opacity:0.5">
+			<label for="animation-speed">Animation Speed</label>
+			<input disabled type="range" name="animation-speed" min="0.0001" max="0.01" step="0.00001" value=".0002" style="width:512px" />
+		</div>
 		<div>
 			<label for="noiseAmount">Noise Amount</label>
-			<input type="range" id="noiseAmount" min="0" max="1" step="0.001" value="0.05" style="width:512px" />
+			<input type="range" name="noiseAmount" id="noiseAmount" min="0" max="1" step="0.001" value="0.02" style="width:512px" />
 		</div>
 		<div>
 			<label for="ySpread">Y Spread</label>
-			<input type="range" id="ySpread" min="0" max="128" step="0.1" value="16" style="width:512px" />
+			<input type="range" name="ySpread" id="ySpread" min="0" max="128" step="0.1" value=".5" style="width:512px" />
 		</div>
 		<div>
 			<label for="blur-amount">Blur</label>
-			<input type="range" id="blur-amount" min="0" max="1" step="0.001" value=".25" style="width:512px" />
+			<input type="range" name="blur-amount" id="blur-amount" min="0" max=".25" step="0.001" value=".02" style="width:512px" />
 		</div>
 	</div>
 		
@@ -64,14 +69,15 @@
 		
 			var seriously, 
 				target,
-				slicer, slicerControl,
+				slicer, slicerControl={}, lastTime=0,
+				animationSpeedSlider, animationSpeedSliderChange,
 				blur;
 
 			seriously = new Seriously();
 			target = seriously.target('#canvas');
 
 			// make the slicer and assign some controls
-			slicer = seriously.effect('slicer', slicerControl = {});
+			slicer = seriously.effect('slicer', slicerControl);
 			slicer.noiseAmount= '#noiseAmount';
 			slicer.ySpread= '#ySpread';
 			
@@ -83,27 +89,100 @@
 			blur.source = slicer;
 			target.source = blur;
 			
-			document.getElementById('reset').addEventListener('click', slicerControl.reset);
-			document.getElementById('randomise').addEventListener('click', slicerControl.randomise);
+			// bind ui controls for slicer uniforms
+			slicer.ySpread = '#ySpread';
+			slicer.noiseAmount = '#noiseAmount';
+			blur.amount = '#blur-amount';
 			
+				
 			/*
 			 * 	Using slicerControl is optional. Has some utils for setting/controlling the slice positions. 
-			 *	You could just use the sliceA and sliceB uniforms exposed on the slicer object instead.
+			 *	You could just use the vec4 sliceA and sliceB uniforms exposed on the slicer object instead.
 			 *	
-			 *	reset()
-			 *	randomise()
-			 *	setSlicePositions(an8ElementArrayOfFloats)
-			*/
+			 *	reset() // resets all slices to be evenly spread from left to right
+			 *	randomise() // randomise slice x positions
+			 *	setSlicePositions(an8ElementArrayOfFloats) // set the 8 slice positions manually - positions are normalised, use increasing values between 0 and 1
+			 *	getSlicePositions(targetArray) // sets the target array with the current slice positions, from 0 to 7
+			*/	
+			animationSpeedSlider = document.getElementsByName('animation-speed')[0];
+			animationSpeedSliderChange = function(){
+				var val = parseFloat(animationSpeedSlider.value);
+				sliceAnimator.sliceTransitionSpeed = val;
+				sliceAnimator.newSlicesSelectTime = 4000 - val*140000;
+			};
+			animationSpeedSlider.addEventListener('change',animationSpeedSliderChange);
+			animationSpeedSlider.addEventListener('input',animationSpeedSliderChange);
 			
-			seriously.go(
-				function(){ // before render
-					slicer.seed = Math.random() * 1024;
+			document.getElementById('reset').addEventListener('click', function(){
+				slicerControl.reset();
+				sliceAnimator.reset();
+			});
+			document.getElementById('randomise').addEventListener('click', function(){
+				slicerControl.randomise();
+				sliceAnimator.reset();
+			});
+			document.getElementById('animation-toggle').addEventListener('click',function(){
+				var state = this.checked;
+				document.getElementById('animation-speed').style.opacity= state ? 1 : .5;;
+				document.getElementsByName('animation-speed')[0].disabled=!state;
+				if(state) sliceAnimator.reset();
+				sliceAnimator.enabled = state;
+				animationSpeedSliderChange();
+			});
+		
+			// a quick example animating the slice positions over time
+			var sliceAnimator = {
+				enabled: false,
+				newSliceTimer: 1e6,
+				newSlicesSelectTime: 5000, // millis
+				sliceTransitionSpeed: .0002,
+				
+				currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
+				targetSlices: new Float32Array([.5,.5,.5,.5,.5,.5,.5,.5]),
+				
+				reset:function(){ // set the current values here to the values in the shader
+					slicerControl.getSlicePositions(this.currentSlices);
+					this.pickNewTargets();
+				},
+				updateSlices: function(dt){
+					var t = this;
+					var targets=t.targetSlices;
+					var current=t.currentSlices;
+					
+					t.newSliceTimer += dt;
+					if (t.newSliceTimer >= t.newSlicesSelectTime) t.pickNewTargets();
+					
+					// move slices toward targets...
+					var c;
+					for (var i=0; i<8; i++) {
+						var c = current[i];
+						current[i] += (targets[i] - c) * t.sliceTransitionSpeed;    
+					}
+					
+					slicerControl.setSlicePositions(t.currentSlices);
 				},
-				function(){ // after render
+				pickNewTargets: function(){
+					this.newSliceTimer = 0;
+					var count = Math.round(6 + (Math.random() * 2));
+					var stripWidth = 1.0 / count;
+					for (var i=0; i<8; i++) this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+				}
+			};
+		
+			seriously.go(
+				function(){
+					// before render
+					var now = performance.now();
+					var dt = now - lastTime;
+					lastTime = now;
+					
+					slicer.seed = 1.0 + Math.random() * 1024;
 					
+					if(sliceAnimator.enabled) sliceAnimator.updateSlices(dt);
 				}
 			);
-		});
-	</script>	
+		}
+	);
+</script>	
 </body>
 </html>
\ No newline at end of file

From aaa1fc954ef13a3e62d0d6bfb9c02ec01c772fab Mon Sep 17 00:00:00 2001
From: mike <mikedotalmond@googlemail.com>
Date: Fri, 15 Apr 2016 02:45:12 +0100
Subject: [PATCH 4/6] a tidy-up to keep jshint happy

---
 effects/seriously.slicer.js | 22 ++++++++++++--------
 examples/slicer/camera.html | 39 ++++++++++++++++++++---------------
 examples/slicer/index.html  | 41 ++++++++++++++++++++++---------------
 3 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/effects/seriously.slicer.js b/effects/seriously.slicer.js
index 8d32d65..c2029ad 100644
--- a/effects/seriously.slicer.js
+++ b/effects/seriously.slicer.js
@@ -19,30 +19,36 @@
 
 	Seriously.plugin('slicer',  function (options) {
 		
-		if(typeof options !== 'object') options = {};
+		if(typeof options !== 'object') {
+			options = {};
+		}
 		
 		var getSlicePositions = function(target){
 				var u = options.effect.uniforms;
-				for(var i=0;i<4;i++){
+				for(var i=0; i < 4; i++){
 					target[i] = u.slicesA[i];
-					target[i+4] = u.slicesB[i];
+					target[i + 4] = u.slicesB[i];
 				}
 			},
 			setSlicePositions = function(positions){
 				var u = options.effect.uniforms;
-				for(var i=0;i<4;i++){
+				for(var i=0;i < 4;i++){
 					u.slicesA[i] = positions[i];
-					u.slicesB[i] = positions[i+4];
+					u.slicesB[i] = positions[i + 4];
 				}
 			},
 			reset = function(){
 				var p = [];
-				for(var i=0; i<8; i++){ p[i] = i/7; }
+				for(var i=0; i < 8; i++){ 
+					p[i] = i/7;
+				}
 				setSlicePositions(p);
 			},
 			randomise = function(){
 				var p=[];
-				for(var i=0; i<8; i++){ p[i] = i/7 + Math.random()*1/8; }
+				for(var i=0; i < 8; i++){ 
+					p[i] = i/7 + Math.random() * 1/8;
+				}
 				setSlicePositions(p);
 			};
 			
@@ -155,7 +161,7 @@
 				type: 'vector',
 				dimensions: 4,
 				uniform: 'slicesA',
-				defaultValue: [.0, 1/7, 2/7, 3/7]
+				defaultValue: [0.0, 1/7, 2/7, 3/7]
 			},
 			slicesB: {
 				type: 'vector',
diff --git a/examples/slicer/camera.html b/examples/slicer/camera.html
index dbad5a2..e52530a 100644
--- a/examples/slicer/camera.html
+++ b/examples/slicer/camera.html
@@ -61,7 +61,8 @@
 	<script src="../../effects/seriously.blur.js"></script>
 	<script>
 	(function() {
-
+		'use strict';
+		
 		var seriously, // the main object that holds the entire composition
 			source, // wrapper object for source video
 			slicer, // slicer effect
@@ -121,7 +122,7 @@
 		});
 		document.getElementById('animation-toggle').addEventListener('click',function(){
 			var state = this.checked;
-			document.getElementById('animation-speed').style.opacity= state ? 1 : .5;;
+			document.getElementById('animation-speed').style.opacity= state ? 1 : 0.5;
 			document.getElementsByName('animation-speed')[0].disabled=!state;
 			if(state) sliceAnimator.reset();
 			sliceAnimator.enabled = state;
@@ -133,50 +134,56 @@
 			enabled: false,
 			newSliceTimer: 1e6,
 			newSlicesSelectTime: 5000, // millis
-			sliceTransitionSpeed: .003,
+			sliceTransitionSpeed: 0.003,
 			
 			currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
-			targetSlices: new Float32Array([.5,.5,.5,.5,.5,.5,.5,.5]),
+			targetSlices: new Float32Array([0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5]),
 			
 			reset:function(){ // set the current values here to the values in the shader
 				slicerControl.getSlicePositions(this.currentSlices);
 				this.pickNewTargets();
 			},
 			updateSlices: function(dt){
-				var t = this;
-				var targets=t.targetSlices;
-				var current=t.currentSlices;
+				var t = this,
+					targets=t.targetSlices,
+					current=t.currentSlices,
+					c;
 				
 				t.newSliceTimer += dt;
 				if (t.newSliceTimer >= t.newSlicesSelectTime) t.pickNewTargets();
 				
 				// move slices toward targets...
-				var c;
 				for (var i=0; i<8; i++) {
-					var c = current[i];
+					c = current[i];
 					current[i] += (targets[i] - c) * t.sliceTransitionSpeed;    
 				}
 				
 				slicerControl.setSlicePositions(t.currentSlices);
 			},
 			pickNewTargets: function(){
+				var count = Math.round(4 + (Math.random() * 3)),
+					stripWidth = 1.0 / count;
+					
 				this.newSliceTimer = 0;
-				var count = Math.round(4 + (Math.random() * 3));
-				var stripWidth = 1.0 / count;
-				for (var i=0; i<8; i++) this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+				for (var i=0; i<8; i++) {
+					this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+				}
 			}
 		};
 		
 		seriously.go(
 			function(){
 				// before render
-				var now = performance.now();
-				var dt = now - lastTime;
-				lastTime = now;
+				var now = performance.now(),
+					dt = now - lastTime;
 				
 				slicer.seed = 1.0 + Math.random() * 1024;
 				
-				if(sliceAnimator.enabled) sliceAnimator.updateSlices(dt);
+				if(sliceAnimator.enabled){
+					sliceAnimator.updateSlices(dt);
+				}
+				
+				lastTime = now;
 			}
 		);
 	}());
diff --git a/examples/slicer/index.html b/examples/slicer/index.html
index d59c321..07bedcd 100644
--- a/examples/slicer/index.html
+++ b/examples/slicer/index.html
@@ -66,12 +66,14 @@
 			'effects/seriously.slicer',
 			'effects/seriously.blur'
 		], function (Seriously) {
-		
+			'use strict';
+			
 			var seriously, 
 				target,
 				slicer, slicerControl={}, lastTime=0,
 				animationSpeedSlider, animationSpeedSliderChange,
 				blur;
+				
 
 			seriously = new Seriously();
 			target = seriously.target('#canvas');
@@ -123,7 +125,7 @@
 			});
 			document.getElementById('animation-toggle').addEventListener('click',function(){
 				var state = this.checked;
-				document.getElementById('animation-speed').style.opacity= state ? 1 : .5;;
+				document.getElementById('animation-speed').style.opacity= state ? 1 : 0.5;
 				document.getElementsByName('animation-speed')[0].disabled=!state;
 				if(state) sliceAnimator.reset();
 				sliceAnimator.enabled = state;
@@ -135,27 +137,29 @@
 				enabled: false,
 				newSliceTimer: 1e6,
 				newSlicesSelectTime: 5000, // millis
-				sliceTransitionSpeed: .0002,
+				sliceTransitionSpeed: 0.0002,
 				
 				currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
-				targetSlices: new Float32Array([.5,.5,.5,.5,.5,.5,.5,.5]),
+				targetSlices: new Float32Array([0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5]),
 				
 				reset:function(){ // set the current values here to the values in the shader
 					slicerControl.getSlicePositions(this.currentSlices);
 					this.pickNewTargets();
 				},
 				updateSlices: function(dt){
-					var t = this;
-					var targets=t.targetSlices;
-					var current=t.currentSlices;
+					var t = this,
+						targets = t.targetSlices,
+						current = t.currentSlices,
+						c;
 					
 					t.newSliceTimer += dt;
-					if (t.newSliceTimer >= t.newSlicesSelectTime) t.pickNewTargets();
+					if (t.newSliceTimer >= t.newSlicesSelectTime) {
+						t.pickNewTargets();
+					}
 					
 					// move slices toward targets...
-					var c;
 					for (var i=0; i<8; i++) {
-						var c = current[i];
+						c = current[i];
 						current[i] += (targets[i] - c) * t.sliceTransitionSpeed;    
 					}
 					
@@ -165,20 +169,25 @@
 					this.newSliceTimer = 0;
 					var count = Math.round(6 + (Math.random() * 2));
 					var stripWidth = 1.0 / count;
-					for (var i=0; i<8; i++) this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+					for (var i=0; i<8; i++) {
+						this.targetSlices[i] = (i * stripWidth) + (Math.random() * stripWidth);
+					}
 				}
 			};
 		
 			seriously.go(
 				function(){
 					// before render
-					var now = performance.now();
-					var dt = now - lastTime;
-					lastTime = now;
-					
+					var now = performance.now(),
+						dt = now - lastTime;
+						
 					slicer.seed = 1.0 + Math.random() * 1024;
 					
-					if(sliceAnimator.enabled) sliceAnimator.updateSlices(dt);
+					if(sliceAnimator.enabled) {
+						sliceAnimator.updateSlices(dt);
+					}
+					
+					lastTime = now;					
 				}
 			);
 		}

From 8d2b433fc2b1f93e0d261fa228979f3bc202a504 Mon Sep 17 00:00:00 2001
From: mike <mikedotalmond@googlemail.com>
Date: Fri, 15 Apr 2016 02:56:39 +0100
Subject: [PATCH 5/6] couple more tiny tweaks to examples

---
 examples/slicer/camera.html |  5 +++--
 examples/slicer/index.html  | 16 ++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/examples/slicer/camera.html b/examples/slicer/camera.html
index e52530a..cf38bca 100644
--- a/examples/slicer/camera.html
+++ b/examples/slicer/camera.html
@@ -66,7 +66,7 @@
 		var seriously, // the main object that holds the entire composition
 			source, // wrapper object for source video
 			slicer, // slicer effect
-			slicerControl={}, sliceAnimator, lastTime=0,
+			slicerControl = {}, sliceAnimator, lastTime=0,
 			animationSpeedSlider, animationSpeedSliderChange,
 			blur, // optional, add some blur to the output
 			target; // a wrapper object for our target canvas
@@ -171,9 +171,10 @@
 			}
 		};
 		
+		// start everything going
 		seriously.go(
 			function(){
-				// before render
+				// before each render
 				var now = performance.now(),
 					dt = now - lastTime;
 				
diff --git a/examples/slicer/index.html b/examples/slicer/index.html
index 07bedcd..a2525d1 100644
--- a/examples/slicer/index.html
+++ b/examples/slicer/index.html
@@ -70,10 +70,9 @@
 			
 			var seriously, 
 				target,
-				slicer, slicerControl={}, lastTime=0,
+				slicer, slicerControl = {}, sliceAnimator, lastTime=0,
 				animationSpeedSlider, animationSpeedSliderChange,
 				blur;
-				
 
 			seriously = new Seriously();
 			target = seriously.target('#canvas');
@@ -133,7 +132,7 @@
 			});
 		
 			// a quick example animating the slice positions over time
-			var sliceAnimator = {
+			sliceAnimator = {
 				enabled: false,
 				newSliceTimer: 1e6,
 				newSlicesSelectTime: 5000, // millis
@@ -142,7 +141,7 @@
 				currentSlices: new Float32Array([0,1/7,2/7,3/7,4/7,5/7,6/7,1]),
 				targetSlices: new Float32Array([0.5,0.5,0.5,0.5,0.5,0.5,0.5,0.5]),
 				
-				reset:function(){ // set the current values here to the values in the shader
+				reset:function(){
 					slicerControl.getSlicePositions(this.currentSlices);
 					this.pickNewTargets();
 				},
@@ -175,19 +174,20 @@
 				}
 			};
 		
+			// start everything going
 			seriously.go(
 				function(){
-					// before render
+					// before each render
 					var now = performance.now(),
 						dt = now - lastTime;
-						
+					
 					slicer.seed = 1.0 + Math.random() * 1024;
 					
-					if(sliceAnimator.enabled) {
+					if(sliceAnimator.enabled){
 						sliceAnimator.updateSlices(dt);
 					}
 					
-					lastTime = now;					
+					lastTime = now;
 				}
 			);
 		}

From da731cdaccaf8af263908f33724592d9e408f7b1 Mon Sep 17 00:00:00 2001
From: mike <mikedotalmond@googlemail.com>
Date: Fri, 15 Apr 2016 05:14:32 +0100
Subject: [PATCH 6/6] Slicer description and licence

---
 effects/seriously.slicer.js | 41 +++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/effects/seriously.slicer.js b/effects/seriously.slicer.js
index c2029ad..49e71d5 100644
--- a/effects/seriously.slicer.js
+++ b/effects/seriously.slicer.js
@@ -1,3 +1,44 @@
+/*
+Copyright (c) 2016 Mike Almond - @mikedotalmond - https://github.com/mikedotalmond
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+*/
+
+/**
+* The shader takes a set of 1 pixel wide vertical slices from the source and 
+* interpolates between them to generate the output. The positions of (up to) 
+* 8 slices can be specified, along with noise and a y-position offset amount 
+* to further distort the output.
+
+* The effect it produces is a horizontally-smeared, low-detail version
+* of the input.
+* 
+* It's based on the shader I made to generate the background scene for this project:
+* http://mikedotalmond.co.uk/horizon/
+* https://github.com/mikedotalmond/Horizon
+* 
+* There are two examples in /examples/slicer/ 
+* 
+* @author @mikedotalmond
+*
+*/
+
 /* global define, require */
 (function (root, factory) {
 	'use strict';