9. Interakční techniky hct.ece.ubc.ca ivl.calit2.net ivlab.cs.umn.edu tobias.isenberg.cc Prostor obrazovky • Distorze v prostoru obrazovky je běžným nástrojem pro poskytnutí focus+context • Příkladem je 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 objektu (3D surfaces) • 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 Další metody prozkoumávání/navigace • Medicínská vizualizace – průlet skrz datovou sadu reprezentující lidské srdce, trávicí systém, cévy, … – Nutné prvky pro ovládání směru, rychlosti průletu, field of view http://footage.shutterstock.com/clip-344095-stock- footage--d-blood-cells-in-vein.html • Průlet skrz cévy řízený uživatelem – obtížné se vyhnout kolizím footage.shutterstock.com Automatická navigace • Automatické nastavení cesty průletu, možné kombinovat i s fixní orientací pohledu • Příklad cév: rozsekání na kusy, nalezení středového bodu každého kusu, spojení těchto bodů mezi snímky – Výsledkem může být kostrbatá průletová cesta, často je tedy nutné zavést vyhlazování Vyhlazování • Mnoho technik • Nejjednodušší – průměrování sousedů – Každý bod na cestě je nahrazen průměrnou hodnotou získanou z určitého množství bodů před a za tímto bodem. Nejjednodušší příklady: 2/)( 11 '   iii ppp 3/)( 11 '   iiii pppp Vyhlazování • Použití většího počtu sousedů či násobné průchody zvyšují vyhlazení cest – zároveň se zvyšuje riziko, že „vystoupíme“ z cévy. To se dá zmírnit přidáním různých omezení – např. zavedení odpudivých sil u hranic cév. • Další přístup je navázání bodů na parametrickou křivku (Bézier, B-spline) pro generování cesty o libovolném počtu kroků www.designtech.cz Automatické techniky • Metoda pro multivariate statistickou vizualizaci – Asimov’s grand tour (http://www.slac.stanford.edu/cgi- wrap/getdoc/slac-pub-3211.pdf) – Cesta je navržena tak, že každou možnou projekci dat je možné eventuálně navštívit. Sousední projekce se liší v pohledových parametrech pouze minimálně – přechod mezi nimi je tedy vnímán jako hladký. Asimov’s grand tour Prostor dat (Multivariate Data Values) • Transformace v prostoru dat jsou běžnými technikami v analýze a vizualizaci dat • Typické funkce: – Škálování a translace – Exponenciální a logaritmické škálování – Sinusoidy pro studování cyklických závislostí – Transformace absolutní hodnoty – Negace hodnot Prostor dat • 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 atributů • Většina interakcí v prostoru atributů má své ekvivalenty v prostoru dat (např. globální a lokální škálování) • V některých situacích dává větší smysl provádět interakci na grafické reprezentaci namísto dat samotných • Interakce v prostoru atributů mohou mít ekvivalent i v prostoru obrazovky (např. škálování). Použitím prostoru atributů se však dokážeme vyhnout „hranatým“ artefaktům, které jsou typické pro zoomování na pixelech. Problém při zoomování na pixelech 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ů • Uživatel může vkládat a modifikovat kontrolní body, výsledná funkce má tvar po částech lineárního grafu procházejícího skrz sousední kontrolní body 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 datových struktur (Components of Data Organization) • 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 vizualizace struktur • Některé dříve popsané techniky je možné aplikovat i na prostor vizualizace struktur • Stejný typ distorze pro nastavení rozestupů mezi osami paralelních souřadnic, nastavení velikosti buněk gridu u matice bodových grafů • Uživatel by měl být obeznámen se všemi operacemi, které může provádět, měl by mít k dispozici konzistentní sadu ikon, které je schopen rychle pochopit a používat • Další klíčovou funkcí je využití hladkých přechodů mezi vizualizacemi 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ů: Pseudokód animace • Pseudokód renderuje bodový graf kružnic, které jsou animovány v čase mezi dvěma množinami dimenzí x, y a r (poloměr) za použití lineární interpolace • Argument numFrames specifikuje počet snímků animace a parametr delay určuje zpoždění mezi snímky v milisekundách Scatterplot-Animate(xDim1, yDim1, rDim1, xDim2, yDim2, rDim2, cDim, rMin, rMax, numFrames, delay) 1 for each frame f from 0 to numFrames 2 do for each record i //for each record, 3 do x1 ← Normalize(i, xDim1) // derive first state, 4 y1 ← Normalize(i, yDim1) 5 r1 ← Normalize(i, rDim1, rMin, rMax) 6 x2 ← Normalize(i, xDim2) // derive second state, 7 y2 ← Normalize(i, yDim2) 8 r2 ← Normalize(i, rDim2, rMin, rMax) 9 p ← f/numFrames // compute percent complete, 10 x ← x1 + (x2 − x1) ∗ p // and current state. 11 y ← y1 + (y2 − y1) ∗ p 12 r ← r1 + (r2 − r1) ∗ p 13 MapColor(i, cDim) // derive color, then 14 Circle(x, y, r) // draw the record as a circle. 15 Sleep(delay) // Pause between frames. Řízení interakce • V každé fázi interakční pipeline je nutné řízení typu, umístění a stupně interakce při navigaci v prostoru dat i v samotné vizualizaci • Řízení musí být intuitivní, jednoznačné a v dostatečné úrovni detailu • Zaměříme se na typické řídicí prvky a jejich vhodné implementace Výběr středu zájmu (Focus selection) • Výběr je často uskutečňován pomocí nástrojů přímé manipulace (myš či jiné zařízení) • Prostor obrazovky a objektu – klasické operace výběru • Prostor dat – určení n-dimenzionálního umístění (násobné selekce) • Prostor atributů a struktur – nutné mít grafické znázornění struktury nebo rozsahu atributů • Střed zájmu může být definován implicitně – ve středu rozsahu interakce Výběr rozsahu (Extent selection) • Závisí na typu interakce a prostoru, ve kterém je interakce aplikována • Určen přímou manipulací nebo různými nástroji rozhraní • Definován jednou hodnotou (poloměr, maximální počet položek) nebo vektorem hodnot (rozsah pro každou dimenzi, sada omezení) • Často nastaven pevně Výběr typu interakce • Vzhledem k velkému počtu možných interakcí a různorodosti prostorů, ve kterých se používají, mělo by rozumné rozhraní obsahovat dvojici menu: jedno pro výběr prostoru a druhé pro specifikaci třídy interakce Výběr stupně interakce • Stupeň interakce je důležitým kontrolním parametrem, který může být specifikován pomocí jedné hodnoty (např. velikost škálování v oblasti středu zájmu). Je vhodné zpřístupnit slider pro ovlivňování tohoto parametru a tlačítko pro defaultní nastavení na minimální úroveň interakce. Výběr typu míchání • Pokud je potřeba využít současně více různých interakčních technik, musíme nastavit strategii pro smíchání interakcí v regionech, které jsou ovlivněny více interakcemi. Toho se nejlépe dosáhne pomocí menu s různými možnostmi. Dostupné možnosti jsou závislé na prostoru, ve kterém se interakce projevuje a rovněž na typu použité interakce. Algoritmy výběru Scatterplot-Select(xDim, yDim,xMin, xMax, yMin, yMax) 1 s ← ∅ // Initialize the set of records 2 for each record i // For each record, 3 do x ← Normalize(i, xDim) // derive the location, 4 y ← Normalize(i, yDim) 5 if xMin < x < xMax and yMin < y < yMax 6 do s ← s ∪ i // select points within the rectangle. 7 return s Bod v polygonu • Následující pseudokód určuje, zda je daný body uvnitř daného polygonu. Tento úkol se používá například pro určení, který polygon v choropletové mapě nebo glyf v bodovém grafu odpovídá dané pozici myši. Pseudokód využívá algoritmus, který spočítá počet průsečíků paprsku vycházejícího z daného bodu s hranami polygonu. Pokud počet průsečíků paprsku s polygonem je lichý, pak je bod uvnitř polygonu. Bod v polygonu Point-In-Polygon(xs, ys, numPoints, x, y) 1 j ← numPoints − 1 2 oddNodes ←false 3 for i ← 0 to numPoints − 1 4 do if ys[i] < y and ys[j] >= y or ys[j] < y and ys[i] >= y 5 do if xs[i] + (y − ys[i])/(ys[j] − ys[i]) ∗ (xs[j] − xs[i]) < x 6 do oddNodes ← not oddNodes 7 j ← i 8 return oddNodes 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