Abbildung auf Farbe - uni-frankfurt.de€¦ · orange grau braun blau weiß ... Das ich aber in meinem Jahrhundert der einzige bin, der das Rechte weiß, darauf tue ich mir etwas

Prof. Dr.-Ing. Detlef Krömker

Goethe-Universität, FrankfurtGraphische Datenverarbeitung

Visualisierung

Abbildung auf Farbe

WS 2000/20012Visualisierung9. Abbildung auf Farbe© Prof. Dr.-Ing. Detlef Krömker

Rückblick

� Übersicht zur Farbwahrnehmung

� Farbmetrik� CIE XYZ, Yxy,� CIELUV, CIELAB


Übersicht

1. Nachtrag: Einige Farbwahrnehmungsphänomene

2. Abbildung nominaler Daten: Color for Labeling

3. Abbildung ordinaler Daten4. Abbildung quantitatier Daten: Farbskalen


Übersicht (Fortsetzung)

5. Zusammenfassung 6. Glossar7. Weitere Informationen8. Ausblick – Nächste Schritte


Nachtrag:Nachtrag:Nachtrag:Nachtrag:Einige Farbwahrnehmungsphänomene

Sprachen und Farbnamen, Studie von Berlin und Kay (1969): Untersuchten mehr als 100 Sprachen mit folgenden Ergebnissen:Sprachen mit 2 Farbbezeichnungen: immer schwarz und weißSprachen mit 3 Farbbezeichnungen: es kommt immer rot dazu

rot

grüngelb

gelbgrün rosalila

orangegrau

braunblauweißschwarz

GegenfarbenHellig-keit


FarbnamenStudie von Post und Green

(1986):210 mögliche Farben in 20

Größe mit schwarzem Hintergrund: Bild zeigt die Gebiete, die mit 75% Sicherheit als solche benannt wurden:

Beachte: Reine Monitorrot wurde oft als orange bezeichet

Nur 8 Farben wurden überhaupt konsistent benannt


Ortsauflösung in den Farbkanäleniso- oder equiluminate Muster

Lesen Sie weiter, um festzustellen, wie schwierig es ist und ob sie vielleicht Unterschiede erkennen können. Dies ist keineswegs sicher, aber man muss es versuchen, sonst weiß man es eben nie. Auf alles was ich als Poet geleistet habe, bilde ich mir gar nichts ein. ... Das ich aber in meinem Jahrhundert der einzige bin, der das Rechte weiß, darauf tue ich mir etwas zugute, und ich habe daher ein Bewusstsein der Superiorität über viele. Dies hat Goethe gesagt, der eine naturgemäße Ordnung der Farben suchte.


Folgerungen

� Reine chromatische Differenzen sind ungeeignet um � Formen, � Objektbewegung, � Entfernungen oder� Detailinformationen (wie Text)

zu präsentieren.� ABER: Farbe ist ein „natürliches“ Attribut von

ObjektenFarbe erregt Aufmerksamkeit

� Nahrung (Früchte, Beeren)


Noch ein kleiner Versuch


Die Farbe Braun

� BRAUN ist ein dunkles gelb.� Es gibt kein BRAUN in einer dunklen

Umgebung� BRAUN braucht eine Referenz um

wahrgenommen zu werden�� VORSICHT bei farbigen Helligkeitsskalen: � BRAUN wird u.U. nicht als dunkles Gelb

wahrgenommen.


Abbildung auf FarbeGrundsätzliche Fragen

� Welche Arten von Daten, Informationen und Eigenschaften lassen sich gut durch Farbwerte kodieren?

� Welche Arten von Zusammenhängen lassen sich aus den so dargestellten Daten identifizieren und wie effektiv sind einzelne Visualisierungsmethoden in diesem Kontext?

� Welche Formen von Farbdarstellungen sind vorbelegt und können einerseits für eine effektivere Interpretation als Metaphern genutzt werden, müssen jedoch andererseits vermieden werden, wenn diese Metapher in der speziellen Situation nicht gültig ist?


Einsatz von Farbe

� zur Unterscheidung unterschiedlicher Elemente

� zur Betonung von Elementen und Regionen

� zur Darstellung von Strukturen und Objekten in einer Form, wie wir sie auch in der Natur wahrnehmen

� zur Repräsentation von symbolischen Assoziationen

� zum Ausdruck von Stimmungen

FragenFarbästethik wird hiernicht behandelt!

Fragen zurExpressivität, Effektivität werden behandelt.


Farbe und nominale Daten

� Mögliche Aufgaben: Suchen und Identifizieren, „Labeling“

