Star

Created With

linkFoto mosaico - Software

linkPlanteamiento del Problema

Realizar la conversion de una imagen a un foto mosaico.

linkAntecedentes

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.

La fascinación por los mosaicos no es nada nuevo. Y es que el mosaico es un arte conocido ya desde la Edad Antigua. A partir de pequeñas piedras coloridas o de trocitos de cristal se compone una imagen. Así surgieron ya las famosas obras de arte en los palacios y villas de la Edad Antigua. Aún hoy, la idea que tenemos de los mosaicos está marcada por estas imágenes de obras antiguas.

Esta técnica cultural se ha mantenido a lo largo de siglos y fue, como consecuencia, de distinto gran significado para la configuración óptica de construcciones representativas. En los tiempos del Renacimiento y del Clasicismo aumentó su importancia. En estas épocas, estaba de moda reproducir escenas de la Antigüedad Clásica en formato de mosaico. Sin embargo, hoy en día pueden verse aún mosaicos en cantidad de construcciones representativas de prácticamente todas las épocas.

El mosaico también se relaciona con el Puntillismo, un tipo de estilo de pintura polémico en su época. Su florecimiento tuvo lugar en el transcurso del siglo 19 al 20. El Puntillismo está presente en la historia del arte actual, sobre todo, gracias a las pinturas de Paul Signac, Henri Edmond Delacroix o Georges Seurat.

linkCodigo & Resultados

linkImagen Ryuk Original en mosaico con P5

1link> var img;

2link> var promediorojo;

3link> var promedioazul;

4link> var promedioverde;

5link> var rgb;

6link> var pixeles = 5;

7link> var nomimg = [

8link>   "0_0_0", //0

9link>   "0_0_85",

10link>   "0_85_0",

11link>   "0_85_85",

12link>   "85_0_0",

13link>   "85_0_85", //5

14link>   "85_85_0",

15link>   "0_0_170",

16link>   "0_170_0",

17link>   "0_170_170",

18link>   "170_0_0", //10

19link>   "170_0_170",

20link>   "170_170_0",

21link>   "85_85_85",

22link>   "85_85_170",

23link>   "85_170_85", //15

24link>   "85_170_170",

25link>   "170_85_85",

26link>   "170_85_170",

27link>   "170_170_85",

28link>   "170_170_170", //20

29link>   "170_85_0",

30link>   "170_0_85",

31link>   "85_170_0",

32link>   "85_0_170",

33link>   "0_170_85", //25

34link>   "0_85_170"

35link> ];

36link> var imagenes = [];

37link> 

38link> function preload() {

39link>   img = loadImage('/vc/docs/sketches/Taller1/ImagingAndVideo/Ryuk.jpg');

40link>   for (var i = 0; i < nomimg.length; i++) {

41link>       imagenes.push(loadImage("/vc/docs/sketches/Taller1/ImagenesMosaico/" + nomimg[i] + ".jpg"));

42link>   }

43link> }

44link> 

45link> function setup() {

46link>   noStroke();

47link>   img.resize(720, 500);

48link>   createCanvas(720, 500);

49link>   img.loadPixels();

50link>   for (var i = 0; i < img.width; i++) {

51link>     for (var j = 0; j < img.height; j++) {

52link>       promediorojo = 0;

53link>       promedioazul = 0;

54link>       promedioverde = 0;

55link>       datospixeles = img.get(i, j, pixeles, pixeles);

56link>       for (var k = 0; k < pixeles; k++) {

57link>         for (var l = 0; l < pixeles; l++) {

58link>           rgb = datospixeles.get(k,l);

59link>           promediorojo += rgb[0];

60link>           promedioazul += rgb[1];

61link>           promedioverde += rgb[2];

62link>         }

63link>       }      

64link>       promediorojo /= (pixeles * pixeles);

65link>       promedioazul /= (pixeles * pixeles);

66link>       promedioverde /= (pixeles * pixeles);

67link>       buscarImagen(promediorojo,promedioazul,promedioverde, i, j, pixeles);

68link>       j += pixeles-1;

69link>     }

70link>     i += pixeles-1;

71link>   }

72link> }

73link> 

