Using XSLT and SVG in Teaching

3D, Sound and Nostalgia

Keywords: XSLT, teaching, education, multimedia, sound, graphics, 3D

Bob Hopgood
Professor
Oxford Brookes University
Oxford
Oxon
UK
bhopgood@brookes.ac.uk
http://wwwcms.brookes.ac.uk/modules/web_tech/

Biography

Bob Hopgood is a visiting Professor at Oxford Brookes University. Prior to that he worked at the Rutherford Appleton Laboratory and W3C. He was active in establishing a Web Profile for the Computer Graphics Metafile. He also established W3C's Offices in Europe, Morocco, Australia and Israel. He has nearly 40 years of experience in computer graphics, especially in standardisation activities and has lectured internationally on emerging web standards. He was Programme Chair for WWW5 in Paris.

David Duce
Professor
Oxford Brookes University
Oxford
Oxon
UK
daduce@brookes.ac.uk
http://wwwcms.brookes.ac.uk/modules/web_tech/

Biography

David Duce is Professor in Computing at Oxford Brookes University. He has been involved in the development of standards for computer graphics for 20 years, starting with the Graphical Kernel System (GKS). Together with Bob Hopgood and Vincent Quint, he submitted a proposal to W3C entitled Web Schematics, which launched the SVG activity. He has participated in the development of SVG 1.0 and represents Oxford Brookes University on the Advisory Committee of W3C. His research interests include web graphics and mulitiservice systems.

Paul Hopgood
hoppinggoldfish.com
Wantage
Oxon
UK
paul@hoppinggoldfish.com
http://www.hoppinggoldfish.com

Biography

Paul Hopgood composes and plays experimental, electronic, folk and rock music. He studied the art of writing Music For The Media and has a diploma in Media Composition. He also works for Danfoss UK on Refrigeration Temperature Monitoring, Recording, Alarm and Control Systems using SVG, XML and XSLT.


Abstract


Teaching computer graphics, XML, XSLT and XML applications to students can be enhanced by using SVG both in course material and as the output from projects. Using exemplars from early systems helps students get an awareness of the past and provides challenging exercises when constrained to using XSLT as the language and SVG as the output device. A simple 3D extension to SVG called PAEPOS has been constructed that allows animations of 3D wire frame perspective drawings using SVG. This was based on an early system called CAMPER. Early computer animations also used tight sound synchronisation to enhance the educational experience so we have produced some demonstrators to see how well this can be accomplished in an SVG environment.


Table of Contents


1. Introduction
2. PAEPOS: A 3D Extension to SVG
     2.1 Background
     2.2 CAMPER
     2.3 PAEPOS Overview
     2.4 Scene Construction
     2.5 PIF to SVG Translation
     2.6 Patch Composition
     2.7 Conclusion
3. Algorithm Animation
     3.1 Introduction
     3.2 Hash Tables
4. Multimedia
     4.1 SVG as an Alternative to SMIL
     4.2 Roadtrains
     4.3 IW3C2 Logos
         4.3.1 IW3C2 Logos
         4.3.2 The Soundtrack
         4.3.3 The Animations
         4.3.4 Synchronisation
5. Student Projects
     5.1 Computer Graphics
     5.2 Web Technologies
6. In Conclusion
Acknowledgements
Bibliography

1. Introduction

Oxford Brookes runs a Masters programme in Web Technologies which comprises six modules. Two of these are called The XML Family of Standards and XML in Practice. The first is primarily concerned with XSLT, DTDs, XML Schemas and XSL-FO. The second includes SVG, SMIL, MathML, CML, NewsML, VoiceML amongst other applications. All of the material for the Courses is on the Web in XHTML and makes heavy use of the material being taught, particularly SVG and XSLT. Slides, handouts, test questions etc are all generated using XSLT. Assessment is by a mixture of project assignments and exams. In the third term, the students do a dissertation using one or more of the skills acquired in the Courses.

Undergraduates also get courses in computer graphics, networking, algorithms, human-computer interaction etc and we have explored the use of SVG in the teaching of basic principles in some of these areas as well.

This paper describes a number of independent projects connected through their use of either SVG, XSLT or both.

2. PAEPOS: A 3D Extension to SVG

2.1 Background

In the undergraduate computer graphics module, a simple 3D graphics package is needed and having it available in a Web environment would be useful. To complement the use of VRML, a simple extension to SVG has been looked at as an alternative. Also, we were looking at the possibility of a significant project that could be used as the main assessment for the two Web Technology Courses on XSLT and XML Applications. The challenge was to define a simple 3D computer graphics system in XML that could be transformed into SVG and implemented in about 80 hours. Being professionals, we did a proof of concept implementation rather than just give it to the students to do!

2.2 CAMPER

