Add blur and sharpen tools

Author: Marakaido

filters.js

@@ -34,26 +34,58 @@ Filters.negative = function(context, x, y, width, height)
     context.putImageData(imageData, 0, 0);
 };
 
-Filters.convolute = function(kernel, imageData)
+//Updates imageData object to contain convoluted result of its previous content with kernel matrix
+//kernel - one-dimensional array representing 3x3 matrix
+Filters.convolute = function(imageData, kernel)
 {
     var data = imageData.data;
     var result = new Array();
-    var getRedPosition = function(i, j, imageData)
-    {
-        return imageData.data[j * imageData.width * 4 + i*4];
-    }
     for(var i = 1; i < imageData.height-1; i++)
     {
         for(var j = 1; j < imageData.width-1; j++)
         {
-            var upperRow = getRedPosition(i-1, j-1);
-            var middleRow = getRedPosition(i-1, j);
-            var middleRow = getRedPosition(i-1, j+1);
-            //var r = data[upperRow];
-            //var g = ;
-            //var b = ;
-            //var a = ;
-            result[pos] = value;
+            var r = g = b = a = 0;
+            for(var k = 0; k < 3; k++)
+            {
+                for(var l = 0; l < 3; l++)
+                {
+                    var dataRedPosition = ((i-1 + k) * imageData.width + j-1 + l) * 4;
+                    var kernelMultiplier = kernel[k*3 + l];
+                    r += kernelMultiplier * data[dataRedPosition];
+                    g += kernelMultiplier * data[dataRedPosition + 1];
+                    b += kernelMultiplier * data[dataRedPosition + 2];
+                    a += kernelMultiplier * data[dataRedPosition + 3];
+                }
+            }
+
+            var resultRedPosition = (i * imageData.width + j) * 4;
+            result[resultRedPosition] = r;
+            result[resultRedPosition + 1] = g;
+            result[resultRedPosition + 2] = b;
+            result[resultRedPosition + 3] = a;
         }
     }
-}
+
+    for(var i = 0; i < data.length; i++)
+    {
+        data[i] = result[i];
+    }
+}
+
+Filters.blur = function(context, x, y, width, height) 
+{
+    var imageData = context.getImageData(x, y, width, height);
+    for(var i = 0; i < 1; i++) Filters.convolute(imageData, [1/9, 1/9, 1/9,
+                                                            1/9, 1/9, 1/9,
+                                                            1/9, 1/9, 1/9]);
+    context.putImageData(imageData, 0, 0);                                  
+};
+
+Filters.sharpen = function(context, x, y, width, height) 
+{
+    var imageData = context.getImageData(x, y, width, height);
+    for(var i = 0; i < 1; i++) Filters.convolute(imageData, [0, -1, 0,
+                                                            -1, 5, -1,
+                                                            0, -1, 0]);
+    context.putImageData(imageData, 0, 0);                                  
+};

index.html

@@ -56,6 +56,8 @@
         <div>
             <button onclick="GUI.filterButtonClicked(Filters.grayscale)">Grayscale</button>
             <button onclick="GUI.filterButtonClicked(Filters.negative)">Negative</button>
+            <button onclick="GUI.filterButtonClicked(Filters.blur)">Blur</button>
+            <button onclick="GUI.filterButtonClicked(Filters.sharpen)">Sharpen</button>
         </div>
     </div>
 </body>