Computational Design Lab

Webcam Paint


Webcam Paint is a program developed using openFrameworks in Code::Blocks for windows. It enables user to paint using a webcam through a simple color detecting algorithm.

How it works?

For painting on the pad user should add colors to color palette.  User can do this by pressing mouse left button-while color of program background changes to selected pixel color- and after finding desirable color, user should release the button. The color will be added to the color palette.  For example, user may use his/her hand as a painting brush by clicking on his/her hand and add colors of hand to the palette. Then, he/she can paint by moving his/her hand in front of webcam. User can tweak painting mode using provided sliders.


Webcam Paint interface is consists of four screen, a color palette, two control panels, and three buttons.

In upper-left screen, user can see webcam input to the program. Upper-right screen is the pad where user paints on. This pad shows current brush positions and painted stuff. User can view and optimize brush detection using lower-left screen which shows the black and white image that OpenCv uses for detecting brush blobs. Finally, lower right screen display any movement of brush blobs.

The color palette displays colors which have been added by the user. User can add unlimited colors to the palette, but, Webcam Paint just uses last twenty two colors on the palette. User can review these colors in the small boxes between screens and control panels.

Additionally, there are two control panels, which give user ability to tweak brush blob and blob movement detection. First one contains sliders to determine hue, saturation, and value threshold for detecting brush blob. It also has a slider that controls RGB threshold for detecting movements in webcam input. Adding thresholds makes detections more sensitive, but high thresholds make it hard to paint accurately. Next control panel has sliders which determine minimum size of blobs to be detected as brush blobs and blob movements. The other slider determine how many blobs detected for each color in the palette.

Finally, there are three buttons in the lower-left portion of interface. One of them is for clearing the pad. The other on is for saving the painting – you can find saved painting in the data folder of the program. The last button switches between drawing by circular brush or free-form brush. If you like to see shape effect of your painting tool on the pad, turn of circular brush button.

What are the algorithm?

For detecting brush blobs, the program changes webcam input to a HSV color image and extract grayscale hue, saturation, and value images out of it. Then,  it detects color blobs for added colors, based on specified thresholds. For detecting brush movement blobs, program perform same process on a image that contains pixels of difference between current and previous webcam input, which has been created using background subtraction algorithm.

Find the program here.

Find the source here. (extract it into of_preRelease_v0061_win_cb_FAT\apps\ folder )

Author: Mehrdad Ghods
Category: Projects