SYNCHRONIZING USER INTERACTIONS WITH MULTIPLE

PARAMETRIZED THREE-DIMENSIONAL WEB GRAPHICS

Martin Kraus

Computer Graphics & Visualization Group, Technische Universit¨at M¨unchen, Boltzmannstraße 3, 85748 Garching, Germany

Keywords:

Three-dimensional graphics, Web graphics, Parametrized graphics, Interactive graphics, Interactive illustra-

tions, Synchronized graphics.

Abstract:

The synchronization of a single user’s interactions with multiple parametrized graphics in a single web page

is an important and powerful feature of interactive illustrations. In this work we present an interface to specify

this kind of synchronization and its implementation in a Java applet for rendering and interacting with three-

dimensional web graphics. Our design allows authors of web pages to synchronize the parameters of groups

of interactive graphics within a web page by specifying identical text labels for all applets of the same group.

Further labels may be speciﬁed to synchronize changes of the viewpoints and/or of the magniﬁcation. This

design allows for multiple, independently synchronized groups of graphics on the same web page as well as

any combination of synchronized parameters, viewpoints and magniﬁcation factors. Only three additional

applet parameters are necessary, which are not restricted by any syntax.

1 INTRODUCTION

The support of web browsers for Java applets has led

to the development of many interactive web graph-

ics for illustration purposes. While most of these

graphics are restricted to two dimensions, there are

also many applets for three-dimensional illustrations.

Moreover, there are several frameworks for the design

of interactive illustrations that address the problem of

reducing the associated development costs, which are

usually signiﬁcantly higher than the costs for static il-

lustrations.

One particular approach to the design of interac-

tive illustrations are “parametrized graphics” (Kraus,

2008). In this case, the underlying scene depends on a

set of parameters and is rebuilt (usually from scratch)

whenever any of the parameters is changed by the

user or due to an automatic animation. In general,

this approach simpliﬁes the development of interac-

tive illustrations dramatically as shown, for example,

by the “Wolfram Demonstrations Project” (Wolfram

Research, 2008). Another example for this approach

is the related Java applet “LiveGraphics3D” (Kraus,

2002), which serves as the test bed for our work.

Traditionally, many static illustrations accompany

a single main text. On the other hand, the develop-

ment of interactive illustrations and graphics is usu-

ally too costly to produce a similar amount of inter-

active illustrations. Moreover, some viewers for in-

teractive graphics are restricted to a single graphics

at a time. Thus, in most cases, only a single interac-

tive illustration is included in each document. There-

fore, the problem of synchronizing multiple interac-

tive illustrations in the same document has not re-

ceived much attention in the past.

However, the reduction of development costs en-

abled by parametrized graphics already resulted in

large collections of interactive illustrations and is

therefore very likely to lead to web pages and elec-

tronic documents that include multiple interactive il-

lustrations. Synchronizing these illustrations is not

always necessary; however, there are several im-

portant applications of synchronized graphics, such

as multiple views from different points of view,

overview+focustechniques, multiple “ﬁltered” views,

consistent step-by-step illustrations for variable pa-

rameters, and sliders, dials, virtual trackballs, or other

2D and 3D widgets, which provide alternative in-

terfaces for manipulating parameters of interactive

graphics.

While all these techniques can also be imple-

mented within a single graphics, the synchroniza-

tion of multiple graphics is more general and simpli-

ﬁes the development of both, the viewer and the ac-

401

Kraus M. (2009).

SYNCHRONIZING USER INTERACTIONS WITH MULTIPLE PARAMETRIZED THREE-DIMENSIONAL WEB GRAPHICS.

In Proceedings of the Fourth International Conference on Computer Graphics Theory and Applications, pages 401-404

DOI: 10.5220/0001773104010404

 SciTePress

tual content. Moreover, side-by-side comparisons of

graphics embedded in hypermedia documents are of-

ten preferable for presentation purposes and can only

be achieved by synchronizing multiple graphics.

In this work, we developed an interface to specify

the synchronization of multiple illustrations by ana-

lyzing basic properties and requirements of the syn-

chronization mechanism. This allowed us to reduce

the interface to the deﬁnition of a few (optional)labels

per graphics. These text labels are not subject to any

syntax; thus, no syntax errors are possible and authors

do not have to learn any syntax rules or restrictions.

Instead, the labels may be chosen arbitrarily and are

only tested for equality. We also present a prototyp-

ical implementation of this interface within the Java

applet LiveGraphics3D.

