Smooth and efficient zooming and panning
Jarke J. van Wijk
Wim A.A. Nuij
Technische Universiteit Eindhoven ∗Abstract
Large 2D information spaces, such as maps, images, or abstract visualizations, require views at various level of detail: Close ups toinspect details, overviews to maintain (literally) an overview. Users
often switch between these views. We discuss how smooth animations from one view to another can be defined. To this end, ametric on the effect of simultaneous zooming and panning is defined, based on an estimate of the perceived velocity. Optimal isdefined as smooth and efficient. Given the metric, these terms canbe translated into a computational model, which is used to calculate an analytic solution for optimal animations. The model has
two free parameters: animation speed and zoom/pan trade-off. A
user experiment to find good values for these is described.
CR Categories: I.3.6 [Computer Graphics]: Methodology andTechniques—Interaction techniques; D.2.2 [Software Engineering]: Tools and Techniques—User interfaces
Keywords: Navigation, zooming, panning, scrolling, scale space

1 INTRODUCTION
We consider a simple problem. Suppose, we are developing an interactive cartographic application. The user is presented a map of,say, the US, and can zoom in on regions, states, and cities by picking items from a list or clicking on areas on the screen. We want tooffer a smooth animation from one close-up on the map to another.
How to define this animation?
One encounters this problem frequently. Cartography is theprime example, but in Information Visualization there is an evenstronger need for such smooth animations. Abstract data is typically mapped to 2D graphic representations, such as scatterplots,
graph diagrams, or treemaps. Large data sets lead to large images with much detail. Interaction with these representations is vital to achieve insight, as summarized in Ben Shneiderman’s Visual
Information Seeking mantra: Overview, zoom & filter, details-ondemand [Shneiderman 1996]. Another key concept in Information
Visualization is focus+context. Both stress that data must be visualized at several levels of scale: The user must be enabled to zoom inand focus, while on the other hand he should maintain an overview
and understand the context of the data focussed on. One solution is
to offer multiple representations at different scales simultaneously,
another class of solutions concerns distortion of space, such as fish∗ {vanwijk, wsinwaan}@win.tue.nl, Department of Mathematics andComputer Science, Technische Universiteit Eindhoven, The Netherlands

eye views [Furnas 1986]. Here we consider the use of the time
dimension for this purpose. In other words, if the user shifts his
attention, from overview to detail or from one detail to another,a smooth transition aids in understanding the relation between thetwo views.
At first sight, interpolation (linear in space, logarithmic in scale)might seem to be sufficient to make the transition from one view toanother. However, this solution falls short when the transition has
to be made from one close-up to another. For instance, suppose we
focus on New York and shift to Los Angeles. Such a simple solution
leads to a long animation, where a small strip of the US is shown indetail. A somewhat better solution is to zoom out first, pan acrossthe continent, followed by a zoom in on the city of destination. But
how much to zoom out? How much time should the animation take?
How to combine zooming and panning? What is the optimal path?
How can we define optimal here? The problem is less simple thanit seems at first sight.
In this paper we present a solution to this problem, or, in otherwords, we present a computational model for fast navigation inscale space. After a review of related work in section 2, we analyze
the problem in section 3. Central is the definition of a metric on theeffect of zooming and panning, derived from an estimate of averagevelocity. Based on this metric we first present an optimal solution
for a simple zoom-out, pan, zoom-in scenario (section 4). Next we
consider arbitrary transitions (section 5) and present how an optimal
path of a virtual camera can be determined analytically given two
projections. In section 6 we present a first user experiment in order
to find satisfying values for the two free parameters in the model(animation speed and zoom/pan trade off). Finally, conclusions are
drawn and possible extensions are discussed in section 7.

2 BACKGROUND
The importance of viewing at different levels of scale, or for shortmultiscale viewing, is addressed in many articles on visualization,and can be found in many interactive applications, not only visualization tools, but also image viewers, word processors, games, etc..
Bederson has shown with his work on Zoomable User Interfaces[Bederson et al. 1994; Bederson et al. 2000] how flexible viewing
can be used as a foundation for intuitive user interfaces.
Surprisingly however, we could only find one reference where
the problem we address here is discussed explicitly. George Furnas
and Ben Bederson [1995] present Space-Scale Diagrams: a visual
depiction of multiscale viewing. The horizontal axis denotes space,
the vertical axis denotes scale. Furnas and Bederson show how thisdiagram can be employed to attack a variety of problems associatedwith multi scale viewing, including optimal pan-zoom trajectories.
Optimal is translated here as the shortest path. To determine thelength of a path, they present measures for pure panning and zooming, based on an information metric. The distance between twoviews is expressed as the number of bits required to encode the difference between the two frames. For panning this is equal to βd,where β is the bit density of the image and d is the displacement inscreen units, for zooming this is equal to βw log r , where w is thewidth of the screen, and r is the zoom factor. Guidelines for several piecewise pure pans or zooms trajectories are given, but for the
truly optimal shape, the authors remark that such trajectories ”willworld

