Farben Sortieren / Gruppieren

  • Für ein kleines Projekt will ich eine Liste mit Farben in einer Liste darstellen, habe aber gemerkt, dass die Darstellung nicht optimal ist.

    Ideal wäre eine Darstellung der Farben so sortiert / gruppiert, dass sie einen idealen Übergang haben.

    Was ich bis jetzt implementiert habe:

    Die Ergebnisse sehen ganz passable aus, aber noch nicht gut genug, da man immer noch Farbfragmente innerhalb der Farbbereiche sieht.

    Habt ihr noch Ideen?

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

  • Hi UEZ ,

    das sieht sehr vielversprechend aus, doch weiß ich ehrlich nicht genau welcher Anwendungsfall dahinter steckt bzw. welche es geben kann?
    Hilfst du mir da bitte mal auf die Sprünge, dann kann ich ggf. auch Ideen/Wünsche/Überlegungen einbringen 🤝 .

    Danke dir.

    Viele Grüße
    Sven

  • Ich habe ein kleines Tool geschrieben, das eine Textdatei einliest (<Name der Farbe;Hex Code>) und sie in einer Listview farbig darstellt. Manchmal suche ich nach einer bestimmten Farbe und wenn die Liste unsortiert ist, dann ist das nicht so optimal, um die Farbe zu finden.

    Außerdem ist das ein interessantes Thema . ;)

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

  • Hi UEZ!

    Mit LAB bekommst du einen ganz guten Color-Unterschied geliefert. SQRT((L2-L1)^2 + (A2-A1)^2 + (B2-B1)^2)

    Den RGB2LAB Code hab ich von Stackoverflow, leider find ich das Original nicht mehr...

    lg

    E

  • Hi eukalyptus,

    lange nichts mehr von dir "gehört". :)

    Danke für LAB Code, sieht sehr homogen aus, nur sind die Farbgruppen relativ fragmentiert.

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

  • Ich habe ein kleines Tool geschrieben, das eine Textdatei einliest (<Name der Farbe;Hex Code>) und sie in einer Listview farbig darstellt. Manchmal suche ich nach einer bestimmten Farbe und wenn die Liste unsortiert ist, dann ist das nicht so optimal, um die Farbe zu finden.

    Interessanter Anwendungsfalls, Danke dir UEZ .

    Außerdem ist das ein interessantes Thema . ;)

    Finde ich gut 😊 .

    Ist die Pixelbreite der einzelnen Farbe bzw. die Darstellung, abhängig von der Gesamtbreite der GUI? Also falls die einzelne Farbe ein Pixel breit sein sollte, skaliert diese Breite bei resize der GUI? Ich habe mir den Code nicht genau angeschaut, muss ich zugeben. Vielleicht könnte ich es auch dort erfassen - sind nun aber nicht gerade nur 50 Zeilen Code, daher frage ich lieber direkt UEZ.

    Viele Grüße
    Sven

  • Hallo UEZ,

    ich finde das mit den "fragmentierten Farbgruppen" nicht schlimm. Im Gegenteil, Es hilft, zumindest mir, sich besser zu orientieren.

    Peter

    Hinweise auf Suchmaschinen finde ich überflüssig - wer fragt hat es nicht gefunden oder nicht verstanden. Die Antwort gibt sich oftmals schneller als der Hinweis auf Dr. Goggle & Co.

    Ab 19-10-22 ergänzt um:

    Die Welt wird nicht bedroht von den Menschen, die böse sind, sondern von denen, die das Böse zulassen. (Albert Einstein)

  • Eine Idee wäre, zuerst in HSL zu gruppieren u innerhalb mit LAB zu sortieren...

    Oder nicht immer den letzten LAB-Wert zur Suche verwenden (Zeile 95), sondern die Farbe vorgeben, zB via HUE

    ColorTable[0................X]

    HUE[0............360] -> LAB[x.............y]

  • Ist die Pixelbreite der einzelnen Farbe bzw. die Darstellung, abhängig von der Gesamtbreite der GUI? Also falls die einzelne Farbe ein Pixel breit sein sollte, skaliert diese Breite bei resize der GUI? Ich habe mir den Code nicht genau angeschaut, muss ich zugeben. Vielleicht könnte ich es auch dort erfassen - sind nun aber nicht gerade nur 50 Zeilen Code, daher frage ich lieber direkt UEZ.

    Es werden zufällig 512 Farben generiert, sortiert und dargestellt. D.h. der Farbbalken ist 512 Pixel breit und 32 Pixel hoch. Die GUI wird nicht automatisch angepasst, sondern ist manuell angepasst.


    ich finde das mit den "fragmentierten Farbgruppen" nicht schlimm. Im Gegenteil, Es hilft, zumindest mir, sich besser zu orientieren.

    Ist ja auch nicht schlimm, sondern, je nach Fall, besser oder schlechter.


    Eine Idee wäre, zuerst in HSL zu gruppieren u innerhalb mit LAB zu sortieren...

    Die Idee hatte ich auch. Ich habe noch nach der Pixeldistanz innerhalb der Gruppe sortieren lassen. Hier das Resultat:

    Code;

    Da gibt es noch Hilbert-Sort. Mal sehen, ob das Result anders wird...

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

  • Manchmal suche ich nach einer bestimmten Farbe und wenn die Liste unsortiert ist, dann ist das nicht so optimal, um die Farbe zu finden.

    Genau zu dem Zweck hatte ich das hier erstellt:

    BugFix
    22. Juli 2022 um 18:32
  • @Bugix: danke für die Info.

    Ich habe was in Freebasic geschrieben, um einfach die WinAPI besser zu lernen, da man in FB nicht den Luxus der UDFs hat. :)

    Ich habe nun die Farbtabelle erweitert und dabei ist mir aufgefallen, dass die Farben nicht mehr "so schön" angezeigt werden. Daher der Ansatz die Farben entsprechend darzustellen.

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

  • Hi!

    Das Problem besteht im Grunde darin, den 3D-Farbraum von bspw. HSL/HSV in 2D darzustellen.

    Beispiel:

    HSL sieht aktuell so aus

    sollte aber (in etwa) so aussehen. (Alle folgenden Bilder aus Wikipedia)

    Tut es aber nicht, da der größte Teil der "zufälligen" RGB-Farben (also die Grundlage) sich unterhalb der Farbfläche des Kreises (in der Kegeldarstellung HSV) befinden

    Wenn man die "Graustufen" wenigstens teilweise eliminiert (meine Methode, man könnte ja direkt V aus HSV ausfiltern^^)

    , sieht das Ergebnis etwas besser aus


    Ähnliches mit den "Zwischenfarben". Gegeben die Stufen für Blau

    Wenn man jetzt versucht, Marineblau

    in die obere Tabelle einzusortieren, dann passt das NIRGENDWO! Jedenfalls "empfindet" man(!) das so.

    Die Sortierung/Gruppierung nach "den Regeln" ist richtig! Es sieht nur falsch aus!


    //EDIT

    Etwas mit dem Grouping scheint aber auch nicht zu funktionieren, wenn man "reine" HSV/HSL-Farben verwendet, werden die Gruppen trotzdem seltsam

    AutoIt
    For $i = 0 To UBound($aColortable) - 1
        Do
            $iColor = Int(Random() * 0xFFFFFF)
            $a = RGB2HSV($iColor)
        Until $a[2] > 0.98 And $a[1] > 0.98
        $aColortable[$i] = $iColor
    Next

    führt zu

    ciao
    Andy


    "Schlechtes Benehmen halten die Leute doch nur deswegen für eine Art Vorrecht, weil keiner ihnen aufs Maul haut." Klaus Kinski
    "Hint: Write comments after each line. So you can (better) see what your program does and what it not does. And we can see what you're thinking what your program does and we can point to the missunderstandings." A-Jay

    Wie man Fragen richtig stellt... Tutorial: Wie man Script-Fehler findet und beseitigt...X-Y-Problem

    Einmal editiert, zuletzt von Andy (15. März 2023 um 11:08)

  • Sooo dann schmeiß ich auch mal meinen Hut in die Runde.

    -> Idee war: Sortiere zunächst alles heraus was nach "Graustufen" aussieht und sortiere den Rest. Dadurch hat man etwas weniger "schwarze und weiße Linien" im Regenbogen. Wirklich gut sieht das auch nicht aus, aber vielleicht inspiriert die Idee ja irgendwen :)

    M

  • Mars das Resultat gefällt mir :thumbup:

    So siehts momentan mit zufälligen Farben aus:

    So sieht es bei der Farbtabelle von Andy aus:

    Der aktuelle Code dazu:

    Ich weiß nicht, warum hier die Gruppierung nicht ganz passt. Bei der Gruppierung werden 12 + 1 Gruppen erstellt. Das +1 sind die Graustufen.

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

    4 Mal editiert, zuletzt von UEZ (16. März 2023 um 13:19)

  • Ich weiß nicht, warum hier die Gruppierung nicht ganz passt. Bei der Gruppierung werden 12 + 1 Gruppen erstellt. Das +1 sind die Graustufen.

    Darüber bin ich schon bei deinem Startpost gestolpert...den Code habe ich "natürlich" nur überflogen :D , aber offensichtlich ist da ein Fehler in der Sortierung, ggf. falsches Array bzw Index?

  • Hallo,

    vielleicht kann jemand die Formeln von CIEDE2000 verstehen und umsetzen. Möglicherweise können die Farben damit besser sortiert werden. Jedenfalls sehen diese Sortierungen für mich recht ordentlich aus.

    Übrigens, um sich den Weg zum Ziel zu erleichtern und für jeden Versuch/Jedermann immer die gleichen Ausgangsfarben zu haben, könnte man z. B. SRandom(80) oberhalb der Random()-Schleife (Zeile 13) setzen.

    Ich für meinen Teil bin nicht weit gekommen:

    Gruß, fee

  • fee danke für deinen Beitrag! :thumbup:

    Das Resultat von SortByBrightColor ist besser als das von SortByLum, was ähnlich ist.

    Die Seite von Elektrobild habe ich auch gesehen, aber ist kein Code veröffentlicht. Ich habe im Source Code geschaut, aber nicht den Code momentan noch nicht entdeckt.

    Danke.

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

  • Noch ein Versuch:


    Edit:

    Und nochwas:


  • UEZ , gerne und auch Danke fürs Lob. :)

    Den Code im SourceCode habe ich auch nicht finden können. Ich vermute, der ist in PHP geschrieben, weil die Seite jedes Mal neu geladen wird. Da kommt man dann nicht ran, außer man fragt den Admin.

    eukalyptus : Sehr schön, das SortByHUEGroup_LABLightness_V2, so sind wenigstens die Farben gut gruppiert.

    Einmal editiert, zuletzt von fee (7. April 2023 um 01:21)

  • eukalyptus das Resultat sieht echt gut aus! :thumbup:

    Ich habe mal an CIEDE2000 versucht, läuft aber irgendwie nicht wirklich.

    Vielleicht sieht jemand den Fehler...

    RGB2LAB / LAB2RGB sind von einem JS portiert zwecks Test. Output von eukalyptus' RGB2LAB Version ist identisch :!:

    Auch am Arsch geht ein Weg vorbei...

    ¯\_(ツ)_/¯

    2 Mal editiert, zuletzt von UEZ (18. März 2023 um 22:40)