smart graphics: graphics and perceptionpreattentive perception viewer can rapidly and accurately...
TRANSCRIPT
![Page 1: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/1.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Smart Graphics: Graphics and Perception
Lecture „Smart Graphics”Andreas Butz26.10.2010
1
![Page 2: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/2.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Topics Today• Paley’s knowledge acquisition pipeline• A classical model of human perception• Effects at different stages of perception• Some Illusions and experiments• An example UI using effects from different
stages of perception
2
![Page 3: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/3.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge acquisition pipeline [W. Bradford Paley, SG 2003]
Simplified model of human sensemaking processes, useful for designing visual representations
3
![Page 4: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/4.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
The human eye
Illustrations by Mark Erickson
4
![Page 5: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/5.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Die Netzhaut
• Zapfen arbeiten bei höherer Lichtintensität• Verteilung auf der Netzhaut im Verhältnis 1:20:40• Stäbchen arbeiten bei niedriger Lichtintensität
5
![Page 6: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/6.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Color blindness• Most prominent kind:
red/green blindness–~8% of men
• Simulation with vischeck
6
![Page 7: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/7.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Human eye: strengths and limitations• Very high dynamic range
– 220 = 1:1.000.000 with iris adaptation– 210 = 1:1.000 at given iris aperture– more than most monitors
• Bad color vision in dark conditions• Best contrast perception in red/green
• Limited temporal resolution (reaction speed)
• Good resolution and color in central area (macula)• Maximum resolution and color only in the very center
(fovea)• Maximum angular resolution 1 arc minute = 1/60 degree
7
![Page 8: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/8.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
How much resolution do we need?
• Assumption: viewing distance = horiz. image width• Horiz. Viewangle = 2*atan 0.5 = 53 degrees• Max. angular resolution of the eye = 1/60 degree• Max. horiz. resolution = 53 * 60 = 3.180 pixels• Viewing distance of A4 paper = 10 inch 300dpi
8
![Page 9: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/9.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge acquisition pipeline [W. Bradford Paley, SG 2003]
9
![Page 10: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/10.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Preattentive Perception
Viewer can rapidly and accurately determinewhether the target (red circle) is present or absent.Difference detected in color.
Hearst, 2003
Pre-attentive processing: ! Processed without focusing attention Constant
time < 200-250 ms independent of number of distractors ! (Eye movements take 200 ms)
10
![Page 11: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/11.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Attentive Perception• Aggregation of several attributes• Goal-oriented comparison of attributes• Takes longer, but leads to better
memorization of images
11
![Page 12: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/12.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Visual Search
Preattentive Search Attentive Search
12
![Page 13: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/13.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Preattentive and Attentive Pattern Recognition
13
![Page 14: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/14.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge acquisition pipeline [W. Bradford Paley, SG 2003]
Relation to classical model of perception from cognitive psychology
14
![Page 15: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/15.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Human Perception & Attention
3. Implicit (learned) knowledge is used to form a conceptual representation (meaning). -> Cognitive Psychology
1. Stimuli from the world are being perceived. Edges, points, orientation, position, gradients and color. -> Physiology
2. Single elements are aggregated to something whole -> Gestalt. No semantic meaning yet. -> Psychophysics
15
![Page 16: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/16.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Object Discrimination • Grouping of objects by identifying
strong changes in color (edge detection)
• Grouping by texture properties.
16
![Page 17: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/17.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Foreground vs. Background• Interpretation of the found objects in terms of a
figure (foreground) and a background
17
![Page 18: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/18.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
2D drawing: Make it conclusive… (1)
18
![Page 19: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/19.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
2D drawing: Make it conclusive… (2)
19
![Page 20: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/20.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
2D drawing: Make it conclusive… (3)
From A. Maelicke, Vom Reiz der Sinne, VCH 1990
20
![Page 21: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/21.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11 21
![Page 22: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/22.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Gestalt Laws• The perception of the whole is more than the
sum of its elements • The laws are not strictly defined and
describe different classes of observations• Not just valid for visual but more general for
all cognitive processes
22
![Page 23: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/23.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Some Gestalt Laws
Gesetz der Nähe
Gesetz der Kontinuität
Prägnanzgesetz
Ähnlichkeitsgesetz
23
![Page 24: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/24.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Gestalt Perception Example
24
![Page 25: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/25.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11 25
![Page 26: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/26.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Depth perception• Ambiguities in depth perception prevent
distance judgment with one eye
26
![Page 27: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/27.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Depth perception II
- Works only for distances up to 3m
27
![Page 28: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/28.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Monocular depth judgment• Relative size:
The smaller, the further away
28
![Page 29: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/29.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Linear perspective• Converging lines signal depth (see also
Ponzo Illusion).
29
![Page 30: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/30.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Texture Gradient• Diminishing granularity signals depth
30
![Page 31: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/31.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge acquisition pipeline [W. Bradford Paley, SG 2003]
31
![Page 32: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/32.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Geons (Biederman et al, 1991)• All geometric objects can be decomposed
into 36 „Geons“• Every Geon leaves a unique pattern on the
retina -> Bottom-Up part.• Knowledge about Objects in the world helps
constituting these from single geons -> Top-Down part.
32
![Page 33: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/33.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Geons (Biederman et al, 1991)
33
![Page 34: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/34.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge and Perception• Influence of Knowledge
–unusual colors slow down identification.
34
![Page 35: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/35.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Attention – Cocktail Party Phenomenon
• Cocktail party – Part 1:–Lots of people–Noisy chatting everywhere–You‘re engaged in conversation
• How can we follow our own conversation – but not get distracted by others?
Attention is selective
35
![Page 36: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/36.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Attention – Cocktail Party Phenomenon
• Cocktailparty – Part 2:–Suddenly you hear your name from the
surrounding noise. Even if everything else was blocked out before.
• How can we perceive blocked Information?• Perception buffers. Different theories for selective Attention.
36
![Page 37: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/37.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Change Blindness [Ronald A. Rensink, 1998]
• Large changes in a scene are not noticed• …when there is a short distraction, e.g.
–“mud splashes”–“brief flicker”–“cover box”
http://nivea.psycho.univ-paris5.fr/ECS/ECS-CB.html
• One possible conclusion: no complete visual buffer–Instead: directed attention to smaller area
37
![Page 38: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/38.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
CB: Flicker Example 1
38
![Page 39: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/39.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
CB: Flicker Example 2
39
![Page 40: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/40.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
CB: Gradual Change
40
![Page 41: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/41.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
References
• Change blindness demo applethttp://www.usd.edu/psyc301/Rensink.htm
• Encyclopedia of Cognitive Science: Change blindnesshttp://nivea.psycho.univ-paris5.fr/ECS/ECS-CB.html
41
![Page 42: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/42.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge acquisition pipeline [W. Bradford Paley, SG 2003]
42
![Page 43: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/43.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Interpretation of symbols• Associate the recognized
object or shape with a meaning (symbolic)–Characters–Symbols
• Can also be combined to a language (linguistic)–Words from characters–Different traffic signs from
same base elements
43
![Page 44: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/44.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
Knowledge acquisition pipeline [W. Bradford Paley, SG 2003]
44
![Page 45: Smart Graphics: Graphics and PerceptionPreattentive Perception Viewer can rapidly and accurately determine whether the target (red circle) is present or absent. Difference detected](https://reader035.vdocuments.mx/reader035/viewer/2022063018/5fdab1508006da6dc21973bd/html5/thumbnails/45.jpg)
LMU München – Medieninformatik – Butz – Smart Graphics – WS2010/11
MindSpace (Brad Paley, http://www.didi.com/brad/)
• Interaktive Visualisierung einer Hierarchie
• Verschiedene synchonisierte Darstellungen
• Gruppenbildung durch aneinanderrücken von Objekten
• Spielerisches Ordnen und Klassifizieren
Live demo
45