y

c(s)

u

w1

c0

w(s)

wor

s=0

x

d

s
image spaces=S

Figure 1: World space and image spacehave a complicated curved shape, and finding it is a complicatedcalculus-of-variations problem”.
A related topic has been addressed by Igarashi et al. [2000].
They consider how to improve the browsing through large documents. They recommend that during scrolling the view shouldzoom out automatically, such that the perceptual scrolling speed inscreen space remains constant.
Our approach has a similar structure as that of Furnas and Bederson, but differs in the way various aspects are filled in. We discuss
the problem in u, w space, where u denotes panning and w denotes
zooming, both measured in world coordinates. We use u, w diagrams, which are simpler to understand and work with than spacescale diagrams. We define optimal as smooth and efficient, definea metric to measure the effect of combined zooming and panning,and derive, based on differential geometry, differential equations
that describe optimal paths. We solve these explicitly, first for azoom-pan-zoom strategy, and next to find the optimal path. Finally,
we present a small-scale user experiment to find good values for thetwo free parameters we have introduced.

3 MODELIn this section we define the projection in more detail, followed byour definition of optimality, and the definition of a metric to assess
the effect of zooming and panning. This metric is next used todefine optimality quantitatively.

3.1

Projection

We consider the projection of a square subset A of an object M toimage space I . M is defined over an area W ⊂ IR2 , A ⊂ W , where
W denotes world space. We define the area of interest A by a center
point c = (cx , c y ) ∈ W and a width w, i.e.
A = [cx − w/2, cx + w/2] × [c y − w/2, c y + w/2].
For the image space I we use normalized device coordinates: a unit
square, centered around the origin, i.e.
I = [−1/2, 1/2] × [−1/2, 1/2].

w

pan(u0, w0)(u(s), w(s))(u1, w1)

w0
world space

zoom

c1

w0

w1

u0

u1 u

Figure 2: u, w space diagram
The projection of a point x = (x, y) ∈ A to a point x = (x  , y  ) ∈I is then simply
x − cx y − c y,(1)(x  , y  ) =,w
w
the inverse projection is given by(x, y) = (cx + wx  , c y + wy  ).

(2)

Suppose now that two areas of interest A0 and A1 are given, definedby ci , wi , with i = 0, 1, and that an animation from the first to thesecond has to be defined (see figure 1). To this end we have to findfunctions c(s) and w(s), s ∈ [0, S], such that at leastc(0) = c0 ,c(S) = c1 ,w(0) = w0 ,w(S) = w1 .

The parameter s is along a path from the first to the second projection, and S denotes the final value. The functions c(s) and w(s)denote the path of the camera and the width shown along the path.
An animation can now be defined by settings = V t, t ∈ [0, S/V ],(3)

where V denotes the constant animation speed, and t wall clock
time, for instance in seconds. In the remainder we will use s as
main parameter, decoupled from the basic animation speed V . For
convenience, if a unit speed is assumed, s and t are interchangeable.
We simplify the problem by assuming that there is no perceptual
difference between horizontal, diagonal, and vertical panning. In
this case an optimal path c(s) is always a straight line, and hence
we can definec(s) = c0 +c1 − c0u(s), u ∈ [u 0 , u 1 ],
c1 − c0 

(4)with u 0 = 0 and u 1 = c1 − c0 .
The parameter u(s) denotes panning along a straight line. We
have to find functions u(s) and w(s), s ∈ [0, S], such that at leastu(0) = u 0 ,u(S) = u 1 ,w(0) = w0 ,w(S) = w1 .

(5)

We can depict the problem in (u, w) space, as shown in figure 2.
We found these diagrams, which we called u, w-diagrams, moreconvenient to reason about the problem than space scale diagrams.
Each projection maps to a point in the diagram. Zooming and panning naturally map to moving a point vertically or horizontally. The
axes have the same dimension, both units in world space. Furthermore, the diagram enables a direct physical interpretation. The horizontal axis can be considered as a cross-section through the object

