tu logo
Informationsvisualisierung
SS04

Florian Kilzer 0125924
Philip Kügler 9826136
Barbara Ondrisek 9825622  

 

Smooth and efficient zooming and panning

» Überblick
» Model von Wijk und Nuij
» Optimaler Pfad
» Untersuchung
» Referenzen
» u,w-Raum (2D)
» u,w-Raum (3D)
» Eigenschaften Kamerafahrt
» Implementierung
» Java-Applet


Das Paper "Smooth and efficient zooming and panning" von Jarke J. van Wijk und Wim A.A. Nuij von der Technische Universiteit Eindhoven ist unter http://www.win.tue.nl/~vanwijk/zoompan.pdf oder auf der Webseite der LVA http://www.cg.tuwien.ac.at/courses/InfoVis/papers/zoompan.pdf zu finden.
 


Überblick

Große 2D Informationsflächen verlangen werden den Einschränkungen durch Blickfeld oder Auflösung der Anzeigegeräte eine Möglichkeit unterschiedliche Detailtiefen zu wählen.
Diese 2D Flächen können aus der Kartographie stammen, von Treemaps, Scatterplots oder anderen graphischen Diagrammen. 

Das Grundprinzip des Zooming und Pannings ist eine gleichmäßige Bewegung von einem Detail der Karte zu einem anderen Detail über einen Zoom hinaus aus der Karte.

 Gesamtkarte
Abb. 1: Gesamtkarte

Detail Salzburg   Detail Wien
Abb. 2: Detail Salzburg                    Abb. 3: Detail Wien

Die Aufgabe des Papers ist es nun einen Pfad zu finden, der eine möglichst gleichmäßige und effiziente Bewegung einer virtuellen Kamera, die eine Karte filmt, darstellt.

Eine Herausforderung dabei ist, dass der Benutzer in, zum Beispiel, eine Karte hineinzoomen kann, ohne den Überblick, den Kontext, zu verlieren.

 

Model von Wijk und Nuij

Das Model von Wijk und Nuij von der technischen Universität in Eindhoven beschreibt nun den optimalen Pfad als eine Kurve.

Das Model hat zwei freie Parameter: Die Animationsgeschwindigkeit und das Verhältnis von Zoom zu Pan, also das Verhältnis von das Verhältnis zwischen dem Abstand zur Karte und der Bewegung zwischen den Detailaufnahmen. Um einen optimalen Weg zu finden, bedienen sich Wijk und Nuij des u,w Raums, wobei u für Panning – also die Translation von einem Punkt zum andern – und w für das Zoomen steht, beides gemessen in Weltkoordinaten.

Der optimale Weg ist eine Kurve, das berechneten die Wissenschafter anhand einer Reihe von Formeln, die auf zwei grundlegende Bedingungen zurückzuführen sind: der Pfad soll smooth – also gleichmäßig – und effizient sein. Wenn man diese Bedingungen nun mathematisch formuliert und etwas umformt kommt man zu den sechs elementaren Formeln des Papers:

Formeln von Wijk und Nuij
Abb. 4: Formeln von Wijk und Nuij
 

 

Optimaler Pfad

Gleichmäßig bedeutet z.B. in der ersten Ableitung stetig und effizient bedeutet z.B., dass die Länge des Weges ein Minimum wird. Mit solchen grundlegenden Rechenoperationen kamen Wijk und Nuij zu dem Schluss, dass der optimale Pfad eine Ellipse darstellt.

  uw-Raum vereinfacht
Abb. 5: uw-Raum vereinfacht

Das Modell beinhaltet zwei Funktionen u(s), als der Pfad der Kamera, und w(s), als die Höhe der Kamera, die das Problem im u,w Raum definieren.

Abbildung 4 zeigt einen solchen u,w Raum von der Seite beobachtet, wobei es sich um eine Bewegung von einem Punkt (u0,w0) zu einem Punkt (u1, w1) in Weltkoordinaten handelt.

