Image Processing in p5.js

Video Blur

In this tutorial we will explain the logic behind an image blur in relation to videos. We recommend that you start our by reading our tutorial on Blur Logic

1. Video Capture
2. Copying Capture
3. Blur
4. Display

Video Capture

Steps:

1. Create variable for your video = capture
2. Use the createCapture method to capture the video. This opens the digitizer
3. Set video size to the same dimensions as canvas
4. Use hide method to hide capture feed.

Vocabulary:

Capture Feed

A display showing whatthe capmera is capturing in real time.

	var capture; // this is the video camera

	function setup() {
		createCanvas(640, 480);
		pixelDensity(1);
		background(100);

		capture = createCapture(VIDEO); // this opens the digitizer
		capture.size(640, 480);
		capture.hide();
	}

For more information on video capture, click this link!

Copying Capture

Now let's create a varible containing a copy of our video feed. We will need this copy in order to have access to the pixel array. Use the get( ) method to create a pixel array out of our video frames:

	var capture; // this is the video camera
	var capimg;


	function setup() {
		createCanvas(640, 480);
		pixelDensity(1);
		background(100);

		capture = createCapture(VIDEO); // this opens the digitizer
		capture.size(640, 480);
		capture.hide();
	}

	function draw() {
		capimg = capture.get(); // copying the video
	}

Blur

The Logic behind our motion blur relies on understanding that every new frame is influenced by the previous frame. The copy, as mentioned, holds the pixel array for our captured video. The blur is an image we create based on our copy. The blur is essentially holding the last frame we created, and the more weight it has on our final image, the more motion blur our video will have. On the other hand, if our copy has a really heigh ratio, our blur will be brief because we will see more of the live footage.

Steps:

1. Create a variable to hold our blur
2. Our blur will be an image we create with the same dimensions as our video. Use the createImage( ) method.
3. Create two variables: copyRatio and blurRatio. They will hold the weight the copy of the video and our blur will, respectively, have in out final result. The more weight the blur has on the final image, the more blur you’ll have.
4. Set a ratio for how much of the copy you want and set the blur to the inverse of that (1 - copyRatio)
5. Load Pixels for both copy and blur
6. Iterate through all the red values in our pixel array. Check out our Basic Setup for help
7. Set RGB values of the blur to the chosen ratio distribution (see code below for further explanation).

	var capture; // this is the video camera
	var capimg;
	var theblur; // this is the blur
	var a = 0.1;
	var b = 1.0-a;

	function setup() {
		createCanvas(640, 480);
		pixelDensity(1);
		background(100);
		capture = createCapture(VIDEO); // this opens the digitizer
		theblur = createImage(640, 480);
		capture.size(640, 480);
		capture.hide();
	}

	function draw() {
		capimg = capture.get(); // copying the video
		if(capimg.width>0) {
			capimg.loadPixels();
			theblur.loadPixels();
			
			for(var i = 0; i < theblur.pixels.length;i+=4)
			{
				theblur.pixels[i] = a*capimg.pixels[i] + b*theblur.pixels[i];
				theblur.pixels[i+1] = a*capimg.pixels[i+1] + b*theblur.pixels[i+1];
				theblur.pixels[i+2] = a*capimg.pixels[i+2] + b*theblur.pixels[i+2];
				theblur.pixels[i+3] = capimg.pixels[i+3];
			}
		}
	}

Display

To display our final result, all we have to do is update pixels for our blur and use the image() method to display it.

	var capture; // this is the video camera
	var capimg;
	var theblur; // this is the blur
	var a = 0.1;
	var b = 1.0-a;

	function setup() {
		createCanvas(640, 480);
		pixelDensity(1);
		background(100);
		capture = createCapture(VIDEO); // this opens the digitizer
		theblur = createImage(640, 480);
		capture.size(640, 480);
		capture.hide();
	}

	function draw() {
		capimg = capture.get(); // copying the video
		if(capimg.width>0) {
			capimg.loadPixels();
			theblur.loadPixels();
			
			for(var i = 0; i < theblur.pixels.length;i+=4)
			{
				theblur.pixels[i] = a*capimg.pixels[i] + b*theblur.pixels[i];
				theblur.pixels[i+1] = a*capimg.pixels[i+1] + b*theblur.pixels[i+1];
				theblur.pixels[i+2] = a*capimg.pixels[i+2] + b*theblur.pixels[i+2];
				theblur.pixels[i+3] = capimg.pixels[i+3];
			}
			theblur.updatePixels();
			image(theblur, 0, 0, width, height);
		}
	}