Box Blur
## The Box Blur algorithm is a simple image processing technique used to blur an image by taking the average color value of a pixel and its neighbors. It is the foundation for more advanced blurs like Gaussian Blur.How it WorksFor every pixel in an image, the algorithm:Defines a kernel (a square grid, e.g., $3 \times 3$ or $5 \times 5$) centered on the target pixel.Sums the color values ($R, G, B$) of all pixels within that kernel.Divides the total by the number of pixels in the kernel (the average).Sets the target pixel to this new average value. — const boxBlur = function (image, number) { const res = [];
for(let y = 0; y < image.length - 2; y++){ const line = [];
for (let x = 0; x < image[y].length - 2; x++){
let sum = 0;
let count = 0;
for (let a = y; a<y +3 ;a++){
for (let b = x; b < x+3;b++ ){
sum += image[a][b];
count ++
}
}
line.push(Math.floor(sum/count))
}
res.push(line) } return res } --- ### How It Works 1. ## Summary ### 1. Board Mapping 🚀 Code Breakdown ## Initialize Result const res = []; Creates an empty array to store the final blurred image. * Converts chess columns (a–h) into numeric values (1–8). ### 2. Extract Coordinates #### Loop Through Rows for (let y = 0; y < image.length - 2; y++) Iterates over each row Stops at length - 2 to ensure a valid 3×3 grid #### Loop Through Columns for (let x = 0; x < image[y].length - 2; x++) Iterates over each column Ensures we stay within bounds for a 3×3 block ### Initialize Sum & Count #### let sum = 0; let count = 0; sum → stores total pixel values count → tracks number of elements (should be 9) * A bishop moves diagonally. * Two squares are on the same diagonal if: * Their **sum is equal**, OR * Their **difference is equal** (represented here using rearranged sums) ### Traverse 3×3 Block for (let a = y; a < y + 3; a++) { for (let b = x; b < x + 3; b++) { sum += image[a][b]; count++; } } Iterates through a 3×3 neighborhood Adds each value to sum Increments count for each element ---