---

layout: default

---

<h3>Convolution</h3>

<p>by <a href="http://www.shiffman.net">Daniel Shiffman</a>.

Applys a convolution matrix to a portion of the index.

Move mouse to apply filter to different parts of the image.</p>

<p><a href="http://processing.org/learning/topics/convolution.html"><b>Original Processing.org Example:</b> Convolution</a><br>

<div class="learning-demo"><script type="application/processing">

PImage img;

int w = 80;

float[][] matrix = { { -1, -1, -1 },

{ -1, 9, -1 },

{ -1, -1, -1 } };

void setup() {

size(200, 200);

frameRate(30);

img = loadImage("data/end.jpg");

void draw() {

// We're only going to process a portion of the image

// so let's set the whole image as the background first

image(img,0,0);

// Where is the small rectangle we will process

int xstart = constrain(mouseX-w/2,0,img.width);

int ystart = constrain(mouseY-w/2,0,img.height);

int xend = constrain(mouseX+w/2,0,img.width);

int yend = constrain(mouseY+w/2,0,img.height);

int matrixsize = 3;

loadPixels();

// Begin our loop for every pixel

for (int x = xstart; x < xend; x++) {

for (int y = ystart; y < yend; y++ ) {

color c = convolution(x,y,matrix,matrixsize,img);

int loc = x + y*img.width;

pixels[loc] = c;

}

}

updatePixels();

color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)

float rtotal = 0.0;

float gtotal = 0.0;

float btotal = 0.0;

int offset = matrixsize / 2;

for (int i = 0; i < matrixsize; i++){

for (int j= 0; j < matrixsize; j++){

// What pixel are we testing

int xloc = x+i-offset;

int yloc = y+j-offset;

int loc = xloc + img.width*yloc;

// Make sure we haven't walked off our image, we could do better here

loc = constrain(loc,0,img.pixels.length-1);

// Calculate the convolution

rtotal += (red(img.pixels[loc]) * matrix[i][j]);

gtotal += (green(img.pixels[loc]) * matrix[i][j]);

btotal += (blue(img.pixels[loc]) * matrix[i][j]);

}

}

// Make sure RGB is within range

rtotal = constrain(rtotal,0,255);

gtotal = constrain(gtotal,0,255);

btotal = constrain(btotal,0,255);

// Return the resulting color

return color(rtotal,gtotal,btotal);

</script><canvas width="200" height="200"></canvas></div></p>

<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas and Ben Fry

// unless otherwise stated.

/* @pjs preload="data/end.jpg"; */

PImage img;

int w = 80;

// It's possible to convolve the image with

// many different matrices

float[][] matrix = { { -1, -1, -1 },

{ -1, 9, -1 },

{ -1, -1, -1 } };

void setup() {

size(200, 200);

frameRate(30);

img = loadImage("data/end.jpg");

}

void draw() {

// We're only going to process a portion of the image

// so let's set the whole image as the background first

image(img,0,0);

// Where is the small rectangle we will process

int xstart = constrain(mouseX-w/2,0,img.width);

int ystart = constrain(mouseY-w/2,0,img.height);

int xend = constrain(mouseX+w/2,0,img.width);

int yend = constrain(mouseY+w/2,0,img.height);

int matrixsize = 3;

loadPixels();

// Begin our loop for every pixel

for (int x = xstart; x &lt; xend; x++) {

for (int y = ystart; y &lt; yend; y++ ) {

color c = convolution(x,y,matrix,matrixsize,img);

int loc = x + y*img.width;

pixels[loc] = c;

}

}

updatePixels();

}

color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)

{

float rtotal = 0.0;

float gtotal = 0.0;

float btotal = 0.0;

int offset = matrixsize / 2;

for (int i = 0; i &lt; matrixsize; i++){

for (int j= 0; j &lt; matrixsize; j++){

// What pixel are we testing

int xloc = x+i-offset;

int yloc = y+j-offset;

int loc = xloc + img.width*yloc;

// Make sure we haven't walked off our image, we could do better here

loc = constrain(loc,0,img.pixels.length-1);

// Calculate the convolution

rtotal += (red(img.pixels[loc]) * matrix[i][j]);

gtotal += (green(img.pixels[loc]) * matrix[i][j]);

btotal += (blue(img.pixels[loc]) * matrix[i][j]);

}

}

// Make sure RGB is within range

rtotal = constrain(rtotal,0,255);

gtotal = constrain(gtotal,0,255);

btotal = constrain(btotal,0,255);

// Return the resulting color

return color(rtotal,gtotal,btotal);

}</pre></div>