74link> function cargarImagen(nombre, x, y, dim){

75link>   image(nombre, x, y, dim, dim);

76link> }

77link> 

78link> function buscarImagen(r, g, b, x, y, pixeles){

79link>   switch(true){

80link>     case r >= 170:

81link>       switch(true){

82link>         case g >= 170:

83link>           switch(true){

84link>             case b >= 170:

85link>               cargarImagen(imagenes[20], x, y, pixeles);

86link>               break;

87link>             case b >= 85:

88link>               cargarImagen(imagenes[19], x, y, pixeles);

89link>               break;

90link>             case b >= 0:

91link>               cargarImagen(imagenes[12], x, y, pixeles);

92link>               break;

93link>           }

94link>           break;

95link>         case g >= 85:

96link>           switch(true){

97link>             case b >= 170:

98link>               cargarImagen(imagenes[18], x, y, pixeles);

99link>               break;

100link>             case b >= 85:

101link>               cargarImagen(imagenes[17], x, y, pixeles);

102link>               break;

103link>             case b >= 0:

104link>               cargarImagen(imagenes[21], x, y, pixeles);

105link>               break;

106link>           }

107link>           break;

108link>         case g >= 0:

109link>           switch(true){

110link>             case b >= 170:

111link>               cargarImagen(imagenes[11], x, y, pixeles);

112link>               break;

113link>             case b >= 85:

114link>               cargarImagen(imagenes[22], x, y, pixeles);

115link>               break;

116link>             case b >= 0:

117link>               cargarImagen(imagenes[10], x, y, pixeles);

118link>               break;

119link>           }

120link>           break;

121link>       }

122link>       break;

123link>     case r >= 85:

124link>       switch(true){

125link>         case g >= 170:

126link>           switch(true){

127link>             case b >= 170:

128link>               cargarImagen(imagenes[16], x, y, pixeles);

129link>               break;

130link>             case b >= 85:

131link>               cargarImagen(imagenes[15], x, y, pixeles);

132link>               break;

133link>             case b >= 0:

134link>               cargarImagen(imagenes[23], x, y, pixeles);

135link>               break;

136link>           }

137link>           break;

138link>         case g >= 85:

139link>           switch(true){

140link>             case b >= 170:

141link>               cargarImagen(imagenes[14], x, y, pixeles);

142link>               break;

143link>             case b >= 85:

144link>               cargarImagen(imagenes[13], x, y, pixeles);

145link>               break;

146link>             case b >= 0:

147link>               cargarImagen(imagenes[6], x, y, pixeles);

148link>               break;

149link>           }

150link>           break;

151link>         case g >= 0:

152link>           switch(true){

153link>             case b >= 170:

154link>               cargarImagen(imagenes[24], x, y, pixeles);

155link>               break;

156link>             case b >= 85:

157link>               cargarImagen(imagenes[5], x, y, pixeles);

158link>               break;

159link>             case b >= 0:

160link>               cargarImagen(imagenes[4], x, y, pixeles);

161link>               break;

162link>           }

163link>           break;

164link>       }

165link>       break;

166link>     case r >= 0:

167link>       switch(true){

168link>         case g >= 170:

169link>           switch(true){

170link>             case b >= 170:

171link>               cargarImagen(imagenes[9], x, y, pixeles);

172link>               break;

173link>             case b >= 85:

174link>               cargarImagen(imagenes[25], x, y, pixeles);

175link>               break;

176link>             case b >= 0:

177link>               cargarImagen(imagenes[8], x, y, pixeles);

178link>               break;

179link>           }

180link>           break;

181link>         case g >= 85:

182link>           switch(true){

183link>             case b >= 170:

184link>               cargarImagen(imagenes[26], x, y, pixeles);

185link>               break;

186link>             case b >= 85:

187link>               cargarImagen(imagenes[3], x, y, pixeles);

188link>               break;

189link>             case b >= 0:

190link>               cargarImagen(imagenes[2], x, y, pixeles);

191link>               break;

192link>           }

193link>           break;

194link>         case g >= 0:

195link>           switch(true){

196link>             case b >= 170:

197link>               cargarImagen(imagenes[7], x, y, pixeles);

198link>               break;

199link>             case b >= 85:

200link>               cargarImagen(imagenes[1], x, y, pixeles);

201link>               break;

202link>             case b >= 0:

203link>               cargarImagen(imagenes[0], x, y, pixeles);

204link>               break;

205link>           }

206link>           break;

207link>       }

208link>       break;

209link>   }

210link> }

