nicoptere · June 28, 2016 15:22
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>postmortem</title>
    <style>
        html, body{
            width:100%;
            height:100%;
            overflow: hidden;
            top:0;
            left:0;
            margin:0;
            padding:0;
        }
    </style>
 </head>
 <body>

    <script>

        function getContext( w, h ){
            var canvas = document.createElement( 'canvas' );
            document.body.appendChild( canvas );
            canvas.width  = w || window.innerWidth;
            canvas.height = h || window.innerHeight;
            return canvas.getContext("2d");
        }
        function getPixel( data, width, x, y ){
            var id = ( x + width * y ) * 4;
            var r = data[id];
            var g = data[id+1];
            var b = data[id+2];
            var a = data[id+3];
            return {r:r, g:g, b:b, a:a }
        }

        function init(img){

            iw = img.width;
            ih = img.height;
            ctx = getContext(iw, ih);
            ctx.canvas.width = iw;
            ctx.canvas.height = ih;
            ctx.drawImage(img, 0, 0, iw, ih);

            data = new Float32Array( iw * ih * 2 );
            var imgData = ctx.getImageData(0,0, iw, ih);
            var dat = imgData.data;
            var i = dat.length;
            var did = 0;
            var div = 1 / 0xFF;
            while( i-=4 ){

                var id = i/4;
                var px = id % iw;
                var py = ~~( id / iw );

                var xl = getPixel( dat, iw, Math.max( 0,px-1 ), py ).r;
                var xr = getPixel( dat, iw, Math.min( iw-1, px+1 ), py ).r;
                var yt = getPixel( dat, iw, px, Math.max( 0, py-1 ) ).r;
                var yb = getPixel( dat, iw, px, Math.min( iw-1, py+1 ) ).r;

                data[ did++ ] = ( xl - xr );
                data[ did++ ] = ( yt - yb );
            }
            ctx.clearRect(0,0,iw, ih);

            w = window.innerWidth;
            h = window.innerHeight;
            sx = iw / w;
            sy = ih / h;

            ctx.canvas.width    = w;
            ctx.canvas.height   = h;

            points = [];

            console.log( iw, w, sx );
            var dty = Date.now() * 0.1;
            console.log( dty, ih, h, sy );

            var count = 20;
            for( var i = 0; i < count; i++ ) {
                for( var j = 0; j < count; j++ ) {
                    var p = {};
                    p.x = p.ox = (.5 + i ) * ( w / count );
                    p.y = p.oy = (.5 + j ) * ( h / count );
                    points.push(p);
                }
            }
            startTime = Date.now();
            update();
        }

        function update(){

            requestAnimationFrame( update );
            var dtx = 200 + Math.sin( ( Date.now() - startTime ) * 0.0005 ) * 200;
            var dty = ( Date.now() - startTime ) * 0.1;

            ctx.clearRect(0,0,w,h);

            //draw red lines to origin
            ctx.lineWidth = 1;
            ctx.strokeStyle = "rgba(0,0,0,1)";
            ctx.beginPath();
            points.forEach(function(p){
                ctx.moveTo( p.x, p.y );
                ctx.lineTo( p.ox, p.oy );
            });
            ctx.stroke();

            //draw and update position
            ctx.strokeStyle = "#000";
            ctx.lineCap = "round";
            ctx.lineWidth = 10;
            ctx.beginPath();
            points.forEach(function(p){

                var i = ~~( ( p.x + dtx ) * sx ) % iw;
                var j = ~~( ( p.y + dty ) * sy ) % ih;
                var id = ( ( i + j * iw ) * 2 );

                ctx.moveTo( p.x, p.y );

                p.x += data[ id ];
                p.y += data[ id + 1 ];
                p.x += ( p.ox - p.x ) * .015;
                p.y += ( p.oy - p.y ) * .015;

                ctx.lineTo( p.x, p.y );

            });
            ctx.stroke();

            ctx.lineWidth = 3;
            ctx.strokeStyle = "#FFF";
            ctx.beginPath();
            points.forEach(function(p){
                ctx.moveTo( p.x-1, p.y-2 );
                ctx.lineTo( p.x+1, p.y-2 );
            });
            ctx.stroke();

        }

        var ctx, w, h, iw, ih, data, points, sx, sy, startTime;
        var img = new Image();
        img.onload = function(e){init(e.target);};
        img.src = "http://barradeau.com/blog/wp-content/uploads/2016/06/noise2.jpg";

    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>postmortem</title>
	<style>
	html, body{
	width:100%;
	height:100%;
	overflow: hidden;
	top:0;
	left:0;
	margin:0;
	padding:0;
	}
	</style>
	</head>
	<body>

	<script>

	function getContext( w, h ){
	var canvas = document.createElement( 'canvas' );
	document.body.appendChild( canvas );
	canvas.width = w \|\| window.innerWidth;
	canvas.height = h \|\| window.innerHeight;
	return canvas.getContext("2d");
	}
	function getPixel( data, width, x, y ){
	var id = ( x + width * y ) * 4;
	var r = data[id];
	var g = data[id+1];
	var b = data[id+2];
	var a = data[id+3];
	return {r:r, g:g, b:b, a:a }
	}

	function init(img){

	iw = img.width;
	ih = img.height;
	ctx = getContext(iw, ih);
	ctx.canvas.width = iw;
	ctx.canvas.height = ih;
	ctx.drawImage(img, 0, 0, iw, ih);

	data = new Float32Array( iw * ih * 2 );
	var imgData = ctx.getImageData(0,0, iw, ih);
	var dat = imgData.data;
	var i = dat.length;
	var did = 0;
	var div = 1 / 0xFF;
	while( i-=4 ){

	var id = i/4;
	var px = id % iw;
	var py = ~~( id / iw );

	var xl = getPixel( dat, iw, Math.max( 0,px-1 ), py ).r;
	var xr = getPixel( dat, iw, Math.min( iw-1, px+1 ), py ).r;
	var yt = getPixel( dat, iw, px, Math.max( 0, py-1 ) ).r;
	var yb = getPixel( dat, iw, px, Math.min( iw-1, py+1 ) ).r;

	data[ did++ ] = ( xl - xr );
	data[ did++ ] = ( yt - yb );
	}
	ctx.clearRect(0,0,iw, ih);

	w = window.innerWidth;
	h = window.innerHeight;
	sx = iw / w;
	sy = ih / h;

	ctx.canvas.width = w;
	ctx.canvas.height = h;

	points = [];

	console.log( iw, w, sx );
	var dty = Date.now() * 0.1;
	console.log( dty, ih, h, sy );

	var count = 20;
	for( var i = 0; i < count; i++ ) {
	for( var j = 0; j < count; j++ ) {
	var p = {};
	p.x = p.ox = (.5 + i ) * ( w / count );
	p.y = p.oy = (.5 + j ) * ( h / count );
	points.push(p);
	}
	}
	startTime = Date.now();
	update();
	}

	function update(){

	requestAnimationFrame( update );
	var dtx = 200 + Math.sin( ( Date.now() - startTime ) * 0.0005 ) * 200;
	var dty = ( Date.now() - startTime ) * 0.1;

	ctx.clearRect(0,0,w,h);

	//draw red lines to origin
	ctx.lineWidth = 1;
	ctx.strokeStyle = "rgba(0,0,0,1)";
	ctx.beginPath();
	points.forEach(function(p){
	ctx.moveTo( p.x, p.y );
	ctx.lineTo( p.ox, p.oy );
	});
	ctx.stroke();

	//draw and update position
	ctx.strokeStyle = "#000";
	ctx.lineCap = "round";
	ctx.lineWidth = 10;
	ctx.beginPath();
	points.forEach(function(p){

	var i = ~~( ( p.x + dtx ) * sx ) % iw;
	var j = ~~( ( p.y + dty ) * sy ) % ih;
	var id = ( ( i + j * iw ) * 2 );

	ctx.moveTo( p.x, p.y );

	p.x += data[ id ];
	p.y += data[ id + 1 ];
	p.x += ( p.ox - p.x ) * .015;
	p.y += ( p.oy - p.y ) * .015;

	ctx.lineTo( p.x, p.y );

	});
	ctx.stroke();

	ctx.lineWidth = 3;
	ctx.strokeStyle = "#FFF";
	ctx.beginPath();
	points.forEach(function(p){
	ctx.moveTo( p.x-1, p.y-2 );
	ctx.lineTo( p.x+1, p.y-2 );
	});
	ctx.stroke();

	}

	var ctx, w, h, iw, ih, data, points, sx, sy, startTime;
	var img = new Image();
	img.onload = function(e){init(e.target);};
	img.src = "http://barradeau.com/blog/wp-content/uploads/2016/06/noise2.jpg";

	</script>
	</body>
	</html>