Wie vermeiden Sie auffällige Farbbänder in Farbverläufen?

Das ist also mehr wissenschaftliche Visualisierung als Grafikdesign, aber ich denke, die Theorie ist die gleiche. In Colormaps, die zur Visualisierung von Daten verwendet werden, gibt es oft Farbbänder, die hervorstechen, obwohl sie es nicht sollten. Ich glaube, sie sind eine Form von Mach-Bands ?

Zum Beispiel habe ich diese bipolare Farbkarte verwendet und sie erzeugt Bilder wie diese:

Geben Sie hier die Bildbeschreibung ein

Es ist fast wie ein Neonorange-Ring um 0,2 und ein ähnlicher für Blau um -0,2. Hier ist ein Diagramm der RGB-Komponenten und eine Berechnung der relativen Leuchtdichte in Schwarz:

Geben Sie hier die Bildbeschreibung ein

Ich habe es manuell optimiert, um zu versuchen, die Bänder loszuwerden, und es war einigermaßen erfolgreich, aber ich verstehe die Theorie dahinter nicht wirklich:

Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

Es ist besser, aber ich sehe immer noch Bands darin.

Für ein weiteres Beispiel, für die heiße Farbkarte, dachte ich, ich müsste vielleicht das Luminanzdiagramm linearisieren, um Streifenbildung zu verhindern, aber es hat nicht wirklich funktioniert:

Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

Die gelben und orangefarbenen Bänder sind noch da, sie sind nur verschoben und ein wenig verschmiert. Diskontinuitäten im Leuchtdichtediagramm sind also nicht die Ursache des Problems.

Wie kann ich ohne Streifenbildung nahtlos durch Farben wechseln? Gibt es Regeln zum Erstellen glatter Kurven durch den Lab-Farbraum oder so? ( Bearbeiten: Ooh, ich habe ein Beispiel dafür gefunden : "Die Farbskala wird mit dem Farbraum L a b * berechnet. Sie folgt einer gleichmäßigen Rampe entlang der L * -Richtung und folgt einem halbkreisförmigen Pfad in a * -b * Flugzeug.")

Update: Hier ist ein Diagramm dieser Farbkarte im RGB-Würfel, das die scharfen Winkel zeigt, von denen user568458 spricht:

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass ich einen Kommentar zu Wahrnehmungsbändern (unten) abgegeben habe, aber das war, bevor ich mich wirklich mit der Frage befasst habe. Ich sehe, Sie sprechen davon, wie zwei bestimmte Farbbereiche hervorstechen.
Schönes Diagramm! Genau das meine ich mit scharfen Ecken, ich habe mir einen Farbwürfel wie diesen oder so vorgestellt . Ich habe meiner Antwort eine grobe, aber hoffentlich nützliche Illustration dessen hinzugefügt, was ich meine. (Natürlich gibt es auch das zweite Paar scharfer Ecken an den Punkten, an denen der rote Pfad Grün hinzufügt, um Weiß zu erreichen, und wo der blaue Pfad Rot hinzufügt, um Weiß zu erreichen.)

Antworten (2)

Vergessen Sie nicht, dass selbst wenn Sie mit LAB-Farbwerten arbeiten, RGB-Werte ausgegeben werden müssen, um sie auf einem Bildschirm anzuzeigen. Irgendwann muss es den roten, grünen und blauen Pixeln eines Bildschirms sagen, was sie tun sollen.

Betrachten Sie es in RGB-Begriffen, und die Ursache der Bänder ist eigentlich ziemlich einfach.

Nehmen Sie einen Farbwähler und sehen Sie sich die Farbverläufe an, und Sie werden feststellen, dass sich die Bänder um die Punkte befinden, an denen sich die Art des Farbverlaufs ändert:

  • Im Rot ist es ungefähr dort, wo es sich von der sanften Erhöhung des R im RGB zum Hinzufügen von G ändert, um gelb zu werden - um #FF0000 bis #FF2500
  • Im Blau ist es ungefähr dort, wo es sich von der sanften Erhöhung des B im RGB zum Hinzufügen von G ändert, um Cyan zu werden - etwa #0000FF bis #0025FF

