Skip to content

Instantly share code, notes, and snippets.

@nicoptere

nicoptere/gist:abe6cabf590158c885ecce0768cee41c

Created June 28, 2016 15:22
Show Gist options
  • Save nicoptere/abe6cabf590158c885ecce0768cee41c to your computer and use it in GitHub Desktop.
Save nicoptere/abe6cabf590158c885ecce0768cee41c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nicoptere created this gist Jun 28, 2016.
    155 changes: 155 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,155 @@
    <!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>