linkAntecedentes

Una escala de grises de una imagen es aquella en la que el valor de cada píxel es una sola muestra que representa solo una cantidad de luz; es decir, lleva solo información de intensidad. Las imágenes en escala de grises, una especie de monocromo en blanco y negro o gris, se componen exclusivamente de tonos de gris. El contraste varía desde el negro en la intensidad más débil hasta el blanco en la más fuerte. Las imágenes en escala de grises son distintas de las imágenes en blanco y negro puesto.

Las operaciones de filtrado en imágenes en el dominio del espacio se llevan a cabo directamente sobre los píxeles de la imagen, a los cuales se les relaciona un conjunto de pixeles próximos con el objetivo de obtener información útil. Los llamados filtros lineales son los que cumplen el hecho de que el resultado de cada pixel se obtiene como combinación lineal de sus vecinos. Para aplicar un filtro lineal multiplicamos el entorno de cada pixel (submatriz NxN) por una máscara (que contiene los pesos de cada pixel del entorno con que se pondera la media), la media ponderada será el nuevo valor del pixel cuyo entorno operábamos. Para realizar un filtrado en el dominio del espacio se realiza una convolución (barrido) del núcleo sobre la imagen. Para ello se sigue el Teorema de Convolución en el espacio; cada píxel de la nueva imagen se obtiene mediante el sumatorio de la multiplicación del núcleo por los píxeles contiguos:

linkSolución y Resultados

linkMascaras de Convolución & Escala de grises RGB y LUMA

1linkp.createCanvas(imgWidth, imgHeight);

2linkp.pixelDensity(1);

3linkp.image(img, 0, 0, imgWidth, imgHeight);

4link

5link// <----

6linkp.loadPixels();

7link

8linkfor (let a = 0, x = 0; x < p.width; a++, x++) {

9link    imgRed.push([]);

10link    imgGreen.push([]);

11link    imgBlue.push([]);

12link

13link    for (let y = 0; y < p.height; y++) {

14link        let i = (x + y * p.width) * 4;

15link        imgRed[a].push(p.pixels[i]);

16link        imgGreen[a].push(p.pixels[i + 1]);

17link        imgBlue[a].push(p.pixels[i + 2]);

18link    }

19link}

20link

21linkfor (let x = 0; x < p.width; x++) {

22link    for (let y = 0; y < p.height; y++) {

23link        let k = (x + y * p.width) * 4;

24link

25link        if (!(x == 0 || x == p.width - 1 || y == 0 || y == p.height - 1)) {

26link            let convRed = 0;

27link            let convGreen = 0;

28link            let convBlue = 0;

29link

30link            for (let a = 0, i = x - 1; a < 3; a++, i++) {

31link                for (let b = 0, j = y - 1; b < 3; b++, j++) {

32link                    convRed += imgRed[i][j] * effect[b][a];

33link                    convGreen += imgGreen[i][j] * effect[b][a];

34link                    convBlue += imgBlue[i][j] * effect[b][a];

35link                }

36link            }

37link

38link

39link            let avgPixel = (convRed + convGreen + convBlue) / 3;

40link            p.pixels[k] = avgPixel;

41link            p.pixels[k + 1] = avgPixel;

42link            p.pixels[k + 2] = avgPixel;

43link}

44link

45linkp.updatePixels();