linkProblema:

(imágenes/video) Aplicación de algunas máscaras de convolución.

linkInformación

linkMáscaras de convolución - Kernel (image processing)

En procesamiento de imagen, un núcleo, kernel, matriz de convolución o máscara es una matriz pequeña que se utiliza para desenfoque, enfoque, realce, detección de bordes y más. Esto se logra realizando una convolución entre un núcleo y una imagen.

En matemáticas, y en particular análisis funcional, una convolución es un operador matemático que transforma dos funciones f y g en una tercera función que en cierto sentido representa la magnitud en la que se superponen f y una versión trasladada e invertida de g. Una convolución es un tipo muy general de media móvil, como se puede observar si una de las funciones se toma como la función característica de un intervalo.

linkSolución

linkImagenes

Código para imagenes, lo uncio que cambia es el kernel entre ellas (matiz de convolución):

1linklet img;

2link

3linkfunction preload() {

4link    img = loadImage('/vc/docs/sketches/lenna.png')

5link  }

6link

7link  function setup() {

8link    createCanvas(img.width, img.height);

9link    pixelDensity(1);

10link  }

11link

12link  function draw() {

13link

14link    var k1 = [[1, 1, 1],

15link              [1, 1, 1],

16link              [1, 1, 1]];

17link

18link    var pond = 9

19link

20link    //image(img, 0, 0); // Displays the image from point (0,0) 

21link    img.loadPixels();

22link    // Create an opaque image of the same size as the original

23link    auxImg = createImage(img.width, img.height, RGB);

24link    auxImg.loadPixels();

25link    // Loop through every pixel in the image.

26link

27link        var w = img.width;

28link        var h = img.height;

29link    for (var x = 1; x < w-1; x++) {

30link    for (var y = 1; y < h-1; y++) {

31link

32link        var sumR = 0; // Kernel sum for this pixel

33link        var sumG = 0; // Kernel sum for this pixel

34link        var sumB = 0; // Kernel sum for this pixel

35link

36link        for (var ky = -1; ky <= 1; ky++) {

37link        for (var kx = -1; kx <= 1; kx++) {

38link            // Calculate the adjacent pixel for this kernel point

39link            var pos =   4 *  (((y + ky)) * w + (x + kx)); 

40link            // Image is grayscale, red/green/blue are identical

41link            var valR = img.pixels[pos];

42link            var valG = img.pixels[pos+1];

43link            var valB = img.pixels[pos+2];

44link            // Multiply adjacent pixels based on the kernel values

45link            sumR += k1[ky+1][kx+1] * valR;

46link            sumG += k1[ky+1][kx+1] * valG;

47link            sumB += k1[ky+1][kx+1] * valB;

48link        }

49link        }

50link        sumR =sumR/ pond

51link        sumG =sumG/ pond

52link        sumB =sumB/ pond

53link

54link        // For this pixel in the new image, set the gray value

55link        // based on the sum from the kernel

56link        //auxImg.pixels[4*(y*img.width + x)] = color(sumR, sumG, sumB)

57link        auxImg.pixels[4*(y*img.width + x)] = sumR;

58link        auxImg.pixels[4*(y*img.width + x) + 1] = sumG;

59link        auxImg.pixels[4*(y*img.width + x) + 2] = sumB;

60link        auxImg.pixels[4*(y*img.width + x) + 3] = 255;

61link            }

62link

63link    }

64link    // State that there are changes to auxImg.pixels[]

65link    auxImg.updatePixels();

66link    //img.updatePixels();

67link    //image(auxImg, width/2, 0); // Draw the new image

68link    image(auxImg, 0, 0, img.width, img.height);

69link    noLoop(); // we want you to have control of the blur

70link  }

71link

72link

linkIdentidad

1link

2link    var k1 = [[0, 0, 0],

3link              [0, 1, 0],

4link              [0, 0, 0]];

5link

Resultado:

linkBoxblur

1link

2link    var k1 = [[1, 1, 1],

3link              [1, 1, 1],

4link              [1, 1, 1]];

5link

