vc | Mosaic - Images

linkBackground

Se debe implementar un mecanismo que genere un mosaico el cual consiste en recrear una imagen a partir de pequeñas imágenes, para crear una mayor concordancia las pequeñas imágenes deben pertenece a la misma temática de la imagen original, por ejemplo, aves.

Ideas Primarias: Las primeras ideas que se plantearon para la creación del mosaico fueron 2 principalmente:

Primero se determino que la mejor manera para crear el mosaico consistía en dividir la imagen en pequeñas cuadriculas cuyo tamaño fuera una potencia de 2 (por ejemplo, 8x8 o 16x16), una vez se tienen estas cuadriculas se haya el color dominante de cada cuadricula, para esto basto con hallar el promedio de cada uno los canales (trabajando en modo rgb) de los colores de cada uno de los pixeles de la cuadricula, esto permitió obtener un color domínate de cada uno de las cuadriculas.

Como segunda idea ya teniendo el color predominante de cada una de las cuadriculas, se planteo el uso de una API que se encargara de proveer imágenes para cada una de las cuadriculas con su respectivo color predominante, este proceso funciono en pequeña escala, pero cuando se intentó realizar el proceso con una imagen de tamaño real, se superaron fácilmente el limite de las API, esto conllevo a descartar esta segunda idea y buscar otras alternativas.

HTML Colores y Distancia Delta: Dado que era imposible conseguir una imagen para cada uno de los colores, se busco alguna manera de estandarizar la paleta, en esta búsqueda se encontró la lista de colores estándares proveídos por HTML, dicha lista esta conformada por 140 colores y representan una abstracción bastante completa de la paleta, con esta lista de colores mucho más reducida se busco una imagen para cada uno de los colores.

En este punto se tenía 140 imágenes para cada uno los colores estandarizados por HTML, pero los colores predominantes de cada uno de las cuadriculas aún no habían sido estandarizado, para esto se hizo uso del concepto de distancia delta, dicha distancia expresa de manera numérica la diferencia entre 2 colores, es decir si x y z son el mismo color su distancia será cero, con este concepto en mente se tomo un cuadricula cuyo color predomínate es el color c y se halló la distancia delta del color c con cada uno de los 140 colores y se selecciono el color con la mejor distancia, se tomó la imagen correspondiente a ese color y se construyó el mosaico.

linkCode

A continuacion no se muestran algunos fragmentos de codigo que permitiran comprender los detalles de la solucion planteada.

El siguiente fragmento de código permite obtener el color predominante de cada una de las cuadriculas de la imagen original.

getColor.js1linklet d = pixelDensity();

2link

3link    let mosaic_part_x =8;

4link    let mosaic_part_y =8;

5link

6link    loadPixels();

7link

8link    for(let i=0; i< Math.floor(width/mosaic_part_x); i++ ){

9link        for(let j=0; j< Math.floor(height/mosaic_part_y); j++ ){

10link            let r = 0; 

11link            let g = 0; 

12link            let b = 0;

13link

14link            for(let k=0; k<mosaic_part_x; k++){

15link                for(let l=0; l<mosaic_part_y; l++){

16link

17link                    let x = i*mosaic_part_x + k;

18link                    let y = j*mosaic_part_y + l;

19link

20link                    let off = (y * width + x) * d * 4;

21link                    r+= pixels[off];

22link                    g+= pixels[off + 1];

23link                    b+= pixels[off + 2];

24link                }

25link            }

26link

27link            r = Math.floor(r / (mosaic_part_x*mosaic_part_y));

28link            g = Math.floor(g / (mosaic_part_x*mosaic_part_y));

29link            b = Math.floor(b / (mosaic_part_x*mosaic_part_y));

30link

31link        }

32link    }

El siguiente fragmento de código permite obtener la distancia delta entre 2 colores

distanceDelta.js1linkfunction calculateDeltaE(color1, color2){

2link    let c1 = hexToRgb(color1);

3link    let c2 = hexToRgb(color2);

4link    return Math.sqrt( ((c2.r-c1.r)*(c2.r-c1.r)) + 

5link                      ((c2.g-c1.g)*(c2.g-c1.g)) + 

6link                      ((c2.b-c1.b)*(c2.b-c1.b)));

7link}

El siguiente fragmento de código permite obtener una imagen dado un color, para esto primero estandariza el color con ayuda de la distancia delta y luego selecciona la imagen de las imágenes disponibles.

searchImage.js1linkfunction searchImage(color, x, y, w, h){

2link    let min =  100000000;

3link    let color_min = "#FFFFFF";

4link

5link    for(let i=0; i<html_colors.length; i++){

6link        let deltaE = calculateDeltaE(color, html_colors[i]);

7link        if(deltaE<=min){

8link            min = deltaE;

9link            color_min = html_colors[i];

10link        }

11link    }

12link

13link    let img_color = images_html_colors[color_min];

14link    img_color.resize(w, h);

15link    image(img_color, x, y);

16link}