diff --git a/README.md b/README.md
index 35738e8..539962d 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,21 @@
-image triangulation experiment
+image glitch experiment
===
-this is an experiment for the web browser. it uses the [delaunay triangulation](https://en.wikipedia.org/wiki/Delaunay_triangulation) algorithm to alter an image.
+this is an experiment for the web browser. it corrupts jpg images so that they appear "glitched".
-[](http://snorpey.github.io/triangulation/)
+[](http://snorpey.github.io/jpg-glitch/)
-[online demo](http://snorpey.github.io/triangulation/)
+[online demo](http://snorpey.github.io/jpg-glitch/)
-this experiment is very much based on the [triangulation image generator](http://jsdo.it/akm2/xoYx) script. it includes several speed enhancements. it is my goal to make it fast enough for use with real time streaming input, e.g. from a [web cam](https://github.com/snorpey/photobooth).
-
-you can fine another experiment that applies the the triangulation to text input here: [http://snorpey.github.io/text-triangulation/](http://snorpey.github.io/text-triangulation/)
+this experiment is very much based on the [smack my glitch up js](https://github.com/Hugosslade/smackmyglitchupjs) script.
third party code used in this experiment
---
* some parts of the code code from [triangulation image generator](http://jsdo.it/akm2/xoYx) by [akm2](http://codepen.io/akm2), MIT license
-* [delaunay js](https://github.com/ironwallaby/delaunay) by [ironwallaby](https://github.com/ironwallaby), public domain
* [html5slider](http://frankyan.com/labs/html5slider/) by [fryn](https://github.com/fryn), MIT license
* [js signals](http://millermedeiros.github.io/js-signals/) by [millermedeiros](https://github.com/millermedeiros), MIT license
-* [superfast boxblur for canvas](http://quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html) by [quasimondo](https://github.com/quasimondo), MIT license
* [require js](http://requirejs.org/), by [jrburke](jrburke), BSD & MIT license
+* [raf js](https://gist.github.com/paulirish/1579671), by [paulirish](https://github.com/paulirish), MIT license
license
---
diff --git a/index.html b/index.html
index e4c0c98..aaf540d 100644
--- a/index.html
+++ b/index.html
@@ -8,24 +8,24 @@
glitch images
- drop an image in the browser.
+ drop an image in the browser to modify it. this script corrupts some bytes in a jpg image. because of the way jpg encoding works, the corripted file still shows something. inspired by soulwires experiment in flash. this experiment was created by georg. you can follow him on twitter or explore the source code on github.
diff --git a/scripts/aux/canvas.js b/scripts/aux/canvas.js
new file mode 100644
index 0000000..f7fe2dd
--- /dev/null
+++ b/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 };
+ }
+);
\ No newline at end of file
diff --git a/scripts/aux/glitch.js b/scripts/aux/glitch.js
index df5ec58..caa5499 100644
--- a/scripts/aux/glitch.js
+++ b/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' );
@@ -17,7 +18,7 @@ define(
var iterations;
var quality;
var seed;
- var offset;
+ var amount;
var base64;
var byte_array;
var jpg_header_length;
@@ -33,10 +34,11 @@ define(
{
seed = input.seed / 100;
quality = input.quality / 100;
- offset = input.offset / 100;
+ amount = input.amount / 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 );
@@ -44,7 +46,7 @@ define(
for ( i = 0; i < iterations; i++ )
{
- glitchJpegBytes( byte_array, jpg_header_length, seed, offset, i );
+ glitchJpegBytes( byte_array, jpg_header_length, seed, amount, i, iterations );
}
img = new Image();
@@ -57,39 +59,23 @@ define(
img.src = byteArrayToBase64( byte_array );
}
- function updateCanvasSize( width, height )
+ function glitchJpegBytes( byte_array, jpg_header_length, seed, amount, i, len )
{
- 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;
var max_index = byte_array.length - jpg_header_length - 4;
- var px_index = it * max_index + offset * 10;
+ var px_min = parseInt( max_index / len * i, 10 );
+ var px_max = parseInt( max_index / len * ( i + 1 ), 10 );
- if ( px_index > max_index )
+ var delta = px_max - px_min;
+ var px_i = parseInt( px_min + delta * seed, 10 );
+
+ if ( px_i > max_index )
{
- px_index = px_index;
+ px_i = max_index;
}
- var index = Math.floor( jpg_header_length + px_index );
- byte_array[index] = Math.floor( seed * 256 );
+ var index = Math.floor( jpg_header_length + px_i );
+
+ byte_array[index] = Math.floor( amount * 256 );
}
function getBase64FromImageData( image_data, quality )
diff --git a/scripts/lib/delaunay.js b/scripts/lib/delaunay.js
deleted file mode 100644
index e7f321c..0000000
--- a/scripts/lib/delaunay.js
+++ /dev/null
@@ -1,182 +0,0 @@
-// https://github.com/ironwallaby/delaunay/blob/master/delaunay.js
-function Triangle(a, b, c) {
- this.a = a
- this.b = b
- this.c = c
-
- var A = b.x - a.x,
- B = b.y - a.y,
- C = c.x - a.x,
- D = c.y - a.y,
- E = A * (a.x + b.x) + B * (a.y + b.y),
- F = C * (a.x + c.x) + D * (a.y + c.y),
- G = 2 * (A * (c.y - b.y) - B * (c.x - b.x)),
- minx, miny, dx, dy
-
- /* If the points of the triangle are collinear, then just find the
- * extremes and use the midpoint as the center of the circumcircle. */
- if(Math.abs(G) < 0.000001) {
- minx = Math.min(a.x, b.x, c.x)
- miny = Math.min(a.y, b.y, c.y)
- dx = (Math.max(a.x, b.x, c.x) - minx) * 0.5
- dy = (Math.max(a.y, b.y, c.y) - miny) * 0.5
-
- this.x = minx + dx
- this.y = miny + dy
- this.r = dx * dx + dy * dy
- }
-
- else {
- this.x = (D*E - B*F) / G
- this.y = (A*F - C*E) / G
- dx = this.x - a.x
- dy = this.y - a.y
- this.r = dx * dx + dy * dy
- }
-}
-
-Triangle.prototype.draw = function(ctx) {
- ctx.beginPath()
- ctx.moveTo(this.a.x, this.a.y)
- ctx.lineTo(this.b.x, this.b.y)
- ctx.lineTo(this.c.x, this.c.y)
- ctx.closePath()
- ctx.stroke()
-}
-
-function byX(a, b) {
- return b.x - a.x
-}
-
-function dedup(edges) {
- var j = edges.length,
- a, b, i, m, n
-
- outer: while(j) {
- b = edges[--j]
- a = edges[--j]
- i = j
- while(i) {
- n = edges[--i]
- m = edges[--i]
- if((a === m && b === n) || (a === n && b === m)) {
- edges.splice(j, 2)
- edges.splice(i, 2)
- j -= 2
- continue outer
- }
- }
- }
-}
-
-function triangulate(vertices) {
- /* Bail if there aren't enough vertices to form any triangles. */
- if(vertices.length < 3)
- return []
-
- /* Ensure the vertex array is in order of descending X coordinate
- * (which is needed to ensure a subquadratic runtime), and then find
- * the bounding box around the points. */
- vertices.sort(byX)
-
- var i = vertices.length - 1,
- xmin = vertices[i].x,
- xmax = vertices[0].x,
- ymin = vertices[i].y,
- ymax = ymin
-
- while(i--) {
- if(vertices[i].y < ymin) ymin = vertices[i].y
- if(vertices[i].y > ymax) ymax = vertices[i].y
- }
-
- /* Find a supertriangle, which is a triangle that surrounds all the
- * vertices. This is used like something of a sentinel value to remove
- * cases in the main algorithm, and is removed before we return any
- * results.
- *
- * Once found, put it in the "open" list. (The "open" list is for
- * triangles who may still need to be considered; the "closed" list is
- * for triangles which do not.) */
- var dx = xmax - xmin,
- dy = ymax - ymin,
- dmax = (dx > dy) ? dx : dy,
- xmid = (xmax + xmin) * 0.5,
- ymid = (ymax + ymin) * 0.5,
- open = [
- new Triangle(
- {x: xmid - 20 * dmax, y: ymid - dmax, __sentinel: true},
- {x: xmid , y: ymid + 20 * dmax, __sentinel: true},
- {x: xmid + 20 * dmax, y: ymid - dmax, __sentinel: true}
- )
- ],
- closed = [],
- edges = [],
- j, a, b
-
- /* Incrementally add each vertex to the mesh. */
- i = vertices.length
- while(i--) {
- /* For each open triangle, check to see if the current point is
- * inside it's circumcircle. If it is, remove the triangle and add
- * it's edges to an edge list. */
- edges.length = 0
- j = open.length
- while(j--) {
- /* If this point is to the right of this triangle's circumcircle,
- * then this triangle should never get checked again. Remove it
- * from the open list, add it to the closed list, and skip. */
- dx = vertices[i].x - open[j].x
- if(dx > 0 && dx * dx > open[j].r) {
- closed.push(open[j])
- open.splice(j, 1)
- continue
- }
-
- /* If not, skip this triangle. */
- dy = vertices[i].y - open[j].y
- if(dx * dx + dy * dy > open[j].r)
- continue
-
- /* Remove the triangle and add it's edges to the edge list. */
- edges.push(
- open[j].a, open[j].b,
- open[j].b, open[j].c,
- open[j].c, open[j].a
- )
- open.splice(j, 1)
- }
-
- /* Remove any doubled edges. */
- dedup(edges)
-
- /* Add a new triangle for each edge. */
- j = edges.length
- while(j) {
- b = edges[--j]
- a = edges[--j]
- open.push(new Triangle(a, b, vertices[i]))
- }
- }
-
- /* Copy any remaining open triangles to the closed list, and then
- * remove any triangles that share a vertex with the supertriangle. */
- Array.prototype.push.apply(closed, open)
-
- i = closed.length
- while(i--)
- if(closed[i].a.__sentinel ||
- closed[i].b.__sentinel ||
- closed[i].c.__sentinel)
- closed.splice(i, 1)
-
- /* Yay, we're done! */
- return closed
-}
-
-if (typeof module !== 'undefined') {
- module.exports = {
- Triangle: Triangle,
- triangulate: triangulate
- }
-}
diff --git a/scripts/lib/raf.js b/scripts/lib/raf.js
new file mode 100644
index 0000000..370894e
--- /dev/null
+++ b/scripts/lib/raf.js
@@ -0,0 +1,31 @@
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
+
+// MIT license
+
+(function() {
+ var lastTime = 0;
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
+ for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+ || window[vendors[x]+'CancelRequestAnimationFrame'];
+ }
+
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function(callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function(id) {
+ clearTimeout(id);
+ };
+}());
\ No newline at end of file
diff --git a/scripts/lib/superfast-blur.0.5.js b/scripts/lib/superfast-blur.0.5.js
deleted file mode 100644
index b018eea..0000000
--- a/scripts/lib/superfast-blur.0.5.js
+++ /dev/null
@@ -1,338 +0,0 @@
-/*global define*/
-/*
-
-Superfast Blur - a fast Box Blur For Canvas
-
-Version: 0.5
-Author: Mario Klingemann
-Contact: mario@quasimondo.com
-Website: http://www.quasimondo.com/BoxBlurForCanvas
-Twitter: @quasimondo
-
-In case you find this class useful - especially in commercial projects -
-I am not totally unhappy for a small donation to my PayPal account
-mario@quasimondo.de
-
-Or support me on flattr:
-https://flattr.com/thing/140066/Superfast-Blur-a-pretty-fast-Box-Blur-Effect-for-CanvasJavascript
-
-Copyright (c) 2011 Mario Klingemann
-
-Note by Georg Fischer (snorpey@gmail.com / @snorpey):
-While much of the original algorithm is still the same,
-I modified some parts of the script to fit my needs:
-- removed the iterations argument
-- modified the functions to accept an imageData object
- instead of element ids to remove dependency on the
- document object.
-- added AMD / requirejs wrapper
-
-
-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.
-
-*/
-define(
- function()
- {
- var mul_table = [
- 1,57,41,21,203,34,97,73,227,91,149,62,105,45,39,137,241,107,3,173,39,71,65,238,219,101,
- 187,87,81,151,141,133,249,117,221,209,197,187,177,169,5,153,73,139,133,127,243,233,223,
- 107,103,99,191,23,177,171,165,159,77,149,9,139,135,131,253,245,119,231,224,109,211,103,
- 25,195,189,23,45,175,171,83,81,79,155,151,147,9,141,137,67,131,129,251,123,30,235,115,
- 113,221,217,53,13,51,50,49,193,189,185,91,179,175,43,169,83,163,5,79,155,19,75,147,145,
- 143,35,69,17,67,33,65,255,251,247,243,239,59,29,229,113,111,219,27,213,105,207,51,201,
- 199,49,193,191,47,93,183,181,179,11,87,43,85,167,165,163,161,159,157,155,77,19,75,37,
- 73,145,143,141,35,138,137,135,67,33,131,129,255,63,250,247,61,121,239,237,117,29,229,
- 227,225,111,55,109,216,213,211,209,207,205,203,201,199,197,195,193,48,190,47,93,185,
- 183,181,179,178,176,175,173,171,85,21,167,165,41,163,161,5,79,157,78,154,153,19,75,
- 149,74,147,73,144,143,71,141,140,139,137,17,135,134,133,66,131,65,129,1
- ];
-
- var shg_table = [
- 0,9,10,10,14,12,14,14,16,15,16,15,16,15,15,17,18,17,12,18,16,17,17,19,19,18,19,18,18,
- 19,19,19,20,19,20,20,20,20,20,20,15,20,19,20,20,20,21,21,21,20,20,20,21,18,21,21,21,
- 21,20,21,17,21,21,21,22,22,21,22,22,21,22,21,19,22,22,19,20,22,22,21,21,21,22,22,22,
- 18,22,22,21,22,22,23,22,20,23,22,22,23,23,21,19,21,21,21,23,23,23,22,23,23,21,23,22,
- 23,18,22,23,20,22,23,23,23,21,22,20,22,21,22,24,24,24,24,24,22,21,24,23,23,24,21,24,
- 23,24,22,24,24,22,24,24,22,23,24,24,24,20,23,22,23,24,24,24,24,24,24,24,23,21,23,22,
- 23,24,24,24,22,24,24,24,23,22,24,24,25,23,25,25,23,24,25,25,24,22,25,25,25,24,23,24,
- 25,25,25,25,25,25,25,25,25,25,25,25,23,25,23,24,25,25,25,25,25,25,25,25,25,24,22,25,
- 25,23,25,25,20,24,25,24,25,25,22,24,25,24,25,24,25,25,24,25,25,25,25,22,25,25,25,24,
- 25,24,25,18
- ];
-
- function boxBlurCanvas( image_data, radius, blur_alpha_channel )
- {
- var result = image_data;
-
- if ( ! ( isNaN( radius ) || radius < 1 ) )
- {
- if ( blur_alpha_channel )
- {
- result = boxBlurCanvasRGBA( image_data, radius );
- }
-
- else
- {
- result = boxBlurCanvasRGB( image_data, radius );
- }
- }
-
- return result;
- }
-
- function boxBlurCanvasRGBA( image_data, radius )
- {
- radius |= 0;
-
- var pixels = image_data.data;
- var width = image_data.width;
- var height = image_data.height;
- var rsum, gsum, bsum, asum, x, y, i, p, p1, p2, yp, yi, yw, idx, pa;
- var wm = width - 1;
- var hm = height - 1;
- var wh = width * height;
- var rad1 = radius + 1;
-
- var mul_sum = mul_table[radius];
- var shg_sum = shg_table[radius];
-
- var r = [ ];
- var g = [ ];
- var b = [ ];
- var a = [ ];
-
- var vmin = [ ];
- var vmax = [ ];
-
- yw = yi = 0;
-
- for ( y = 0; y < height; y++ )
- {
- rsum = pixels[yw] * rad1;
- gsum = pixels[yw + 1] * rad1;
- bsum = pixels[yw + 2] * rad1;
- asum = pixels[yw + 3] * rad1;
-
- for ( i = 1; i <= radius; i++ )
- {
- p = yw + ( ( ( i > wm ? wm : i ) ) << 2 );
- rsum += pixels[p++];
- gsum += pixels[p++];
- bsum += pixels[p++];
- asum += pixels[p];
- }
-
- for ( x = 0; x < width; x++ )
- {
- r[yi] = rsum;
- g[yi] = gsum;
- b[yi] = bsum;
- a[yi] = asum;
-
- if ( y === 0 )
- {
- vmin[x] = ( ( p = x + rad1) < wm ? p : wm ) << 2;
- vmax[x] = ( ( p = x - radius) > 0 ? p << 2 : 0 );
- }
-
- p1 = yw + vmin[x];
- p2 = yw + vmax[x];
-
- rsum += pixels[p1++] - pixels[p2++];
- gsum += pixels[p1++] - pixels[p2++];
- bsum += pixels[p1++] - pixels[p2++];
- asum += pixels[p1] - pixels[p2];
-
- yi++;
- }
-
- yw += ( width << 2 );
- }
-
- for ( x = 0; x < width; x++ )
- {
- yp = x;
- rsum = r[yp] * rad1;
- gsum = g[yp] * rad1;
- bsum = b[yp] * rad1;
- asum = a[yp] * rad1;
-
- for ( i = 1; i <= radius; i++ )
- {
- yp += ( i > hm ? 0 : width );
- rsum += r[yp];
- gsum += g[yp];
- bsum += b[yp];
- asum += a[yp];
- }
-
- yi = x << 2;
-
- for ( y = 0; y < height; y++ )
- {
- pixels[yi + 3] = pa = ( asum * mul_sum ) >>> shg_sum;
-
- if ( pa > 0 )
- {
- pa = 255 / pa;
- pixels[yi] = ( ( rsum * mul_sum ) >>> shg_sum ) * pa;
- pixels[yi+1] = ( ( gsum * mul_sum ) >>> shg_sum ) * pa;
- pixels[yi+2] = ( ( bsum * mul_sum ) >>> shg_sum ) * pa;
- }
-
- else
- {
- pixels[yi] = pixels[yi + 1] = pixels[yi + 2] = 0;
- }
-
- if ( x === 0 )
- {
- vmin[y] = ( ( p = y + rad1) < hm ? p : hm ) * width;
- vmax[y] = ( ( p = y - radius) > 0 ? p * width : 0 );
- }
-
- p1 = x + vmin[y];
- p2 = x + vmax[y];
-
- rsum += r[p1] - r[p2];
- gsum += g[p1] - g[p2];
- bsum += b[p1] - b[p2];
- asum += a[p1] - a[p2];
-
- yi += width << 2;
- }
- }
-
- return image_data;
- }
-
- function boxBlurCanvasRGB( image_data, radius )
- {
- radius |= 0;
-
- var pixels = image_data.data;
- var width = image_data.width;
- var height = image_data.height;
- var rsum, gsum, bsum, asum, x, y, i, p, p1, p2, yp, yi, yw, idx;
- var wm = width - 1;
- var hm = height - 1;
- var wh = width * height;
- var rad1 = radius + 1;
-
- var r = [ ];
- var g = [ ];
- var b = [ ];
-
- var mul_sum = mul_table[radius];
- var shg_sum = shg_table[radius];
-
- var vmin = [ ];
- var vmax = [ ];
-
- yw = yi = 0;
-
- for ( y = 0; y < height; y++ )
- {
- rsum = pixels[yw] * rad1;
- gsum = pixels[yw + 1] * rad1;
- bsum = pixels[yw + 2] * rad1;
-
- for ( i = 1; i <= radius; i++ )
- {
- p = yw + ( ( ( i > wm ? wm : i ) ) << 2 );
- rsum += pixels[p++];
- gsum += pixels[p++];
- bsum += pixels[p++];
- }
-
- for ( x = 0; x < width; x++ )
- {
- r[yi] = rsum;
- g[yi] = gsum;
- b[yi] = bsum;
-
- if ( y === 0 )
- {
- vmin[x] = ( ( p = x + rad1) < wm ? p : wm ) << 2;
- vmax[x] = ( ( p = x - radius) > 0 ? p << 2 : 0 );
- }
-
- p1 = yw + vmin[x];
- p2 = yw + vmax[x];
-
- rsum += pixels[p1++] - pixels[p2++];
- gsum += pixels[p1++] - pixels[p2++];
- bsum += pixels[p1++] - pixels[p2++];
-
- yi++;
- }
-
- yw += ( width << 2 );
- }
-
- for ( x = 0; x < width; x++ )
- {
- yp = x;
- rsum = r[yp] * rad1;
- gsum = g[yp] * rad1;
- bsum = b[yp] * rad1;
-
- for ( i = 1; i <= radius; i++ )
- {
- yp += ( i > hm ? 0 : width );
- rsum += r[yp];
- gsum += g[yp];
- bsum += b[yp];
- }
-
- yi = x << 2;
-
- for ( y = 0; y < height; y++ )
- {
- pixels[yi] = (rsum * mul_sum) >>> shg_sum;
- pixels[yi+1] = (gsum * mul_sum) >>> shg_sum;
- pixels[yi+2] = (bsum * mul_sum) >>> shg_sum;
-
- if ( x === 0 )
- {
- vmin[y] = ( ( p = y + rad1) < hm ? p : hm ) * width;
- vmax[y] = ( ( p = y - radius) > 0 ? p * width : 0 );
- }
-
- p1 = x + vmin[y];
- p2 = x + vmax[y];
-
- rsum += r[p1] - r[p2];
- gsum += g[p1] - g[p2];
- bsum += b[p1] - b[p2];
-
- yi += width << 2;
- }
- }
-
- return image_data;
- }
-
- return boxBlurCanvas;
- }
-);
\ No newline at end of file
diff --git a/scripts/src/process.js b/scripts/src/process.js
index f103476..e2a96b2 100644
--- a/scripts/src/process.js
+++ b/scripts/src/process.js
@@ -1,7 +1,7 @@
-/*global define*/
+/*global define, requestAnimationFrame*/
define(
- [ 'aux/glitch' ],
- function( glitch )
+ [ 'aux/glitch', 'aux/canvas', 'lib/raf' ],
+ 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 );
- clearCanvas( canvas, ctx );
-
- resizeCanvas( tmp_canvas, img );
- resizeCanvas( canvas, img );
+ canvas_helper.clear( tmp_canvas, tmp_ctx );
+ canvas_helper.clear( canvas, ctx );
+ canvas_helper.resize( tmp_canvas, img );
+ canvas_helper.resize( 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' ) );