Hierbei sei bemerkt, dass die Kamera immer einen fixen Öffnungswinkel von ca 53° hat und die Detailansichten immer quadratisch sind.

Den besten Überblick behält man, wenn beim Herauszoomen beide Mittelpunkte der jeweiligen Ausschnitte erkennbar sind.

Durch einige Überlegungen und Berechnungen der durchschnittlichen Geschwindigkeit kamen die Wissenschafter zu dem Schluss, dass das Zoomen mehr Einfluss auf die durchschnittliche Geschwindigkeit hat, als das Pannen – also die Translation.

Ein weiterer wichtiger Faktor ist der Parameter rho, der das Verhältnis zwischen Zooming und Panning beschreibt. Dieser Parameter wird subjektiv empfunden. Manche mögen es lieber, wenn tiefer gezoomt wird, manche wenn schneller bewegt wird.  

 

Untersuchung

Abbildung 6 zeigt das Ergebnis einer Untersuchung von 26 Testpersonen, die angeben sollten, welches rho sie bevorzugen. Ein durchschnittlicher Wert ist zwar berechenbar, allerdings sieht man sehr deutlich, dass es eigentlich keine Tendenz gibt, sondern die Werte ziemlich breit verteilt sind.

 Untersuchungsergebnis
Abb. 6: Untersuchungsergebnis

 


Referenzen

Hier werden kurz Ansätze aus anderen Papers vorgestellt:

 

Space-Scale Diagrams [1995]

Diese Paper behandelt die Problematik von Orientierung und Navigation in großen Welten, in Bildern mit verschiedener Detailinformation und ist eine Grundlage für Lösungen für Pan/Zoom-Probleme verschiedenster Art.

In mehreren Schichten werden Bilder mit kleiner werdenden Zoomfaktoren übereinander sortiert. Die Navigation für den User erfolgt dann mittels eines Fensters mit fixer Größe, dass er in der so entstandenen Pyramide verschieben kann. Der Ausschnitt dieses Fensters entspricht dem Sichtbereich und wird auf die Sichtebene projiziert. Das Verschieben des Fensters nach unten bewirkt also eine Vergrößerung, das horizontale Verschieben in der selben Ebene entspricht dem Pan.

Kamerafahrt
Abb. 7: Kamerafahrt

Die Horizontalen (u1, u2) entsprechen x und y (Space), die vertikale Achse dem Vergrößerungsfaktor (Scale). Zusammengehörige Punkte in verschiedenen Zoom-Stufen (z.B. der Eckpunkt des Bildes) werden als Linie (q) repräsentiert. Die Kreise in diesem Bild werden zu Kegeln über die verschiedenen Zoom-Stufen.

Wird das User-Fenster entlang dieser Linien vertikal verschoben entspricht das dem reinen Zoomen ohne Pan.

Wichtige Schlüsse dieses Papers waren die Feststellung, dass Panning linear wahrgenommen wird, Zoom allerdings logarithmisch. Außerdem wurde von den Autoren ein Maß für Zoom und Pan entwickelt.

 

Rapid Controlled Movement Through a Virtual 3D Workspace

In diesem Paper wird ebenfalls auf das Verhältnis von Panning zu Zooming genauer eingegangen.

 

Speed-dependent Automatic Zooming

Das Paper behandelt dasselbe Thema für Scrolling innerhalb von großen Mengen an Text. Während dem Scrollen soll hier entsprechend der Geschwindigkeit aus dem Paper herausgezoomt werden, um den Überblick zu bewahren.
 

 

u,w-Raum (2D)

Das Verhältnis von Zoom (w) zu Pan (u) kann auf mehrere Arten dargestellt werden. Im zweidimensionalen uw-Diagramm kann der Animationspfad direkt dargestellt werden.

