Computer Vision Library
Files | Functions
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.

Function Documentation

◆ 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
See also
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.load(canvas);
fivekogfx.gauss(2.0); // e.g. Sigma=2.0
fivekogfx.draw(canvas);
Example image result
gauss_ex.jpg
Gaussian blur example image with stddev=6.0
External resources
See also
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.load(canvas);
fivekogfx.mean(5); // e.g. Window size = 5
fivekogfx.draw(canvas);
Example image result
mean_ex.jpg
Mean blur example image with window size 5
External resources
See also
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.
symmetricnn.png
Symmetric Nearest Neighbor pixel selection: green – central pixel; red – opposite pixels
Example image result
symmetricnn_ex.jpg
Symmetric Nearest Neighbor window size 10 and count 1
External resources
See also
median