In 1967, Sherwood (Woody) Anderson [1] , under the direction of Don Weiner, developed two systems called CALD and CAPER for his Masters Thesis at Syracuse University [2] . These were developed further to become CAMP and CAMPER [3] [4] . CAMPER was a 3D extension of CAMP. A deck of cards defined the animation of objects and their viewing as a set of quite simple commands. It was possible for non-programmers to produce quite pleasing line drawn animation using a microfilm recorder as the output device. Our first attempt was to transform input structured as a CAMPER card deck into SVG using XSLT. Although the ability to do this was demonstrated, the depth of recursion and the size of intermediate XML document fragments made the system unusable.

2.3 PAEPOS Overview

PAEPOS (Perspective Animated Episodes Producing Output in SVG) has similar functionality to CAMPER but expresses it in a form more amenable to XSLT processing. Also, the basic CAMPER drawing primitives have been aligned with those of SVG. The result is a 3D extension to SVG that is declarative. The system took about 60 hours to develop. Some code and appreciation of the problems came from the initial XSLT-based CAMPER implementation which took about the same amount of time. This confirmed that it fitted our criteria for a piece of Coursework.

The architecture, shown in Figure 1 , is based on CAMPER but takes into account the strengths and weaknesses of SVG and XSLT. CAMPER defined pictures in terms of stacks and arrays. Transformations could be applied to a complete stack or to an array within a stack. Here the terms object and part replace stack and array. Arrays in CAMPER were made up of polylines (a sequence of joined line sections) or line sets (a sequence of disjoint lines). Here the two types have been amalgamated into a single curve element where for each point it is possible to define whether this is a move or a line. Thus it encompasses the two CAMPER primitives but extends their usage in line with the path primitive of SVG.

We have chosen to do the transformation from PAEPOS to SVG using two XSLT transformations. The user defines the set of objects to be animated and viewed in a relatively user friendly way. For example, a coordinate is written as something like 3,5,7 in the input form. The first transformation constructs the scene in an intermediate PAEPOS Interchange Format (PIF). The coordinate above gets expanded to <x>3</x><y>5</y><z>7</z> in the PIF file. Any transformations to be applied to coordinates are converted to a single matrix transformation in the PIF file. The second transformation performs the perspective transformation and animates the scene. The input file is less verbose and provides construction facilities. The intermediate file is set up to map in a straightforward way on to the SVG file. We will not discuss the internal format further but concentrate on the external form.

fig01.svg

Figure 1: Overview of PAEPOS

In PAEPOS, scenes are made up of the following components:

fig02.svg

Figure 2: PAEPOS Viewing System

The viewing system, shown in Figure 2 , is quite simple with the viewing direction being towards the origin and specified in a spherical coordinate system. Individual objects can have their own viewing system; one object can be animated while retaining a static view of related material. Objects are viewed by a 3D perspective transformation defined by:

Each curve is transformed by the viewing perspective into:

<path d="M . . L . . Z" />

CAMPER generated output a frame at a time. For PAEPOS, the mechanisms for animation have been retained but the approach is more declarative. As the animation functionality of SVG can be used to define the intermediate frames, the approach in PAEPOS is that it produces the keyframes rather than the individual frames leaving the animation functionality of SVG to do the inbetweening. This reduces the number of frames that need to be output and allows larger steps between animated values. Some care needs to be taken that the inbetweened frames are still approximately in the correct perspective.

Both the object and the viewing system can be animated. Each PAEPOS document is aimed at generating a single episode. For complex animations, it may be necessary to specify many episodes in much the same way that a film is made up of many scenes. The major parameters of a PAEPOS animation are:

For example, if keyframes had the value 5, the keyvalues were 0, 25, 50, 75, 100 and dur had the value 1 second, the animation would have an entity that took the values 0, 25, 50, 75 and 100 at the times 0, 0.25, 0.5, 0.75 and 1 seconds. The animation would interpolate the value between these key values using the animation functionality of SVG. Applying animation to an object or viewpoint will result in each curve generating a path of the form:

<path d="" >
<animate attributeName="d"
values="M . . L . . Z ; M . . L . . Z ; M . . L . . Z ...;" 
begin="0s" dur="1s" />
</path>

A simple example of animation would be to have a static object and animate the value of over in the viewing system. This would allow different aspects of the object to be viewed as the viewpoint circles the object. Alternatively the viewing system could be fixed and a complete object could be moved or rotated over time.

2.4 Scene Construction

Figure 3 shows an aeroplane, originally defined by Woody Anderson, which we will use to give an overview of the scene construction.

fig03.svg

Figure 3: CAMPER Aeroplane

The main work to do at the composition phase is as follows:

The document defined below shows how an aerosymbols library is constructed and an aero object constructed from parts made up from symbols in the library. The system comes with a font as one symbol library. There are no limitations on the number of symbol libraries, parts in objects or number of objects in the composition.

