55 |
- windows, frames |
- windows, frames |
56 |
- porthole |
- porthole |
57 |
|
|
58 |
|
(refs from kramer94translucentwindows) |
59 |
|
Sutherland: SketchPAD!?!?!?! |
60 |
|
Kay: Flex, Smalltalk?! |
61 |
|
|
62 |
|
Xerox PARC frames |
63 |
|
|
64 |
- very little variation |
- very little variation |
65 |
|
|
66 |
Even in systems that modify the conventional windowing model, |
Even in systems that modify the conventional windowing model, |
67 |
such as the |
such as the |
68 |
|
3D window manager Task Wall\cite{robertson00task}, |
|
3D window manager "Task Wall" \cite{robertson00task} |
|
|
and Elastic Windows\cite{kandogan96elastic,kandogan97elastic}, |
|
|
3D book of web pages (WebBook)\cite{card96webbook}, |
|
|
organization of documents: LifeStreams\cite{freeman95lifestreams,freeman96lifestreams}, |
|
|
mUltimo3D\cite{liu-threedimensional} |
|
|
SPI hyperdocument presentation interface\cite{hannemann93hyperdocument} |
|
|
|
|
|
the PAD\cite{perlin93pad} zoomable interface and its descendants, |
|
|
PAD++\cite{bederson96padpp,fc-zooming,bederson98implementing} |
|
|
and Jazz\cite{bederson00jazz}. |
|
|
and flip zooming\cite{lars97focus} |
|
|
|
|
69 |
Data mountain\cite{robertson98data} |
Data mountain\cite{robertson98data} |
70 |
BookMap system of integrating navigational aids\cite{hascoet00navigationaids} |
Elastic Windows\cite{kandogan96elastic,kandogan97elastic}, |
71 |
|
3D WebBook\cite{card96webbook}, % real-book look-a-like |
72 |
Even the distortion-oriented Document Lens\cite{robertson93documentlens} |
LifeStreams\cite{freeman95lifestreams,freeman96lifestreams}, % Organizing docs on streams |
73 |
uses rectangular shapes... |
mUltimo3D\cite{liu-threedimensional}, % |
74 |
as does the continuous zoom system in \cite{bartram95continuouszoom} |
SPI hyperdocument presentation interface\cite{hannemann93hyperdocument}, % |
75 |
|
PAD\cite{perlin93pad}, its descendants % zoomable interface and its descendants, |
76 |
|
PAD++\cite{bederson96padpp,fc-zooming,bederson98implementing} |
77 |
The non-rectangularly stretching 3dps\cite{carpendale96multiscale} |
and Jazz\cite{bederson00jazz}, |
78 |
still is contained in a rectangular window. |
flip zooming\cite{lars97focus}, |
79 |
|
BookMap\cite{hascoet00navigationaids}, |
80 |
|
the continuous zoom system in \cite{bartram95continuouszoom} |
81 |
|
and |
82 |
|
the Document Lens\cite{robertson93documentlens} |
83 |
|
the viewports are squarely rectangular. % XXX !!! ;^) |
84 |
|
%The non-rectangularly stretching 3dps\cite{carpendale96multiscale} |
85 |
|
% still is contained in a rectangular window, and |
86 |
|
As an extreme example, |
87 |
|
in \cite{carpendale01presspace}, which deals with fisheye magnification, |
88 |
|
non-rectangular regions are magnified, |
89 |
|
but only rectangular regions are ``lifted off'' the original plane to become |
90 |
|
their own viewports, |
91 |
|
|
92 |
|
|
93 |
|
This list is not intended as a criticism of the above references; |
94 |
|
the work done therein is first-class and focused on other aspects of the user interface. |
95 |
|
What we are trying to demonstrate the dominance of rectangular, |
96 |
|
framed viewports. |
97 |
|
Indeed, the only references we found in the literature where |
98 |
|
non-rectangular viewports are actually used are \cite{kramer94translucentwindows} and \cite{bier93toolglass}. |
99 |
|
XXX go through carefully, explain here |
100 |
|
|
101 |
The Perspective Wall\cite{mackinlay91perspectivewall} |
The Perspective Wall\cite{mackinlay91perspectivewall} |
102 |
bends the rectangular basic shape |
bends the rectangular basic shape, ... |
|
|
|
|
In \cite{carpendale01presspace}, non-rectangular regions are magnified, |
|
|
but only rectangular regions are ``lifted off'' the original plane, |
|
|
|
|
|
|
|
|
These are not criticisms of the above references; the work done therein |
|
|
is first-class. What we are trying to demonstrate is that rectangular, |
|
|
framed cutouts dominate... |
|
|
|
|
|
Only articles we found \cite{kramer94translucentwindows} |
|
|
and Toolglasses \cite{bier93toolglass}. |
|
103 |
|
|
104 |
--- |
--- |
105 |
|
|
106 |
Reasons: - using mostly graph or 2D structure |
Reasons: - using mostly graph or 2D structure |
107 |
|
|
|
|
|
|
the viewports to the |
|
|
|
|
108 |
Practical reasons: efficiency, ease of implementation |
Practical reasons: efficiency, ease of implementation |
109 |
|
|
|
all |
|
|
|
|
|
but still windows and viewports completely |
|
|
rectangular |
|
|
|
|
|
? |
|
|
|
|
|
- document wall?! |
|
|
- fisheye |
|
|
- ? others --- mostly rectangular, though |
|
|
|
|
|
Xerox PARC frames |
|
|
|
|
110 |
|
|
111 |
Non-rectangular window shapes technically possible but not |
Non-rectangular window shapes technically \cite{XSHAPEEXT} |
112 |
|
possible but not |
113 |
used except for some special effects such as a |
used except for some special effects such as a |
114 |
round clock, and amusements such as shooting holes in windows or .... |
round clock, and amusements such as shooting holes in windows \cite{XBLAST} or .... |
115 |
or animated ``agents''\cite{andre98employing} such as the Office Assistants |
or animated ``agents''\cite{andre98employing} such as the Office Assistants |
116 |
of Microsoft Office. |
of Microsoft Office. |
117 |
|
|
185 |
(we shall not be concerned with occlusion by other graphical objects: we shall only |
(we shall not be concerned with occlusion by other graphical objects: we shall only |
186 |
concentrate on the basic characteristics of the viewport). |
concentrate on the basic characteristics of the viewport). |
187 |
|
|
188 |
- fundamental change of model: instead of *framing* the region of paper, |
Viewports are used because the computer screen is finite and we need to be able |
189 |
we *tear* it out of the paper. |
to see a part of the canvas in more detail. |
190 |
|
Indeed, the conventional metaphor for representing viewports {\em is} the computer screen: |
191 |
In the following sections, |
a rectangular region of pixels surrounded by a frame. |
192 |
|
The frame is not affected by the motion of the contents of the viewport. |
193 |
|
|
194 |
|
Tearing, as we propose it, is a different metaphor for viewports. |
195 |
|
Instead of showing a virtual computer screen showing a part of the canvas, |
196 |
|
we show a piece torn off the canvas. |
197 |
|
|
198 |
|
In the following subsections, we first discuss why tearing is desirable (and different |
199 |
|
from the usual viewports), then the details of the design and finally the algorithmic side. The next section concentrates |
200 |
|
on implementing these algorithms at an interactive frame rate. |
201 |
|
|
202 |
\subsection{Rationale ``Why?''} |
\subsection{Rationale ``Why?''} |
203 |
|
|
204 |
|
The important difference is that |
205 |
|
the edge is not a different object; the ``object'' is simply the torn piece. |
206 |
|
|
207 |
|
|
208 |
A smooth rectangular or elliptical frame with scrollbars |
A smooth rectangular or elliptical frame with scrollbars |
209 |
can make small viewports seem claustrophobic. |
can make small viewports seem claustrophobic. |
210 |
One reason for this is that the frame is often visually too small for its contents |
One reason for this is that the frame is often visually too small for its contents |
220 |
The torn edge separates itself visually from the content, alleviating |
The torn edge separates itself visually from the content, alleviating |
221 |
the visual tension... |
the visual tension... |
222 |
|
|
|
Need to maintain illusion: ``we see a piece of the canvas'', not ``we see the canvas through |
|
|
a hole''. |
|
|
If edge does not ripple, claustrophobia comes back! Again, shaped thing PLACED on top of canvas, |
|
|
not part of canvas! |
|
|
|
|
223 |
The irregularity of the edge allows a some of the context of the viewport to be partially |
The irregularity of the edge allows a some of the context of the viewport to be partially |
224 |
seen. |
seen. |
225 |
|
|
237 |
|
|
238 |
\subsection{Detailed design ``What?''} |
\subsection{Detailed design ``What?''} |
239 |
|
|
240 |
- distinguishing between edges of paper and the viewport useful |
In order to create and maintain the illusion: ``we see a piece of the canvas'', |
241 |
- edge of paper = line, edge of viewport = torn |
instead of ``we see the canvas through a hole'', the motion must be carefully designed. |
242 |
- motion: mustn't look like a "window" sliding on top of paper, but |
When the viewport moves on the canvas, it |
243 |
like re-gluing and tearing away a different part of the paper. |
mustn't look like a (rectangular or irregular) "window" sliding on top of paper, but |
244 |
|
instead something like re-gluing and tearing away a different part of the paper. |
245 |
|
To get the correct picture, imagine an animation where the first frame is a given |
246 |
|
torn piece of paper, the next frame is what would have happened if we had torn the paper |
247 |
|
slightly differently etc. Since the paper would have the same weak points, |
248 |
|
the shapes of the nearby tears would resemble each other. |
249 |
|
In particular, if the edge moves parallel to the (overall) direction of the edge, |
250 |
|
the shape should remain the same: see Fig.~xxx. |
251 |
|
|
252 |
|
As to the graphical appearance of the torn viewports, |
253 |
|
there are several reasons to go for nonphotorealistic rendering: |
254 |
|
\begin{itemize} |
255 |
|
\item The ``out-of-band'' semantic information\cite{XXX}: this is {\em not} trying to be |
256 |
|
and behave like a real piece of paper. The motion should thus be easier to understand. |
257 |
|
\item Overall clarity. The seminal paper of Saito and Takahashi\cite{saito90comprehensible} |
258 |
|
introduces non-photorealistic image-space transformations for this very purpose. GUIs |
259 |
|
usually are non-photorealistic anyway. |
260 |
|
\end{itemize} |
261 |
|
|
262 |
- natural visualisation of a piece of a large paper\\ |
Thus, instead of trying to draw a realistic torn piece of paper, we can just |
263 |
- in a computer user interface a piece of paper can be torn without destroying the original\\ |
draw the silhouette edge\cite{XXX}. |
264 |
|
|
265 |
- the movement should be visualized in a comprehensible way\\ |
For the edge thickness, scaling it with the scale of the paper is not good |
266 |
- the torn shape of a point on an edge should be a continuous function of the point's location on the paper\\ |
(too photorealistic...), but neither is a constant width, which ... |
267 |
- the function should change slowly enough so that the dot product of movement direction and edge normal |
Square root XXX refs: stroke scaling in pen drawings? |
|
is visible as the ``rippling speed'' |
|
268 |
|
|
269 |
|
|
270 |
Non-photorealism: easier to understand motion; photorealistic would seem bizarre. |
Edge shapes: attached and sprinkled and intermediates. |
271 |
|
|
272 |
porthole |
Finally, there is the question of what should happen when the viewport reaches the edge |
273 |
|
of the canvas. |
274 |
|
- distinguishing between edges of paper and the viewport useful |
275 |
|
- edge of paper = line, edge of viewport = torn |
276 |
|
|
|
- draw edge |
|
277 |
|
|
|
For the edge thickness, scaling it with the scale of the paper is not good |
|
|
(too photorealistic...), but neither is a constant width, which ... |
|
|
Square root |
|
278 |
|
|
|
Edge shapes: attached and sprinkled and intermediates. |
|
279 |
|
|
280 |
\subsection{Algorithm ``How?''} |
\subsection{Algorithm ``How?''} |
281 |
|
|
282 |
|
In this subsection, we formulate the design criteria of the preceding section mathematically |
283 |
|
to obtain a simple algorithm with the desired properties and an interesting graphical explanation |
284 |
|
for the algorithm. |
285 |
|
|
286 |
|
- the torn shape of a point on an edge should be a continuous function of the point's location on the paper\\ |
287 |
|
- the function should change slowly enough so that the dot product of movement direction and edge normal |
288 |
|
is visible as the ``rippling speed'' |
289 |
|
|
290 |
The jagged shape is defined by a surface $(x, y, f(x,y))$, |
The jagged shape is defined by a surface $(x, y, f(x,y))$, |
291 |
where $0 \le f(x,y) \le 1$ and $(x, y, 1/2)$ is paper location. |
where $0 \le f(x,y) \le 1$ and $(x, y, 1/2)$ is paper location. |
292 |
The shape of an edge torn along a line is obtained by intersecting |
The shape of an edge torn along a line is obtained by intersecting |
313 |
the feature sets of other APIs and manufacturers |
the feature sets of other APIs and manufacturers |
314 |
are quite similar. |
are quite similar. |
315 |
|
|
316 |
Knuth \& John Hobby ref. |
There are two basic alternatives for drawing the shape: either |
317 |
|
by using geometry to draw the jagged edge segment by segment, |
318 |
|
or by using a texture to draw a longer stretch at one time. |
319 |
|
We have chosen the latter approach as the more likely one to |
320 |
|
yield an acceptable performance. Also, it is easier to avoid |
321 |
|
aliasing artifacts in the texture approach.. |
322 |
|
|
323 |
|
|
324 |
\subsection{Drawing the shape} |
\subsection{Drawing the shape} |
325 |
|
|
373 |
|
|
374 |
|
|
375 |
|
|
|
% Takafumi Saito , Tokiichiro Takahashi, NC machining with G-buffer method, ACM SIGGRAPH Computer Graphics, v.25 n.4, p.207-216, July 1991 |
|
|
|
|
376 |
|
|
377 |
Most work to date |
Most work to date |
378 |
on NPR silhouette edges concerns either |
on NPR silhouette edges concerns either |
522 |
|
|
523 |
\section{Conclusions} |
\section{Conclusions} |
524 |
|
|
525 |
|
frequencies: only low/high in frames |
526 |
|
|
527 |
|
interaction with libpaper!!! |
528 |
|
|
529 |
- Ripples take up space? |
- Ripples take up space? |
530 |
- not really, and rounder shapes free it. In some cases, uneven |
- not really, and rounder shapes free it. In some cases, uneven |
531 |
edge could even be seen as being used {\em twice} |
edge could even be seen as being used {\em twice} |
534 |
- for totally free zooming, not so good |
- for totally free zooming, not so good |
535 |
|
|
536 |
- no scrollbars |
- no scrollbars |
537 |
|
porthole |
538 |
|
|
539 |
|
|
540 |
- not needed in proper focus+context UI: if we're interested |
- not needed in proper focus+context UI: if we're interested |
541 |
we just *GO* there and it expands. Can have scrollbars on |
we just *GO* there and it expands. Can have scrollbars on |
542 |
"main" focus view |
"main" focus view |
543 |
|
|
544 |
frequencies: only low/high in frames |
- incompatible with other types of things: |
545 |
|
|
546 |
|
- toolbars, menus |
547 |
|
|
548 |
|
- if using one zoomed window, using a smooth frame is fine |
549 |
|
since the "extra object" of the frame is not there: it is |
550 |
|
the computer screen. |
551 |
|
|
552 |
|
- click - and - switch |
553 |
|
|
554 |
TODO: usability tests |
TODO: usability tests |
555 |
|
|