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.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

♟️ 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. 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

• Converts chess columns (a–h) into numeric values (1–8).

raverse 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