� Farben müssen leicht unterschieden und erinnert werden

� � man wähle Farben, die einen deutlich trennenden Charakter haben


Kriterien

1. Verschiedenheit (distinctness)� Kodierungen mit Farbabständen zwischen

45 und 65 in CIELUV-Farbdifferenzeinheiten haben sich als effektiv erwies.

� Beachte: Große Farbabstände werden von CIELUV oder CIELAB leicht fehlerhaft repräsentiert.

� Für schnelle Unterscheidungen soll eine Farbe außerhalb der konvexen Hülle der benachbarten Farben liegen


Konvexe Hülle z.B. im CIELUV-Diagrammzur „schnellen“ Unterscheidung [Bauer]

Grau liegt in der konvexen Hülle

Rot liegt außerhalb der konvexen Hülle

Regel kann auch im 3D (z.B. YU*V*) benutzt werden!


Kriterien

2. Ausgezeichnete Farbtöne(Unique Hues) sind:� Schwarz – Weiß� Rot – Grün – Blau – GelbEmpfehlung: aus keiner Kategorie 2 Farben

wählen (z.B. zwei Grüntöne) (auch wenn sie farbmetrisch einen großen Abstand aufweisen).


Kriterien

3. HintergrundkontrastDieselben Graphiken werden oft auf verschiedenen

Hintergründen oder Umgebungen benutzt: durch Simultankontrast ergeben sich ggf. stark verschiedene Farbwahrnehmungen.� wenige Farben benutzen!� keine Farben nutzen, die nur Chrominanz-

unterschiede aufweisenMan kann diesen Effekt reduzieren, wenn man um die

Farbflächen einen neutralen (z.B. weißen oder schwarzen Rand) legt. (Genutzt z.B. bei Signallichtern)


Kriterien

4. Farbsehschwächen berücksichtigenam häufigsten Rot-Grün-Sehschwäche

Bezeichnung Effekt Häufigkeit

Ursprung derVerwechslungsgeraden

Unbunt

Protanopie Rot-Blindheit ca. 1% xp = 0.7635 yp = 0.2365 494 nm

Deuteranopie Grün-Blindheit ca. 5-6% xd = 1.4000 yd = -0.4000 499 nm

Tritanopie Blau-Gelb-Blindheit

0.004% xt = 0.1748 yt= 0.0000 570 nm

Monochromasie

Farbenblindheit 0.003%


Verwechslungsgerade im Falle der Deuteranopie

(Grün-Blindheit)

Beispiel:Verwechselungsgerade für Deuteranope: Farbvalenzen, die sich auf einer Geraden durch denspezifischen Ursprung befinden,können von Deuterapopen nicht unter-schieden werden.

Eine Berücksichtigung dieserFehlsichtigkeiten reduziert dienutzbaren Farben erheblich.


Kriterien

5. Anzahl der nutzbaren FarbenWenn „paralleles Suchen“ ausgenutzt werden soll (schnelles Unterscheiden), dürfen nicht mehr als 5-8 (10) verschiedene Farben eingesetzt werden [Healey] oder „The Magical Number Seven“ [Miller]


Kriterien6. Flächengröße

Minimale Größe von Farbstimuli für verschiedene AufgabenArt der

dargestelltenInformation

Vergleichende Farbunter-scheidung

(2-7 Farben)

Absolute Farbidentifi-

zierung (2-4 Farben)

Helligkeit des Symbols

kritischeInformation,

variable Position

≥ 20’ ≥ 20’ ≥ 1 fL

kritischeInformation,

feste Position≥ 16’ ≥ 20’ ≥ 1 fL

unkritischeInformation ≥ 12’ ≥ 16’ ≥ 1 fL


Kriterien6. Flächengröße – Ergänzende Regeln

für gelb-blau Differenzen sollten die Flächen sogar mindestens ein halbes Grad groß sein: kleine Flächen � stark gesättigte Farben

mit möglichst großemFarbabstand

größere Flächen � weniger gesättigte Farbenmit geringerem Farbabstand möglich


KriterienBeispiel für die Nutzung von Farben bei großen Flächen:Geringe Sättigunggroße Helligkeit

Interferenzen mit schwarzen Detailinformati-onen (Text) sind gering

Import java.applett.Applett;Import jawa.awt.Graphics;Import jawa.awt.Color

Public class ColorText extends Applett{

public void init (){

red = 100;green = 255;blue = 20;

}

public void paint (Graphics g){

Gr.setColor (new Color (red,green, blue));Gr.drawString (“Colored Text“.30,50);

}

private int red;private int green;private int blue;

}


