Glatter Farbübergangsalgorithmus
Ich suche nach einem allgemeinen Algorithmus, um zwischen zwei Farben fließend zu wechseln.
Dieses Bild stammt beispielsweise aus Wikipedia und zeigt es ein Übergang von Orange zu Blau.
Wenn ich versuche, dasselbe mit meinem Code (C ++) zu machen, ist die erste Idee, die mir in den Sinn kam, der HSV-Farbraum, aber die nervigen Zwischenfarben tauchen auf.
Was ist der beste Weg, dies zu erreichen? Scheint mit der Verringerung des Kontrastes verbunden zu sein oder vielleicht einen anderen Farbraum zu benutzen?
5 Antworten
Ich habe in der Vergangenheit jede Menge davon getan. Die Glättung kann auf viele verschiedene Arten durchgeführt werden, aber die Art und Weise, wie sie dies wahrscheinlich tun, ist ein einfacher linearer Ansatz. Das heißt, dass sie für jede R-, G- und B-Komponente einfach die "y = m * x + b" -Gleichung herausfinden, die die zwei Punkte verbindet, und diese verwenden, um die Komponenten dazwischen herauszufinden.
> %Vor%Jede neue Farbe dazwischen ist jetzt:
%Vor%Es gibt viele mathematische Möglichkeiten, um einen Übergang zu erstellen. Was wir wirklich tun wollen, ist zu verstehen, welchen Übergang Sie wirklich sehen wollen. Wenn Sie den exakten Übergang vom obigen Bild sehen möchten, sollten Sie sich die Farbwerte dieses Bildes ansehen. Ich habe ein Programm in die Vergangenheit geschrieben, um solche Bilder zu betrachten und ihre Werte grafisch auszugeben. Hier ist die Ausgabe meines Programms für die obige Pseudofarbskala.
Basierend auf dem Blick auf die Grafik, ist es komplexer als eine lineare wie ich oben sagte. Die blaue Komponente sieht meist linear aus, die rote könnte linear nachgebildet werden, die grüne sieht jedoch eher abgerundet aus. Wir könnten eine mathematische Analyse des Grüns durchführen, um seine mathematische Funktion besser zu verstehen, und stattdessen diese verwenden. Sie können feststellen, dass eine lineare Interpolation mit einer ansteigenden Steigung zwischen 0 und ~ 70 Pixeln mit linear abnehmender Steigung nach Pixel 70 gut genug ist.
Wenn Sie auf den unteren Bildschirmrand schauen, gibt dieses Programm einige statistische Maße für jede Farbkomponente wie Min, Max und Durchschnitt sowie die Anzahl der Pixel, die das Bild gelesen hat.
Eine einfache lineare Interpolation der R, G, B Werte wird es tun.
trumpetlicks hat gezeigt, dass das von Ihnen verwendete Bild keine reine lineare Interpolation ist. Aber ich denke, eine Interpolation gibt Ihnen den Effekt, den Sie suchen. Unten zeige ich ein Bild mit einer linearen Interpolation oben und Ihrem Originalbild unten.
Und hier ist der (Python) Code, der es erzeugt hat:
%Vor% Der HSV-Farbraum ist kein sehr guter Farbraum für weiche Übergänge. Dies liegt daran, dass der h -Wert, Farbton, nur verwendet wird, um willkürlich verschiedene Farben um das "Farbrad" herum zu definieren. Das heißt, wenn Sie zwischen zwei Farben weit auseinander auf dem Rad gehen, müssen Sie durch eine Reihe anderer Farben tauchen. Nicht glatt.
Es wäre viel sinnvoller, RGB (oder CMYK) zu verwenden. Diese "Komponenten" -Farbräume sind besser definiert, um fließende Übergänge zu erzielen, da sie darstellen, wie viel von jeder "Komponente" einer Farbe benötigt wird.
Ein linearer Übergang (siehe @trumpetlicks-Antwort) für jeden Komponentenwert, R, G und B, sollte "ziemlich gut" aussehen. Alles andere als 'ziemlich gut' wird einen echten Menschen erfordern, um die Werte zu optimieren, da es Unterschiede und Asymmetrien gibt, wie unsere Augen Farbwerte in verschiedenen Farbgruppen wahrnehmen, die nicht in RBG oder CMYK (oder irgendeinem Standard) dargestellt werden. .
Das Wikipedia-Bild verwendet den von Photoshop verwendeten Algorithmus. Leider ist dieser Algorithmus nicht öffentlich verfügbar.
Ich habe das untersucht, um einen Algorithmus zu erstellen, der ein Graustufenbild als Eingabe und verwendet koloriert es künstlich nach einer Farbpalette:
■■■ Graustufeneingabe ■■■■ Ausgabe ■■■■■■■■■■■■■■■■
Wie bei vielen anderen Lösungen verwendet der Algorithmus lineare Interpolation , um den Übergang zwischen Farben zu erzielen. In Ihrem Beispiel sollte smooth_color_transition() mit den folgenden Argumenten aufgerufen werden:
Ein Vergleich der Originalvorlage VS Ausgabe aus dem Algorithmus ist unten zu sehen:
(Ausgabe)
(Original)
Die visuellen Artefakte, die in der Ausgabe beobachtet werden können, sind bereits in der Eingabe vorhanden (Graustufen). Das Eingabebild hat diese Artefakte, als es auf 189x51 geändert wurde.
Hier ist ein weiteres Beispiel, das mit einer komplexeren Farbpalette erstellt wurde:
■■■ Graustufeneingabe ■■■■■ Ausgabe ■■■■■■■■■■■■■■
Es scheint mir, als wäre es einfacher, den Farbverlauf mit RGB-Werten zu erstellen. Sie sollten zuerst die Farbänderung für jeden Wert basierend auf der Breite des Farbverlaufs berechnen. Der folgende Pseudocode müsste für R-, G- und B-Werte durchgeführt werden.
%Vor%Sie können dann jedes Pixel mit diesen Werten wie folgt rendern:
%Vor%Ich weiß, dass Sie angegeben haben, dass Sie C ++ verwenden, aber ich habe einen JSFiddle erstellt, der Ihnen bei der Arbeit mit Ihrem ersten Farbverlauf als Beispiel dient: Ссылка