More work on convolution matrices; getting closer

demo/index.html

@@ -58,6 +58,13 @@ <h1><a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS</a> Playgrou
 				</label>
 			</div>
 
+			<div class="controls" id="controls-matrix">
+				<label>
+					Amount:
+					<input type="range" name="data-pb-matrix-amount" min="0" max="1" step="0.01" value="0.2">
+				</label>
+			</div>
+
 			<div class="controls" id="controls-mosaic">
 				<label>
 					Opacity:

demo/script/paintbrush.js

@@ -328,20 +328,43 @@ function addFilter(filterType, buffer, c) {
 
 	function applyMatrix(img, pixels, params) {
 
-		// -------------
-		// been leaning on this a lot:
-		// http://forum.processing.org/topic/controlled-blur-or-edge-detect-effect-using-convolution-kernel
-		// -------------
+		// create a second buffer to hold matrix results
+		var buffer2 = document.createElement("canvas");
+		// get the canvas context 
+		var c2 = buffer2.getContext('2d');
+
+		// set the dimensions
+		c2.width = buffer2.width = img.width;
+		c2.height = buffer2.height = img.height;
+
+		// draw the image to the new buffer
+		c2.drawImage(img, 0, 0, img.width , img.height);
+		var bufferedPixels = c2.getImageData(0, 0, c.width, c.height)
 
 		// speed up access
-		var data = pixels.data, imgWidth = img.width;
+		var data = pixels.data, bufferedData = bufferedPixels.data, imgWidth = img.width;
 
 		// 3x3 matrix can be any combination of digits, though to maintain brightness they should add up to 1
 		// (-1 x 8 + 9 = 1)
 		var matrix = [
+/*
+			// sharpen
 			-1,		-1,		-1,
 			-1,		9,		-1,
 			-1,		-1,		-1
+*/
+
+			// emboss
+			-2,		-1,		0,
+			-1,		1,		1,
+			0,		1,		2
+
+/*
+			// reverse emboss
+			2,		1,		0,
+			1,		1,		-1,
+			0,		-1,		-2
+*/
 
 /*
 			0,		-1,		0,
@@ -350,6 +373,7 @@ function addFilter(filterType, buffer, c) {
 */
 
 /*
+			// box blur
 			0.111,		0.111,		0.111,
 			0.111,		0.111,		0.111,
 			0.111,		0.111,		0.111
@@ -379,9 +403,9 @@ function addFilter(filterType, buffer, c) {
 
 						// find RGB values for that pixel
 						var currentPixel = {
-							r: data[r],
-							g: data[r + 1],
-							b: data[r + 2]
+							r: bufferedData[r],
+							g: bufferedData[r + 1],
+							b: bufferedData[r + 2]
 						};
 
 						// apply the value from the current matrix position
@@ -409,6 +433,8 @@ function addFilter(filterType, buffer, c) {
 			}
 		}
 
+		// code to clean the secondary buffer out of the DOM would be good here
+
 		return(pixels);
 	}
 

demo/script/playground.js

@@ -32,6 +32,13 @@ var filterControl = {
 			"controlId"		: "controls-greyscale"
 		},
 
+		{
+			"name"			: "matrix",
+			"label"			: "Matrix",
+			"filterClass"	: "filter-matrix",
+			"controlId"		: "controls-matrix"
+		},
+
 		{
 			"name"			: "mosaic",
 			"label"			: "Mosaic",
@@ -102,7 +109,6 @@ addLoadEvent(function() {
 
 	// initialize the control panel
 	displayControls();
-	updateFilters(img);
 
 });