Comment éviter les bandes de couleur proéminente dans les dégradés?

13

Il s'agit donc d'une visualisation plus scientifique que de la conception graphique, mais je pense que la théorie est la même. Dans les cartes de couleurs utilisées pour visualiser les données, il y a souvent des bandes de couleur qui ressortent alors qu'elles ne devraient pas. Je pense que c'est une forme de groupes Mach ?

Par exemple, j'ai utilisé cette palette de couleurs bipolaire et elle produit des images comme celle-ci:

entrez la description de l'image ici

C'est presque comme un anneau d'orange néon autour de 0,2, et un semblable pour le bleu autour de -0,2. Voici un tracé des composants RVB et un calcul de la luminance relative en noir:

entrez la description de l'image ici

Je l'ai modifié manuellement pour essayer de me débarrasser des groupes, et j'ai réussi quelque peu, mais je ne comprends pas vraiment la théorie derrière:

entrez la description de l'image ici

entrez la description de l'image ici

C'est mieux, mais je vois toujours des groupes dedans.

Pour un autre exemple, pour la palette de couleurs chaude, j'ai pensé que je devais peut-être linéariser le tracé de luminance pour éviter les bandes, mais cela n'a pas vraiment fonctionné:

entrez la description de l'image ici entrez la description de l'image ici

Les bandes jaunes et oranges sont toujours là, elles sont juste déplacées et tachées un peu. Les discontinuités dans le tracé de luminance ne sont donc pas la cause du problème.

Comment effectuer une transition en douceur entre les couleurs sans bandes? Existe-t-il des règles pour créer des courbes lisses dans l' espace colorimétrique Lab ou quelque chose? ( Edit: Ooh, j'ai trouvé un exemple pour cela : "L'échelle de couleur est calculée en utilisant l' espace colorimétrique L a b *. Elle suit une rampe uniforme le long de la direction L *, et elle suit un chemin semi-circulaire dans le a * -b * avion.")

Mise à jour: Voici un tracé de cette palette de couleurs dans le cube RVB, montrant les angles vifs dont parle user568458:

entrez la description de l'image ici

endolith
la source
1
note, j'ai fait un commentaire sur les bandes perceptuelles (ci-dessous), mais c'était avant de vraiment regarder la question. Je vois que vous parlez de la façon dont deux gammes de couleurs particulières se distinguent.
horatio
1
Joli diagramme! C'est exactement ce que je veux dire par des angles vifs, j'imaginais un cube de couleur comme celui-ci ou comme celui-ci . J'ai ajouté une illustration grossière mais si tout va bien utile du genre de chose que je veux dire à ma réponse. (bien sûr, il y a aussi la deuxième paire de coins vifs aux points où le chemin rouge ajoute du vert pour atteindre le blanc, et où le chemin bleu ajoute du rouge pour atteindre le blanc)
user56reinstatemonica8

Réponses:

6

N'oubliez pas que, même si vous travaillez avec des valeurs de couleurs LAB, des valeurs RVB doivent être émises pour les afficher sur un écran. À un moment donné, il doit indiquer aux pixels rouges, verts et bleus d'un écran quoi faire.

Regardez-le en termes RVB, et la cause des bandes est en fait assez simple.

Prenez un sélecteur de couleurs et regardez les dégradés, et vous remarquerez que les bandes sont autour des points où la nature du dégradé change:

  • Dans le rouge, c'est autour de l'endroit où il passe de l'augmentation progressive du R dans le RVB à l'ajout de G pour devenir jaune - autour de # FF0000 à # FF2500
  • Dans le bleu, c'est autour de l'endroit où il passe de l'augmentation progressive du B dans le RVB à l'ajout de G pour devenir cyan - autour de # 0000FF à # 0025FF

Et de même avec les tracés du bas, ajoutant du jaune au blanc: ce sont essentiellement trois dégradés réunis. En utilisant le dégradé rouge comme exemple:

  • c'est # 000000 à # FF0000 (augmentation de la luminosité en termes HSB, augmentation du canal rouge en RVB)
  • puis # FF0000 à # FFFF00 (modification de la teinte en termes HSB, augmentation du canal vert en RVB)
  • puis # FFFF00 à #FFFFFF (modification de la saturation en termes HSB, augmentation du canal bleu en RVB)

entrez la description de l'image ici

Il y aura donc toujours une jointure visible, si c'est comme ça qu'elle est configurée. En règle générale, où la précision et la linéarité sont le principal objectif, il est préférable de garder un dégradé simple, en faisant varier une caractéristique en permanence (sauf si vous voulez des bandes, par exemple sur certains types de scintigraphie cérébrale).


Cela dit , si vous êtes déterminé à parcourir le spectre plus large (cela semble bon), je chercherais à commencer par ajouter le deuxième canal avant la fin du premier, formant une section de pontage entre les gradients, ou ayant un légère courbe en forme de S inversée à la vitesse à laquelle le deuxième canal est ajouté (probablement les deux).

