nitrix/.gitignore

## .gitignore
*.swp
*.swo

## index.html
<html>

<head>
    <title>Canvas Experiment</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <div id="container">
        <div id="background">
            <canvas>TODO: Canvas isn't supported by your browser! FALLBACK on a static image</canva>
        </div>
    </div>
</body>

</html>

## S001.jpg

      
    Raw
  

              S001.jpg
            
          
## script.js
var PAGE = 0;

// ===================================
//               MAIN
// ===================================
$(function() {
    //-- Defining our HTML canvas
    var html_canvas_site                        = $('#background').find('canvas');
    var html_canvas_buffer_couple               = $('<canvas />', {width:'840', height:'672'} );
    var html_canvas_buffer_coupleWithTriangles  = $('<canvas />', {width:'840', height:'672'} );
    var html_canvas_mask                        = $('<canvas />', {width:'840', height:'672'} );
    //-- Defining the Canvas contexes
    var canvas_site                             = html_canvas_site[0];
    var canvas_buffer_couple                    = html_canvas_buffer_couple[0];
    var canvas_buffer_coupleWithTriangles       = html_canvas_buffer_coupleWithTriangles[0];
    var canvas_mask                             = html_canvas_mask[0];
    //-- Preparing the scene to be as big as the containing div
    canvas_site.width  = canvas_buffer_couple.width  = canvas_buffer_coupleWithTriangles.width  = canvas_mask.width  = 1152; //WIDTH
    canvas_site.height = canvas_buffer_couple.height = canvas_buffer_coupleWithTriangles.height = canvas_mask.height = 880;  //HEIGHT
    //-- Load the images
    drawImage(canvas_buffer_couple,              'IMGS/S001.jpg', -80, -30);
    drawImage(canvas_buffer_coupleWithTriangles, 'IMGS/S001.jpg', -80, -30);
    //-- Apply mask
    setInterval(function() {
        console.debug('.');
        applyMask(canvas_buffer_coupleWithTriangles, canvas_mask, canvas_site);
    }, 1000);
});

// ===================================
//              HELPERS
// ===================================
function drawImage(canvas, url, x, y) {
    var image = new Image();
    image.src = "IMGS/S001.jpg";
    image.onload = function() {
        canvas.getContext('2d').drawImage(image, x, y);
    }
}

// ===================================
//              BLENDER
// ===================================
function applyMask(original, mask, output) {
    var img_data_original   = original.getContext('2d').getImageData(0,0,1152,880);
    var img_data_mask       = mask.getContext('2d').getImageData(0,0,1152,880);
    var pixels1             = img_data_original.data;
    var pixels2             = img_data_mask.data;

    for (var i = 0, il = pixels1.length; i < il; i += 4) {
        pixels1[i+3] = pixels2[i+3]; //copy mask's alpha onto the original
    }
}

// ===================================
//              FILLING
// ===================================
function fillWithTriangles(canvas, context) {
    //-- Dimensions of the triangles
    var height = 84;
    var width = 70;
    //-- Initializing some vars for the decaling algo
    var r_decale = (height/2); //r = "right" type triangles
    var l_decale = (height/2); //l = "left" type triangles
    //-- Draw from left to right
    for (var y=0; y<12; y++) {
        //Small fixes for a decale
        if (r_decale > 0) {
            r_decale = 0;           l_decale = (height/2);
            r_max = 8;              l_max = 7;
        } else {
            r_decale = (height/2);  r_max = 7;
            l_decale = 0;           l_max = 8;
        }
        //-- Draw from top to bottom
        for (var i=0; i<r_max; i++) {
                (function(y,width,height,r_decale,r_max,i){
                    if (ptrn[PAGE][y][i][1][0] !== undefined) {
                        setTimeout(function(){
                            var color = '255,0,0,0.5';
                            drawTriangle(context, (y*width), (i*height)+0+r_decale, height, width, 'rgba('+color+')', 'right')
                        }, Math.floor(Math.random()*6)*100);
                    }
                })(y,width,height,r_decale,r_max,i);
                //drawText(context, (y*width)+5, (i*height)+0+r_decale+35, '('+y+','+i+')');
        }
        for (var i=0; i<l_max; i++) {
                (function(y,width,height,l_decale,l_max,i){
                    if (ptrn[PAGE][y][i][0][0] !== undefined) {
                        setTimeout(function(){
                            var color = '0,255,0,0.5';
                            drawTriangle(context, (y*width), (i*height)+0+l_decale, height, width, 'rgba('+color+')', 'left')
                        }, Math.floor(Math.random()*6)*100);
                    }
                })(y,width,height,l_decale,l_max,i);
                //drawText(context, (y*width)+20, (i*height)+0+l_decale+35, '('+y+','+i+')');
        }
    }
}

