Computer Vision Library
Spatial Filters

## Files

file  gauss.js
Gaussian smooth filters This module depends on conv.js.

file  mean.js
Mean smooth filters Mean and Box filter GLSL shaders.

file  symmetricnn.js
Symmetric Nearest Neighbour filter.

## Functions

void gauss (float sigma)

void blur (float sigma)

void mean (uint size)

void symmetricnn (uint size, uint count)

## Detailed Description

Spatial image filtering is an image processing technique that performs directly on the pixels. The process consists of a moving mask over each image pixel in order to execute desired filtering process.

• Linear filtering
• Non-Linear filtering
• Smoothing linear filtering
• Order-Statistics filtering

## ◆ blur()

 void blur ( float sigma )

Iterative blur using mean filter. Number of iterations is calculated based on sigma parameter.

Parameters
 sigma - standart deviation converted for iterations count
mean gauss

## ◆ gauss()

 void gauss ( float sigma )

Gaussian blur filter (Gaussian smoothing)

Parameters
 sigma - standart deviation
Overview
The Gaussian filter is a low-pass filter that reduce image noise and leads to blurry looking effect. This method uses conv1d to perform separable Gaussina convolution
Math theory
• Gaussian convolution with one dimensional kernel: $$\displaystyle{G}{\left({x}\right)}=\frac{1}{\sqrt{{{2}\pi\sigma^{2}}}}{e}^{{-\frac{{x}^{2}}{{{2}\sigma^{2}}}}}$$
• Gaussian convolution with 2-D kernel: $$\displaystyle{G}{\left({x}\right)}=\frac{1}{{{2}\pi\sigma^{2}}}{e}^{{-\frac{{{x}^{2}+{y}^{2}}}{{{2}\sigma^{2}}}}}$$
Example code
var fivekogfx = new FivekoGFX();
fivekogfx.gauss(2.0); // e.g. Sigma=2.0
fivekogfx.draw(canvas);
Example image result
Gaussian blur example image with stddev=6.0
External resources
conv1d mean

## ◆ mean()

 void mean ( uint size )

Low-pass mean filter This filter performs GPU based separable mean filter by OpenGL/WebGL shader.

Parameters
 size - window size
Math theory
• Mean blur with 3x3 kernel size: $$\displaystyle{K}=\frac{1}{{9}}{\left[\begin{matrix}{1}&{1}&{1}\\{1}&{1}&{1}\\{1}&{1}&{1}\end{matrix}\right]}=\frac{1}{{3}}{\left[\begin{matrix}{1}&{1}&{1}\end{matrix}\right]}\ast\frac{1}{{3}}{\left[\begin{matrix}{1}\\{1}\\{1}\end{matrix}\right]}$$
Example code
var fivekogfx = new FivekoGFX();
fivekogfx.mean(5); // e.g. Window size = 5
fivekogfx.draw(canvas);
Example image result
Mean blur example image with window size 5
External resources
gauss

## ◆ symmetricnn()

 void symmetricnn ( uint size, uint count )

Implements Symmetric Nearest Neighbor filter using GPU by OpenGL/WebGL fragment shader

Parameters
 size - window size count - number of iterations
Overview
The filter uses a sliding window placed at each image pixel to perform non-linear edge preserving filtration. Pixels under the window are divided into oppoiste/symmetric pairs and from each of them the pixel closest to the central one is used to calc the mean value of the region.
Symmetric Nearest Neighbor pixel selection: green – central pixel; red – opposite pixels
Example image result
Symmetric Nearest Neighbor window size 10 and count 1
External resources