Image Processing in p5.js

Making Filters Using p5.js!

1. Video Capture
2. Copying Capture
3. Change Pixels

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
	}

Change Pixels

All you have to do now is alter the pixels however you like! For black & white, negative or sepia filter, check our the Image Filter Tutorial!

In this tutorial we are going to do soemthing different! We will apply different color filter depending on where the mouse is on the screen. All we have to is set the red channel to the mouse's X-position, keep the green channel, and make the blue channel the y-position.

capimg.pixels[i+0] = mouseX;

capimg.pixels[i+1] = g;

capimg.pixels[i+2] = mouseY;

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 frames
	
	if(capimg.width > 0) {
		capimg.loadPixels(); // getting pixel array
		
		for(var i = 0; i < capimg.pixels.length; i += 4) // combination of double for loop mentioned in other tutorials
		{	
			var r = capimg.pixels[i+0];
			var g = capimg.pixels[i+1];
			var b = capimg.pixels[i+2];
			
			capimg.pixels[i+0] = mouseX;
			capimg.pixels[i+1] = g;
			capimg.pixels[i+2] = mouseY;
		}
		capimg.updatePixels();
		image(capimg, 0, 0, width, height);
	}
}