Facial recognition using webcams | Mirrors

This week I have been looking into facial recognition within processing using the video and capture video functions. Using half of an example I found on the library, I was able to create a simple piece of interactive media. The text below is the code for the beginning of the program.

int cellSize = 10;

int cols, rows;

Capture video;

This piece of code is used to determine the current size of each of the cells with the canvas. I chose for the cells to be 10 pixels in square diameter because I wanted to create a classic comic-book effect (similar to the Ben-Day dots technique). Next, I needed to complete my void setup. Below is the code for it:

void setup() {
 size(640, 480);
 cols = width / cellSize;
 rows = height / cellSize;
 colorMode(RGB, 100, 0, 50)

After selecting the canvas size and frame rate settings, i had to decide how much space i wanted to leave between my cells. I chose to keep an equal distance both for the columns and for the rows. The way in which I did this was by halving the cell sizes and assigning them to both the column and width commands. I chose the RGB colour mode mainly because I spent about an hour playing around with it, making sure my colour schemes were on point.

Next I had to enable the camera to capture images and stream them to my program. The code below is the formula I found on an example in the stock processing library.

video = new Capture(this, width, height);



The video function is set to new capture which means every time I open the program using the “Play” icon, it begins a new capture. The video start function commands the program to start capturing new frames using the camera as soon as the program opens. The background is set to 100 because I didn’t want to give the background a completely white touch, I wanted it to look a little more grey because the paper in comic books is usually a tad darker than white (yet not quite grey).

Next I needed to enable my “Void Draw” setup. I needed to enable my program to begin recording IF the computer the program was being used on had a camera. The code below is the formula for how I did this. The “for” variables are for determining the loops for each column and row, making sure that all the cells mirror the images from the camera on the screen.

void draw() {
 if (video.available()) {

for (int i = 0; i < cols; i++) {
 for (int j = 0; j < rows; j++) {
 In the next part of the program, I had to make sure that the mirrored image was processed properly. by mirroring the columns only, it enables you to mirror the entire image without having to worry about the rows. this is the code for the program used to do this:

 int x = i*cellSize;
 int y = j*cellSize;
 int loc = (video.width - x - 1) + y*video.width;

Next I had to make sure the brightness of each cell was how I wanted it. I played about with it for a while and couldn’t really make any sense of it (Thats something I need to look into). The code is something I found within an example so I didnt write it myself, either way here is the code I used within my program:

float R = blue(video.pixels[loc]);
 float G = green(video.pixels[loc]);
 float B = blue(video.pixels[loc]);
 color c = color(R, G, B, 50);
Finally, I had to determine the shape, the size and stroke size of my cells. I went for circles with a thick black stroke in the end, I think I will change that in the future though once I get my colours and filters right (this is just an experiment, I have time to change it). Below is the code for the final part of my program.


 ellipse(0, 0, cellSize-3, cellSize-3);


This allowed me to fill the cells with the RGB colours I had selected ontop of the image being displayed from the camera onto the screen, adjust the size of the cells, and change the heaviness of the stroke applied to each of the cells. Below is an image of me and my friend Siobhan using the program.

Ben Day Example image

My goals for my next example are to explore how to create smoke within interactive design, as this is part of my idea for the brief.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s