The code fragment shows two symbols for a wing and a wheelstrut. The plane's right wing is constructed from the symbol by a reflection in the (X,Y) plane. Similarly, the right wheel is constructed from the strut in the library plus a circle representing the wheel which is first rotated 90 degrees and then reflected.

<paeposcompose>
  <defs>
    <def>
      <defname>aerosymbols</defname>
      <symbol>
        <name>wing</name>
        <part>
        <path>M0,0,-0.75,L4,0,-0.75,L4.4,0,-0.62,L4.85,0,-0.4,L5.13,0,0,L5.22,0,0.43,
                 L5.15,0,0.66,L5,0,0.9,L4.8,0,1.1,L4.25,0,1.2,L0,0,1.2,</path>
        <path>M0.65,0,-0.75,L0.65,0,-0.35,L4.4,0,-0.35,L4.4,0,-0.62,</path>
        <path>M2.7,0,-0.75,L2.7,0,1.2,</path>
        </part>
      </symbol>
      <symbol>
        <name>wheelstrut</name>
        <part>
        <path>M0.55,-1.56,1,L1.3,-2.1,0.2,L0.55,-1.55,0.2,</path>
        </part>
      </symbol>
      . . .
    </def>
  </defs>


  <object>
    <name>aero</name>
    <part>
      <name>rwing</name>
      <compose>
        <use><def>aerosymbols</def><symbol>wing</symbol></use>
        <size><xref>0</xref><yref>0</yref><xmag>-1</xmag><ymag>1</ymag></size>
      </compose>
    </part>

    <part>
      <name>rwheel</name>
      <compose>
        <use><def>aerosymbols</def><symbol>wheelstrut</symbol></use>
        <circle><d>0</d><c>1.3,-2.1,0.2</c><rad>0.25</rad></circle>
        <xzrot><x>1.3</x><z>0.2</z><ang>90</ang></xzrot>
        <size><xref>0</xref><yref>0</yref><xmag>-1</xmag><ymag>1</ymag></size>
      </compose>
    </part>
    . . .
  </object>
</paeposcompose>

As part of the composition, each part and object can have transformations applied to them. In the example below, the propellor is to be rotated through 360 degrees twice during the episode. At the same time, the plane is to move forward in the Z-direction while rotating through 360 degrees.

<object>
  <name>aero</name>
  <animate>
    <composetransform>
      <scale><sx><from>1</from><to>1</to></sx><sy>1</sy><sz>1</sz></scale>
      <rotateyz><y>4</y><z>2.7</z><ang><from>360</from><to>0</to></ang></rotateyz>
      <shift>
       <dx>0</dx>
       <dy><from>0</from><to>0</to></dy>
       <dz><from>0</from><to>36</to></dz>
      </shift>
    </composetransform>
  </animate>
. . .
  <part>
    <name>propellorlblade</name>
    <animate>
      <composetransform>
      <rotatexy><x>0</x><y>-0.9</y><ang><from>0</from><to>720</to></ang></rotatexy>
      </composetransform>
   </animate>
   <use><def>aero</def><symbol>blade</symbol></use>
  </part>
</object>

Finally, the definition of the viewing system and any animation of that needs to be added. In the example, the aero object is to be animated using 4 keyframes with the animation lasting 12 seconds. As the animation proceeds, the viewpoint moves by changes in the up and over parameters in the view definition.

  <composition>
    <animate>yes</animate>
    <duration>4</duration>
    <intervals>12</intervals>
  </composition>

  <viewing>
  <object>aero</object>
   <animate>
    <over><from>50</from><to>60</to></over>
    <up><from>40</from><to>50</to></up>
    <pp>20</pp>
    <rad>80</rad>
   </animate>
 </viewing>

2.5 PIF to SVG Translation

Given that the PIF file format was designed to give minimal inconvenience, the XSLT transformation to generate the SVG is relatively straightforward. The major problem was providing the intrinsic functions needed by the implementation. Cosines and sines are needed to implement the viewing transformation given that it is defined in spherical coordinates. The XSLT template uses a Taylor's series expansion that define values between 0 and 90 degrees to at least 10 figure accuracy. The template takes the input degree and first gets it into the range 0 to 360 then reduces this to the range 0 to 90 together with a sign to be applied to the result. Two templates that provided the necessary results for the cosine function are given in cos.xsl.

The viewing system is quite straightforward once the viewing point is established. The input is the set of viewing parameters and the 3D point to be transformed. The result is the x , y string ready for inclusion in the SVG path command. The file perp.xsl gives the XSLT code.

2.6 Patch Composition

