Quiz #14
Würfelkunst

Regeln
Die Regeln und der Ablauf der Quizrunde können in der entsprechenden Ankündigung eingesehen werden. Bitte lest sie euch aufmerksam durch, da sie alle wichtigen Informationen enthält.

Neue Regel: Es ist erlaubt und erwünscht, dass ihr euch direkt in diesem Thema über die Aufgabe austauscht. Also stellt bei Unklarheiten in der Aufgabenstellung oder Problemen bei der Umsetzung Fragen, versorgt uns mit nützlichen oder weiterführenden Links, diskutiert mögliche Lösungsansätze. Macht bei Beiträgen, die allzu viel verraten, aber bitte trotzdem Gebrauch vom [spoiler]-Tag.

Abgabe
Die Abgabe erfolgt wie immer im Abgabeforum. Abgabefrist ist Samstag, der 27. März 2010 um ca. 23 Uhr.

Die Aufgabe
Mit Würfeln kann man nicht nur würfeln, sondern auch Kunstwerke erzeugen.

Don Vito in Würfeln:


Ein zerwürfelter US-Präsident:


Ein paar Videos:


Eure Aufgabe besteht nun darin, ein Programm zu schreiben, das ein gewöhnliches Bild in solche Würfelkunst überführt. Ihr könnt dazu pro Eingabepixel einen Würfel verwenden oder auch mehrere Pixel zu einem Würfel zusammenfassen. Die Würfel müssen auch nicht unbedingt alle gleichfarbig sein. Stattdessen könntet ihr auch einen Satz von dunklen Würfeln mit hellen Punkten und hellen Würfeln mit dunklen Punkten verwenden. Oder ihr erlaubt farbige Würfel. Vielleicht experimentiert ihr auch mit verschieden großen Würfeln herum oder berücksichtigt die Orientierung (die 3 lässt sich ja beispielsweise auf die zwei Arten „\“ und „/“ legen). Denkt euch einfach was aus

Eingabe
Die Eingabe soll ein gewöhnliches Bild sein. Welche Dateiformate ihr dabei unterstützt, ist euch überlassen (Graustufen, Farben, JPEG, PNG, GIF…). Wenn ihr keine Bibliothek zum Einlesen von Bildern verwenden wollt oder könnt, dann schaut euch mal das einfache PPM- oder PGM-Format an (Beispielbilder in diesem Format werden noch zur Verfügung gestellt).

Ausgabe
Für die Ausgabe sind mehrere Formate denkbar:

• Textuelle Ausgabe mit den Unicodezeichen U+2680 bis U+2685.
• Rasterbild als Zusammensetzung von vorgegebenen Würfelgrafiken (Beispielgrafiken folgen).
• SVG-Ausgabe (dazu später vielleicht noch eine Vorlage)

Und jetzt ran an die Tasten und viel Spaß beim Programmieren!

Mit bestem Dank an Jellysheep für die Inspiration zu dieser Aufgabe (auch wenn er etwas ganz anderes im Sinn hatte )

Hier mal ein paar Würfel-Grafiken in unterschiedlichen Größen:



Die Bilder sind übrigens mit dem tollen „Zeichenprogramm“ Webkit entstanden Dabei ist mir auch eine weitere Idee für die Ausgabe gekommen: HTML mit CSS-Sprites (siehe Beispiel im Anhang).

Grüße,
Matthias

Juhuu, mal sehen ob ich da was zusammenbekomme, es sieht auf jeden Fall interessant aus.

Hallo,

ich werde auch mitmachen. Allerdings interessiert mich mal wonach ihr die Kriterien zieht welche Farbe welcher Würfel ist.
Ich hab bei mir erstmal das Bild in Quadrate aufgeteilt und berechne für jedes den Durchschnitt der RGB-Werte. Der niedrigste Wert wird eine 6 der höchste eine 1.
Wie macht ihr das?

Gruß
Erik

Wenn man davon ausgeht, dass

(1) nur schwarz/weiße Würfel benutzt werden
(2) damit (simpel gedacht) 6 Helligkeitsabstufungen möglich sind.

, muss die Bildinformation (ob Einzelpixel oder Zusammenfassung) auf 6 Werte vereinfacht werden. Dazu sollte man sich auf jeden Fall die Umrechnung von RGB nach Helligkeit anschauen, denn zB ist B dunkler als G.

zB Y(Luma) = 0.2126 R + 0.7152 G + 0.0722 B

Ich denke, diesmal mach ich mal wieder mit, lustiges Thema und für php und CSS eine nette Spielerei. mfg chmee

Hier mal zwei einfache Beispielbilder (in Graustufen und nicht zu groß), mit denen ihr euer Programm testen könnt. Jeweils als PNG und PGM.