Resultado:

linkEdge detection

1link

2link    var k1 = [[-1, -1, -1],

3link            [-1, 8, -1],

4link            [-1, -1, -1]];

5link

Resultado:

linkSharpen

1link

2link    var k1 = [[0, -1, 0],

3link            [-1, 5, -1],

4link            [0, -1, 0]];

5link

Resultado:

linkVideo

Código para video, lo unico que cambia es el kernel entre ellas (matriz de convolución):

1link

2link let vid;

3link

4linkfunction setup() {

5link  createCanvas(320, 240);

6link  vid = createVideo(['/vc/docs/sketches/fingers.mov', '/vc/docs/sketches/fingers.webm']);

7link  vid.loop();

8link  noStroke();

9link  fill(0);

10link}

11link

12linkfunction draw() {

13link  background(255);

14link  fill(0);

15link  noStroke();

16link

17link

18link

19link  //image(vid, 0, 0); // Displays the image from point (0,0) 

20link  vid.loadPixels();

21link

22link  blurImg=blur(blur(blur(blur(vid))))

23link

24link

25link  image(blurImg, 0, 0, blurImg.width, blurImg.height);

26link}

27link

28link

29link

30linkfunction blur(img) { 

31link

32link

33link  var k1 = [[1, 2, 1],

34link  [2, 4, 2],

35link  [1, 2, 1]];

36link  var pond = 16

37link

38link  // Create an opaque image of the same size as the original

39link  auxImg = createImage(img.width, img.height, RGB);

40link  auxImg.loadPixels();

41link  // Loop through every pixel in the image.

42link

43link  var w = img.width;

44link  var h = img.height;

45link  for (var x = 1; x < w-1; x++) {

46link    for (var y = 1; y < h-1; y++) {

47link

48link      var sumR = 0; // Kernel sum for this pixel

49link      var sumG = 0; // Kernel sum for this pixel

50link      var sumB = 0; // Kernel sum for this pixel

51link

52link      for (var ky = -1; ky <= 1; ky++) {

53link        for (var kx = -1; kx <= 1; kx++) {

54link          // Calculate the adjacent pixel for this kernel point

55link          var pos =   4 *  (((y + ky)) * w + (x + kx)); 

56link          // Image is grayscale, red/green/blue are identical

57link          var valR = img.pixels[pos];

58link          var valG = img.pixels[pos+1];

59link          var valB = img.pixels[pos+2];

60link          // Multiply adjacent pixels based on the kernel values

61link          sumR += k1[ky+1][kx+1] * valR;

62link          sumG += k1[ky+1][kx+1] * valG;

63link          sumB += k1[ky+1][kx+1] * valB;

64link        }

65link      }

66link      sumR =sumR/ pond

67link      sumG =sumG/ pond

68link      sumB =sumB/ pond

69link

70link      // For this pixel in the new image, set the gray value

71link      // based on the sum from the kernel

72link      auxImg.pixels[4*(y*img.width + x)] = sumR;

73link      auxImg.pixels[4*(y*img.width + x) + 1] = sumG;

74link      auxImg.pixels[4*(y*img.width + x) + 2] = sumB;

75link      auxImg.pixels[4*(y*img.width + x) + 3] = 255;

76link    }

77link

78link  }

79link  // State that there are changes to auxImg.pixels[]

80link  auxImg.updatePixels();

81link  return auxImg;

82link

83link}

84link

85link

86link

linkGaussian blur

1link

2link  var k1 = [[1, 2, 1],

3link            [2, 4, 2],

4link            [1, 2, 1]];

5link

Resultado:

linkEdge Detection

1link

2link  var k1 = [[-1, -1, -1],

3link            [-1, 8, -1],

4link            [-1, -1, -1]];

5link

Resultado:

linkFuentes

• https://en.wikipedia.org/wiki/Kernel_(image_processing)

• https://es.wikipedia.org/wiki/Convoluci%C3%B3n

• https://processing.org/examples/edgedetection.html

• https://idmnyu.github.io/p5.js-image/Blur/index.html#kernel