Und ebenso mit den unteren Diagrammen, die Gelb zu Weiß hinzufügen: Sie sind im Wesentlichen drei Farbverläufe, die miteinander verbunden sind. Am Beispiel des roten Farbverlaufs:

  • es ist #000000 bis #FF0000 (Erhöhung der Helligkeit in HSB-Begriffen, Erhöhung des Rotkanals in RGB)
  • dann #FF0000 zu #FFFF00 (Ändern des Farbtons in HSB-Begriffen, Erhöhen des Grünkanals in RGB)
  • dann #FFFF00 zu #FFFFFF ( Sättigung in HSB-Begriffen ändern, blauen Kanal in RGB erhöhen)

Geben Sie hier die Bildbeschreibung ein

Es wird also immer einen sichtbaren Join geben, wenn es so eingerichtet ist. Wenn Genauigkeit und Linearität das Hauptziel sind, ist es in der Regel am besten, einen Gradienten einfach zu halten und ein Merkmal ständig zu variieren (es sei denn, Sie möchten Streifenbildung, z. B. bei einigen Arten von Gehirnscans).

Wenn Sie jedoch entschlossen sind, das breitere Spektrum zu durchlaufen (es sieht gut aus), würde ich entweder damit beginnen, den zweiten Kanal hinzuzufügen, bevor der erste vollständig ist, einen Überbrückungsabschnitt zwischen den Farbverläufen bilden oder einen haben leichte umgekehrte S-förmige Kurve zu der Rate, mit der der zweite Kanal hinzugefügt wird (wahrscheinlich beide).

Also statt:

  • 000000 bis #FF0000, 100 % Schwarz bis 100 % Rot

  • FF0000 bis #FFFF00, 100 % rot bis 100 % gelb

  • FFFF00 bis #FFFFFF, 100 % gelb bis 100 % weiß

... es könnte sein (nur Vermutungen aus dem Kopf, muss angepasst werden):

  • 000000 bis #E90000, 100 % schwarz bis leuchtend rot

  • E90000 bis #FF2500, (SHORT BRIDGE) hellrot (dunkel) bis hellrot (leicht orange)

  • FF2500 bis #FFE900, leuchtend rot (leicht orange) bis leuchtend gelb (leicht orange)

  • FFE900 bis #FFFF25, (SHORT BRIDGE) hellgelb (leicht orange) bis hellgelb (hell)

  • FFFF25 bis #FFFFFF, hellgelb (hell) bis 100 % weiß

...dann die Kurven der einzelnen Abschnitte nach Geschmack anpassen :-)

Bearbeiten: Hier ist eine Demonstration des Vorschlags zum Abschneiden der Ecken. Es ist nicht perfekt – es ist ziemlich unraffiniert, nur etwas, das ich mit dem Illustrator-Mischwerkzeug in wenigen Minuten nach Augenmaß zusammengefügt habe (nicht gemischte Objekte unten, um die Farbpunkte anzuzeigen). Jedes Segment des Farbverlaufs zwischen jedem Farbpunkt ist zu 100 % linear, während Sie wahrscheinlich etwas Runderes wünschen würden - und als Ergebnis können Sie bei genauem Hinsehen Bänder erkennen.

Die Ergebnisse variieren natürlich zwischen den Monitoren: Auf meinem "guten" Monitor ist es glatt; Auf dem "schlechten" Monitor, den ich zum Überprüfen der Widerstandsfähigkeit von Webbildern verwende (wo die ursprünglichen Bänder nicht sehr deutlich zu sehen sind), erscheinen Orangen immer gedämpft, wodurch die roten und gelben Bereiche heller erscheinen als das verbindende Orange, wodurch das Rot überbetont wird und gelbe Bereiche - aber Sie können immer noch sehen, dass der "Rand" der ursprünglichen Bänder weitgehend verschwunden ist.

In jedem Fall können Sie im Vergleich zu den ursprünglichen Farbverläufen den Unterschied deutlich erkennen. (Was die Mathematik dahinter betrifft - keine Ahnung, ich bin kein Mathematiker, aber hoffentlich hilft dies, das Problem und die Lösung zu identifizieren)

Geben Sie hier die Bildbeschreibung ein

Der andere Vorteil ist, dass Sie das klarere Schwarz > einen Kanalübergang mehr verwenden können.

Oder die gleiche Idee auf einem RGB-Farbwürfel (verzeihen Sie die Grobheit, es soll demonstrativ nicht genau sein ...):

