How to Create an Processing Controlled Webcam With Photo Effects & Overlay

This Instructables guide will provide step-by-step instructions on how to code for an processing controlled webcam that has a photo effect on the image and a logo overlay. The final solution is a tiled wall of posterised photos streamed live from the webcam.

For this example the overlay used is a Blue Moon logo to illustrate a personalised beer mat, which are tiled to create a photomosaic of the Blue Moon logo.

Step 1: This Is the Coding for the Processing, With Descriptions of Each Step

import processing.video.*; // this command tells processing to use the compouter

int w = 640;  //this dimension is the width of the screen
int h = 480;  //this dimension is the height of the screen
int fps = 60; //this shows the frame rate the webcam will display
int i = 0;    //this sets the counter (used later in the sketch) to 0 at the start
PImage img;   //these img codes represent the 8 tiled images around the cam, and the 9th is the picture surround
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
PImage img8;
PImage img9;
Capture cam; 

void setup()
{
  size(screen.width, screen.height, P3D);  //this sets the dimensions of the display

  frameRate(fps);    //this uses the fps set before

  cam = new Capture(this, w, h);  //this tells the cam to capture its full scale

}

void draw() //the start of the display sketch
{
  if (cam.available() == true) {  //this command tells the sketch to read the screen
    cam.read();
     img = loadImage("person-1.tif" ); //load the images set up with the tags created earlier
  img2 = loadImage("person-2.tif" );
   img3 = loadImage("person-3.tif" );
    img4 = loadImage("person-4.tif" );
     img5 = loadImage("person-5.tif" );
      img6 = loadImage("person-6.tif" );
       img7 = loadImage("person-7.tif" );
        img8 = loadImage("person-8.tif" );
        img9 = loadImage("bluemoon_2.png" );
  }

  image(cam, width/3, height/3, width/3, height/3); //this sets the camera to display in the centre of the screen, using thirds to distribute it



  tint(17);           
  noTint();          
image(img, 0, 0, width/3, height/3); //these set out the images in tiles arounf the screen using thirds, and some pixel counts
  image(img9, 0, 0, width/3, height/3);
image(img2, width/3, 0, width/3, height/3);
image(img9, width/3, 0, width/3, height/3);
image(img3, 2*width/3, 0, width/3, height/3);
image(img9, 2*width/3, 0, width/3, height/3);
image(img4, 0, 266, width/3, height/3);
image(img9, 0, 266, width/3, height/3);
image(img5, 2*width/3, 266, width/3, height/3);
image(img9, 2*width/3, 266, width/3, height/3);
image(img6, 0, 532, width/3, height/3);
image(img9, 0, 532, width/3, height/3);
image(img7, width/3, 532, width/3, height/3);
image(img9, width/3, 532, width/3, height/3);
image(img8, 2*width/3, 532, width/3, height/3);
image(img9, 2*width/3, 532, width/3, height/3);
image(img9, width/3, 266, width/3, height/3);
 
  if (keyPressed == true) {  //setting up a trigger for the camera to take a photo
    if (key == 'a') {        //the trigger is the 'a' key
      filter( BLUR, 3 );     //the image is then blurred
      filter( POSTERIZE, 16 ); //and then posterized
      if (i < 8) {            //this tells the counter that if it less than 8 ...
        i++;                  //then it should add a consectuvie number
      }
      else i = 1;             //this tells it to return to 1 once it reaches 8
     PImage img  =get(width/3, height/3, width/3, height/3); //this tells processing what portion of the screen to save when 'a' is pressed
    img.save("person-"+i);   //this uses the pre-mentioned 'i' number when saving the captured image
    }
  }
}
//the coding will look like the picture bellow when copied and pasted into processing

Step 2: Finalised Webcam With Photo Effect and Logo Overlay

Sucessful coding for webcam, with blue moon logo on top

coding:

import processing.video.*;

int w = 640; 

int h = 480;

int fps = 25; 

int i = 0;

PImage img;

PImage img2;

PImage img3;

PImage img4;

PImage img5;

PImage img6;

PImage img7;

PImage img8;

PImage img9;

Capture cam; 

void setup()

{

  size(screen.width, screen.height, P3D); 

  frameRate(fps);   

  cam = new Capture(this, w, h); 

}

void draw()

{

//drop blue moon logog in here

  if (cam.available() == true) { 

    cam.read();

     img = loadImage(“person-1.tif” );

  img2 = loadImage(“person-2.tif” );

   img3 = loadImage(“person-3.tif” );

    img4 = loadImage(“person-4.tif” );

     img5 = loadImage(“person-5.tif” );

      img6 = loadImage(“person-6.tif” );

       img7 = loadImage(“person-7.tif” );

        img8 = loadImage(“person-8.tif” );

        img9 = loadImage(“bluemoon_2.png” );

  }

  image(cam, width/3, height/3, width/3, height/3);

  tint(17);            

  noTint();          

image(img, 0, 0, width/3, height/3);

image(img2, width/3, 0, width/3, height/3);

image(img3, 2*width/3, 0, width/3, height/3);

image(img4, 0, 266, width/3, height/3);

image(img5, 2*width/3, 266, width/3, height/3);

image(img6, 0, 532, width/3, height/3);

image(img7, width/3, 532, width/3, height/3);

image(img8, 2*width/3, 532, width/3, height/3);

image(img9, width/3, 266, width/3, height/3);

  if (keyPressed == true) {

    if (key == ‘a’) {

      filter( BLUR, 3 );

      filter( POSTERIZE, 12 );

      if (i < 8) {

        i++;

      }

      else i = 1;

     PImage img  =get(width/3, height/3, width/3, height/3);

    img.save(“person-“+i);

    }

  }

}