CAMPER had a set of predefined templates that generate objects on the XY-plane which could then be transformed, scaled and positioned as the scene requires. We included these in PAEPOS at little cost. Text is done in this way and there are templates for circle, rectangle, arrow, cross, box, clock. To make the system a bit more interesting, we added Bezier Surfaces. These are usually defined as a set of 16 vertices that define an individual patch. As the patches fit together to make up the object, it is usual to store the X,Y,Z values of the vertices separate from the patch definitions. For example, below is the original file for the famous Newell teapot. The teapot is made up of 32 separate patches which use 306 different vertices. This is a significant saving over the 512 vertices that would be needed if the points were stored as part of the patches.

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16
4,17,18,19,8,20,21,22,12,23,24,25,16,26,27,28
19,29,30,31,22,32,33,34,25,35,36,37,28,38,39,40
.....

Each row consists of the vertex numbers for the 16 vertices defining the patch. The vertices are stored separately:

1.4,0.0,2.4
1.4,-0.784,2.4
0.784,-1.4,2.4
0.0,-1.4,2.4
1.3375,0.0,2.53125
1.3375,-0.749,2.53125
0.749,-1.3375,2.53125
0.0,-1.3375,2.53125
1.4375,0.0,2.53125
1.4375,-0.805,2.53125
0.805,-1.4375,2.53125
0.0,-1.4375,2.53125
1.5,0.0,2.4
1.5,-0.84,2.4
0.84,-1.5,2.4
0.0,-1.5,2.4
-0.784,-1.4,2.4
-1.4,-0.784,2.4
-1.4,0.0,2.4

. . . . 

The file teapot.txt gives the complete set of data needed for the teapot.

As can be seen in Figure 4 , each patch defines four cubic splines in one direction {(a,b,c,d), (e,f,g,h) (i,j,k,l), (m,n,o,p)} and four in the other {(a,e,i,m), (b,f,j,n), (c,g,k,o), (d,h,l,p)}. Only four of these are points on the surface and the rest are control points not on the surface.

fig04.svg

Figure 4: Bezier bicubic patch

The basic format for defining the part was as close to the original layout as possible.

<part>
<name>Teapot</name>
<refine>2</refine>
<patch>1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16</patch>
<patch>4,17,18,19,8,20,21,22,12,23,24,25,16,26,27,28</patch>
. . . .
</part>
<vertices>
<origin>1</origin>
<vertex>1.4,0.0,2.4</vertex>
<vertex>1.4,-0.784,2.4</vertex>
<vertex>0.784,-1.4,2.4</vertex>
. . . .
</vertices>

The origin element is added as sometimes the numbering for the vertices start at zero and sometimes at 1. The only other element that has been added is refine. This specifies the number of times that each patch will be split into four.

As only four parts of the patch are on the surface, the easiest rendering is just to draw a path between the four points on the surface. As can be seen in the left hand drawing in Figure 5 , this does not yield a very good result!

fig05.svg

Figure 5: Newell's Teapot with 4, 8 and 16 lines per patch

The easiest way to improve the presentation is to split each patch into four. This is fairly straightforward ( [5] ) and requires the midpoint to be found for each of the four Bezier curves in one direction. At the same time, the new control points for the left and right hand parts of the curve are obtained. This gives seven points for each Bezier curve (the centrepoint is shared by both the left and right parts of the curve). The same bisection is applied to these 7 curves in the other direction also resulting in 7 points for each of these making 49 points in all. These are the unique points in the 64 needed to represent the four patches (the seven points across the middle in each direction are used twice with the centre point used all four times).

It should be possible to set this up in a recursive loop in XSLT but it is time consuming so for efficiency we have just implemented two levels of refinement and the recursion for the second is flattened out to make it run a little faster. Figure 5 also shows the results for the two levels of subdivision. See rotateteapot.svg for an animation of the teapot. Making a multi-level recursion for this would be a nice challenge for the XSLT programmer.

Although it was Newell's teapot that captured the imagination and became part of computer folklore, he did also hand generate definitions of a teacup and teaspoon in the same format. These are shown in Figure 6 and this diagram took under 30 minutes to define and generate which shows some of the power of PAEPOS.

fig06.svg

Figure 6: Newell's Teacup and Teaspoon

Central to the whole operation is the function that splits the Bezier curve into four.

The XSLT template is passed the positions of the four points p1, p2, p3, and p4 in the patch for which the split is required. The template returns the coordinates of the new points in a node-set. Internally, the seven points are p1, l2, l3, l4, r2, r3, p4 (the same notation used by Foley and van Dam). The point l4 is the new point on the surface with l2, l3 the control points for the first curve and r2, r3 the control points for the second curve. The file splitcurve.xsl gives the XSLT template for splitting the patches.

2.7 Conclusion