M to be displayed, the point can be interpreted as a camera, floating
at a height w above M with a field of view of 2 arctan 1/2 ≈ 53 ◦ .
The path (u(s), w(s)) is hence simply the path of a camera, flying
above a map. This can be emulated physically: Position yourself
in front of an image, look perpendicular to this image, and moveyour head according to a camera path (or, move the image). In thisway we can try out various scenarios for zooming and panning inan easy way, and obtain a rough feeling for optimal paths.

mean squared average velocity VRMSV 2 I ẋ · ẋ d I
2

VRMS
=
I dI
 1/2  1/2(ẋ 2 + ẏ 2 )d x  dy 
= V2
−1/2 −1/2=

3.2

Requirements

The next question is what an optimal path is. We think this can besummarized in two words: The optimal path should be smooth andefficient. Smoothness is a constraint. The path should be at least
continuous in the first order, in the sense that no sudden steps are
made or abrupt changes in direction occur. These are requirementson the shape of the path. Furthermore the parametrization of thepath must be chosen carefully. We formulate this as follows. Whenthe camera moves along the path, the viewer should get the impression of a uniform and constant motion of the projected image
on the screen. We limit ourselves to the perceptual level here, anddiscard cognitive aspects, such as memory, meaning of the image
shown etc. Such aspects are much harder to incorporate in a model,
and we assume that a perceptually smooth motion will also aid in
cognition.
Furthermore, in the remainder we assume that each projectedpart of M has the same characteristics, i.e. each image shown isequally interesting, has the same visual density, etc. for the rangeof c and w of interest, and that there are no discontinuities in the displayed image for varying w. In a strict sense, this requirement can
only be met by artificial imagery with fractal characteristics. In realworld applications, such as cartography, urban areas are more interesting than uniformly colored oceans, in strong close-up views often less detail is available. On the other hand, most applications forwhich interactive zooming is interesting will have details at many
scales, and it is the task of the designer to make sure that at eachscale an appropriate level of detail is shown. In cartography this iswell-known as generalization.
The aspect to be optimized is efficiency. We operationalize thisby aiming for the shortest path in u, w space possible: Detours are
not appreciated, we want to get from A to B as fast as possible.

3.3

MetricWe aim for a path that is smooth and efficient. Both require that weare able to measure the effect of changing c and w, as perceived by
the viewer. Following and generalizing the approach of Igarashi andHinckley [2000], we use the velocity of the moving image as a basis
for measurements, i.e., we aim at a metric for the perceived average
optic flow in the image window. To this end, we first consider thevelocity ẋ of a projected point x in image space. We use a centered
dot as notation for differentiation with respect to s, e.g. ȧ = da/ds.
Differentiation of (1) gives
ẋ =



−x ẇ − ċx w + cx ẇ −y ẇ − ċ y w + c y ẇ
,
w2
w2


,

or, using (2)
ẋ =



−x  ẇ − ċ
w

x

,


−y  ẇ − ċ y
w

=



1
1
1
c˙x 2 + 2 c˙y 2 +
ẇ2
2
w
w
6w2


1 2
1
2 .
u̇
+
ẇ
V2
w2
6w2
V2



VRMS is proportional to the animation velocity V , and the zoom
velocity ẇ and pan velocity u̇, both relative to the width w in worldspace. Also, VRMS shows that zooming has less impact (the factor 1/6) than panning. At this point it is too early to use VRMS
directly as a measure. We cannot be sure that the perceptual effect of zooming versus panning is indeed measured by the averagevelocity. Hence, we define a metric on (u, w) space that is moregeneral:ρ2
1(6)
ds 2 = 2 du 2 + 2 2 dw2 .
w
ρ w
This metric gives the distance ds travelled, when u and w arechanged with du and dw. The parameter ρ represents a trade-off
between zooming and panning. A high value indicates that zooming has little impact, a low value indicates that panning has less
impact. For ρ = 61/4 ≈ 1.565, the metric is equivalent to using
VRMS as a measure. The best value for ρ depends on the subjective
perception of the viewer, and has to be found experimentally. Results from such experiments and suggestions for good values of ρ
are given in section 6.
Figure 3 shows a visualization of the metric defined in (6) for
various values of ρ in (u, w) space. Each small ellipse denotes
a set of points equidistant to its center according to the metric in(u, w) space. The shape of the ellipses is determined by ρ, theirsize is proportional to w.
Given the metric, an optimal path can now be defined more precisely. Two conditions must be satisfied. First, the animation should
be smooth. In other words, when s varies constantly, the perceived
rate of change has to be constant according to the metric. This implies that the path (u(s), w(s)) has to be arc length parametrized,
and should satisfy the following differential equation, derived directly from the metric:
ρ 2 u̇ 2 + ẇ2 /ρ 2 = w2 .

