Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment