linkConversión de la imagen a un foto-mosaico.

linkProblem statement

Creación de un foto-mosaico de una imagen determinada a partir de una lista de imagenes definida

linkBackground

En el campo de las imágenes y la fotografía, un fotomosaico es una imagen usualmente una fotografía que ha sido dividida en secciones rectangulares (usualmente del mismo tamaño), tal como es compuesto un mosaico tradicional, con la característica de que cada elemento del mosaico es reemplazado por otra fotografía con colores promedios apropiados al elemento de la imagen original. Cuando es vista en detalle, los píxeles individuales se ven como la imagen principal, sin embargo al verla como un todo, es posible apreciar que la imagen está compuesta por cientos de miles de imágenes.

linkHistoria

Relacionado con la Micrografía, arte manual del siglo IX, el cual utiliza letras y símbolos para crear imágenes más grandes. Leon Harmon de los Laboratorios Bell creó imágenes a partir de símbolos y letras en 1972, lo cual llevó a la popularidad del arte ASCII en los años 1970 y 1980.

Robert Silvers: Demostrando un gran ingenio y brincando la brecha entre el arte y ciencia, Robert Silvers es el pionero de los fotomosaicos a nivel mundial, los cuales retratan ideas que abarcan en si historias familiares y forman parte de la cultura contemporánea; ha realizado diversas clases de retratos de personalidades conocidas, monedas del mundo o ejecuciones fascinantes de pinturas clásicas convertidas en obras maestras.

Silvers inventó su arte mientras todavía era un estudiante en el MIT (1995). Sus obras intrincadas brindan una perspectiva óptica única y han ganado en el mundo gran aceptación y aclamación, ha creado grandes obras que ya forman parte de famosas colecciones como lo son: Courtage de Axa, Coca Cola, CNN, Disney, Fortune Magazine, IBM, Lucasfilm Ltd.., MasterCard International, National Geographic, y Newsweek. Uno de sus últimos proyectos fue en el 2007 con la muestra retrospectiva en Washington , D.C. en la Biblioteca del Congreso. Así mismo ha realizado diversas exposiciones en diversos países del mundo.

linkModelo de color HSB (Hue, Saturation, Brightness – Tonalidad, Saturación, Brillo)

El modelo HSB (o HSV, como se prefiera) deriva del espacio RGB y representa los colores combinando tres valores: el tono en sí (H), la saturación o cantidad de color (S) y el brillo del mismo (B). Estos valores suelen representarse en un diagrama circular (principal uso de este modelo).

Estas tres magnitudes pueden tener los siguientes valores:

De esta forma, siguiendo con el ejemplo de antes, el color R164 G25 B25 se expresaría como H0 S85 B64 según el modelo HSB.

linkCode (solution) & results

Para la solución propuesta se utilizo como imagen desde la cual se crea el mosaico una obra "Puente en Villeneuve-la-Garenne" (1872) del artista Alfred Sisley. Asimismo la lista de imagenes a partir de las cuales se crea el mosaico tambien corresponden a obras del artista Alfred Sisley.

A efectos tecnicos la imagen desde la cual se crea el mosaico es de 720 x 538 pixeles y la lista de imagenes consta de 200 diferentes obras.

Inicialmente se cargan tanto la imagen principal asi como cada una de las 200 imagenes con lsa cuales se va a crear el mosaico.

Posteriormente en la funcion setup se crea el selector que permite escoger el alto y ancho (en pixeles) de cada imagen del mosaico.

En la funcion setupMosaic se obtienen los valores HSB de cada pixel de la imagen principal y luego se realiza un promedio por cada una de las secciones cuyo alto y ancho corresponde al alto y ancho de cada imagen del mosaico (configurada desde el select explicado anteriormente). Luego, para cada uno de los valores promedio HSB de cada seccion se encuentra la imagen mas adecuada para ubicarla en la seccion especifica.

A continuación en la funcion draw se pintan cada una de las imagenes seleccionadas previamente en el orden determinado para formar el mosaico.