(7)

Secondly, the animation should be efficient. If the path is arc lengthparametrized, then s represents the distance travelled. Efficiency
then implies that the total distance S should be minimal.
In terms of figure 3, the task of finding an optimal path loosely
comes down to finding a path between two points, such that at eachstep along the path the same number of ellipses is crossed, and thatin total as few ellipses as possible are crossed. For each value of ρsuch an optimal path is shown, where the dots indicate equidistantpoints. The shapes of these paths depend on ρ: little zooming forlow ρ, much zooming for high ρ.

4 ZOOM OUT, PAN, ZOOM IN.

We are not only interested in a single point, we have to measure thevelocity over the whole screen space I . For this we use the root

We illustrate the preceding ideas first for a simple scenario, in thenext section we consider optimal paths. Figure 4 shows a simple
path:• for s = 0 to s A : zoom out from (u 0 , w0 ) to (u 0 , wm );

w
wm
w0
w

s = sAs = sBzoom out

zoom ins=0

w1

ρ2 = 0.625

pan

s=S
u0

30

u1 u

Figure 4: Zoom out, pan, zoom in
20• for s = s A to s B : pan from (u 0 , wm ) to (u 1 , wm );10• for s = s B to S: zoom in from (u 1 , wm ) to (u 1 , w1 ).

10

20

w

30

40

50

u

ρ2 = 1The problem now is to define a path (u(s), w(s)) such that thepath is arc length parametrized and that the total path length S is
minimal. For the first interval, where u̇ = 0, the first condition(7) reduces to ẇ = ρw. A solution of this equation that satisfies
w(0) = w0 is
w(s) = w0 exp(ρs), s ∈ [0, s A ].

30

This is consistent with the recommendation given in [Mackinlay
et al. 1990], where the use of a logarithmically slower movement isadvocated when the target (in 3D) is approached. Similarly we findfor the last interval

20w(s) = wm exp(ρ(s B − s)), s ∈ [s B , S].
10

For the panning interval in between, where ẇ = 0, the arc lengthparametrization condition reduces to u̇ = wm /ρ. The solution ofthis equation that satisfies u(s A ) = u 0 is
10

20

w

30

40

50

u

2

ρ = 1.6

u(s) = wm (s − s A )/ρ + u 0 , s ∈ [s A , s B ].
The quantities s A , s B , and S depend on wm . The value of wm
should be chosen such that S is minimal. We determine first the
total length by considering the length of the three intervals. First,
the length of the first interval follows from w(s A ) = wm , i.e.

30

s A = ln(wm /w0 )/ρ, wm ≥ w0 .
20

Similarly, we find for the length of the last interval
S − s B = ln(wm /w1 )/ρ, wm ≥ w1 .

10

The constraints wm ≥ w0 and wm ≥ w1 are required here to makesure that no negative pathlengths are generated. Using u(s B ) = u 1
we find for the length of the panning phase:
10

20

30

40

Figure 3: Metric in (u, w) space50us B − s A = ρ(u 1 − u 0 )/wm .
Hence, the total length S, expressed in wm , isS=ρ(u 1 − u 0 ) ln(wm /w0 ) ln(wm /w1 )
+
.
+
wm
ρ
ρ

S is minimal if d S/dwm = 0. This gives−ρ(u 1 − u 0 )
2
wm

+

2
= 0.
ρwm

Together with the constraints that wm ≥ w0 and wm ≥ w1 , we get
the optimal value for wm(e.g. E u = ∂ E/∂u). For our metric E = ρ 2 /w2 and G = 1/ρ 2 w2 ,substitution gives

wm = max(w0 , w1 , ρ 2 (u 1 − u 0 )/2),
which completes the derivation of the optimal path for this simple scenario. In summary, we have found that the optimal path(u(s), w(s)) for s ∈ [0, S] for the zoom-pan-zoom scenario is given
by:

u(s)

=


 u0
if 0 ≤ s < s A
wm (s − s A )/ρ + u 0 if s A ≤ s < s B u
if s B ≤ s ≤ S1
 w0 exp(ρs)
if 0 ≤ s < s A
wm
if s A ≤ s < s B w exp(ρ(s − s)) if s ≤ s ≤ S
m
B
B

w(s)

=

sA
sB
S

=
=
=

ln(wm /w0 )/ρ
s A + ρ(u 1 − u 0 )/wms B + ln(wm /w1 )/ρ

wm=

max(w0 , w1 , ρ 2 (u 1 − u 0 )/2).

Ignoring the constraints, the optimal value of wm depends only onρ and on the distance between c0 and c1 . For ρ = 61/4 , wm ≈1.2c1 − c0 , i.e. one has to zoom out to such a level that boththe start point c0 and the end point c1 are visible at some moment
during the flight.

5 THE OPTIMAL PATH
The preceding section dealt with a path with a rectangular shape.
The smoothness criterion is violated here: At the corners the motion
is discontinuous. Also, the total length is not optimal: By cutting
corners a shorter path can be achieved. An optimal path between(u 0 , w0 ) and (u 1 , w1 ) has to satisfy the boundary conditions givenin (5), and the arc length parametrization condition (7). Furthermore, it has to be the shortest path between the two points, i.e. thegeodesic.
In standard Euclidean space a geodesic is a straight line, incurved space this is usually a curve. A classic example is spherical space, used for mapping spheres. On a longitude, latitude map
a line does not give the shortest path on the sphere, whereas a great
circle does. Also our (u, w) space is curved, because of the metric
we have defined. In Appendix 1 we illustrate how this curved spacecan be depicted geometrically.
Curved space is studied with analytical means in differential
geometry, of which Gauss and Beltrami can be considered thefounders. From this vast area we only need how from the metrican equation for the geodesics can be found [Struik 1950; Auslander 1967; Lipschutz 1969]. Differential geometry tells us that for aspace with a metric of the form
ds 2 = E du 2 + G dw2 ,a geodesic (u(s), w(s)) has to satisfy the following equations
ü +

Gu 2
Eu 2 Ewu̇ +u̇ ẇ −ẇ = 0, and
2E
E
2E

ẅ −

Ew 2 G u
Gw 2u̇ +u̇ ẇ +ẇ = 0,2G
G2G

where double dots denote double differentiation with respect to s(e.g. ü = d 2 u/ds 2 ), and subscripts denote partial differentationü − 2u̇ ẇ/w = 0, and(8)ẅ + ρ 4 u̇ 2 /w − ẇ2 /w = 0.

Hence, the optimal path is the solution for (u(s), w(s)) that satisfies equations (5), (7), and (8). In Appendix 2 we show how theanalytical solution can be derived, here we give the final result for(u(s), w(s)), s ∈ [0, S], u 0 = u 1 :
u(s)

=

w(s)
S

=
=

ri

=

bi

=

w0
w
cosh r0 tanh(ρs + r0 ) − 20 sinh r0 + u 0 ,2ρρ
w0 cosh r0 / cosh(ρs + r0 ),(r1 − r0 )/ρ,(9)
2
ln(−bi + bi + 1), i = 0, 1, andw12 − w02 + (−1)i ρ 4 (u 1 − u 0 )2
2wi ρ 2 (u 1 − u 0 ), i = 0, 1,

where the hyperbolic cosine, sine, and tangens are defined ascosh x = (e x + e−x )/2, sinh x = (e x − e−x )/2, and tanh x =sinh x/ cosh x. For u 0 = u 1 the optimal path is given by
u(s)
w(s)
S

=
=
=

k

=

u0
w0 exp(kρs)| ln(w1 /w0 )|/ρ
−1
1

if w1 < w0otherwise

Figure 5 shows sets of geodesic paths, starting from u = 0 and
w = 10 in different directions, for various values of ρ. Furthermore, in each plot a set of contours is shown as thin lines. Eachcontour represents a set of points at an equal distance from thestart point. Both the paths and the contours are parts of ellipses,
where ρ again determines their shapes. A path lies on the ellipse
through (u 0 , w0 ) and (u 1 , w1 ) with center (u 0 − w0 sinh r0 /ρ 2 , 0),
the lengths of the axes in u and w direction are w0 cosh r0 /ρ 2 andw0 cosh r0 respectively. For ρ = 1 paths are circles. The centerlies on the u-axis. For s → ±∞ the path approaches the horizontal
axis perpendicularly, i.e. for small w panning is not effective.
Given these images, the structure of equation (9) can now be
understood more easily. The elliptic path is defined by (u, w) =(tanh(s)/ρ 2 , 1/ cosh(s)), the other constants involved make surethat the ellipse passes through (u 0 , w0 ) and (u 1 , w1 ), and that theparametrization fits the measure.
Figure 6 shows another visualization of the paths. The horizontal axis denotes s, the vertical axis u. The thick lines show u(s)for three values of ρ. This shows that the virtual camera moves
smoothly and monotonically in the direction of u 1 . Furthermore
the instantaneous width is shown: the interval between the graphsof u(s) − w(s)/2 and u(s) + w(s)/2, shown as thin lines. Again,
the effect of different values for ρ is clearly visible.
The scale of s has not been discussed so far. For this case, thetotal path length S varies from about 4.2 to 4.5. What is this dimension? For a pure panning motion we find that value s corresponds
to a motion of ρu/w, i.e. s relates here to ρ times the number ofimage widths panned, which is a fairly natural and understandable
measure. For example, for ρ = 1 panning from (u, w) = (0, 10)
to (40, 10) gives a distance s = 4. For a zoom out with a factor

u
40
30
w

ρ2 = 1.6

2

ρ = 0.625

20

ρ2 = 1.

1030

ρ2 = 0.625
1

20

2

3

4

5

s

− 10

Figure 6: u and w as a function of s

10

10

20

w

30

40

50

30

40

50

u

2

ρ =1

30

20

10

10

20

w

u

ρ2 = 1.6

r = w1 /w0 we find that the corresponding s equals ln r/ρ. Hence,zooming in from (40, 10) to (40, 1) gives a distance of s ≈ 2.3.
The paths derived here and in the previous section can easily
be translated into an implementation of a smooth animation. The
simplest and also most flexible approach is to calculate for each new
frame everything anew. We take advantage here of the property thatgeodesics are unique: if C is a point on the geodesic from A to B,
then the geodesic from C to B is a subset of the original one. We
typically use a procedure which takes as input the current view (c0and w0 ), the target view (c1 and w1 ), the animation parameters (Vand ρ), and the time step t between frames, and which returns
the view (c and w) for the next frame. For the time step we use an
average value of the last five to ten frames.
Another implementation is to recalculate the path only when oneof the parameters changes. This requires two separate procedures(one for making a step and one for changing the path), where carehas to be taken that the latter one is always called when a parameter is changed. The suggested state-less implementation takes careof this automatically, simplifying the change of parameters during
the flight, at the expense of some additional computing cost. But
typically, this cost is neglectable when compared to the renderingof the frame.

30

6 USER EXPERIMENTS
20

10

10

20

30

40

50

Figure 5: Paths and iso-distance curves in (u, w) spaceu

We have done a first user experiment to obtain insight in preferredvalues for V and ρ. We have implemented a small application
where the user can load an image, define areas of interest, switch
between these areas, upon which a smooth animation is shown withuser-defined settings for V and ρ. Also, the application has a test
mode for more controlled experiments. We used a high resolution
height map of Mars as image. This image was visually interesting,contains information on various scales, and was unfamiliar to ourusers. We explained the background of the experiments, and asked
the users to set V and ρ for two conditions. First, an alternating
zoom-pan animation between two locations was shown, secondly, atour around ten different locations was shown. We asked the users
to set the parameters such that the perceived animation was smooth,fluent, and suitable for a daily use application. The task was done at
a notebook computer, and took about 5 minutes to complete. Users
could set the values via sliders, no feedback on numerical values
was given to prevent bias. The 26 users were colleagues and students from our department, and all had (much) experience with using computers.
Many users commented on the importance of cognitive aspects.

V

2,5
2
1,5
1
0,5
0
0

0,5

roundtrip

1

tour

1,5

2

2,5

average3

ρFigure 7: Scatterplot of V and ρ values found
They pointed out that familiarity of the image shown, the amountof detail in the image, and the exact task would influence their preferences. Also, we found that some users set ρ to get a zoom-out
level which they liked, where the aspect of smooth motion was oflesser importance. On the positive side, the users found the final
paths (given their preferences) smooth, pleasant, and natural.
Figure 7 shows the parameter settings that were selected by ourusers. It shows that preference for ρ and V were uncorrelated,
hence these seem to be independent dimensions, and that the conditions (two vs. ten locations) did not strongly influence the result.
The average value for V is 0.90, the standard deviation 0.43. For
ρ the average value is 1.42 and the standard deviation is 0.47. The
value of 1.42 is (statistically significant) smaller than 1.565, thevalue which we derived from using the root mean squared
average√velocity. The average value found suggests that ρ = 2 is possiblyan optimal value, but we have not found yet a model to explain this.
Furthermore, the variation in the results was large, much larger thanwe expected. Nevertheless, we think that these average values will
yield reasonable results for a variety of users and use cases. For an
optimal result, the setting has to be customizable to the preferenceof the user.