Donc au lieu de:

  • 000000 à # FF0000, 100% noir à 100% rouge

  • FF0000 à # FFFF00, 100% rouge à 100% jaune

  • FFFF00 à #FFFFFF, 100% jaune à 100% blanc

... ça pourrait l'être (devine juste du haut de ma tête, aura besoin d'un ajustement):

  • 000000 à # E90000, 100% noir à rouge vif

  • E90000 à # FF2500, (SHORT BRIDGE) rouge vif (foncé) à rouge vif (légèrement orange)

  • FF2500 à # FFE900, rouge vif (légèrement orange) à jaune vif (légèrement orange)

  • FFE900 à # FFFF25, (SHORT BRIDGE) jaune vif (légèrement orange) à jaune vif (clair)

  • FFFF25 à #FFFFFF, jaune vif (clair) à 100% blanc

... puis ajustez les courbes de chaque section selon vos goûts :-)


Edit: Voici une démonstration de la suggestion de "couper les coins". Ce n'est pas parfait - c'est assez non raffiné, juste quelque chose que j'ai assemblé à l'œil en quelques minutes en utilisant l'outil de fusion Illustrator (objets non mélangés en bas pour montrer les points de couleur). Chaque segment du dégradé entre chaque point de couleur est 100% linéaire, alors que vous voudriez probablement quelque chose de plus arrondi - et par conséquent, si vous regardez attentivement, vous pouvez repérer des bandes.

Les résultats varient naturellement d'un moniteur à l'autre: sur mon «bon» moniteur, c'est fluide; sur le `` mauvais '' moniteur que j'utilise pour vérifier la résilience des images Web (où les bandes originales ne s'affichent pas très clairement), les oranges apparaissent toujours atténuées, ce qui fait que les ares rouge et jaune semblent plus brillantes que l'orange de jonction, mettant l'accent sur le rouge et les zones jaunes - mais vous pouvez toujours voir que le «bord» des bandes originales a largement disparu.

Quoi qu'il en soit, par rapport aux dégradés d'origine, vous pouvez clairement voir la différence. (quant aux mathématiques derrière cela - aucune idée, je ne suis pas mathématicien, mais j'espère que cela aide à identifier le problème et la solution)

entrez la description de l'image ici

L'autre avantage est que vous êtes libre d'utiliser davantage la transition noir> un canal plus claire.


Ou la même idée sur un cube couleur RVB (pardonnez la grossièreté, il est destiné à être démonstratif pas précis ...):

entrez la description de l'image ici

Cela montre probablement plus clairement ce que je voulais dire lorsque j'ai dit que l'exemple de dégradé peut être amélioré en rendant les transitions des segments principaux aux segments coupants en coins lisses plutôt qu'angulaires.

user56reinstatemonica8
la source
donc tldr; éviter les valeurs de 255 pour les canaux R, G, B (?)
horatio
2
@horatio pas vraiment non, plus comme tldr; éviter les angles vifs entre les sections d'un dégradé
user56reinstatemonica8
Tout dépend de l'espace colorimétrique utilisé pour la sortie - vous verriez les mêmes bandes dans la conception d'impression si vous aviez un dégradé qui allait par exemple du blanc pur au magenta pur au violet pur (100% magenta et cyan) au noir pur ( 100% C, m, k)
user56reinstatemonica8
Plus comme "éviter les angles vifs en se déplaçant dans l'espace HSB"? Mais si j'essaie de faire une interpolation cubique ou quelque chose du genre , je finis par sortir de l'espace HSB, qui écrête ensuite les valeurs et provoque quand même de mauvaises choses. Dans mon deuxième exemple, je fais en quelque sorte ce que vous recommandez pour ajouter des sections de pontage, mais cela ne fonctionne pas parfaitement. Il ressemble toujours à une goutte de jaune à l'intérieur d'une goutte d'orange rougeâtre avec un halo autour, au lieu d'un changement de couleur variant en douceur.
endolith
1
Voici une tentative en utilisant une courbe de Bézier à la place: flic.kr/p/e1bcFf flic.kr/p/e15wik
endolith
1

Peut-être que cela pourrait vous aider, cela fonctionne pour moi, mais je ne connais pas de méthode manuelle pour y parvenir.

http://nomorebanding.com/

Raul Varela
la source
Ce n'est pas le même type de bande, et le tramage n'est pas possible dans ce contexte, de toute façon. Je suppose que je parle plus de bandes perceptuelles dans ce qui devrait être un dégradé lisse, alors que votre lien concerne les bandes dues à la quantification des couleurs?
endolith
1
les bandes perceptuelles proviennent de la quantification des couleurs. C'est un problème avec la représentation 8 bits par pixel. Je ne sais rien du plug-in, mais l'utilisation de 16bpp RVB lors de la production de dégradés, puis le sous-échantillonnage à 8bpp produira de bien meilleurs résultats avec beaucoup moins de bandes que de les construire en 8bpp.
horatio
@horatio: Non, les bandes proviennent de la courbe prenant des angles vifs lorsqu'elle se déplace dans l'espace colorimétrique perceptuel. Plus précisément, dans mon exemple, c'est le chroma qui atteint un pic à ces coins.
endolith