var col = index % width;
var row = Math.floor(index / width);
Sometimes, col
(or column) and row
are called x
and y
, respectively.
var index = col + (row * width);
Before we go ahead with the kernel, let's take some baby steps by first talking about blurring
A best way to illustrate blurring is through shadows
The penumbra is a simultaneous mixture of absence of light, and the presence thereof
This is for a simple box blur
var kernelDimension = 3;
var kernelSize = kernelDimension * kernelDimension;
for (var i = 0; i < pixels.length; i++) {
var col = index % width;
var row = Math.floor(index / height);
var accum = 0;
for (var x = 0; x < kernelDimension; x++) {
for (var y = 0; y < kernelDimension; y++) {
var lookupX = col + x - 1; if (lookupX < 0) { lookupX = 0; }
var lookupY = row + y - 1; if (lookupY < 0) { lookupY = 0; }
var index = lookupX + (lookupY * width);
accum += pixels[index];
}
}
pixels[i] = accum / kernelSize;
}
This is just a demonstration. Actual code is different
[ 0.111, 0.111, 0.111,
0.111, 0.111, 0.111,
0.111, 0.111, 0.111 ]
Question: why have all the values been set to 0.111?
var kernel =
[ 0.111, 0.111, 0.111,
0.111, 0.111, 0.111,
0.111, 0.111, 0.111 ]
var kernelDimension = 3;
var kernelSize = kernelDimension * kernelDimension;
for (var i = 0; i < pixels.length; i++) {
var col = i % width;
var row = Math.floor(i / width);
var accum = 0;
for (var j = 0; j < kernelSize; j++) {
var x = j % kernelDimension;
var y = Math.floor(j / kermelDimension);
var lookupX = col + x - 1; if (lookupX < 0) { lookupX = 0; }
var lookupY = row + y - 1; if (lookupY < 0) { lookupY = 0; }
var index = lookupX + (lookupY * width);
accum += pixels[index] * kernel[j];
}
pixels[i] = accum;
}
This is just a demonstration. Actual code is different
Sharpen
Box Blur
Gaussian Blur
Edge Detection
Edge Detection, another way
Edge Detection, yet another way