Die eingezeichneten Kreise symbolisieren einerseits die Eigenschaft, dass Zoom im Gegensatz zu Pan für den Betrachter logarithmisch erscheint, andererseits, durch ihre horizontale Stauchung oder Streckung das Verhältnis "Rho".

 uw-Raum in 2D - Optimaler Pfad für verschiedene Rho
Abb. 8: uw-Raum in 2D - Optimaler Pfad für verschiedene Rho

Um den optimaler Pfad zwischen zwei Punkten zu berechnen, müssen folgende Voraussetzungen erfüllt werden

  

u,w-Raum (3D)

Um den u-w Raum besser zu veranschaulichen kann er auch als 3D-Fläche dargestellt werden. Dazu wird das Diagramm unregelmäßig verzerrt, sodass eine Fläche mit gleichen Kreisen entsteht: Für Werte mit kleinem w muss man die horizontalen Linien ausdehnen, für Werte mit großem w schrumpfen.

Umwandlung Darstellung des UW-Raums 2D zu 3D
Abb. 9: Umwandlung Darstellung des UW-Raums 2D zu 3D

Horizontale Linien werden zu Kreisen mit konstantem Zoomfaktor w. Eine Bewegung der Kamera entlang dieser Kreise entspricht dem Panning; eine Bewegung nach oben hin dem Zoom-out, eine Bewegung nach unten dem Zoom-in.

uw-Raum in 3D
Abb. 10: uw-Raum in 3D

Für die Konstruktion des optimalen Pfads werden nun Anfangs- und Endpunkt auf dem Körper festgelegt und die kürzeste Linie auf der Oberfläche (geodäsische Linie) zwischen diesen Punkten gelegt.

Aufgrund der Konstruktionsweise des Raumes ist jeder Punkt der Oberfläche mehrwertig belegt: Bei Pans über längere Strecken führt der optimale Pfad mehrmals um die Achse des Rotationskörpers.
 

 

Eigenschaften Kamerafahrt

 

Implementierung

Die Animationsgeschwindigkeit wurde zur Vereinfachung fix angenommen.
Das Rho ist über den Slider links im Userinterface einstellbar.

Es wurde java.awt.* und reines Java2 verwendet und auf komplexe Grafikframeworks wie OpenGL oder Java3D verzichtet. Ein modulares "ZoomablePanel" dient zur Darstellung der Bewegung.

Zu Bemerken ist, dass bei der Implementierung der Formeln aus » Abbildung 4 ein relativ hoher Rechenaufwand entstand, da die Werte bei jedem Schritt neu berechnet werden müssen.

Screenshot
Abb. 11: Screenshot der Applikation

Zum Starten der Funktion muss man zuerst in der Minimap rechts oben im Userinterface zwei Punkte - den Start- und den Endpunkt - mit der Maus wählen. Danach drückt man auf "Start" und im großen Fenster wird die zeigt Bewegung.

"Reset" setzt die Applikation wieder zurück und mit "zoom Out" und "zoom In" kann die Detailansicht im großen Fenster noch detailliert verändert werden.

Über den Button "UW-Raum" kommt man zu einer separaten Darstellung des UW-Raums in einem eigenen Fenster.

Screenshot des Fensters mit UW-Raum
Abb. 12: Screenshot des Fensters mit UW-Raum

Ist das Fenster des UW-Raums offen, so kann man zwischen einer 2D und einer 3D Ansicht wechseln. Die Höhe des Kegels stimmt mit der Höhe des Hinauszoomens überein und die Bewegung des Punktes auf der roten Linie stimmt mit der Translation der virtuellen Kamera überein.  

 

Java-Applet

Falls Ihr Browser Java unterstützt, können Sie unsere Applikation gleich selber ausprobieren!

Applet. 1: Implementierung  

Informationsvisualisierung SS04

Florian Kilzer 0125924
Philip Kügler 9826136
Barbara Ondrisek 9825622

letzte Änderung: 4.7.04