FivekoGFX – Online Image Processing Library

The FivekoGFX (aka Fiveko Graphics) is a free open source online computer vision project. This is a Web-based image processing library, that uses Canvas2D and OpenGL ES technologies.

The main goal of Fiveko Graphics is to serve as a basic online environment for acquaintance in the field of image and video analysis. Many of the algorithms in the library are accompanied by learning articles and sample code.

---

Graphic Filters

Gaussian blur filter (Gaussian smoothing)

The Gaussian filter is a low-pass filter that reduce image noise and leads to blurry looking effect. This is a popular noise reduction filter that FivekoGFX implements via a GPU shader.

Prototype

void gauss(float sigma);

Parameters

sigma

(float) standard deviation

Example code

var fivekogfx = new FivekoGFX();
fivekogfx.load(canvas);
fivekogfx.gauss(2.0); // e.g. Sigma=2.0
fivekogfx.draw(canvas);

---

Mean filter

The Mean (Box) filter performs fast low pass filtering.

Prototype

void mean(float size);

Parameters

size

(uint) window size

---

Symmetric Nearest Neighbor

The Symmetric Nearest Neighbor filter is a non-linear low-pass filter that preserves the edges of the image.

Prototype

void symmetricnn(uint size, uint count);

Parameters

size

(uint) window size

count

(uint) number of iterations

Example code

var fivekogfx = new FivekoGFX();
fivekogfx.load(canvas);
fivekogfx.symmetricnn(5, 3); // e.g. Window size = 5, count = 3
fivekogfx.draw(canvas);

---

Other low pass filters

• Median filter – This is a non-linear edge preserving noise reduction filter
  

---

Edge Detection

Sobel filter

The Sobel operator is a fundamental part in many Computer Vision algorithms. It consists of two convolution kernels with a size of 3×3 pixels. This operator produce an approximate image derivative and extract gradients.

Note that Fiveko Graphics applies the NMS algorithm automatically to Sobel/Scharr operators.

Prototype

void sobel(void);

Example code

var fivekogfx = new FivekoGFX();
fivekogfx.load(canvas);
fivekogfx.sobel();
fivekogfx.draw(canvas);

Other edge detectors

void schaar(void);

---

Non-Maximum suppression

After extracting a nice gradient image, it is often necessary to extract thin contours from it. The non-maximum suppression algorithm is a classic way to perform this task. FivkoGFX implements this algorithm through WebGL shader, so it is pretty fast.

---

Shape detection

Hough Transform

The Hough Transform is a basic shape detection algorithms. This algorithm is most commonly used to detect straight segments and circles in an image, but can also be used to detect more complex shapes.

Prototype

void houghCircle(uint radius);

Parameters

radius

(uint) circle radius in pixels

Example code

var fivekogfx = new FivekoGFX();
var radius = 10; // E.g. 10 pixels wide circle
fivekogfx.load(canvas);
fivekogfx.houghCircle(radius);
fivekogfx.draw(canvas);

Color space conversion

FivekoGFX computer vision library implements different kind of color transformations like RGB to HSV, RGB to YCbCr, YCbCr to RGB, RGB to gray, etc.

Prototype

void rgb2grey(void);
void rgb2ycbcr(void);
void ycbcr2rgb(void);
void rgb2xyz(void);
void rgb2hsl(void);

---

Image Segmentation and Clustering

Watershed Image Segmentation

The Watershed segmentation is an interesting algorithm designed to perform image segmentation via defined initial markers. FivekoGFX implements a CPU version of Meyer’s flooding algorithm using a Priority Queue during image scanning.

Prototype

void watershed(Canvas canvas, Seeds seeds);

Parameters

canvas

(Object) The canvas element

seeds

(Object[2]) Two dimensional array of pixels

Example code

var fivekogfx = new FivekoGFX();
var seeds = [{pixels: [5]}, {pixels: [100, 110]}];
fivekogfx.load(canvas);
fivekogfx.watershed(canvas, seeds);
fivekogfx.draw(canvas);

---

Human skin segmentation

FivekoGFX comes with a build-in human skin detection capability. Certainly this feature is useful for many computer vision tasks as well as for cases like nudity detection.

Prototype

void skinMask(void);

Example code

var fivekogfx = new FivekoGFX();
fivekogfx.load(canvas);
fivekogfx.skinMask();
fivekogfx.draw(canvas);

---

TODO

Our image processing library is still in progress and we are working to add more algorithms. Meanwhile feel free to visit our online image processing tutorials for many computer vision articles and examples.