Imaging & Videochevron_right
Softwarechevron_right
Hardwarechevron_right
Aplicar una mascara de convolucion a una imagen usando una matriz "kernel".
La matriz de convolución es una matriz de datos que permite, entre otros, detectar bordes, añadir relieves, desenfocar o aumentar la nitidez de una imagen. Con este filtro, se pueden crear filtros personalizados.
Es posible hacerse una idea sin usar las herramientas matemáticas que solo conocen unos pocos. Convolución es el tratamiento de una matriz por otra que se llama “kernel”.
El filtro matriz de convolución usa una primera matriz que es la imagen que será tratada. La imagen es una colección bidimensional de píxeles en coordenada rectágular. El kernel usado depende del efecto deseado.
Consideraremos solo las matrices 3x3, son las más usadas y son suficiente para los efectos deseados. Si todos los valores de un kernel se seleccionan a cero, el sistema la considerará como una matriz 3x3.
1link> let img;
2link> let w = 80;
3link> const xstart = 0;
4link> const ystart = 0;
5link> const matrixsize = 3;
6link>
7link> // It's possible to convolve the image with many different matrices to produce
8link> //different effects. This is a high-pass filter; it accentuates the edges.
9link> const matrix = [[-1, -1, -1],
10link> [-1, 9, -1],
11link> [-1, -1, -1]];
12link>
13link> function preload() {
14link> img = loadImage('/vc/docs/sketches/Taller1/ImagingAndVideo/Wolv.jpg');
15link> }
16link>
17link> function setup() {
18link> img.resize(720,500);
19link> // We're only going to process a portion of the image so let's set the whole
20link> // image as the background first
21link> img.loadPixels();
22link> createCanvas(720, 500);
23link> pixelDensity(1);
24link> }
25link>
26link> function draw() {
27link> loadPixels();
28link> for (let x = xstart; x < img.width; x++) {
29link> for (let y = ystart; y < img.height; y++) {
30link> let c = convolution(x, y);
31link> let loc = (x + y * img.width) * 4;
32link> pixels[loc] = red(c);
33link> pixels[loc + 1] = green(c);
34link> pixels[loc + 2] = blue(c);
35link> pixels[loc + 3] = alpha(c);
36link> }
37link> }
38link> updatePixels();
39link> }
40link>
41link> function convolution(x, y) {
42link> let rtotal = 0.0;
43link> let gtotal = 0.0;
44link> let btotal = 0.0;
45link> const offset = Math.floor(matrixsize / 2);
46link> for (let i = 0; i < matrixsize; i++) {
47link> for (let j = 0; j < matrixsize; j++) {
48link> // What pixel are we testing
49link> const xloc = (x + i - offset);
50link> const yloc = (y + j - offset);
51link> let loc = (xloc + img.width * yloc) * 4;
52link> // Make sure we haven't walked off our image, we could do better here
53link> loc = constrain(loc, 0, img.pixels.length - 1);
54link> // Calculate the convolution, retrieve RGB values
55link> rtotal += (img.pixels[loc]) * matrix[i][j];
56link> gtotal += (img.pixels[loc + 1]) * matrix[i][j];
57link> btotal += (img.pixels[loc + 2]) * matrix[i][j];
58link> }
59link> }
60link> // Make sure RGB is within range
61link> rtotal = constrain(rtotal, 0, 255);
62link> gtotal = constrain(gtotal, 0, 255);
63link> btotal = constrain(btotal, 0, 255);
64link> // Return the resulting color
65link> return color(rtotal, gtotal, btotal);
66link> }