linkImagen Ryuk en mosaico con efecto de llenado de imagenes

Esperar hasta que cargue la imagen, y visualizar como cada pequeña imagen se va añadiendo y va llenado la imagen original.

1link> var img;

2link> var promediorojo;

3link> var promedioazul;

4link> var promedioverde;

5link> var rgb;

6link> var pixeles = 5;

7link> var nomimg = [

8link>   "0_0_0", //0

9link>   "0_0_85",

10link>   "0_85_0",

11link>   "0_85_85",

12link>   "85_0_0",

13link>   "85_0_85", //5

14link>   "85_85_0",

15link>   "0_0_170",

16link>   "0_170_0",

17link>   "0_170_170",

18link>   "170_0_0", //10

19link>   "170_0_170",

20link>   "170_170_0",

21link>   "85_85_85",

22link>   "85_85_170",

23link>   "85_170_85", //15

24link>   "85_170_170",

25link>   "170_85_85",

26link>   "170_85_170",

27link>   "170_170_85",

28link>   "170_170_170", //20

29link>   "170_85_0",

30link>   "170_0_85",

31link>   "85_170_0",

32link>   "85_0_170",

33link>   "0_170_85", //25

34link>   "0_85_170"

35link> ];

36link> 

37link> function preload() {

38link>   img = loadImage('/vc/docs/sketches/Taller1/ImagingAndVideo/Ryuk.jpg');

39link> }

40link> 

41link> function setup() {

42link>   noStroke();

43link>   img.resize(720, 500);

44link>   createCanvas(720, 500);

45link>   img.loadPixels();

46link>   for (var i = 0; i < img.width; i++) {

47link>     for (var j = 0; j < img.height; j++) {

48link>       promediorojo = 0;

49link>       promedioazul = 0;

50link>       promedioverde = 0;

51link>       datospixeles = img.get(i, j, pixeles, pixeles);

52link>       for (var k = 0; k < pixeles; k++) {

53link>         for (var l = 0; l < pixeles; l++) {

54link>           rgb = datospixeles.get(k,l);

55link>           promediorojo += rgb[0];

56link>           promedioazul += rgb[1];

57link>           promedioverde += rgb[2];

58link>         }

59link>       }      

60link>       promediorojo /= (pixeles * pixeles);

61link>       promedioazul /= (pixeles * pixeles);

62link>       promedioverde /= (pixeles * pixeles);

63link>       buscarImagen(promediorojo,promedioazul,promedioverde, i, j, pixeles);

64link>       j += pixeles-1;

65link>     }

66link>     i += pixeles-1;

67link>   }

68link> }

69link> 

70link> function cargarImagen(nombre, x, y, dim){

71link>   loadImage("../sketches/Colores/" + nombre + ".jpg", img => {

72link>     image(img, x, y, dim, dim);

73link>   });

74link> }

75link> 