Hallo,

Coole Aufgabe
Erster Versuch:
http://www.ganeshaspeaks.com/blogIma...4_27012009.jpg

Gruß Tom

Tolle Idee,
habe mich auch mal am lieben Obama versucht...

http://petersalvia.files.wordpress.c...it5dmarkii.jpg

Richtig gut sieht es bei mir im Moment aber auch nur aus, wenn das Original Bild auch schön groß ist...
Grüße!

Richtig gut sieht es bei mir im Moment aber auch nur aus, wenn das Original Bild auch schön groß ist...

Das Problem kommt mir bekannt vor.

Ich hab jetzt einfach mal jeden Pixel des Ausgangsbilds zwei mal dargestellt. So richtig überzeugt bin ich davon aber immernoch nicht.

//e

Auf dem Bild kommts ja noch weniger rüber... Es sei denn man hat den Platz um es sich aus 5 Metern anzusehen

//e2

Nachdem ich die Unicode Variante in php benutze hab ich mal noch ein bisl mit CSS gespielt.
Immerhin braucht man jetzt keine 5 Meter Abstand mehr.

Hallo,

wenn ihr Probleme mit der Qualität habt, dann hilft vielleicht Dithering bei der Quantisierung. Der Floyd-Steinberg-Algorithmus ist relativ einfach zu implementieren und liefert gute Ergebnisse.

Grüße,
Matthias

Ich muss sagen, dass diese Art absolutes Neuland ist und ich mich hier erstmal zurechtfinden muss...
Danke Matthias für die Links, ohne die würde ich wahrscheinlich jetzt noch grübeln anstatt zu programmieren.

€dit: kommen wir mal zu meinem Stand bisher:

Ich habe bisher das Grauzeichnen und das Dithern übernommen, nun muss ich noch die Pixel mit Würfeln ersetzen, mal sehen wie ich das hinbekomme.

Ich arbeite mit Javascript und dem Canvas-Element von Html5, an dieser Stelle danke an Quaese, ich habe mir ein paar von deinen Codeschnipseln genommen

€dit2: So, nun habe ich Probleme, kann mir jemand sagen, warum die Grafik verzerrt ist?
Ich dache mir ich lese immer ein Rechteck von 5x5 pixeln aus, errechne den Mittelwert der Farbe und platziere dementsprechend einen Würfel, aber warum sieht das so verzerrt aus?

Jemand eine andere Idee, wie ich die Würfel sonst ersetzen könnte?

Vielen Dank Matthias, dass du ein neues Coding Quiz ins Leben gerufen hast!
Ich hab mich in Java schonmal an der Abstufung versucht und nun aus einem Obama-Bild ein neues mit 8 Farben (pro Rot, Gün und Blau je zwei) erzeugt.

Das Originalbild:


Ich kam dann zu folgendem Ergebnis:


Ich habe dann mal Matthias' Tipp ausprobiert und den Floyd-Steinberg-Algorithmus angewendet, das Ergebnis war nun folgendes:


Der Algorythmus bringt dem Bild wirklich eine deutliche Verbesserung. Danke für den Tipp!

Das Ganze probiere ich noch bei Graustufen, danach kommen dann die Würfel.

Zitat von Chumper

€dit2: So, nun habe ich Probleme, kann mir jemand sagen, warum die Grafik verzerrt ist?
Ich dache mir ich lese immer ein Rechteck von 5x5 pixeln aus, errechne den Mittelwert der Farbe und platziere dementsprechend einen Würfel, aber warum sieht das so verzerrt aus?

Jemand eine andere Idee, wie ich die Würfel sonst ersetzen könnte?

Sieht für mich nach einem klassischen „off by one“ aus. Vermutlich hast du dich bei der Bildbreite um 1 vertan.

Grüße,
Matthias

So dacht mir ich trag auch noch was bei:
Ich hab mich mal ne halbe Stunde hingesetzt und eine einfache Pixel2Dice Implementierung geschrieben.

Mona sieht mehr oder minder gut aus.
WIP

EDIT:
Irgendwie will der Floyd-Steinberg Algo bei mir nicht ganz -.-
Ich versuch auf 16 Farben runterzugehn und er macht mir ein paar Pixel so extrem.
*Essenhol und Durchschnauf*

So, dann gebe ich mal meine Bilder ab. Auch hier das Problem, dass die Qualität unter kleinen Bildern extrem leidet, außerdem ist es bei mir noch ein wenig hardcoded, ich versuche das mal zu änern.
Das Problem ist nur, dass bei 3000+ pixeln Seitenlänge Javascript ca. 3mal die Laufzeit des Skripts abbricht
ich hoffe ihr habt einen schnellen rechner bei meiner Lösung.