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.
Download Source Code
The project is publicly available on GitHub
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.