The PAEPOS system achieves the desired results of being a reasonably demanding system to implement and exercises most of the features of XSLT. If a student shows interest, it is possible that we could get a more robust system with a larger symbol library. The 3D perspective transformations generally look convincing even though the intermediate views are not true perspective. We have thought about having filled in rather than wire frame images. This would not be difficult for static views. we have sufficient Z information to sort the elements into the correct order. However to animate the object, it does mean that the rendering order will need to change for some transformations in mid sequence which would be quite demanding for XSLT to sort out. It would actually be easier to use frame-based animation. This would require more processing in that there would be no inbetween frames to generate. On the other hand, it ensures that there are no ambiguous frames. The brain can do the inbetweening much better than SVG can.

3. Algorithm Animation

3.1 Introduction

SVG has been used effectively to provide simple animations of specific algorithms within the Web Technologies Course. An example is an explanation of LZW coding and decoding shown in Figure 7 Repeatedly hitting the Next button takes you through the coder or decoder. The student can use it offline to consolidate any information given during the lecture.

fig07.svg

Figure 7: Encoding and Decoding using LZW

We have been building up a set of these over the last two years and they are well received by the students.

3.2 Hash Tables

Since around 1970, we have used a set of six films ( [6] ) to describe the origins of hash tables and to show why clustering occurs and how it can be alleviated by refinements [7] to the basic linear hash algorithm. The films were made originally on 16mm film using a Stromberg Carlson SC4020 Microfilm recorder. When entries are made in the table early on, it is difficult to differentiate between two entries that quickly find a home from one entry that needs to search for a free location. At the time, we experimented with adding a soundtrack consisting of a sequence of notes, as each entry is made, to help in differentiating between the two cases above. This was achieved by ataching a EMS VCS3 synthesiser shown in shown in Figure 8 to a DEC PDP15 computer and outputting the soundtrack on to a sprocketed magnetic tape recorder. This allowed us to synchronise the sound precisely with the 16mm film. The result can be seen at lnhash.rm.

fig08.jpg

Figure 8: Electronic Music Studios (EMS) VCS3 Synthesiser

This film shows a random set of entries being made into a table using the linear hash method. The content of the entry was a set of vertical lines indicating the length of the search required to make that entry. The number displayed is the maximum length of search so far. The graph shows the average length of search increasing as the table is filled up.

As we went from 16mm film to video to files on the Web, the quality has gradually deteriorated. With sound support in the Adobe SVG plugin, there was the opportunity to redo the films and in the process add the benefits of colour, shading and more stable sound that were unavailable when the films were made originally.

The problems to overcome are:

The layout for the animation is shown in Figure 9 . Most hash tables are effectively circular. With the resolution now available it was sensible to make the pictorial view circular also. As in the original, the centre part shows the average length of search as the table fills up and shows the maximum length of search so far.

The SVG for the film was generated automatically by XSLT starting from an XML file containing the entries to be made. It would have been feasible to do the whole job within the XSLT. Separating out the hashing of the entries meant that we could be sure that tests done were all using the same data.

The production was similar to the original approach with the animation being generated by SVG and the sounds being started by a Javascript. Our first attempt had each note in a separate sound file. Each try was 0.5 seconds in length with 1.5 seconds to establish the final position. The tests were mainly done on a 850MHz Pentium Processor with 512 Mbytes of main memory. It proved difficult getting the sounds to start on time and we abandoned this approach. The second and successful strategy was to encode the sound sequence for a specific entry rather than the individual sounds. For an entry which required 4 tries before an empty entry was encountered, we start a sound file consisting of the sequence of four descending notes. The sound was produced using the modern day equivalent of a VC3 being a digitally modelled modular synthesiser (Nord Modular). The notes were sequenced and recorded then compressed into separate MP3 files, one per sequence length.

We used MPEG Audio Layer 3 (MP3) sound files. As we had extended the range and needed a larger pitch range than the original, the maximum compression that preserved acceptable audio quality resulted in file sizes as follows. The one note file is about 20 Kbytes and a 50-note sequence 212 Kbytes. So for very long sequences the file size is down by a factor of 5 over the individual notes.

Overall the results were good with the sounds synchronising well. However, we did experience times when the sound disappeared completely. This usually arose when several large sequences were needed close together and appeared to be due to a buffering problem in the Adobe plugin with IE and Windows 2000 although it was not possible to narrow it down. We tried preloading the sounds by having the Javascript function that initiated the sound also preload the next one:

var noBuffers = 5;
var soundBuffers = new Array(noBuffers);
for (var i = 0;i &lt; noBuffers;i ++)
{
	soundBuffers[i] = svgDocument.getElementById("sound" + (i + 1));
}	

var soundBuffer = 0;

function playAndLoadSound(nextSound)
{
  var nextBuf = (soundBuffer + 1) % noBuffers; // next buffer
  var nextNode = soundBuffers[nextBuf];
  if (nextNode.getAttribute("xlink:href") != "../mp3/" + nextSound + ".mp3")
    nextNode.setAttribute("xlink:href","../mp3/" + nextSound + ".mp3"); // load next mp3 sound
  var thisNode = soundBuffers[soundBuffer];
  thisNode.beginElement();	// start playing current sound
  soundBuffer = (soundBuffer + 1) % noBuffers; // use alternate buffer next time
}