Kriterien

Import java.applett.Applett;Import jawa.awt.Graphics;Import jawa.awt.Color

Public class ColorText extends Applett{

public void init (){

red = 100;green = 255;blue = 20;

}

public void paint (Graphics g){

Gr.setColor (new Color (red,green, blue));Gr.drawString (“Colored Text“.30,50);

}

private int red;private int green;private int blue;

}


Kriterien7. Konventionen (kulturell bedingt)

rot = heiß, Gefahr, Stopp...blau = kalt, frisch, ...grün = Leben, Gehen, Frei, ...


Farbempfehlungen für Farbkodierungen (nach Ware)

1. Rot2. Grün3. Gelb4. Blau5. Schwarz6. Weiß

7. Rosa8. Cyan9. Grau10. Orange11. Braun12. Lila

Bei weniger als sechs Werten wähle man nur aus 1...6


Empfohlene Grundfarben für Farbkodierungen

(nach Smallman)

Farbbezeichnung CIE-x-Wert CIE-y-Wert(1) rot 0.51 0.32

(7) pink 0.35 0.30

(12) lila 0.27 0.20

(4) blau 0.19 0.25(2) grün 0.31 0.52

(3) gelb 0.46 0.48

(10) orange 0.54 0.40(11) braun 0.46 0.38

Zahlen in Klammern entsprechen der Nummerierung nach Ware


Erweiterte Farbtabelle(durch Interpolation)

Farbbezeichnung CIE-x-Wert CIE-y-Wertrot 0.51 0.32

rot-pink* 0,43 0,31pink 0.35 0.30

pink-lila* 0,31 0,25lila 0.27 0.20

lila-blau* 0,23 0,23blau 0.19 0.25

(8) blau-grün* 0,25 0,39grün 0.31 0.52

grün-gelb* 0,39 0,50gelb 0.46 0.48

gelb-orange* 0,50 0,44orange 0.54 0.40

orange-rot* 0,53 0,36* durch Interpolation gewonnen


Position der Farben der Erweiterten Farbtabelle in der Normfarbtafel

Kritik:Farbabstand besserIm u‘v‘-Diagrammbeurteilen


Zusammenfassung

