add canvas helper file

add request animation frame

scripts/aux/canvas.js

@@ -0,0 +1,38 @@
+/*global define*/
+define(
+	function()
+	{
+		var update = false;
+
+		function resize( canvas, size )
+		{
+
+			if ( canvas.width !== size.width )
+			{
+				canvas.width = size.width;
+				update = true;
+			}
+
+			if ( canvas.height !== size.height )
+			{
+				canvas.height = size.height;
+				update = true;
+			}
+
+			if ( update )
+			{
+				canvas.width = size.width;
+				canvas.height = size.height;
+			}
+
+			update = false;
+		}
+
+		function clear( canvas, ctx )
+		{
+			ctx.clearRect( ctx, 0, 0, canvas.width, canvas.height );
+		}
+
+		return { resize: resize, clear: clear };
+	}
+);

scripts/aux/glitch.js

@@ -1,6 +1,7 @@
 /*global define*/
 define(
-	function()
+	[ 'aux/canvas' ],
+	function( canvas_helper )
 	{
 		var canvas = document.createElement( 'canvas' );
 		var ctx = canvas.getContext( '2d' );
@@ -36,7 +37,8 @@ define(
 			offset = input.offset / 100;
 			iterations = input.iterations;
 
-			updateCanvasSize( image_data.width, image_data.height );
+			canvas_helper.resize( canvas, image_data );
+			canvas_helper.resize( tmp_canvas, image_data );
 
 			base64 = getBase64FromImageData( image_data, quality );
 			byte_array = base64ToByteArray( base64 );
@@ -57,26 +59,6 @@ define(
 			img.src = byteArrayToBase64( byte_array );
 		}
 
-		function updateCanvasSize( width, height )
-		{
-			var updated = false;
-
-			if ( canvas_size.width !== width ) { canvas_size.width = width; updated = true; }
-			if ( canvas_size.height !== height ) { canvas_size.height = height; updated = true; }
-
-			if ( updated )
-			{
-				resizeCanvas( tmp_canvas, canvas_size );
-				resizeCanvas( canvas, canvas_size );
-			}
-		}
-
-		function resizeCanvas( canvas, img )
-		{
-			canvas.width = img.width;
-			canvas.height = img.height;
-		}
-
 		function glitchJpegBytes( byte_array, jpg_header_length, seed, offset, iteration )
 		{
 			var it = ( iteration + 1 ) / 10;

scripts/src/process.js

@@ -1,7 +1,7 @@
-/*global define*/
+/*global define, requestAnimationFrame*/
 define(
-	[ 'aux/glitch' ],
+	[ 'aux/glitch', 'aux/canvas', 'lib/raf' ],
-	function( glitch )
+	function( glitch, canvas_helper )
 	{
 		var tmp_canvas = document.createElement( 'canvas' );
 		var tmp_ctx = tmp_canvas.getContext( '2d' );
@@ -14,6 +14,7 @@ define(
 		var image;
 		var signals;
 		var image_data;
+		var canvas_size;
 
 		function init( shared )
 		{
@@ -40,23 +41,37 @@ define(
 			}
 		}
 
+		function requestTick()
+		{
+			if ( ! is_processing )
+			{
+				requestAnimationFrame( update );
+			}
+
+			is_processing = true;
+		}
+
 		function update()
 		{
-			if ( ! is_processing && image )
+			if ( image )
 			{
 				processImage( image );
 			}
+
+			else
+			{
+				is_processing = false;
+			}
 		}
 
 		function processImage( img )
 		{
 			is_processing = true;
 
-			clearCanvas( tmp_canvas, tmp_ctx );
+			canvas_helper.clear( tmp_canvas, tmp_ctx );
-			clearCanvas( canvas, ctx );
+			canvas_helper.clear( canvas, ctx );
-
+			canvas_helper.resize( tmp_canvas, img );
-			resizeCanvas( tmp_canvas, img );
+			canvas_helper.resize( canvas, img );
-			resizeCanvas( canvas, img );
 
 			tmp_ctx.drawImage( img, 0, 0 );
 
@@ -67,24 +82,13 @@ define(
 
 		function draw( image_data )
 		{
-			resizeCanvas( canvas, image_data );
+			canvas_helper.resize( canvas, image_data );
 			ctx.putImageData( image_data, 0, 0 );
 
 			is_processing = false;
 			image_data = null;
 		}
 
-		function resizeCanvas( canvas, img )
-		{
-			canvas.width = img.width;
-			canvas.height = img.height;
-		}
-
-		function clearCanvas( canvas, ctx )
-		{
-			ctx.clearRect( ctx, 0, 0, canvas.width, canvas.height );
-		}
-
 		function exportData()
 		{
 			signals['export-png'].dispatch( canvas.toDataURL( 'image/png' ) );