. . .

function playSound97() 
{
  var node = svgDocument.getElementById("a98");
  node.beginElement();
  playAndLoadSound(17);
  setTimeout("playSound98()", 8500);
}

Entry 97 is a sequence of length 15 that needs to be played for 8500 millisecs. The function playAndLoadSound starts the 15 sequence of notes and preloads the 17-note sequence needed for the next entry, 98. This improved the situation and certainly put off encountering the problem until much later in the film although it never cured it completely. As it only happened when the hash table was almost completely full, we expediently stopped the film before the point where the problem showed up.

fig10.svg

Figure 9: General Layout for the Hash Films

To give an impression of the animation (without the sound), see linvquad.svg. This film shows both the linear and quadratic hash together using an excerpt from Winnie the Pooh as the set of words to be hashed. Being a children's book, the number of words used is low and repetition is high which tends to be similar to the usage of variable names in a program.

4. Multimedia

4.1 SVG as an Alternative to SMIL

As part of the Web Technologies Course, we teach both SMIL and SVG showing the advantages of each. This includes some demonstrations in SMIL that use images and sound but not videos. SVG is equally good at defining multimedia of this type and, in consequence, we have looked at the additional effects that can be achieved by adding vector drawing capability to a multimedia presentation. This provides the level of functionality that is a large proportion of the Flash animations on the Web today.

Two such exercises that we have done recently are:

4.2 Roadtrains