7 CONCLUSIONS
We have shown how to generate a smooth animation from one viewon a 2D model to another. The problem turned out to be more complex than it seems at first sight, we needed differential geometry
and had to solve a system of three differential equations to find an
optimal path. Was this worth it? We think it was. The end result
is a set of closed equations, which can easily be used to implementsmooth and efficient zooming and panning. The visual result, as
we observed from user tests is pleasing and smooth. The original
impetus for this work was the visualization of call graphs via a hierarchical matrix visualization [van Ham 2003]. The use of a smoothzoom-pan strategy to maintain a good overview was vital here, because the information shown is abstract and varies per level. The
method described here has been integrated, and gives very good results, visually. Finally, there are many other applications that cantake advantage of this method, i.e. any application where a user
observes some 2D object and is enabled to zoom and pan.
Besides from practical use, the approach described here is alsointeresting from a more theoretical point of view. We used measurement of average perceived velocity as our starting point, andhave presented a model to relate zooming and panning. In the future we will explore if the approach described here also can deal
with more general image transforms, especially anisotropic scaling
and rotation. Another possible variation is to use a varying velocity,such as acceleration at the beginning and deceleration at the end of
the animation. Furthermore, we focussed here on animations where
the start and end are given. The metric introduced here can possibly
also be used to optimize free navigation, where the user is free tocontrol the path himself.
We aimed at perceptually pleasing results, however, cognitive aspects also play an important role for this kind of animations. Moreresearch can be done to study the role of perception versus cognition. Specifically, it is interesting to study what the average value
and variation of ρ is when perceptual effects are isolated in someway. A more precise analysis of the various cognitive aspects aswell as guidelines for good values for ρ given a variety of tasks,
image contents, etc. would be useful. An extended model, in which
the user can additionally specify that he for instance wants to zoom
out more than the optimal paths defined here could also be useful
to tackle the cognitive aspects. Meanwhile however, the model presented here is already useful for a variety of cases, especially if theuser can tune the two parameters to his preferences.

References
AUSLANDER , L. 1967. Differential geometry. Harper&Row. p. 165.
B EDERSON , B., S TEAD , L., AND H OLLAN , J. 1994. Pad++: Advancesin multiscale interfaces. In Proceedings of CHI’94 Human Factors in
Computing Systems, 315–316.
B EDERSON , B., M EYER , J., AND G OOD , L. 2000. Jazz: An extensible zoomable user interface graphics toolkit in java. In Proceedings
UIST 2000, ACM Symposium on User Interface Software and Technology, 171–180.
F URNAS , G., AND B EDERSON , B. 1995. Space-scale diagrams: Understanding multiscale interfaces. In Proceedings of CHI’95 Human Factors
in Computing Systems, 234–241.
F URNAS , G. 1986. Generalised fisheye views. In Proceedings of CHI’86,
16–23.
I GARASHI , T., AND H INCKLEY, K. 2000. Speed-dependent automatic
zooming for browsing large documents. CHI Letters 2, 2, 139–148. Proceedings UIST 2000, ACM Symposium on User Interface Software andTechnology.
L IPSCHUTZ , M. 1969. Differential Geometry. McGraw-Hill. p. 234.
M ACKINLAY, J., C ARD , S., AND ROBERTSON , G. 1990. Rapid controlled
movement through a virtual 3d workspace. Computer Graphics 24, 4,
171–176. Proceedings of SIGGRAPH’90.
S HNEIDERMAN , B. 1996. The eyes have it: A task by data type taxonomy
of information visualizations. In Proceedings of IEEE Symposium on
Visual Languages ’96, 336–343.
S TRUIK , D. 1950. Lectures in classical differential geometry. AddisonWesley. p. 142.
VAN H AM , F.

2003. Using multi-level call matrices in large software
projects. In Proceedings IEEE InfoVis 2003.