// ===================================
//              DRAWABLES
// ===================================
function drawText(context, x, y, text) {
    $('#background').append('<div style="position:absolute; top:'+y+'px; left:'+x+'px">'+text+'</div>');
}

function drawTriangle(context, x, y, height, width, color, position) {
    //-- Just configuring a bit the context to draw our shape
    context.fillStyle = color;
    context.beginPath();
    //-- Draw the points
    if (position == 'right') {
        context.moveTo(x+0,     y+0);          //top-left
        context.lineTo(x+width, y+(height/2)); //middle-right
        context.lineTo(x+0,     y+height);     //bottom-left
        context.lineTo(x+0,     y+0);          //closing the shape
    }
    else if (position == 'left') {
        context.moveTo(x+width, y+0);           //top-right
        context.lineTo(x+0,     y+(height/2));  //middle-left
        context.lineTo(x+width, y+height);      //bottom-right
        context.lineTo(x+width, y+0);           //closing the shape
    }
    //-- Now fill the shape and draw it
    context.fill();
    context.closePath();
}

## style.css
 body {
    background: #000000;
    color: #FFFFFF;
    margin: 0;
    padding 0;
}

#container {
    overflow: hidden;
}

#background {
    width: 840px;
    height: 672px;
    position: relative;
    margin-left: -420px;
    margin-top: 40px;
    top: -20px;
    left: 50%;
}
	<html>

	<head>
	<title>Canvas Experiment</title>
	<link rel="stylesheet" href="style.css" type="text/css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="script.js"></script>
	</head>

	<body>
	<div id="container">
	<div id="background">
	<canvas>TODO: Canvas isn't supported by your browser! FALLBACK on a static image</canva>
	</div>
	</div>
	</body>

	</html>
	var PAGE = 0;

	// ===================================
	// MAIN
	// ===================================
	$(function() {
	//-- Defining our HTML canvas
	var html_canvas_site = $('#background').find('canvas');
	var html_canvas_buffer_couple = $('<canvas />', {width:'840', height:'672'} );
	var html_canvas_buffer_coupleWithTriangles = $('<canvas />', {width:'840', height:'672'} );
	var html_canvas_mask = $('<canvas />', {width:'840', height:'672'} );
	//-- Defining the Canvas contexes
	var canvas_site = html_canvas_site[0];
	var canvas_buffer_couple = html_canvas_buffer_couple[0];
	var canvas_buffer_coupleWithTriangles = html_canvas_buffer_coupleWithTriangles[0];
	var canvas_mask = html_canvas_mask[0];
	//-- Preparing the scene to be as big as the containing div
	canvas_site.width = canvas_buffer_couple.width = canvas_buffer_coupleWithTriangles.width = canvas_mask.width = 1152; //WIDTH
	canvas_site.height = canvas_buffer_couple.height = canvas_buffer_coupleWithTriangles.height = canvas_mask.height = 880; //HEIGHT
	//-- Load the images
	drawImage(canvas_buffer_couple, 'IMGS/S001.jpg', -80, -30);
	drawImage(canvas_buffer_coupleWithTriangles, 'IMGS/S001.jpg', -80, -30);
	//-- Apply mask
	setInterval(function() {
	console.debug('.');
	applyMask(canvas_buffer_coupleWithTriangles, canvas_mask, canvas_site);
	}, 1000);
	});

	// ===================================
	// HELPERS
	// ===================================
	function drawImage(canvas, url, x, y) {
	var image = new Image();
	image.src = "IMGS/S001.jpg";
	image.onload = function() {
	canvas.getContext('2d').drawImage(image, x, y);
	}
	}

	// ===================================
	// BLENDER
	// ===================================
	function applyMask(original, mask, output) {
	var img_data_original = original.getContext('2d').getImageData(0,0,1152,880);
	var img_data_mask = mask.getContext('2d').getImageData(0,0,1152,880);
	var pixels1 = img_data_original.data;
	var pixels2 = img_data_mask.data;

	for (var i = 0, il = pixels1.length; i < il; i += 4) {
	pixels1[i+3] = pixels2[i+3]; //copy mask's alpha onto the original
	}
	}

	// ===================================
	// FILLING
	// ===================================
	function fillWithTriangles(canvas, context) {
	//-- Dimensions of the triangles
	var height = 84;
	var width = 70;
	//-- Initializing some vars for the decaling algo
	var r_decale = (height/2); //r = "right" type triangles
	var l_decale = (height/2); //l = "left" type triangles
	//-- Draw from left to right
	for (var y=0; y<12; y++) {
	//Small fixes for a decale
	if (r_decale > 0) {
	r_decale = 0; l_decale = (height/2);
	r_max = 8; l_max = 7;
	} else {
	r_decale = (height/2); r_max = 7;
	l_decale = 0; l_max = 8;
	}
	//-- Draw from top to bottom
	for (var i=0; i<r_max; i++) {
	(function(y,width,height,r_decale,r_max,i){
	if (ptrn[PAGE][y][i][1][0] !== undefined) {
	setTimeout(function(){
	var color = '255,0,0,0.5';
	drawTriangle(context, (ywidth), (iheight)+0+r_decale, height, width, 'rgba('+color+')', 'right')
	}, Math.floor(Math.random()6)100);
	}
	})(y,width,height,r_decale,r_max,i);
	//drawText(context, (ywidth)+5, (iheight)+0+r_decale+35, '('+y+','+i+')');
	}
	for (var i=0; i<l_max; i++) {
	(function(y,width,height,l_decale,l_max,i){
	if (ptrn[PAGE][y][i][0][0] !== undefined) {
	setTimeout(function(){
	var color = '0,255,0,0.5';
	drawTriangle(context, (ywidth), (iheight)+0+l_decale, height, width, 'rgba('+color+')', 'left')
	}, Math.floor(Math.random()6)100);
	}
	})(y,width,height,l_decale,l_max,i);
	//drawText(context, (ywidth)+20, (iheight)+0+l_decale+35, '('+y+','+i+')');
	}
	}
	}

	// ===================================
	// DRAWABLES
	// ===================================
	function drawText(context, x, y, text) {
	$('#background').append('<div style="position:absolute; top:'+y+'px; left:'+x+'px">'+text+'</div>');
	}

	function drawTriangle(context, x, y, height, width, color, position) {
	//-- Just configuring a bit the context to draw our shape
	context.fillStyle = color;
	context.beginPath();
	//-- Draw the points
	if (position == 'right') {
	context.moveTo(x+0, y+0); //top-left
	context.lineTo(x+width, y+(height/2)); //middle-right
	context.lineTo(x+0, y+height); //bottom-left
	context.lineTo(x+0, y+0); //closing the shape
	}
	else if (position == 'left') {
	context.moveTo(x+width, y+0); //top-right
	context.lineTo(x+0, y+(height/2)); //middle-left
	context.lineTo(x+width, y+height); //bottom-right
	context.lineTo(x+width, y+0); //closing the shape
	}
	//-- Now fill the shape and draw it
	context.fill();
	context.closePath();
	}
	body {
	background: #000000;
	color: #FFFFFF;
	margin: 0;
	padding 0;
	}

	#container {
	overflow: hidden;
	}

	#background {
	width: 840px;
	height: 672px;
	position: relative;
	margin-left: -420px;
	margin-top: 40px;
	top: -20px;
	left: 50%;
	}