A reworking of the original SMIL presentation was done for Ausweb 2003 that takes place in July. The new version runs for just over 5 minutes with some digeridoo music (http://www.charly-didgeridoo.com/) as background for the first half and Andy Collins (http:www.andycollins.com) Road Train for the second. Road trains are a major feature of Australian roads and although they are limited in length to 50 metres on the public highway, there have been various attempts to see how many trailers a single truck could haul. The latest record we think is 51 trailers, 750 metres long, that was pulled at Tennant Creek in 2001. The first half of the presentation shows various road trains and the record attempts. Unfortunately, getting photographs of 750 metre road trains is not easy so drawing them in SVG was the only alternative. The song, Road Train, points out that you can see these all the way from Bamaga in North Queensland to Broome in Western Australia. So the second part consists of a road train making that journey accumulating trailers as it goes.

We will just comment on two aspects of the presentation. A mockup of just those two features can be seen at roadtrain.svg. Finding an Australian outline to draw incrementally using stroke-dashoffset animation is quite easy. However most of the ones around originate in packages such as Adobe Illustrator and are usually too detailed for what you require and the point specifcations are overly accurate. The third problem is that frequently the outlines are not continuous. One section goes clockwise from point A to point B and the next section is from Point C back to point B. The same effect occurs if you take an image and transform it to SVG using a tool like Siame Vector Eye. This means that the set of points need to be reversed. We have found it relatively straightforward to add X and Y element tags around the coordinates and then use XSLT to do any patching up that you need. XSLT has all the functionality you need to round, reverse the order, and select a subset of the points based on some given criteria.

Drawing various roadtrains for the presentation turned out to be quite time consuming and we resolved that problem by defining the engines and trailers as a set of characters in a rather unusual font. All of the animations of road trains then just amount to moving text along a path by adjusting the offset.

4.3 IW3C2 Logos

4.3.1 IW3C2 Logos

The set of IW3C2 Logos to be animated for WWW2003 are shown in Figure 10 . The aim was to start with the IW3C2 logo and then work through the 12 conferences making an animation that had some relation to the theme of the logo and a soundtrack that was related to the location. The name of the conference and the date are rolled up between each animation so there is the opportunity to have a bridge between each.

fig11.png

Figure 10: IW3C2 Logos

4.3.2 The Soundtrack

The main timing points in the soundtrack are given in Table 1 .

IW3C2 Logos Timeline
Conference Time (secs) Theme
Soundtrack is started at the same time as the animation starts by a button click
WWW1 27.42 Swiss Alpine Yodelling
WWW2 54.85 Urban Blues
WWW3 82.28 German Umpah Brass Band
WWW4 110.04 Boston Rock
WWW5 142.04 Parisian accordian
WWW6 161.04 Beach Boys/Southern California
WWW7 189.88 Aboriginal Didgeridoo/Yidaki
WWW8 217.38 Kate and Anna McGarrigle French-Canadian folk songs
WWW9 241.87 Dutch traditional clog dancing
WWW10 269.04 Chinese Gong and Drum
WWW2002 308.65 Hawaiian Slack Key
WWW2003 341.62 Hungarian Folk

Table 1

The music composition was produced using the MOTU Digital Performer MIDI Sequencer. As sections were completed a cue sheet of the exact times was printed from Performer's marker list (in real time units) and the key points in the SVG were programmed to start at these times using the begin attribute.

When completed the music was mixed down to stereo for top and tail editing and a little bit of dynamic compression. The stereo audio was then compressed down from 48K 24bit audio down to 320KBit MP3 (which was felt to be the least acceptable quality) to be a bit more manageable for the PC! Some of the equipment used is shown in Figure 11 .

fig09.jpg

Figure 11: Creating the Soundtrack

4.3.3 The Animations

A montage of the animations is shown in Figure 12 . The conferences are animated with the IW3C2 one first followed by the 12 conferences clockwise from the bottom left corner. The early conferences had simple logos so there was not much innovation possible. The main points of interest are:

fig12.png

Figure 12: Animation Montage

4.3.4 Synchronisation

Having carefully synchronised the animation to the music times, on playing the SVG file on several machines and browsers it was found a bit more work was needed! Slower machines were unable to display the graphics at the programmed times and other SVG renderers appeared to have a different idea of time! Various tricks and illusions were then incorporated to give a more consistent result.

The first thing we needed was a good clock accurate to the requirement of the animation. Figure 13 shows the clock we used.

fig13.svg

Figure 13: A Clock Accurate to 0.1 secs

As each title sequence finishes, the theme for the next conference starts. For some, it would be desirable to have close synchronisation between the animation and the music. For example, WWW2002 starts with a large bang on a gong that should coincide precisely with the arrival of the map of the Hong Kong area. In theory, as we know the precise times for the gong beat, this should be straightforward. Similarly, the jigsaw pieces need to be added to the jigsaw every 0.4 secs to keep in time with the music after a synchronised start point.

The Hong Kong sequence proved to be the major problem. Some attempt had been made to keep the size of the SVG to be drawn down to a minimum by setting display to none for any information that was finished with. Even by keeping the information displayed to a minimum (15000 points) and only having a high Level of Detail on the part of the waterline where we were zooming to, the zoom was not smooth and the initial map arrived almost a second after the gong. The plugin runs out of steam. We tried various tricks such as rendering it off screen and moving it, displaying it early but invisible but none of these improved the synchronisation. Using the latest Mozilla, the drawing speed was much faster. By substituting images for the logos already animated, the problem was partially solved and a smooth zoom in and out achieved. The final solution was to have a PNG image of the map that appeared on time and had it overlayed by the SVG map as soon as that could be rendered.

The Budapest jigsaw was also a problem. The pieces of the jigsaw are generated by clipping the image to the piece outlines. If the plugin has to scale the image, the 79 clips are beyond it. The pieces appear in clusters. If the image is the size to be presented, the plugin handles the 79 clipped pieces very well.

In conclusion, it is not easy to get tight synchronisation between sound and picture using SVG but it can be achieved. The Adobe plugin handles the sound very well but has difficulty drawing SVG objects of any size in real time and we could not find an efficient preloading technique. Out of synchronisation animation can be noticed down to about 0.01sec. Trying to achieve this in something like Flash would require a frame rate of around 100 per sec rather than the 12 per sec normally used.

Finally, it is possible to notice lack of synchronisation due to the different speeds of sound and light. In this case, we resorted to some fine tuning at the 0.01sec level.

5. Student Projects

5.1 Computer Graphics

In March 2002, a computer graphics module was reintroduced into the Oxford Brookes undergraduate programme after a 5 year lapse. the aim was to give an introduction to the concepts and principles of 2D and 3D computer graphics [8] . The modular nature of the undergraduate curricula at Brookes means that there is difficulty relying on students having a background in programming and, in particular, Java which ruled out using Java2D and Java3D as the teaching language. We decided to use SVG for the 2D side and VRML/X3D for the 3D. X3D is a reformulation of VRML in XML. We used the X3D-Edit toolkit (http://sdk.web3d.org/spring2002disk2/tools/X3D-Edit/README.X3D-Edit.html) which acts as a structure editor for a VRML scene graph. This was not entirely satisfactory as the structure of VRML leads to markup that is deeply nested and elements have many attributes.

We used SVG's animation facilities both to demonstrate the principles and also in practical sessions and as the basis for Course Work. The elapsed time allowed for this piece of Course Work is 6 weeks, starting from the start of the course at which point students have no prior knowledge of either computer graphics or SVG. The animation functionality is easy to use and appeals to students. The SVG piece of Course Work was to construct a 2D animation based on the children's TV character Postman Pat ( http://www.postmanpat.org.uk/). Michael Nimmos's effort is mnimmocw.svg and Adam Warren's is awarren.svg. Figure 14 is a montage of the effort of Adam Warren.

fig14.svg

Figure 14: Postman Pat: Adam Warren

Students enjoy the experience of using SVG, particularly the animation. They managed to use a whole range of facilities between them and several introduced sound to backup the animation.

5.2 Web Technologies

Coursework related to XSLT has for the last two years been based on giving students a large database of household items and expecting them to generate an efficient solution to the given problem. Last year, the contents of a house had to be packed into boxes and these boxes into other boxes that were then loaded on a van. On arrival, the XSLT had to provide the person with a detailed breakdown of how to unpack the belongings into the appropriate rooms. This could be in SVG. This year the database consisted of the set of books in a book library that were classified under type and subtype (history/usa/civil war). Books were large, medium or small in height and were either wide or not. The problem was to assign books to shelves such that all books of a subclass were on the same shelf and the task was complicated by the shelves in the book case being small, medium or large. The problem exercises a large set of XSLT functionality especially as there were a few hidden problems in the database. Again students could use SVG to illustrate the algorithm used to achieve the result. Figure 15 shows the set of bookcases to be filled and a solution by one of the students, David Bishop is fastlego.svg. The SVG is generated by the XSLT transformation that allocated the book classes to shelves.

fig15.svg

Figure 15: Populating a Bookcase using XSLT and SVG

Projects for the MSc in Web Technologies have also made good use of SVG. Anine Medhuis developed a design and pilot information system for the Department of Computing. The interface to the system was through an SVG map of the Department's buildings. The user could find the locations of offices of members of staff and could view public areas of their calendars and room bookings.

Musbah Sagar explored approaches to rendering documents containing XHTML, MathML and SVG markup (in the same document) into SVG. A variety of architectural styles was explored, including client side, gateway and server-side rendering. The work is described in [10]

A PhD student, Zaineb ben Fredj is defining a higher-level diagram description language for the World Wide Web, which aims to capture the structure and the semantics of a diagram to enable the generation of accessible presentations in different modalities such as speech, text, graphic, etc. The approach, called Graphical Structure Semantic Markup Language (GraSSML), is decomposed into three levels: presentation, structure and semantics. Each of these levels captures a specific aspect of a diagram. The language at the structure level (called "ZineML") uses SVG as the output renderer at the presentation level. The semantic level language is highly dependent on the type of diagram considered. Further details of this work are to be found in [11]

6. In Conclusion

The combination of SVG and XSLT provides a good basis for a range of educational tasks from developing course material through to assigning exercises for students. In particular, animation heightens both the learning experience and makes projects more enjoyable for students to carry out. Adding sound provides an additional level of enjoyment ;-)

Acknowledgements

Many of the ideas in this paper have had input from Ivan Herman at CWI/W3C and our students which we gratefully acknowledge.

Bibliography

[1]
CALD and CAPER Instruction Manuals, S.E. Anderson, Electrical Engineering Laboratory Technical Report No TR-67-6, May 1967.
[2]
A Graphical Programming Language for Computer Generation of Incremental Plots and Animated Motion Pictures, S.E. Anderson, Masters Thesis, Syracuse University, 1968.
[3]
A Computer Animated Movie Language for Educational Motion Pictures, D.D. Weiner, S.E. Anderson, FJCC Proceedings, Vol 33, 1968 pp 1317-1320
[4]
Generating Computer Animated Movies from a Graphical Console, S.E. Anderson, CG70 Proceedings, Brunel University, 1970.
[5]
Computer Graphics, Principles and Practice, J.D. Foley, A. van Dam, S.K. Feiner, J.F. Hughes, Addison Wesley, Second Edition 1990, Page 508.
[6]
Computer Animation used as an Aid in Teaching Computer Science, F.R.A. Hopgood. IFIP 74 Proceedings and The Best Computer Papers of 1975 (edited by Auerbach).
[7]
The Quadratic Hash when the Table Size is a Power of 2, F.R.A. Hopgood, J. Davenport Jnr. Computer Journal Vol 15 No 4 Nov 1972.
[8]
SVG and X3D: Technology for a Foundation Course, D. A. Duce, F.R.A.Hopgood, D. Lightfoot. Eurographics Workshop on Computer Graphics Education, Bristol 6-7 July 2002.
[9]
Web 2D Graphics File Formats, D. A. Duce, I. Herman, F.R.A.Hopgood. Computer Graphics Forum, 21(1), 43-64, 2002
[10]
An SVG Browser for XML Languages, M.S. Sagar. Proceedings of the Eurographics UK Chapter Conference, Birmingham, June 3-5, 2003. Published by IEEE Computer Science Press.
[11]
Schematic Diagrams, XML and Accessibility, Z. ben Fredj, D.A. Duce. Proceedings of the Eurographics UK Chapter Conference, Birmingham, June 3-5, 2003. Published by IEEE Computer Science Press.

XHTML rendition created by gcapaper Web Publisher v2.0, © 2001-3 Schema Software Inc.