76link> function buscarImagen(r, g, b, x, y, pixeles){

77link>   switch(true){

78link>     case r >= 170:

79link>       switch(true){

80link>         case g >= 170:

81link>           switch(true){

82link>             case b >= 170:

83link>               cargarImagen(imagenes[20], x, y, pixeles);

84link>               break;

85link>             case b >= 85:

86link>               cargarImagen(imagenes[19], x, y, pixeles);

87link>               break;

88link>             case b >= 0:

89link>               cargarImagen(imagenes[12], x, y, pixeles);

90link>               break;

91link>           }

92link>           break;

93link>         case g >= 85:

94link>           switch(true){

95link>             case b >= 170:

96link>               cargarImagen(imagenes[18], x, y, pixeles);

97link>               break;

98link>             case b >= 85:

99link>               cargarImagen(imagenes[17], x, y, pixeles);

100link>               break;

101link>             case b >= 0:

102link>               cargarImagen(imagenes[21], x, y, pixeles);

103link>               break;

104link>           }

105link>           break;

106link>         case g >= 0:

107link>           switch(true){

108link>             case b >= 170:

109link>               cargarImagen(imagenes[11], x, y, pixeles);

110link>               break;

111link>             case b >= 85:

112link>               cargarImagen(imagenes[22], x, y, pixeles);

113link>               break;

114link>             case b >= 0:

115link>               cargarImagen(imagenes[10], x, y, pixeles);

116link>               break;

117link>           }

118link>           break;

119link>       }

120link>       break;

121link>     case r >= 85:

122link>       switch(true){

123link>         case g >= 170:

124link>           switch(true){

125link>             case b >= 170:

126link>               cargarImagen(imagenes[16], x, y, pixeles);

127link>               break;

128link>             case b >= 85:

129link>               cargarImagen(imagenes[15], x, y, pixeles);

130link>               break;

131link>             case b >= 0:

132link>               cargarImagen(imagenes[23], x, y, pixeles);

133link>               break;

134link>           }

135link>           break;

136link>         case g >= 85:

137link>           switch(true){

138link>             case b >= 170:

139link>               cargarImagen(imagenes[14], x, y, pixeles);

140link>               break;

141link>             case b >= 85:

142link>               cargarImagen(imagenes[13], x, y, pixeles);

143link>               break;

144link>             case b >= 0:

145link>               cargarImagen(imagenes[6], x, y, pixeles);

146link>               break;

147link>           }

148link>           break;

149link>         case g >= 0:

150link>           switch(true){

151link>             case b >= 170:

152link>               cargarImagen(imagenes[24], x, y, pixeles);

153link>               break;

154link>             case b >= 85:

155link>               cargarImagen(imagenes[5], x, y, pixeles);

156link>               break;

157link>             case b >= 0:

158link>               cargarImagen(imagenes[4], x, y, pixeles);

159link>               break;

160link>           }

161link>           break;

162link>       }

163link>       break;

164link>     case r >= 0:

165link>       switch(true){

166link>         case g >= 170:

167link>           switch(true){

168link>             case b >= 170:

169link>               cargarImagen(imagenes[9], x, y, pixeles);

170link>               break;

171link>             case b >= 85:

172link>               cargarImagen(imagenes[25], x, y, pixeles);

173link>               break;

174link>             case b >= 0:

175link>               cargarImagen(imagenes[8], x, y, pixeles);

176link>               break;

177link>           }

178link>           break;

179link>         case g >= 85:

180link>           switch(true){

181link>             case b >= 170:

182link>               cargarImagen(imagenes[26], x, y, pixeles);

183link>               break;

184link>             case b >= 85:

185link>               cargarImagen(imagenes[3], x, y, pixeles);

186link>               break;

187link>             case b >= 0:

188link>               cargarImagen(imagenes[2], x, y, pixeles);

189link>               break;

190link>           }

191link>           break;

192link>         case g >= 0:

193link>           switch(true){

194link>             case b >= 170:

195link>               cargarImagen(imagenes[7], x, y, pixeles);

196link>               break;

197link>             case b >= 85:

198link>               cargarImagen(imagenes[1], x, y, pixeles);

199link>               break;

200link>             case b >= 0:

201link>               cargarImagen(imagenes[0], x, y, pixeles);

202link>               break;

203link>           }

204link>           break;

205link>       }

206link>       break;

207link>   }

208link> }

linkReferencias

Foto mosaico - SoftwarePlanteamiento del ProblemaAntecedentesCodigo & ResultadosImagen Ryuk Original en mosaico con P5Imagen Ryuk en mosaico con efecto de llenado de imagenesReferencias

Home

Workshopschevron_right
Imaging & Videochevron_right
Softwarechevron_right

Ejercicio Blanco & Negro Convolución Ascii Art Mosaico Conclusiones

Hardwarechevron_right

Ejercicio Blanco & Negro Convolución Ascii Art Mosaico Conclusiones

Renderingchevron_right

Ejercicio Lightcuts

Algovis Computer Graphics HCI

P5 Code Snippetschevron_right

P5 Component Basics Video on dom Video on canvas 3D Libs Sound

Memberschevron_right

Nicolas Rodriguez Salguero Carlos Daniel Rincon Mora Mateo Aguilar Cardona

GitHub