Mosaik Effekt - jemand eine idee?

[deak_wue]

http://eye.kddi.com/content.html

hi,

suche ein paar Ideen wie ich das realisiere?

gruß

deak

 

[Tobias Menzel]

Hi,

wie Du an der Ladezeit bemerken kannst, handelt es sich hier um einen importierten Film. So etwas zur Echtzeit mit ActionScript zu realisieren, wird an der Rechenkapazität des Clientrechners scheitern.

Prinzipiell hast Du einen Pool aus hochgeladenen Fotos und ein Einzelbild (z.B. Gesicht), welches aus den kleinen Fotos zusammengestzt werden soll. Du teilst das Einzelbild nun in Blöcke (z.B. 20x20 Pixel auf), holst Dir die Farbwerte jedes einzelnen Pixels in jedem Block und berechnest die durchschnittliche Farbe. Das machst Du auch mit allen Einzelbildern (idealerweise machst Du es einmal im Backend und speicherst die durchschnittlichen Farbwerte der Bilder in einer Datenbank). Jetzt legst Du die kleinen Bilder so über das Blockraster des Einzelbildes, dass über jedem Block das Bild liegt, welches in seinem durchschnittlichen Farbwert am ehesten dem Farbwert des Blockes entspricht.

Farbwerte einer Bitmap kannst Du auf dem Client für ein kleines Bild berechnen und vergleichen (z.B. wenn es darum geht, eine passende Hintergrundfarbe für ein eingeladenes Foto zu wählen), aber was Bilder dieser Größe und Anzahl betrifft, hast Du auf dem Client keine Chance.

Einen "simplen" Mosaikeffekt, der ein Bild einfach in ein Vergröberungsraster auflöst, habe ich hier (klick) vor einiger Zeit gepostet.

Gruß
.

 

[deak_wue]

Hi Tobias,

also erstmal Danke, das klingt alles recht Logisch.
Nun habe ich doch noch ein paar Fragen zu den Details. Ok ich habe mein "großes Bild"
das ich in Blöcken zerlege. Das mach ich dann wohl in PS und speichere jeden Block ab.
Danach impotiere ich das ganze in Flash und setzt sie neben einander und mach MC draus.

Soweit richtig oder?

Wie berechne ich den Durchschnitt der Blöcke? Kannst du mir dafür einen Tip geben?

Ok dann brauche ich halt massig kleine Bilder um diese darüber zu legen, da hab ich halt wiederum das Problem mit dem Durchschnitt.

Wenn du mir dafür einen Denkansatz geben würdest, müsste ich das schaffen

 

[Tobias Menzel]

Hi,

Soweit richtig oder?

Nicht unbedingt: Ich würde das große Bild am Stück einladen. Die Zerlegung in Blöcke muss ja nicht tatsächlich geschehen, sondern Du nimmst Dir immer einen z.B. 20x20 großen Ausschnitt und berechnest den Farbwert-Durchschnitt.

Folgende Funktion berechnet den durchschnittlichen Farbbereich eines MC-Ausschnittes und gibt die Werte als rot, grün und blau-Anteile zurück:

function parseColors(src, offset_x, offset_y, w, h) {
	var bmp = new BitmapData(src._width, src._height);
	bmp.draw(src);
	var thresh = 0; // Farbschwellenwert
	var sumr = 0;
	var sumg = 0;
	var sumb = 0;
	var minus = 0;
	var amt = w * h;
	for (var x=offset_x; x<offset_x + w; x++) {
		for (var y=offset_y; y<offset_y + h; y++) {
			var pix = bmp.getPixel(x, y);
			var p = pix.toString(16);
			while(p.length < 6) {
				p = "0" + p;
			}
			var cr = parseInt(p.substr(0, 2), 16);
			var cg = parseInt(p.substr(2, 2), 16);
			var cb = parseInt(p.substr(4, 2), 16);
			if (cr > thresh || cg > thresh || cb > thresh) {
				sumr += cr;
				sumg += cg;
				sumb += cb;
			} else {
				minus ++;
			}
		}
	}
	amt -= minus;
	sumr = int(sumr / amt);
	sumg = int(sumg / amt);
	sumb = int(sumb / amt);
	return {r:sumr, g:sumg, b:sumb};
}

Gruß
.

 

[benchmark]

Hallo,

ich bin fast der Meinung, dass die kleinen Bilder nicht mit Flash erstellt wurden, sondern das das einfach ein Flashfilm mit zusammen gestellten Bildern ist. Die Ladezeit ist schon enorm.

Es gibt ein kleines <1MB Tool, welches sich Foto-Mosaik (von Steffen Schirmer) nennt. Einfach mal googeln. Damit kannst du solche Bilder erstellen und in deinem Flashfilm animieren.

Vielleicht ist das ein Lösung.

VG
benchmark

 

[mogmog]

Hallo,

ich bin fast der Meinung, dass die kleinen Bilder nicht mit Flash erstellt wurden, sondern das das einfach ein Flashfilm mit zusammen gestellten Bildern ist. Die Ladezeit ist schon enorm.

Es gibt ein kleines <1MB Tool, welches sich Foto-Mosaik (von Steffen Schirmer) nennt. Einfach mal googeln. Damit kannst du solche Bilder erstellen und in deinem Flashfilm animieren.

Vielleicht ist das ein Lösung.

VG
benchmark

abend

Das ist richtig das die Fotos errechnen können aber hier ist ja alles schön animiert und bewegt sich ja so schön. Ich denke mal eher das ist eine Kombination aus Fotomosaiken und noch andere Bilder drübergelegt. Es zappelt halt alles so (auf der seite)


gruß ralf

=)