APPENDIX 1 – CURVED SPACE
To illustrate this concept of curved space, we consider what geometric surface corresponds to our metric, like a sphere correspondswith the longitude latitude map. Loosely, we distort the 2D images
shown in figure 3 to a 3D surface, such that all ellipses are distorted
to circles with the same size. To this end, one has to shrink horizontal lines (w constant) for high values of w, and to stretch themfor low values. This will give a rotationally symmetric 3D surface.
Horizontal lines are distorted into circles, or, in other words, the uparameter is mapped to rotation.

w

Equation (11) can be satisfied by introducing an extra parameterβ(s) and setting
=
=

u̇
ẇ

w sin(2β)/ρ, andwρ cos(2β).

(13)
(14)

If we substitute this in (12), both equations reduce toρ ds = dβ/ sin β cos β.
Integration gives, with r0 an integration constant,ρs + r0 = ln tan β,∗

If we set s ∗ = ρs + r0 to shorten notation, then we get tan β = es .
The use of cos 2β = (1 − tan2 β)/(1 + tan2 β) in equation (14)leads to
ẇ

u

=
=

∗

∗

ρw(1 − e2s )/(1 + e2s )−ρw sinh s ∗ / cosh s ∗ .

Rearrangement and integration give
Figure 8: u, w space depicted as a geometric surface

ln w
hence

More formally, let us consider a parametric surface x(u, w) =(x(u, w), y(u, w), z(u, v)). The length of a small step dx =xu du + xv dv has to fit the measure, i.e.
dx · dx =1
ρ2
du 2 + 2 2 dw2 .
w2ρ w

z(u, w)===(ρ/w) cos u,(ρ/w) sin u, and1ln(w + w2 − ρ 4 ) −ρwhere A is an integration constant.
Using sin 2β = tan β/(1 + tan2 β) in (13) a similar derivation leadsto(16)
u(s) = A tanh(ρs + r0 )/ρ 2 + B,

A = w1 cosh r1 .
Combination of the last two equations gives
w1 cosh r1 − w0 cosh r0 = 0.

it has to be arc length parametrized:B=

u 0 − (w0 /ρ 2 ) sinh r0 , andB=

u 1 − (w1 /ρ 2 ) sinh r1 ,and combined

and has to satisfy the geodesic equations
(12)

(18)

Let U = (u 1 − u 0 )ρ 2 . The unknown r1 can be eliminated from(17) and (18) by using cosh2 r1 − sinh2 r1 = 1, resulting in
w12 = w02 − 2w0 U sinh r0 − U 2 ,sosinh r0 = (w02 − w12 − U 2 )/2w0 U = −b0 ,

hence
(11)

(17)

Similarly, the use of u(0) = u 0 and u(S) = u 1 gives

w1 sinh r1 − w0 sinh r0 = (u 1 − u 0 )ρ 2 .

In this appendix we give the derivation of the optimal path(u(s), w(s)), s ∈ [0, S]. This path has to satisfy the boundary conditions
u(0) = u 0 , w(0) = w0 ,(10)u(S) = u 1 , w(S) = w1 ;ẅ + ρ 4 u̇ 2 /w − ẇ2 /w = 0.

(15)

Let r1 = r0 + ρ S. From w(S) = w1 we get

APPENDIX 2 – DERIVATION PATHü − 2u̇ ẇ/w = 0, andw(s) = A/ cosh(ρs + r0 ),A = w0 cosh r0 .
w2 − ρ 4.
wρ

The horizontal circles are lines with constant w, the lines towards
the top are lines with constant u. In other words, panning is mapped
to rotating around the central axis. Panning over large distances
corresponds to rotating multiple times around the central axis, eachpoint on the surface is multi-valued. Zooming out corresponds toclimbing the object, zooming in to descending. Note that the squaregrid cells shrink when w increases. Two geodesics are shown. For
large panning distances (moving multiple times around the centralaxis) the geodesic is located high on the surface, i.e. zooming out
is stronger.

ρ 2 u̇ 2 + ẇ2 /ρ 2 = w2 ,ln A − ln cosh s ∗ ,where B is yet another integration constant.
We have now found u(s) and w(s), the next step is to set the four
unknown constants A, B, r0 , and S such that the boundary conditions (10) are satisfied. From w(0) = w0 we get

Figure 8 shows a surface that satisfies this constraint:x(u, w)y(u, w)=r0 = ln(−b0 +b02 + 1).

Similarly, elimination of r0 from (17) and (18) gives
r1 = ln(−b1 + b12 + 1)
which completes the derivation of u(s) and w(s).