Geben Sie hier die Bildbeschreibung ein

Dies zeigt wahrscheinlich deutlicher, was ich meinte, als ich sagte, dass der Beispielverlauf verbessert werden kann, indem die Übergänge von Hauptsegmenten zu Segmenten zum Schneiden von Ecken glatt und nicht eckig gemacht werden.

also tldr; Vermeiden Sie Werte von 255 für R,G,B-Kanäle (?)
@horatio nicht wirklich nein, eher wie tldr; Vermeiden Sie scharfe Ecken zwischen Abschnitten eines Farbverlaufs
Es hängt alles vom Farbraum ab, der für die Ausgabe verwendet wird - Sie würden die gleichen Bänder im Druckdesign sehen, wenn Sie einen Farbverlauf hätten, der beispielsweise von reinem Weiß über reines Magenta zu reinem Violett (100 % Magenta und Cyan) zu reinem Schwarz ( aus 100% C,m,k)
Eher "vermeide scharfe Ecken, während du dich durch den HSB-Raum bewegst"? Aber wenn ich versuche, eine kubische Interpolation oder so etwas zu machen, gehe ich am Ende aus dem HSB-Raum heraus, was dann die Werte beschneidet und sowieso schlechte Dinge verursacht. In meinem zweiten Beispiel mache ich das, was Sie zum Hinzufügen von Überbrückungsabschnitten empfehlen, aber es funktioniert nicht perfekt. Es sieht immer noch wie ein gelber Klecks in einem rötlich-orangen Klecks mit einem Heiligenschein um ihn herum aus, anstatt wie ein sanft variierender Farbwechsel.
Das sieht auf jeden Fall besser aus. Hier ist der Code zum Generieren des Kurvenbilds: gist.github.com/endolith/2879736#file-colormap_curve-py
Ich sehe immer noch Bänder in Ihren Ecken an den Ecken, aber sie sind weniger stark, also scheint es das Wichtigste zu sein, Ecken ganz zu vermeiden und glatte Kurven zu verwenden, ob in RGB oder Lab oder wo auch immer. Ich denke, eine Ecke in einem wird unabhängig davon eine Ecke in einem anderen sein. Hier ist eine Reihe verschiedener thermischer Farbkarten, die auf die gleiche Weise gezeichnet wurden: flic.kr/p/dYGXUr flic.kr/p/c7YGZo
Hier ist ein Versuch, stattdessen eine Bezier-Kurve zu verwenden: flic.kr/p/e1bcFf flic.kr/p/e15wik
siehe auch diese Version, hotdie abgerundete Ecken verwendet: gist.github.com/endolith/74275dc8fa2bb9a78266 besser, aber nicht großartig. Das Erstellen glatter Kurven (mit glatten Bogenlängenfunktionen?) Im Farbraum L a b ist meiner Meinung nach am besten

Vielleicht könnte Ihnen das helfen, bei mir funktioniert es, aber ich kenne keinen manuellen Weg, dies zu erreichen.

http://nomorebanding.com/

Das ist nicht die gleiche Art von Banding, und Dithering ist in diesem Zusammenhang sowieso nicht möglich. Ich denke, ich spreche mehr von Wahrnehmungsbändern in einem glatten Farbverlauf, während es in Ihrem Link um Streifenbildung aufgrund der Quantisierung der Farben geht.
die Wahrnehmungsbänder stammen von der Farbquantisierung. Es ist ein Problem mit der 8-Bit-pro-Pixel-Darstellung. Ich weiß nichts über das Plug-In, aber die Verwendung von RGB mit 16 bpp beim Produzieren von Farbverläufen und das anschließende Downsampling auf 8 bpp führt zu weitaus besseren Ergebnissen mit weitaus weniger Streifenbildung als die Erstellung in 8 bpp.
@horatio: Nein, die Bänder stammen von der Kurve, die scharfe Ecken nimmt, wenn sie sich durch den Wahrnehmungsfarbraum bewegt. In meinem Beispiel ist es insbesondere das Chroma, das an diesen Ecken einen Höhepunkt erreicht.
Wie vermeiden Sie auffällige Farbbänder in Farbverläufen?
AntwortenHierDatenschutz-Bestimmungen1y, 0v