8. Koncepty interakce a interakční techniky viscg.uni-muenster.de www.cs.uni-paderborn.de viscg.uni-muenster.de Třídy interakčních technik • Navigace – změna pozice kamery, škálování pohledu • Výběr – identifikace objektu, sady objektů, oblasti zájmu, na které aplikujeme další operace • Filtrování – redukce velikosti dat, která mapujeme na obrazovku • Rekonfigurace – změna způsobu mapování dat na grafické entity nebo atributy • Kódování – změna grafických atributů (velikost bodů, …) • Spojování – nástroje pro spojování různých pohledů, objektů • Abstrahování/konkretizace – změna LOD • Hybridní techniky – kombinace uvedených Operátory navigace • Navigace využívána pro vyhledání podmnožiny vstupních dat, která mají být prozkoumána, vyhledání orientace pohledu na data a LOD • Ve 3D je navigace určena pozicí kamery, směrem pohledu, tvarem a velikostí objemu pohledu a stupněm LOD • Navigace může být automatická nebo řízená uživatelem Operátory výběru • Izolace podmnožiny komponent pro zobrazení, které podléhají dalším operacím – zvýraznění, mazání, maskování, … • Nutné vědět, jaký výsledek očekáváme (např. nahrazení stávající selekce vs. přidání do ní) • Granularita výběru – jak velkou oblast vybíráme • Výběr přímý (uživatelem) nebo nepřímý (vyhovující sadě omezení) Operátory filtrace • Redukce počtu dat, která mají být zobrazena – nastavením omezení • Určení rozsahu zájmu – několik metod: – Manipulace pomocí sliderů, okamžitý update vizualizace – Vybírání položek, které chceme zachovat/schovat – např. schovávání sloupců v Excelu Operátory filtrace Operátory filtrace • Rozdíl mezi filtrací a výběrem následovaným mazáním nebo maskováním: – Filtrování je prováděno nepřímo – často před samotným zobrazením dat, v odděleném dialogovém okně (ne nad samotnými zobrazenými daty) – Výběr je prováděn přímo – objekty označujeme přímo ve vizualizačním okně (např. klikáním myší do scény) Operátory rekonfigurace • Odhalení vlastností, vypořádání se se složitostí či měřítkem dat • Poskytnutí různých pohledů na data • Populární metody – PCA (principal component analysis) – MDS (multidimensional scaling) – Snaha o zachování vztahů mezi daty ve všech dimenzích při jejich projekci do nižší dimenze Operátory kódování • Vlastnosti dat, které nejsou viditelné v jednom způsobu vizualizace, mohou být zřejmé při použití jiného typu vizualizace • Dnešní vizualizace podporují zároveň několik typů vizualizací • Mapování, různé pohledy na data, modifikace použité barevné mapy, velikosti grafických entit, jejich tvaru, průhlednost, texturování, styl čáry a výplně, dynamické atributy – úbytek intenzity, míra přeblikávání, … • Použitím různých variací můžeme překonat řadu omezení použité techniky (např. při překrývání bodů v bodových diagramech) Operátory kódování www.nist.gov code.google.com Operátory spojování • Spojení vybraných dat v jednom pohledu s odpovídajícími daty v pohledech dalších • Řada způsobů, populární je tzv. linked selection – každý z pohledů na data může odhalit zajímavé vlastnosti Operátory spojování • Interaktivní změna výběru dat – brushing – při změně výběru v jednom pohledu se zvýrazní odpovídající spojená data v ostatních pohledech • Další silnou stránkou je specifikace komplexních omezení pro daný výběr • Možnost odpojení (unlink) některých vizualizací. Možnost určení pro každé okno, zda se má informace přenášet do dalších oken nebo ze kterých oken přijímá vstup • Lokální typy interakce (zoom) vs. sdílené mezi všemi okny (přeskládání dimenzí) Operátory abstrahování/konkretizace • Zobrazení velkého množství dat – vhodné se soustředit pouze na určitou podmnožinu dat, kde zobrazíme detaily (konkretizace) a na ostatních částech redukujeme stupeň detailu (LOD) • Distorzní operátory (funkce) – transformace, která může být aplikována na jakýkoliv typ vizualizace • Distorze je součástí původní vizualizace nebo je zobrazena v samostatném okně Operátory distorze • Lineární, nelineární; se spojitostí nultého, prvního nebo druhého řádu (i nespojité) • Mohou být aplikovány na struktury namísto spojitých prostorů – specifické pro daný typ operandu (viz dále) • Operátory mají různé „otisky“ – tvar (obdélníkové, kruhové otisky) nebo rozsah prostoru ovlivněný transformací (definován vzdálenostní funkcí) Distorze http://www.humantransit.org/marketing/ Interakční operandy a prostory • Interakční operand je část prostoru, na kterou je aplikován interakční operátor • Abychom mohli určit výsledek interaktivní operace, musíme vědět, uvnitř jakého prostoru bude interakce prováděna • Uvedeme několik odlišných tříd interakčních prostorů – součástí jejich popisu je uvedení příkladů existujících interakčních technik spadajících do jednotlivých tříd Interakční operandy a prostory • Prostor obrazovky (Pixely) • Prostor datových hodnot (Multivariate datové hodnoty) • Prostor datových struktur (Components of Data Organization) • Prostor atributů (Components of Graphical Entities) • Prostor objektů (3D Surfaces) Prostor obrazovky (Pixely) • Selekce na úrovni pixelů = každý pixel je klasifikován jako vybraný nebo nevybraný • Výběr můžeme provádět nad jednotlivými pixely, obdélníkovými či kruhovými oblastmi pixelů nebo nad oblastmi o libovolném, uživatelem definovaném, tvaru • Distorze = transformace na pixelech: (x’, y’) = f(x, y) Prostor obrazovky (Pixely) • Zvětšení (magnifikace) m(x, y) v daném bodě je derivací této transformace • Rybí oko, rubber sheet, … www.ilovephilosophy.com Rybí oko • Musíme specifikovat: – středový bod transformace - (cx, cy) – poloměr lupy – rl – velikost vychýlení (deflexe) – d kde ))(1log( oldnew rdsr  )*1log( l l rd r s   Rybí oko - pseudokód 1. Vyčistíme výstupní obrázek. 2. Pro každý pixel vstupního obrázku: a) Spočteme odpovídající polární souřadnice. b) Pokud je poloměr menší než je poloměr lupy: i. Spočteme nový poloměr rnew. ii. Získáme barvu tohoto místa z původního obrázku. iii. Nastavíme tuto barvu jako barvu pixelu ve výstupním obrázku. c) Jinak nastavíme výsledný pixel obrázku na stejnou hodnotu, jakou má v původním obrázku. Prostor obrazovky • Při distorzi vzniká překryv pixelů a naopak díry – Překrývání se řeší průměrováním – Díry je nutné řešit interpolací • Zvolená interpolace závisí a typu použité lupy – Například při vizualizaci textu je požadavek na nedeformovanou středovou část lupy (pro lepší čitelnost) – toho dosáhneme použitím po částech lineární funkce Rybí oko kizziecat.blogspot.com www.datavis.ca Rybí oko tulip.labri.fr flowingdata.com Prostor datových hodnot (Multivariate datové hodnoty) • Mechanismus specifikace pohledu • Změna zobrazovaných datových hodnot podobné databázovým dotazům • Např. brushing řízený daty: Prostor datových hodnot (Multivariate datové hodnoty) • Nejintuitivnější prostor pro aplikaci filtrace – redukce dat a/nebo dimenzí • Distorze prostoru pomocí transformace: • Ve skutečnosti může každá dimenze podléhat své vlastní transformační funkci: • Nejobecnější případ: ji závisí na libovolném počtu dimenzí ),...,,()',...,','( 1010 nn dddjddd  )(': iiii djdj  Prostor datových hodnot (Multivariate datové hodnoty) Prostor datových hodnot • Uživatel musí být informován o tom, že data byla nějakým způsobem transformována • Často nutná transformace rozsahu hodnot výsledných dat takovým způsobem, aby spadaly do rozsahu akceptovatelného grafickými entitami • Špatné mapování = hodnoty jsou namapovány mimo obrazovku apod. Prostor datových struktur (Components of Data Organization) • Data jsou strukturována do seznamů, tabulek, gridů, hierarchií, grafů • Pro každou ze struktur lze vytvořit speciální interakční mechanismus pro výběru části struktury • Zoomování v prostoru obrazovky vs. datové struktury Prostor datových struktur • Pro redukci množství zobrazované informace se často používá filtrace: – Vizualizace v čase – definujeme rozsah na časové ose – Grafové vizualizace – filtrace uzlů a hran, které jsou dále než uživatelem definovaný počet „skoků“ – Hierarchické vizualizace – filtrace založena na stupni hierarchie Hierarchická filtrace – příklad wiki.c2b2.columbia.edu Prostor datových struktur • Při implementaci interaktivních logických operací v prostoru datových struktur je nutné určit stupeň automatizace a zda budou interakce specifikovány přímo ve vizualizačním okně nebo v samostatném dialogovém okně • Automatizované techniky: – důkladné, časově náročné techniky vs. rychlé, ale nepřesné techniky Prostor datových struktur • Vezměme v úvahu uspořádání dimenzí pro vizualizaci multivariate dat • Existují plně manuální přístupy nebo naopak automatizované techniky pro přeskládání dimenzí • Manuální přístup – manipulace s textovými vstupy v seznamu (posun nahoru a dolů, dragand-drop), pro paralelní souřadnice a matice bodových grafů manipulace s osami Prostor datových struktur • Automatický přístup – musíme znát alespoň dvě základní rozhodnutí ovlivňující návrh: 1. Jakým způsobem měřit kvalitu uspořádání 2. Jakou strategii zvolit pro hledání těchto kvalitních uspořádání • Můžeme použít různé metriky. Jedna z běžně používaných je součet korelačních koeficientů mezi každou dvojicí dimenzí Měření kvality uspořádání • Korelační koeficient mezi dvěma dimenzemi je definován jako: kde n je počet datových bodů, X a Y jsou dvě dimenze, xi a yi jsou hodnoty pro i-tý datový bod, μX je střední hodnota v X a σX je standardní odchylka pro X YX YXii YX n nyx    )1( )( ,     Měření kvality uspořádání • Další přístup k měření kvality uspořádání – jednoduchost interpretace – Různá uspořádání dimenzí vedou k zobrazení s většími či menšími vizuálními shluky – Je snazší analyzovat jednoduché tvary glyfů než komplexní tvary – Jsme-li schopni změřit průměrnou nebo kumulativní složitost tvaru použitých glyfů (např. počítáním prohlubní či vrcholů), můžeme porovnávat vizuální složitost různých uspořádání Měření kvality uspořádání Původní uspořádání vs. výsledky po přeskládání dimenzí – cílem je redukce konkávních oblastí a zvýšení procentuálního podílu symetrických tvarů Nalezení vyhledávací strategie • Dalším úkolem je nalezení efektivní vyhledávací strategie pro nalezení kvalitních uspořádání • Vyhodnocení všech možných uspořádání dimenzí – N! možností • Využití technik optimalizace • Velmi podobné problému obchodního cestujícího – použijeme algoritmy pro tento problém Nalezení vyhledávací strategie • Jednoduchý algoritmus: 1. Vybereme dvě libovolné různé dimenze 2. Prohodíme jejich pozice a spočteme kvalitu uspořádání 3. Pokud je kvalita nižší než kvalita původního uspořádání, zrušíme prohození 4. Opakujeme kroky 1-3 fixně definovaným počtem iterací nebo dokud určitý počet provedených testů nevykazuje žádné zlepšení kvality Nalezení vyhledávací strategie • Heuristické přístupy nejsou optimální, ale ve většině případů vedou k nalezení přijatelného řešení • Možnost kombinace s manuálním přístupem – uživatel na základě svých znalostí o vstupních datech ručně zadá některá uspořádání a zbytek dopočítá systém automaticky Prostor atributů (Components of Graphical Entities) • Navigace je velmi podobná jako v prostoru datových hodnot – panning zahrnuje posun rozsahu hodnot zájmu, zoomování dosáhneme buď škálováním atributů nebo zvětšením rozsahu hodnot zájmu • Filtrace na základě atributů • V prostoru atributů často dochází k přemapování – pomocí výběrů různých rozsahů atributu nebo výběrem různých atributů pro danou vstupní množinu Prostor atributů • Nejpoužívanější interakce – atributy barvy a průhlednosti • Příkladem je změna kontrastu a jasu za účelem zvýraznění určitých vlastností: Prostor atributů • Interaktivní nástroje pro specifikování a modifikaci přenosové funkce se nejčastěji používají při renderování objemu a to pro kontrolu barvy a průhlednosti (https://www.youtube.com/watch?v=UHOUFJ mj_fM (23:01)) • Nejjednodušší forma – hodnoty dat na horizontální ose + průhlednost nebo barevná komponenta Prostor atributů - příklad • Nechť A je atribut dané grafické entity. Distorzní transformaci můžeme provést aplikováním funkce k:a’ = k(a). Prostor atributů • Odvozování barvy či průhlednosti striktně pouze z datových hodnot může vést k vizuálním artefaktům způsobeným šumem nebo variabilitou uvnitř dat • Možným řešením je využití i jiných charakteristik dat, než jen jejich hodnot (první, druhá derivace, …) Prostor objektů (3D Surfaces) • Data jsou mapována na geometrické objekty a ty následně podléhají interakcím a transformacím • Navigace – pohyb kolem objektů a pozorování povrchů (globální pohled i detailní pohledy) • Výběr – klikání na objekty zájmu nebo zvolení cílových objektů ze seznamu • Přemapování – změna objektu, na který data mapujeme Prostor objektů • Příklady distorze – perspektivní stěny a hyperbolické projekce – varianty metody založené na prostoru obrazovky graphics.stanford.edu Prostor objektů • Jedna z metod pro navigaci ve vizualizaci velkého počtu dokumentů a dat jsou tzv. perspektivní stěny (perspective walls) • Zobrazují jeden panel umístěný ortogonálně ke směru pohledu a ostatní panely mizí se vzdáleností od předního panelu – pomocí perspektivní deformace www.cc.gatech.edu Perspektivní stěna • Zjednodušená verze – přední stěna podléhá horizontálnímu škálování části mapovaného 2D obrázku, sousední segmenty jsou podrobeny horizontálnímu a vertikálnímu škálování úměrnému vzdálenosti ke hraně přední stěny + na segmenty je aplikováno zkosení www.pcmag.com Perspektivní stěna • Pokud je levá, střední a pravá sekce původního obrázku ohraničena pomocí (x0, xleft, xright, x1) a levý, střední a pravý panel výsledného obrázku jsou určeny pomocí (X0, Xleft, Xright, X1), pak transformace je definována: – pro x < xleft: )( )( *)(' 0 0 00 xx XX xxXx left left               )( )'( 1)'(' 0XX xX yxXy left left left Perspektivní stěna – pro xleft ≤ x < xright: – pro x ≥ xright: )( )( *)(' leftright leftright leftleft xx XX xxXx    yy ' )( )( *)(' 1 1 right right rightright xx XX xxXx               )( )'( 1)'(' 1 right right right XX Xx yXxy Perspektivní stěna • Uživatel může interagovat sekvenčním procházením (pohyb dopředu i dozadu), dále je možné využívat indexy pro skoky do oblastí zájmu (často implementováno jako záložka vyčnívající nahoře na stránce na počátku každé sekce) • http://www.youtube.com/watch?feature=play er_embedded&v=hYUZbrWtCZg Prostor vizualizace struktur • Vizualizace se zaměřuje na strukturu, která je relativně nezávislá na hodnotách, atributech a struktuře dat – příkladem je mřížka, do které se vykresluje matice bodových grafů, nebo zobrazení os • Navigace – posun stránek v nástroji založeném na tabulkové vizualizaci, zoomování na jednotlivé grafy v matici bodových grafů Prostor vizualizace struktur • Výběr – vybírání komponent, které mají být schovány, přesunuty nebo přeskupeny • Distorze – např. table lens technika – transformace řádků a /nebo sloupců tabulky za účelem poskytnutí násobného LOD • Další klíčovou funkcí je využití hladkých přechodů mezi vizualizacemi Vizualizace prostoru struktur – distorze Animační transformace • Veškeré interakce vedou ke změně zobrazovaného obrázku • Změny mohou být dramatické (otevření nové datové sady) nebo mírnější (změna jen některých aspektů pohledu) • Je žádoucí poskytnout hladký přechod mezi výchozí a cílovou pozicí (např. při rotaci 3D objektu). Často stačí lineární interpolace. • Přitažlivější výsledek získáme při použití postupného zrychlení a zpomalení změny Animační transformace • Prvním krokem je získání uniformní parametrizace proměnné nebo proměnných, které chceme během animace řídit • Pro pozice podél rovné čáry nebo škálování stačí použít lineární interpolaci • Pro spočtení rovnoměrného rozložení pozic podél zakřivené cesty musíme zavést nový parametr Animační transformace • Předpokládejme, že původní parametr je funkce proměnné t (hodnoty mezi 0 a 1) • Pro spočtení pozic můžeme použít kubický polynom (podobně pro y): • Pro 0 ≤ i ≤ n (n je počet kroků mezi počáteční a koncovou pozicí) můžeme vytvořit seznam pozic pi DCtBtAttx  23 )( Animační transformace • Délku oblouku A pak můžeme odhadnout součtem vzdáleností mezi po sobě jdoucími body: • Pro většinu křivek je však vzdálenost mezi sousedními body různá. Kdybychom použili popsaný přístup vždy, rychlost pohybu po křivce by byla nerovnoměrná     ni i ii ppdistA 1 1 ),( Animační transformace • Je užitečné pro každý bod pi spočítat vzdálenost di od počátku křivky k tomuto bodu • Spočteme funkci A(i), která reprezentuje procentuální poměr vzdálenosti, kterou bod urazí v i-tém časovém kroku • Pro zjednodušení použijeme místo proměnné i proměnnou t (0.0 ≤ t ≤ 1.0). Dále definujeme parametr s = A(t). AdiA i /)(  Animační transformace • Výsledky uložíme do tabulky, takže pro každou hodnotu t známe její odpovídající hodnotu s = A(t) • Využijeme hodnotu s pro určení uniformní rychlosti – využití lineární interpolace. Animační transformace • Popsaný postup se označuje jako reparametrizace • Parametr s slouží k ovládání rychlosti – vykreslíme jej v závislosti na čase – dostaneme rovnou křivku. Rychlost odpovídá sklonu této křivky. • Křivka však obecně nemusí být rovná – části s malým sklonem představují nízkou rychlost, velký sklon = velká rychlost • Počáteční a koncový bod jsou fixní Animační transformace • Nekonečně mnoho možností nastavení animace mezi počátečním a koncovým bodem (dokonce můžeme animaci na chvíli zastavit) • Předpokládáme, že křivka se monotónně zvyšuje a rovněž, že se nemůže vracet • Běžným typem křivky je sinová křivka – odpovídá postupnému navyšování rychlosti na začátku animace z nuly na požadovanou rychlost, na konci postupné snižování rychlosti Animační transformace • Konstatní rychlost vs. sinová křivka pro postupné zvyšování a snižování rychlosti Postupné zvyšování a snižování rychlosti • http://www.youtube.com/watch?v=yQ-NC0bHTYs Animační transformace • Specifikace pohybu pomocí křivky rychlosti • Rychlost je první derivací křivky pro pozice • Křivka pro postupné navyšování a pak snižování rychlosti: Animační transformace • Třetím typem křivky je akcelerační křivka – odpovídá druhé derivaci poziční křivky či první derivaci křivky rychlosti • Křivka se skládá ze tři horizontálních úsečkových segmentů: Virtuální realita • Pochopení práce v 3D je obtížnější, problém při vnímání hloubky • Při navigaci pracujeme se šesti stupni volnosti • Je nutné zobrazovat nejen pohled na virtuální svět, ale i pozici pozorovatele v něm a směr pohledu • Výběr ve virtuálním světě vs. využití menu Virtuální realita • Jedinečné přínosy: – Navigace – možnost ovládání pohybu v prostoru pohybem hlavy – Interakce – datové rukavice, optické snímání, … – Stereoskopická projekce a vnímání hloubky – polarizované brýle, aktivní brýle, … – Immersion (zanoření) – uživatel je obklopen virtuálním světem (brýle, speciální místnost) CAVE • http://www.youtube.com/watch?v=j59Jxfbvx Gg World builder • http://www.youtube.com/watch?v=VzFpg271sm8 Microsoft’s concept of 2019 • http://www.youtube.com/watch?v=bwj2s_5e12U Interactive display window • http://www.youtube.com/watch?v=xFgvNMN2DiQ Interactive table prototype • http://www.youtube.com/watch?v=1T2veycjpTI Interactive table • http://www.youtube.com/watch?v=j9Pl-Nmp9nw