A C++ blob editor in less than 128 lines of code

• Download source code - 511 KB

Introduction

This article provides a very small piece of C++ code (less than 128 lines) that creates a simple but functional 2D blobs editor.

The editor consists of a main window where the user can create, delete, and move blobs having random sizes and colors. The underlying algorithm is based on implicit functions to create and merge blobs together. This is very similar to the famous Metaballs technique, but here, applied on 2D functions.

A video of this proposed blobs editor can be seen here.

Background

This project illustrates the use of a very handy and simple image class provided by the CImg Library, a C++ template image processing toolkit. It allows to shorten the code by focusing on the algorithm itself, instead of having to do all the low-level image stuffs.

CImg is a very portable library, so I've been able to provide both Windows and Linux executables of the same program in the above archive.

Using the code

The code is quite small, and mainly consists of a main event loop, waiting for user interaction. When the user clicks the mouse with the left button, it creates a blob (or moves an existing one). Using the right mouse button deletes a blob. The colors and sizes of the created blobs are randomly chosen.

The code uses the main image structure of the CImg library, which is, in our case, a CImg<unsigned int>, i.e., a 2D container of pixels of type unsigned int. Pixel access and modification are classically done through the function CImg<T>::operator(), which is provided with the image class.

The blob positions, sizes, and colors are stored in lists structures, also provided by the CImg library (although, it would be possible to use std::vector<> instead).

Finally, the display window is created and updated using the CImgDisplay class of the CImg library, which is great since it is simple to use and multi-platform, so the same code will work the same way on different architectures.

From a mathematical point of view, each blob is considered as an implicit Gaussian function. All the blobs are added into a potential field (here, described by the main image img). Then, this potential field is colored and threshold-ed according to the blob colors and sizes. As a result, a color version of the potential field that contains the blobs is created. Additionally, small reflections are drawn with successive spheres located relative to the blob coordinates, in order to create the final rendered blob image.

Points of interest

I think this code is a nice way to discover the use of implicit functions to model simple mathematical objects. The same kind of techniques are applied in 3D rendering for doing metaballs, and is heavily used nowadays to model smooth 3D objects.

From a more technical point of view, it may make you discover the CImg library, which is a nice C++ toolkit for doing generic image processing. It really simplifies the coding of algorithms related to images, as well as provides a lightweight and multi-platform development framework for image/signal processing.

I really hope you'll enjoy this piece of code.