� Bei der visuellen Suche nach Zielobjekten sind Farbkodierungen effektiver als monochromatische Darstellungen (hier unterscheidet und bezeichenet man höchstens 4 Helligkeiten: schwarz – dunkelgrau – hellgrau – weiß

� Wenn es auf Schnelligkeit ankommt, wähle man die Farben nach Bauer`s Regel (Konvexe Hülle)

� Man wähle die Farbflächen groß genug!


Ordinale Daten

Je nach Aufgabe:� Suchen und Identifizieren:

� Wahl wie bei nominalen Daten� Übersicht oder Vergleichen:

� Abbildung auf Farbskalen wie bei quantitativen Daten

z.B. modifizierter FarbkreisWerden diese Größen dann auch als

quantitative Größen interpretiert?


Quantitative Daten

Beachte: Immer nur einen Teil der Buntton-Skala Benutzen

Die zwei unteren Verfahren erlauben den Einsatz vonFarbtabellen (Color-Look-Up-Table)


Farbskalen

� Grauwertskalen Helligkeit� Farbskalen Sättigung und Farbton

= Farbartmöglich: � Abbildung auf RGB

(i.d.R. nicht effizient und wenig effektiv)� Abbildung auf HSV, HLS, o.ä. möglich

Spezielle Farbskalen i.d.R. effizienter


Grauwertskalen

� Man verwende empfindungsmäßig gleichabständige Stufen, etwa nach folgender Formel:

� Berücksichtigt man die nötige Gammakorrektur (für Farbmonitore 2,3 ... 2,8), so erhält man:

� Kuriosum: Diese Zwei Effekte korrigieren sich fast selbst!

( ) Stevens nach 300 ≈−⋅��

��

�+= νν

mitYYniYY ni

( )00 YYniYY ni −⋅��

��

�+=γν


Beispiele für spezielle Farbskalen

Farbton-Skala (Hue)

Regenbogenskala

Temperaturfarbskala

Magenta-Farbskala


Regenbogenfarbskala

� Im Gegensatz zum natürlichen Regenbogen, bei dem auch die Helligkeit variiert wird (Sättigung kaum), hält man die Helligkeit hier üblicherweise konstant.

� Subjektive „Natürlichkeit“ der Ordnung ist zweifelhaft, wird aber gelegentlich behauptet (findet man häufig in der Physik)

� Die sogenannte modifizierte Regenbogenskala nutzt zusätzlich Helligkeiten.


Temperatur-Farbskala(Heated Object Scale)

� Wird als natürlich empfunden

� Modifiziert Helligkeit und Farbe

( ) ( ) ( ) ( )

( )

( )

( )��

��

�

>−⋅

≤=

��

�

��

�

�

>

≤<−⋅

≤

=

��

��

�

>

≤⋅=

⋅+⋅+⋅=

3223320

321

32

3113

310

311313

3

2

1

321

xfürx

xfürxa

xfür

xfürx

xfür

xa

xfür

xfürxxa

BxaGxaRxaxc


Magenta-Farbskala

� Nach Levkowitz� Versucht auszunutzen,

daß der Mensch für Bunttonunterschiede im Magentabereich besonders empfindlich ist

� Kodierung über Farbton und Helligkeit

( ) ( ) ( ) ( )

( )

( )

( )

��

�

��

�

�

>

≤<−⋅

≤

=

��

��

�

>−⋅

≤=

��

��

�

>

≤⋅=

⋅+⋅+⋅=

321

32

3113

310

3223320

311313

3

2

1

321

xfür

xfürx

xfür

xa

xfürx

xfürxa

xfür

xfürxxa

BxaGxaRxaxc


Zwei wesentliche Fragestellungen

1. Bleiben „Spitzen“, „Täler“ oder „Kämme“ = Strukturen in den Werten wahrnehmbar?

2. Bleiben bestimmte Klassifizierungen wahrnehmbar (kann man Datenwerte einfach aus der Karte ablesen)?


Beispiel zur Wahrnehmung von Formen = Strukturen


Einige Regeln für den Einsatz von Farbskalen

1. Auch hier gilt es u.U. Farbfehlsichtigkeit zu berücksichtigen. Details findet man in [Meyer, Greenberg 1988]

Beispiele:



2. Wenn eine wahrnehmungsmäßig geordnete Sequenz benötigt wird, bevorzuge man eine

� Grauwertskala,� Rot-Grün Skala� Gelb-Blau Skala� Sättigungsskala



3. Verschiedene Skalen sind für verschiedene Detailgrade unterschiedlich gut geeignet:Großer Detailreichtum � LuminanzskalenGeringerer Detailreichtum � Farton- oder

Sättigungsskalen



4. Uniforme Skalen können durch Verwendung von CIELUV (CIELAB) gewonnen werden.

Achtung: Manchmal sollen spezielle Eigenschaften durch nichtuniforme Skalen hervorgehoben werden.



5. Für ein Ablesen von Datenwerten sollte man Farbskalen benutzen, die durch viele Farbarten charakterisiert ist(Minimiert Fehler durch Farbkontrast)

6. Oft ist eine Spiralskala, z.B. im CIELUV-Farbraum sehr gut: alle Farben unterscheiden sich auch in der Helligkeit



7. Durch Wahrnehmungseffekte erscheinen kontinuierliche Skalen oft diskret.

8. Um Formen und Strukturen in Wertefeldern wahrnehmbar darzustellen, ist die Betrachtung der Daten als Höhenfeld und ein Standardshading der CG oft effizienter als Farbskalen.


Zusammenfassung

� Farbe ist ein sehr breites und komplexes Gebiet

� Viele Wahrnehmungseffekte erklären sich durch die Gegenfarbentheorie

� Luminanzunterschiede sind mit einer wesentlich höheren Ortsauflösung wahrnehmbar.

� Farbe ist effektiv für nominale, ordinale und quantitative Wertebereiche


Glossar


Weitere Informationen

[Meyer, Greenberg 1988]: Color-defective vision and computer graphics displays, IEEE Computer Graphics and Applications, September 1988, pp. 28-40.


Ausblick – Nächste Schritte� Mittwoch 13.12.2000� Im Rahmen des CG Kolloquiums

Ulrike SpierlingErzählen Spielen und sinnliche ErfahrungAuf der Suche nach neuen Formen für Benutzungsschnittstellen

� Nächste WocheVideo „The History of Computergraphics“

im AGC-Seminarraum� Im Neuen Jahr: Visuelle Aufmerkamkeit,

Information that pops out, Texturen, Glyphen, ...

Documents

Abbildung auf Farbe - uni-frankfurt.de€¦ · orange grau braun blau weiß ... Das ich aber in meinem Jahrhundert der einzige bin, der das Rechte weiß, darauf tue ich mir etwas