Finalmente se definen las funciones para el listener del selector de alto y ancho de las imagenes del mosaico y del keypress que permite visualizar la imagen original.

linkFoto-mosaico

*NOTA: la selección del valor del valor para el scl puede tardar unos segundos mientras se recalcula el
foto-mosaico para la imagen

1link// size of each cell

2linklet imgAmount = 200;

3linklet smaller;

4linklet allImages = [];

5linklet brightImages = new Array(256);

6linklet bigPicture;

7linklet brightnessValues = [];

8linklet scl = 5;

9linklet sel; 

10linklet imagesMainPath = "/vc/docs/sketches/assets/image_mosaic/";

11link

12linkfunction preload() {

13link    bigPicture = loadImage(imagesMainPath + "art.jpg");

14link    for (i = 0; i < imgAmount; i++) {

15link        now = i + '.jpg';

16link        allImages[i] = loadImage(imagesMainPath + "photos/" + now);

17link    }

18link}

19link

20linkfunction setup() {

21link    sel = createSelect();

22link    sel.position(165, 15);

23link    sel.option(5);

24link    sel.option(10);

25link    sel.option(15);

26link    sel.option(25);

27link    sel.selected(scl);

28link    sel.changed(mySelectEvent);

29link

30link    setupMosaic();

31link}

32link

33linkfunction setupMosaic(){

34link    createCanvas(bigPicture.width, bigPicture.height);

35link    for (let i = 0; i < allImages.length; i++) {

36link        allImages[i].resize(64, 64);

37link        avg = 0;

38link

39link        for (let j = 0; j < allImages[i].width; j++) {

40link            for (let k = 0; k < allImages[i].height; k++) {

41link                avg += brightness(allImages[i].get(j, k));

42link            }

43link        }

44link

45link        brightnessValues[i] = avg / (allImages[i].width * allImages[i].height);

46link    }

47link

48link    for (let i = 0; i < brightImages.length; i++) {

49link        minDiff = 256;

50link

51link        for (let j = 0; j < brightnessValues.length; j++) {

52link            diff = abs(i - brightnessValues[j]);

53link

54link            if (diff < minDiff) {

55link                minDiff = diff;

56link                brightImages[i] = allImages[j];

57link            }

58link        }

59link    }

60link

61link    smaller = createImage(bigPicture.width / scl, bigPicture.height);

62link    smaller.copy(bigPicture, 0, 0, bigPicture.width, bigPicture.height, 

63link                    0, 0, bigPicture.width / scl, bigPicture.height / scl);

64link

65link    noLoop();

66link}

67link

68linkfunction draw() {

69link    background(0);

70link

71link    for (let i = 0; i < (bigPicture.width / scl); i++) {

72link        for (let j = 0; j < (bigPicture.width / scl); j++) {

73link            index = int(brightness(smaller.get(i, j)));

74link            image(brightImages[index], i * scl, j * scl, scl, scl);

75link        }

76link    }

77link

78link    textStyle(BOLD);

79link    stroke(128, 255, 255);

80link    textAlign(CENTER);

81link    textSize(18);

82link    text("Seleccione un valor para el scl: ", 17, 22);

83link}

84link

85linkfunction mySelectEvent() {

86link    scl = sel.value();

87link    setupMosaic();

88link    draw();

89link}

90link

91link// Definimos los eventos al opimir teclas, cambiaran el color de los circulos exteriores

92link// igualandolo al del fondo

93linkfunction keyPressed() {

94link    if (key === '1') {

95link        sel.remove();

96link        image(bigPicture, 0, 0);

97link    } else if (key === '2') {

98link        sel = createSelect();

99link        sel.position(165, 15);

100link        sel.option(5);

101link        sel.option(10);

102link        sel.option(15);

103link        sel.option(25);

104link        sel.selected(scl);

105link        sel.changed(mySelectEvent);

106link        draw();

107link    }

108link}

linkConclusions & Future Work

linkReferences