Merge branch 'develop'
This commit is contained in:
Georg Fischer
commit
8e8db95498
15
README.md
15
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
|
||||
---
|
||||
|
||||
20
index.html
20
index.html
@ -8,24 +8,24 @@
|
||||
<body>
|
||||
<article class="content">
|
||||
<h1 class="headline">glitch images</h1>
|
||||
<p>drop an image in the browser.</p>
|
||||
<p>drop an image in the browser to modify it. this script corrupts some bytes in a jpg image. because of the way <a href="https://en.wikipedia.org/wiki/JPEG">jpg</a> encoding works, the corripted file still shows something. inspired by <a href="http://github.com/soulwire">soulwire</a>s <a href="http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator">experiment</a> in flash. this experiment was created by <a href="http://fishnation.de/">georg</a>. you can follow him on <a href="https://twitter.com/snorpey">twitter</a> or explore the source code on <a href="https://github.com/snorpey/jpg-glitch">github</a>.</p>
|
||||
</article>
|
||||
<div class="content" id="controls">
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="amount">glitch amount</label>
|
||||
<input class="control-input" type="range" id="amount" min="0" max="100" value="50" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="seed">seed</label>
|
||||
<input class="control-input" type="range" id="seed" min="0" max="100" value="50" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="quality">quality</label>
|
||||
<input class="control-input" type="range" id="quality" min="0" max="100" value="50" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="offset">px offset</label>
|
||||
<input class="control-input" type="range" id="offset" min="0" max="100" value="50" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="iterations">iterations</label>
|
||||
<input class="control-input" type="range" id="iterations" min="1" max="20" value="5" />
|
||||
<input class="control-input" type="range" id="iterations" min="1" max="50" value="5" />
|
||||
</div>
|
||||
<div class="control-wrapper">
|
||||
<label class="control-label" for="quality">jpg quality</label>
|
||||
<input class="control-input" type="range" id="quality" min="1" max="90" value="50" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="export-wrapper">
|
||||
|
||||
38
scripts/aux/canvas.js
Normal file
38
scripts/aux/canvas.js
Normal file
@ -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 };
|
||||
}
|
||||
);
|
||||
@ -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 )
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
31
scripts/lib/raf.js
Normal file
31
scripts/lib/raf.js
Normal file
@ -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);
|
||||
};
|
||||
}());
|
||||
@ -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;
|
||||
}
|
||||
);
|
||||
@ -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' ) );
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user