Imaging & Videochevron_right
Softwarechevron_right
Hardwarechevron_right
Renderingchevron_right
Photo Mosaic
linkAntecedentes
Un fotomosaico, en el campo de las imágenes y la fotografía, es una imagen 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. Robert Silvers es el pionero de los fotomosaicos a nivel mundial. 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
linkSolución y Resultados
1linkvar sclDiv = 60;
2linkvar w, h;
3linkvar imgAmount = 29;
4link
5linklet brightnessValues = [];
6linkvar allImages = [];
7linkvar brightImages = new Array(255);
8linkvar bigPicture;
9linkvar smaller;
10link
11linkfunction preload() {
12link bigPicture = loadImage("/vc/docs/sketches/pruebas/muppets.jpg");
13link for (i = 0; i < imgAmount; i++) {
14link now = "/vc/docs/sketches/pruebas/" + i + '.jpg';
15link allImages[i] = loadImage(now);
16link }
17link}
18link
19linkfunction setup() {
20link createCanvas(bigPicture.width, bigPicture.height);
21link scl = bigPicture.width / sclDiv;
22link
23link // Repeat the following for all images
24link for (var i = 0; i < allImages.length - 1; i++) {
25link // Load the image
26link var img = allImages[i];
27link
28link // Shrink it down
29link allImages[i] = createImage(scl, scl);
30link allImages[i].copy(img, 0, 0, img.width, img.height, 0, 0, scl, scl);
31link allImages[i].loadPixels();
32link }
33link
34link for (var i = 0; i < allImages.length - 1; i++) {
35link // ORIGINALLY allImages[k].width / height
36link // Calculate average brightness
37link let avg = 0;
38link
39link // ORIGINALLY allImages[k].width / height
40link for (var j = 0; j < allImages[j].height; j++) {
41link for (var k = 0; k < allImages[k].width; k++) {
42link let b = brightness(getColorAtIndex(allImages[i], j, k))
43link avg += b;
44link }
45link }
46link
47link avg /= allImages[i].width * allImages[i].height;
48link brightnessValues[i] = avg;
49link }
50link
51link // Find the closest image for each brightness value
52link for (i = 0; i < brightImages.length; i++) {
53link let record = 256;
54link for (j = 0; j < brightnessValues.length; j++) {
55link let diff = abs(i - brightnessValues[j]);
56link if (diff < record) {
57link record = diff;
58link brightImages[i] = allImages[j];
59link }
60link }
61link }
62link
63link // Calculate the amount of columns and rows
64link w = Math.floor(bigPicture.width / scl);
65link h = Math.floor(bigPicture.height / scl);
66link smaller = createImage(w, h);
67link
68link smaller.copy(bigPicture, 0, 0, bigPicture.width, bigPicture.height, 0, 0, w, h);
69link}
70link
71linkfunction draw() {
72link background(0);
73link smaller.loadPixels();
74link
75link // For every column and row..
76link for (var x = 0; x < w; x++) {
77link for (var y = 0; y < h; y++) {
78link // ..draw an image that has the closest brightness value
79link var index = x + y * w;
80link var c = getColorAtIndex(smaller, x, y);
81link var imageIndex = floor(brightness(c));
82link image(brightImages[imageIndex], x * scl, y * scl, scl, scl);
83link }
84link }
85link noLoop();
86link}
87link
88linkfunction getColorAtIndex(img, x, y) {
89link let idx = imageIndex(img, x, y);
90link let pix = img.pixels;
91link let red = pix[idx];
92link let green = pix[idx + 1];
93link let blue = pix[idx + 2];
94link let alpha = pix[idx + 3];
95link return color(red, green, blue, alpha);
96link}
97link
98linkfunction imageIndex(img, x, y) {
99link return 4 * (x + y * img.width);
100link}
101link
1linkvar sclDiv = 60;
2linkvar w, h;
3linkvar imgAmount = 29;
4link
5linklet brightnessValues = [];
6linkvar allImages = [];
7linkvar brightImages = new Array(255);
8linkvar bigPicture;
9linkvar smaller;
10link
11linkfunction preload() {
12link bigPicture = loadImage("/vc/docs/sketches/pruebas/muppets.jpg");
13link for (i = 0; i < imgAmount; i++) {
14link now = "/vc/docs/sketches/pruebas/" + i + '.jpg';
15link allImages[i] = loadImage(now);
16link }
17link}
18link
19linkfunction setup() {
20link createCanvas(bigPicture.width, bigPicture.height);
21link scl = bigPicture.width / sclDiv;
22link
23link // Repeat the following for all images
24link for (var i = 0; i < allImages.length - 1; i++) {
25link // Load the image
26link var img = allImages[i];
27link
28link // Shrink it down
29link allImages[i] = createImage(scl, scl);
30link allImages[i].copy(img, 0, 0, img.width, img.height, 0, 0, scl, scl);
31link allImages[i].loadPixels();
32link }
33link
34link for (var i = 0; i < allImages.length - 1; i++) {
35link // ORIGINALLY allImages[k].width / height
36link // Calculate average brightness
37link let avg = 0;
38link
39link // ORIGINALLY allImages[k].width / height
40link for (var j = 0; j < allImages[j].height; j++) {
41link for (var k = 0; k < allImages[k].width; k++) {
42link let b = brightness(getColorAtIndex(allImages[i], j, k))
43link avg += b;
44link }
45link }
46link
47link avg /= allImages[i].width * allImages[i].height;
48link brightnessValues[i] = avg;
49link }
50link
51link // Find the closest image for each brightness value
52link for (i = 0; i < brightImages.length; i++) {
53link let record = 256;
54link for (j = 0; j < brightnessValues.length; j++) {
55link let diff = abs(i - brightnessValues[j]);
56link if (diff < record) {
57link record = diff;
58link brightImages[i] = allImages[j];
59link }
60link }
61link }
62link
63link // Calculate the amount of columns and rows
64link w = Math.floor(bigPicture.width / scl);
65link h = Math.floor(bigPicture.height / scl);
66link smaller = createImage(w, h);
67link
68link smaller.copy(bigPicture, 0, 0, bigPicture.width, bigPicture.height, 0, 0, w, h);
69link}
70link
71linkfunction draw() {
72link background(0);
73link smaller.loadPixels();
74link
75link // For every column and row..
76link for (var x = 0; x < w; x++) {
77link for (var y = 0; y < h; y++) {
78link // ..draw an image that has the closest brightness value
79link var index = x + y * w;
80link var c = getColorAtIndex(smaller, x, y);
81link var imageIndex = floor(brightness(c));
82link image(brightImages[imageIndex], x * scl, y * scl, scl, scl);
83link }
84link }
85link noLoop();
86link}
87link
88linkfunction getColorAtIndex(img, x, y) {
89link let idx = imageIndex(img, x, y);
90link let pix = img.pixels;
91link let red = pix[idx];
92link let green = pix[idx + 1];
93link let blue = pix[idx + 2];
94link let alpha = pix[idx + 3];
95link return color(red, green, blue, alpha);
96link}
97link
98linkfunction imageIndex(img, x, y) {
99link return 4 * (x + y * img.width);
100link}
101link
Créditos: P5 photomosaic