2 RELATED WORK

A survey of approaches to interactive illustrations in

electronic documents has been published by Kraus

(Kraus, 2008) with particular emphasis on the imple-

mentation of parametrized graphics within the Java

applet LiveGraphics3D (Kraus, 2002), which renders

Mathematica

graphics (Wolfram, 2003) with several

restrictions. The “Wolfram Demonstrations Project”

(Wolfram Research, 2008) provides a web platform

to archive and distribute more general interactive

parametrized graphics than supported by LiveGraph-

ics3D, i.e., arbitrary

Mathematica

graphics (Wolfram,

2003).

Communication between Java applets, which is

necessary for synchronization, has been discussed, for

example, by Andrew Meckler (Meckler, 1997) and

has been implemented in various Java applets for in-

teractive web graphics, e.g., “Jmol” (Jmol, 2008) and

“Modern CA” (ModernCA, 2008).

3 SYNCHRONIZING

PARAMETRIZED GRAPHICS

There are various ways of specifying synchroniza-

tions of interactivegraphics, which differ signiﬁcantly

in the syntactical overhead as well as in their ex-

pressive power regarding the speciﬁcation of different

kinds of synchronizations, e.g., master-slave relations

or selective synchronization of particular state vari-

ables.

In this section, we ﬁrst discuss some features of

the synchronization of parametrized graphics, which

are particularly important since they determine the re-

quired expressive power of an interface for the speci-

ﬁcation of synchronized graphics. Based on this dis-

cussion, we develop the structure of our proposed in-

terface.

3.1 Properties of the Synchronization

3.1.1 Symmetric vs. Asymmetric

Synchronization

If the interface only allows for the speciﬁcation of

symmetric synchronizations of parametrized graph-

ics, no “master-slave” relation can be speciﬁed, where

one graphics, the “master,” is manipulated and a sec-

ond graphics, the “slave,” follows the changes while

manipulations of the “slave” are not forwarded to the

“master.” However, in almost all actual scenarios

symmetric synchronizations are sufﬁcient as can be

shown by considering the following two cases:

1. The “slave” cannot be manipulated. In this case,

there is no difference between a symmetric syn-

chronization and a “master-slave” synchroniza-

tion because the “slave” never produces events

that have to be synchronized.

2. The “slave” can be manipulated. In this case,

there is a clear difference between a symmet-

ric synchronization and a “master-slave” synchro-

nization. In particular, there are some disadvan-

tages of the latter: Firstly, the states of the “slave”

and the “master” may be different, i.e., unsyn-

chronized. And secondly, if the states of the two

graphics are different and the “master” is manip-

ulated, the state of the “slave” changes discontin-

uously due to the synchronization. Thus, this sce-

nario is usually highly undesirable.

We conclude that the “master-slave” synchroniza-

tion of parametrized graphics is unnecessary since it

is either indistinguishable from a symmetric synchro-

nization or results in inconsistent states and discontin-

uously changes of the state of the “slave.”

3.1.2 Independently Synchronized Groups

Suppose there are four graphics A, B, C, and D in

a single document. (See also Figure 1.) In many

cases, only a subset of all graphics should be syn-

chronized, which might, however, consist of more

than two graphics. It is also conceivable that multiple

subsets should be synchronized independently, for ex-

ample, it might be necessary to synchronize the pair

{A, C} independently of the pair {B, D}. Thus, it is

necessary to allow for the speciﬁcation of any number

of independently synchronized subsets of any size.

GRAPP 2009 - International Conference on Computer Graphics Theory and Applications

402

Figure 1: In this example, graphics A, B, and C synchro-

nize camera parameters since they specify identical camera

labels c

= c

; graphics A and C synchronize graph-

ics parameters (because g

= g

) and graphics B and D

