Loader

gistfile1.txt

function initLoader() {

	function draw( threshold ) {

	    for( var j = 0; j < srcBuf8.length; j += 4 ) {

	    	var c = imgBuf8[ j ] + imgBuf8[ j + 1 ] + imgBuf8[ j + 2 ];
	    	c /= 3;
	    	dstBuf8[ j ] = c;
	    	dstBuf8[ j + 1 ] = c;
	    	dstBuf8[ j + 2 ] = c;
	    	dstBuf8[ j + 3 ] = imgBuf8[ j + 3 ];
	    	
	    	if( srcBuf8[ j + 3 ] > 0 ) {
	    		if( srcBuf8[ j ] < threshold ) {
			    	dstBuf8[ j ] = imgBuf8[ j ];
			    	dstBuf8[ j + 1 ] = imgBuf8[ j + 1 ];
			    	dstBuf8[ j + 2 ] = imgBuf8[ j + 2 ];
	    		}
	    	}

	    }

		dstData.data.set( dstBuf8 );
	    resultCtx.putImageData( dstData, 0, 0 );

	}

	var maskCanvas = document.createElement( 'canvas' );
	var logoCanvas = document.createElement( 'canvas' );
	var resultCanvas = document.createElement( 'canvas' );
	loadingLogo.appendChild( resultCanvas );

	var maskCtx = maskCanvas.getContext( '2d' );
	var logoCtx = logoCanvas.getContext( '2d' );
	var resultCtx = resultCanvas.getContext( '2d' );

	resultCanvas.width = logoCanvas.width = maskCanvas.width = maskLoader.width;
	resultCanvas.height = logoCanvas.height = maskCanvas.height = maskLoader.height;
	logoCtx.drawImage( bigLogo, 0, 0 );
	maskCtx.drawImage( maskLoader, 0, 0 );
	
    var srcData = maskCtx.getImageData( 0, 0, maskCanvas.width, maskCanvas.height ); 
    var srcBuf8 = new Uint8ClampedArray( srcData.data );

    var imgData = logoCtx.getImageData( 0, 0, logoCanvas.width, logoCanvas.height ); 
    var imgBuf8 = new Uint8ClampedArray( imgData.data );

    var dstData = resultCtx.getImageData( 0, 0, resultCanvas.width, resultCanvas.height ); 
    var dstBuf8 = new Uint8ClampedArray( dstData.data );

    return draw;

}