Hong Kong University of Science and Technology Outline Human perception for patterns Illusion Color Visualization is really about external cognition that is how resources outside the mind can be used to boost the cognitive capabilities of the mind ID: 783124
Download The PPT/PDF document "Perception and Color Huamin Qu" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Perception and Color
Huamin QuHong Kong University of Science and Technology
Slide2Outline
Human perception for patternsIllusionColor
Slide3“Visualization is really about external cognition, that is, how resources outside the mind can be used to boost the cognitive capabilities of the mind.”
Stuart Card
Slide4What is Cognition?
Slide5https://www.youtube.com/watch?v=aS-
vzPuZzuk https://www.youtube.com/watch?v=EOeo8zMBfTA
Slide6Forced-Perspective Illusions
Ames room
Image Courtesy of IllusionWorks, L.L.C.
Slide7Selective Attention Test
https://www.youtube.com/watch?v=vJG698U2Mvo
Slide8Human Visual System
High bandwidth to the brain (70% of all receptors ,40+% of cortex, 4 billion neurons)
Can see much more than we can mentally image
“
A picture is worth a thousand words
”
- Chinese Proverb
Can perceive patterns
“The purpose of computing is insight, not numbers”
-
Richard Hamming
Slide9Visual Information Processing
Verbal Working
Memory
Features
Patterns
Objects
Interaction with data
Slide10Static Patterns
Gestalt Laws [Max Westheimer, Kurt Koffka
, and Wolfgang Kohler (1912)
]
Wolgang
Köhler
1887-1967
Kurt
Koffka
1886-
1941
Max Wertheimer
1880-1943
Slide11Proximity
Emphasize relationship by proximity
Spatial Concentration
a
Slide12Similarity
Visual Grouping by similarity
Slide13Slide14Connectedness
Slide15Continuity
Visual entities tend to be smooth and continuous
Slide16Continuity
Slide17Continuity in Diagrams
Connections using smooth lines
Slide18Symmetry
Symmetry create visual whole
Prefer Symmetry
Slide19Symmetry (cont.)
Using symmetry to show Similarities between time series data
Slide20Closure
Prefer closed contours
Slide21Slide22Closure (cont.)
Closed contours to show set relationship
Slide23Extending the Euler diagram
Slide24Closure (cont.)
Segmenting screen
Creating frame of reference
Position of objects judged based on enclosing frame.
Slide25Relative Size
Smaller components tend to be perceived as objectsprefer horizontal and vertical orientations
Slide26Similarity
Slide27Past Experience
Slide28Weber’s Law
A
B
A
B
A
B
Which one, A or B, is taller?
Slide29Slide30Slide31Slide32Slide33Figure and Ground
Symmetry, white space, and closed contour contribute to perception of figure.
Slide34Figures and Grounds (cont.)
Rubin
’
s Vase
Competing recognition processes
Slide35Fun with illusions
Slide36Is the grid OK?
Slide37Can you see gray squares?
Slide38A man playing saxophone or a woman’s head?
Slide39A head or a boy?
Slide402, or 1 face?
Slide41Duck facing left or hare to the right?
Slide42Horrible!!! A woman before the mirror??
Slide43Young or old lady?
Slide44It is said there are nine faces in this picture
Slide45Will you go through it from left to right or from right to left?
Slide46Slide47One vase or two faces?
Slide48Can you build this?
Slide49Where is the high land?
Slide50Slide51Slide52Slide53Slide54Pre-Attentive Pattern
Finding patterns is key to information visualization.Example Tasks:Patterns showing groups?Patterns showing structure?
What patterns are similar?
How should we organize information on the screen?
Slide55Primitives of Perception
The whole visual field is processed in parallelThis machinery tells us what kinds of information are easily distinguishedPopout effects (general attention)Segmentation effects (dividing up the visual field)
Slide56Segmentation by Primitive Features
Slide57Pre-Attentive Processing
Slide58Color is Pre-Attentive (Pops out)
Slide59Generic Pre-Attentive Experiment
Number of irrelevant items varies
Pre-attentive 10 msec per item or better.
Slide60Color
Slide61Orientation
Slide62Motion
Slide63Size
Slide64Simple shading
Slide65Conjunction (does not pop out)
Slide66Semantic Depth of Field
Slide67Compound features (do not pop out)
Slide68Surrounded colors do not pop out
Slide69Laws of pre attentive display
Must stand out on some simple dimensioncolor, simple shape = orientation, sizemotion, depthLessons for highlighting – one of each
Slide70Blinking momentarily attracts attention
Lessons: Highlighting how to make information available to attention
A flying box leads attention
Using color
Using underlining
Blinking momentarily attracts attention
Motion elicits an orienting response
Slide71More Pre-Attentive
Slide72Pre-Attentive Channels
Form (orientation/size) ColorSimple motion/blinkingAddition/numerosity (up to 3)Spatial, stereo depth, shading, position
Slide73Pre-Attentive Conjunctions
Stereo and colorColor and motionColor and positionShape and positionIn general: spatial location and some aspect of form
Slide74Pre-Attentive Lessons
Rapid visual search (10 msec/item)Easy to attend toMakes symbols distinctBased on simple visual attributesFaces, etc are not pre-attentive
Slide75Visible Light
Visible Spectrum of Light
Wavelength
Slide76Human Vision
Human Cone Response to Color
three cone types (S,I,L) correspond to B,G,R
400
460
530
650
600
700
500
Wavelength (nm)
Relative response
Blue
Cyan
Green
Red
490
I
L
S
Slide Courtesy of Chester F. Carlson Center for Imaging Science
Slide77Color Matching Process
From
“
Foundations of Vision
”
by B. Wandell
Slide78The Tristimulus Theory
Any perceived color could be generated by some combination of three primary colorsRGB CurveNegative Intensity (color added to target light)
Figure courtesy of D. Forsyth
Slide79CIE XYZ
CIE (Commission Internationale d’Éclairage)CIE tristimulus values XYZY is luminanceAll positive curves
Figure courtesy of D. Forsyth
Slide80Color Spaces
Use color matching functions to define a coordinate system for color.Each color can be assigned a triple of coordinates with respect to some color space (e.g. RGB).Devices (monitors, printers, projectors) and computers can communicate colors precisely.
Slide81CIE XY Chromaticity Diagram
Slide82RGB Color Space
Slide83Some Colors Cannot Be Displayed
Slide84CIE LUV Color Space
A uniform color space used to illustrate or quantify relative color differences.The Euclidean distance between two points is a measure of the difference between the colors.
Slide851976 CIE u'v' Chromaticity Diagram
Slide86HSV Color Space
HSV: Hue Saturation Value - Hue: the color type - Saturation: the “vibrancy” of the color - Value: the brightness of the color
From Wikipedia
http://en.wikipedia.org/wiki/HSV_color_space
Slide87Combining Colors
Additive (RGB)
Shining colored lights
on a white ball
Subtractive (CMYK)
Mixing paint colors and
illuminating with white light
Slide Courtesy
Slide88Using Color for Visualization
Coding qualitative vs. quantitative data - use differing hues for qualitative data - use continuous variation for quantitative dataUse familiar color coding - “red
”
for hot, dangers, cautions, & warnings
>> watch for culture conflicts (e.g., red in Asian cultures)
Slide89Coding Information with Colors
Limit color numbers - (5- 10)Don’t have blue and red togetherBe careful with blue (small blue objects, blue objects on dark background). Our eyes are not sensitive to blueRed-Green are good color combinations. For people with red-green color blindness, Yellow-blue are usually OK.