synchronize their graphics parameters independently (g

However, it is not necessary to be able to specify

intersecting subsets, e.g., the pairs {A, B} and {B, C},

because the speciﬁcation of intersecting subsets can

always be replaced by specifying the union of these

subsets, in our example {A, B, C}, due to the implied

synchronization of all elements of the intersecting

subsets.

3.1.3 Synchronized State Variables

Depending on the functionality offered by a ren-

derer for parametrized graphics, several groups of

state variables should by independently synchroniz-

able, for example, camera parameters, parameters of

the graphics, or a time parameter for animations.

However, in several scenarios it is preferable to

synchronize only a subset of the camera parameters.

For example, the ﬁeld of view should usually not be

synchronized between a focused view and the cor-

responding overview while other camera parameters

should be synchronized.

The synchronization of parameters of multiple

graphics requires the speciﬁcation of corresponding

parameters of these graphics. However, assuming that

the author of a web page has full control over the

included graphics, the easiest way to specify corre-

spondences between parameters is naming them iden-

tically in all included graphics.

For animations, it is preferable to introduce a time

parameter with a user-speciﬁed name. Thus, the time

variable of an animation can be synchronized with

any other parameter of another graphicsjust by choos-

ing identical names.

Figure 2: Initial rendering of three synchronized applets.

Figure 3: Rendering of the three applets in Figure 2 after

the point in the left-most applet has been dragged to change

the variable

and the right-most applet has been rotated to

change the camera parameters. The applet in the middle is

synchronized with both changes.

3.2 Specifying Synchronized Graphics

Based on the requirements discussed in the previous

section, we conclude that for each document a set of

non-intersecting sets of synchronized graphics has to

be speciﬁed for each group of synchronized state vari-

ables (e.g., camera parameters, graphics parameters,

or time).

We propose to specify these sets by specifying

a label for each group of state variables and each

graphics. If the labels of two (or more) graphics for

the same group of state variables are identical, these

state variables are synchronized. An example with

two groups of state variables (camera parameters and

graphics parameters) is illustrated in Figure 1.

There are several advantages of this interface in

comparison to previously presented interfaces for the

speciﬁcation of synchronizations (Jmol, 2008; Mod-

ernCA, 2008):

• The speciﬁcation is completely symmetric: all

graphics are treated the same way.

• For each group of state variables, any number of

non-intersecting sets of graphics can be speciﬁed

without the need to specify lists of graphics.

• There is no need to name graphics nor to reference

graphics by any other means.

• There is no possibility for syntax errors or any

other inconsistencies (if labels are not identical,

there is just no synchronization).

Furthermore, the design is easily extensible for ad-

ditional groups of state variables by introducing ad-

ditional labels and no additional syntax has to be

learned by authors of web pages.

SYNCHRONIZING USER INTERACTIONS WITH MULTIPLE PARAMETRIZED THREE-DIMENSIONALWEB

GRAPHICS

403

4 IMPLEMENTATION IN A JAVA

APPLET

We implemented our proposed interface within the

Java applet LiveGraphics3D (Kraus, 2002). From

several use cases we decided that three groups of

state variables may be synchronized independently:

graphics parameters, which are called “indepen-

dent variables” in LiveGraphics3D (Kraus, 2002);

camera parameters, which include the

Mathe-

matica

(Wolfram, 2003) options

ViewPoint

and

ViewVertical

; and a magniﬁcation parameter,

which is speciﬁc to LiveGraphics3D. One text

label may be speciﬁed for each of these groups

and for each applet by means of three applet

parameters:

SYNCHRONIZED VARIABLES GROUP

SYNCHRONIZED VIEWPOINT GROUP

, and

SYNCHRONIZED MAGNIFICATION GROUP

. A ex-

ample with three applets is illustrated in Figures 2

and 3.

On initialization, each applet builds three lists of

applets within the same document that specify the

same label in one of the three applet parameters for

synchronization. If such an applet was found, it is ap-

pended to one or more of the three lists and requested

to add a reference back to the former applet. This

is necessary because applets can be initialized in any

order by the Java virtual machine. During runtime,

each change of the graphics parameters or the camera

parameters of one applet is sent to all applets in the

corresponding list of synchronized applets.

4.1 Synchronization of Time Variables

A particular problem is posed by the synchroniza-

tion of time variables, which are incremented contin-

uously by all animated applet; thus, a smooth, sym-

metric synchronization is difﬁcult to achieve between

two animated applets. Moreover, in the case of the

synchronization of a time variable with a directly ma-

nipulated parameter, it is preferable to establish an

asymmetric master-slave synchronization, where the

directly manipulated parameter acts as the master. We

solved these problematic situations by stopping any

animation as soon as its time variable is set to an-

other value due to a synchronization. This strategy

turned out to provide the most intuitive user experi-

ence among the tested approaches.

5 CONCLUSIONS AND FUTURE

WORK

This work presents a particularly simple interface for

the speciﬁcation of synchronizations of user interac-

tions with multiple parametrized graphics and a pro-

totypical implementation in a Java applet. There are

many applications for this kind of synchronization,

which will become more important as interactive il-

lustrations become more popular in the web and in