Convolution
Applies a convolution matrix to a portion of an image. Move mouse to apply filter to different parts of the image. This example is a port of Dan Shiffman's example for Processing. Original comments written by Dan unless otherwise specified.
To run this example locally, you will need an image file, and a running local server.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
let img;
let w = 80;
// It's possible to convolve the image with many different
// matrices to produce different effects. This is a high-pass
// filter; it accentuates the edges.
const matrix = [ [ -1, -1, -1 ],
[ -1, 9, -1 ],
[ -1, -1, -1 ] ];
function preload() {
img = loadImage('assets/moonwalk.jpg');
}
function setup() {
createCanvas(720, 400);
img.loadPixels();
// pixelDensity(1) for not scaling pixel density to display density
// for more information, check the reference of pixelDensity()
pixelDensity(1);
}
function draw() {
// We're only going to process a portion of the image
// so let's set the whole image as the background first
background(img);
// Calculate the small rectangle we will process
const xstart = constrain(mouseX - w/2, 0, img.width);
const ystart = constrain(mouseY - w/2, 0, img.height);
const xend = constrain(mouseX + w/2, 0, img.width);
const yend = constrain(mouseY + w/2, 0, img.height);
const matrixsize = 3;
loadPixels();
// Begin our loop for every pixel in the smaller image
for (let x = xstart; x < xend; x++) {
for (let y = ystart; y < yend; y++ ) {
let c = convolution(x, y, matrix, matrixsize, img);
// retrieve the RGBA values from c and update pixels()
let loc = (x + y*img.width) * 4;
pixels[loc] = red(c);
pixels[loc + 1] = green(c);
pixels[loc + 2] = blue(c);
pixels[loc + 3] = alpha(c);
}
}
updatePixels();
}
function convolution(x, y, matrix, matrixsize, img) {
let rtotal = 0.0;
let gtotal = 0.0;
let btotal = 0.0;
const offset = Math.floor(matrixsize / 2);
for (let i = 0; i < matrixsize; i++){
for (let j = 0; j < matrixsize; j++){
// What pixel are we testing
const xloc = (x + i - offset);
const yloc = (y + j - offset);
let loc = (xloc + img.width * yloc) * 4;
// 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
// retrieve RGB values
rtotal += (img.pixels[loc]) * matrix[i][j];
gtotal += (img.pixels[loc + 1]) * matrix[i][j];
btotal += (img.pixels[loc + 2]) * 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);
}
