Keywords: computer graphics curriculum, SVG, graphical modelling, case studies, visualization, image processing, applications
Dr. John Whelan has been a lecturer at the The University of Hull, Centre for Internet Computing since 2001. He gained his PhD (Beyond Factual to Formulated Silhouettes), in 2001 from Department of Computer Science,University of Hull under the supervision of Dr. M. Visvalingam. His background is predominantly in terrain visualization, with emphasis on perception of form and communication of scene structure through sketch cues. Current research interests are in the emerging standards for web graphics with a view to providing scalable solutions for terrain and geographic visualization.
This paper presents an approach to teaching undergraduate students 2-D graphics principles using SVG as the implementation language. The key focus being to follow a standards-based approach of modelling shapes and object-based groupings of shapes in world coordinates, composing the scene in an abstract, normalised device coordinate space and finally specifying views on the scene to be mapped to an output device space. The rational and processes involved prior to module delivery are discussed and a plan proposed. Three case studies are introduced to illustrate the wider scope of the SVG language. The implications of moving from the previous programming-based module to the use of SVG are reviewed through student feedback, anecdotal evidence from student’s coursework submissions and a tentative observation of assessment performance. The paper concludes by reflecting on whether students found it easier to gain and understanding of 2D computer graphics concepts while not encumbered by the overheads of programming in the Java language.
2. The review process
2.1 Relevance to degree and module learning outcomes
2.2 Ease of teaching good practice in 2D graphics
2.3 Focus of student effort; graphics concepts or Java programming
3. An approach to 2D graphics teaching using SVG
3.1 Teaching, learning and assessment
3.2 Delivery Plan
4. Reflections and observations
4.1 The SVG submissions
4.2 Exam Performance
4.3 Student feedback
5. Wider case studies
6. Conclusion and future work
The University of Hull’s Centre for Internet Computing was created in 1999 with the aim of teaching and researching the applications of Internet software and technology. It was formed as a dedicated unit of the Department of Computer Science of the University of Hull. The first undergraduate programme offered was the BSc Internet Computing; this was complemented in 2001 by popular taught postgraduate programmes.
One of the themes running through the undergraduate degree concerns web-based media and graphics. In summary, the first year gives students exposure to formats of digital media and their associated compression and delivery methods; a computer graphics module (unit of study) covers 2D and 3D graphics in year two; and a final year module focuses on web-based virtual environments and visualization. The second year graphics module has historically focused on graphics theory with practical work undertaken in Java2D [JAVA 2D] and VRML [WEB3D]. Student’s wishing to add more of a creative flavour to their degree enrol onto our BSc Creative Media Computing programme, where some low-level technical modules are dropped in favour of tuition from digital artists in the creative design process.
Since 2001 the author has been teaching the year one media formats and delivery module, using SMIL [SMIL] as the major practical component, with the inclusion of one laboratory session on SVG [SVG], primarily to highlight the differences between raster and vector file formats. In September 2004, prior to taking responsibility of the 2D section of the year two graphics module, a review was undertaken to consider the suitability of progressing with Java2D or switching to SVG. This direction was influenced primarily by the author’s own experience with SVG, existing reviews of SVG in teaching ([Eidenberger 2003][Duce et. al. 2002(2)][Hopgood et. al. 2003]) and the annual review of the previous iteration of the module.
The difference between teaching computer graphics and multimedia authoring is a clear one, as noted by [Duce et. al. 2002(1)]. SVG has been previously considered for replacing 2D graphics programming API’s, in the case of computer graphics modules ([Duce et. al. 2002(2)][Hopgood et. al. 2003]) or as an alternative to Macromedia’s Flash ([FLASH]), with respect to multimedia authoring ([Eidenberger 2003]). Although the module in question in this paper has historically had a traditional computer graphics focus, the students enrolling on our Internet Computing degree have a leaning towards the use of web-standards for content presentation rather than a desire to code graphics from first principles. The comment stated in [Duce et. al. 2002(2)] that teaching “practice first then theory where possible” was an appropriate solution in their case and it does fit with the increasingly output driven nature of our cohort. It was hoped, however, to retain and closely integrate some of the theoretical elements of the previous module and ascertain if moving away from the overheads of graphic programming increased the understanding of some of the core 2D graphics concepts. During the review stage, the points described in the following three sections were considered.
McDonald and Luecking ([McDonald & Luecking 2002] ) highlight three career categories for students in computer graphics. In the context of graphics, the profile of our students fits predominantly in what they term “Digital Media Content Creators”. The fundamental creative and artistic tutoring they state to be key to this role is delivered to those students on our Creative Media Computing Degree, in our case by colleagues in digital art and design. Students enrolled on the single Honours degree in Internet Computing gain exposure to fundamental design skills elsewhere on the program, but would get most benefit from addressing web-graphics from an application interface or data visualization angle.
Chalmers and Dalton ([Chalmers & Dalton 2002]) and Cuningham ([Cunningham 2002]) also comment on the changing needs of computer graphics educators to address the more multi-disciplinary nature of the student body, and the benefits of the use of high-level tools to facilitate the applied use of concepts to novel situations. To motivate both groups, a balance needs to be provided to allow students to be creative whilst ensuring a logical approach to modelling and composition is adhered to.
The UK Government’s Quality Assurance Agency for Higher Education (QAA) produces documents highlighting the cognate areas of disciplines and the body of knowledge that a particular degree should draw from. The computing benchmark document can be found at ([QAA_COMP]). With respect to the module under review one of the key cognate areas is that of data structures and information modelling. The students should understand how to structure and represent graphical information on a computer and be aware of the associated trade-offs. For graduates to be able to adapt to future developments in the field, underlying theory needs to be covered in addition to current standards.
The specified Body of Knowledge for Computing identifies several areas of interest to this theme area including Multimedia, Graphics and Sound, and an individual area on Computer Vision and Image processing. The sound and multimedia aspects are covered in several lectures in the year one media formats module. With respect to graphics, the QAA recommends study of:
Again, some of the above elements are addressed within the year one module; however, with respect to 2D graphics, the modelling and manipulation aspects are clearly important. The module learning outcomes for the graphics module that is the focus of this paper are set out as follows:
Intellectual (cognitive) Skills
Practical Subject Specific Skills
The set of abstractions provided by an API ultimately forms the way in which a student creates their conceptual model of the 2D Graphics Pipeline. Whilst Java 2D provides a wide ranging functionality for path styles, transformations, rendering hints etc., colleagues have previously created higher-level abstractions on top of Java 2D to offer more intuitive modelling environment.
SVG offers clear approach based upon 2D graphics standards and as the student’s ability to program is not a specific learning outcome of this module, the benefits of conceptual clarity may outweigh the removal of graphic programming with Java 2D.
Having focused one-third of their first year on object-oriented programming, students enrolling on this module have good Java skills. However there was a tendency in the previous iteration of this module to focus on the programming aspect of the practical component rather than the applied use of graphics concepts.
The previous lecturer reflected that the cohort had been bipolar; this was attributed to the students with weaker Java skills suffering from lack of practice over the summer break between year one and two. The practical assessment of the 2D section of the module was in the form a space invaders style game. Many students went beyond what was required looking into multi-threading and event handling in Java – techniques which had not been covered in their programming course at this point. Upon reflection and discussion the lecturer had suggested investigating SVG as a possible alternative.
After reflecting on these points it was decided, for this iteration of the module, to change to SVG as the implementation language. The change would be monitored to review the decision through student feedback, anecdotal evidence from student’s course work submissions and through a tentative observation of assessment performance in comparison with the previous iteration of the module. This was primarily to ascertain if the students had found it easier to pick up 2D computer graphics concepts while not encumbered by the overheads of programming in the Java language.
The balance between theory and practice greatly influences the formation of module content. The learning outcomes identified in the previous section clearly indicate a need for students to have understood theoretical graphics concepts. However, with an increasing diversity in our student intake there is a trend to focus on results rather than the underlying theory. With this in mind, theoretical concepts were to be as closely linked and integrated with samples of SVG mark-up, discussed within the lecture sessions rather than isolating the implementation to the supported laboratories. However, it was not deemed appropriate to have extensive coverage of the full scope of SVG delivered in the lectures due to the possibility of veering too far away from the theoretical concepts.
The general aim behind the plan was to take an approach mirroring the 2-D graphic pipeline described in books such as ([Foley et. al. 1990][Hearn & Baker 1997]) but with a particular emphasis on the standards set out in ISO Standard of the Graphical Kernel System (GKS) ([Hopgood et. al. 1984]).
The following plan aims to address the key 2D graphics concepts highlighted by the QAA ([QAA_COMP]), focusing on device independent modelling, and also include elements of the machine vision / image processing section.
The 2-D section of the module comprised ten 1-hour taught lecture sessions and five 2-hour supported laboratory sessions (three being directed). The laboratory sessions enabled incremental development of the module concepts, where students could see the implementation and effects of some of the theory discussed in the lectures, and also support for the assessed coursework submission (ACW). The students were given one month to complete and submit their coursework.
The aim of the ACW was to submit an efficiently-modelled 2D animated scene using SVG. To encourage creativity the exact nature of the submission was left open, however the following choices were suggested:
Marks were awarded on:
A report was also submitted describing the student’s scene modelling and design decisions. The report was also accompanied with an annotated storyboard. In both iterations of the module, the 2D component was worth 30% of the module mark, with the 3D section representing another 30% and the exam completing the remaining 40% of the marks.
An introductory lecture opened the module by addressing the history of manual image creation for the purposes of simulation (Trompe l’oeil; stage sets), emotive communication (graphic art; cartoons) and informative communication (semiotics; graphical abstractions). The remit of computer graphics was similarly classified, highlighting the often heavy focus toward simulation, but the increasingly wider remit (stylistic rendering, toon-shading, information and scientific visualization).
This was followed by giving the students a time-line through computer graphics algorithm and standards development. This history of standards aimed to give the students a background in which they could evaluate the implementation technology they were going to use and how it sat in the historical evolution of computer graphics. SVG was then proposed and discussed against comments set out in the IFIP-Graphics Standards Workshop held in Seillac, France in 1976.
The main aim of the module then proceeded by addressing layers of abstraction in coordinate spaces. As stated above this was based upon concepts described in ([Hopgood et. al. 1984]) namely:
Through adopting such an approach it was hoped to instil in the students the key aspects of modelling and composing in a device independent manner and then transforming their scene to an output device space. Figure 1 illustrates the example SVG framework proposed for achieving these three levels of abstraction, namely World Coordinates to Normalised Device Coordinates through to Device Coordinates.
To further illustrate the concepts to students, a simple mapping example was used. The output in device coordinates is given in Figure 2. Here map symbols (courtesy of Ordnance Survey UK)) are placed upon a map space in world coordinates. Some map symbols are an amalgamation of several singular symbols appropriately styled and transformed from their own cartesian world coordinate space (hence the intentionally inverted display of the singular symbol components in the key display). Six normalisation viewports are used, three for the key, one for the title, one for the full map-view and one for the focused map-view. The normalisation window on the full map-view is the limit of the dataset, with the focused map-view having a normalisation window aligned with the upper left-hand-corner of the dataset. The workstation window covered the whole NDC space and the workstation viewport specifies an area in the browser window (in Device Coordinates) to display the output.
Figure 2: Basic mapping example illustrating coordinate transformations, Data: © Crown Copyright Ordnance Survey
A supported laboratory offered hands on experience of the proposed approach in which students specified viewports on areas of a shape specified in world co-ordinates. This took direct reference from [Hopgood et. al. 1984] modelling of ducks on a pond, which demonstrated the use of segments in GKS (the primitive was taken with reference from [Duce et. al. 2002(1)] ).
Before moving on to higher-level scene compositions, the practical use of coordinate systems in SVG was supplemented with discussions regarding the rendering of the modelled scene. This consolidated what the students were experiencing with the required graphic theory. This was presented in the context of how the SVG plug-in was rendering the modelled and composed primitives. Basic scan-conversion of liner primitives (straight-line sections) was discussed, with a beneficial link to the option in the Adobe SVG plug-in’s ([ADOBE_SVG]) renderering option of “high-quality”. This illustrated a practical example of the super-sampling theory discussed in the lectures. Filling rules and inside/outside tests were introduced with the ability to illustrate practical examples of filling attributes in SVG. Up until now, students had used simple primitives and window and viewport coordinate mappings.
The second supported laboratory required the students to model a more complex scene using a constrained number of initial shapes. The aim of this was to introduce hierarchical modelling of shapes through re-styling and grouping of primitives. Basic matrices were introduced here to illustrate how primitives could be transformed to create more complex shapes. Students were required to scale, mirror and translate four shapes to create a given scene. Figure 3 illustrates a student solution.
At this point only basic polylines and shapes had been introduced (except the use of the given path in the first laboratory). After object-based scene construction had been covered, the path element was discussed, primarily as a means for animating object motion. Cubic and quadratic curves were introduced, first in a theoretical context, with illustrations of how to manually construct, then with practical SVG examples. A laboratory session followed on animating pre-defined shapes along paths.
With the aim of giving students a more detailed knowledge of modelling with Bezier curves, an SVG font case study was introduced. This consisted of a basic review of the anatomy of typography and its uses in graphic design, followed by an exercise engaging the students in hand-drawing cubic and quadratic curves to form basic fonts of their handwriting. Students were given a template grid paper and asked to transcribe a letter of their hand-writing ([Laaker 2002]) onto the grid. Next, using a world coordinate space for each letter, curves were fitted to the font-path using approximations of control-points and subdividing the outer perimeter through the start and end-points via the control-points. If the curve did not touch the fully subdivided outer perimeter then a new control point was chosen. Once happy with the points, the appropriate SVG mark-up was then created. Through practicing the manual construction of these curves the students gained valuable knowledge when it came to designing animation paths or modelling curved shapes for their practical coursework submission. Figure 4 illustrates a simple SVG modelling of a rough hand-written font.
Processing of graphics post scan-conversion was introduced to students as the final stage of the 2D Pipeline. This was achieved, again in a theoretical context, by illustrating various filters such as Gaussian smoothing and Sobel edge detection, and then describing practically the ease of chaining filters in SVG to achieve these effects, on either scan-converted graphics or external raster images.
The previous iteration of the module saw some excellent 2D "Space Invader” solutions. However, the module learning outcomes (as stated in section 2.1) are not concerned with the areas in which many students applied themselves – namely further Java programming. This balance between excellent submissions and students who felt they needed to achieve more than they could have given rise to the “bi-polar” observations of the mark spread.
The average mark for the 2D coursework component from the previous iteration of the module was 62.5%, with a standard deviation of 28, there were six genuine coursework fails. The SVG 2D component scored a 62.5% average with a standard deviation of 17 and two genuine fails.
Given the freedom of the specification, the submissions for the 2D coursework were of a wide-ranging nature. Paths were used to great effect for animating text and modelling graphical objects. Most submissions used hierarchical modelling, some re-styled basic shapes to construct specific instances and new groupings. This attention to modelling was one of the key aims. Figure 5 illustrates an example submission.
The frame from the animation shown in Figure 5 is composed solely of modelled SVG graphical objects. Figure 6 illustrates an example of the restyling and composition of a generic graphic shape while Example 1 details how the student has achieved this effect in a World Coordinate space prior to composition in the Normalised Device Coordinate Frame. The path coordinates of the kelp seaweed were animated in the final scene.
<!-- ### sea floor [WC: 1000w x 100h] ### --> <!-- rock [WC: 50w x 50h] (Cartesian coordinate system) --> <polygon id="rock" points="10,3 26,4 34,8 42,14 41,25 37,32 35,38 30,41 27,47 20,50 6,43 3,32 6,23 1,14 3,7" style="stroke: none;" transform="translate(0,50) scale(1,-1)"/> <use id="mediumRock" xlink:href="#rock" transform="rotate(20, 25, 25)"/> <use id="largeRock" xlink:href="#rock" transform="scale(1.5) rotate(260,25,25)"/> <use id="smallRock" xlink:href="#rock" transform="scale(0.5) rotate(-250, 25, 25)"/> <!-- kelp --> <path id="kelp" style="stroke: green; stroke-width: 2.5; stroke-linecap: round; fill: none;" d="M 10,10 Q 15,20 10,30 Q 5,40 10,50"/> <g id="seafloor"> . . <!-- rocks on left --> <use xlink:href="#largeRock" x="10" y="5" style="fill: rgb(153,111,44);"/> <use xlink:href="#smallRock" x="75" y="58" style="fill: rgb(143,99,21);"/> <use xlink:href="#mediumRock" x="45" y="35" style="fill: rgb(87,91,63);"/> <use xlink:href="#smallRock" x="30" y="60" style="fill: rgb(118,101,85);"/> <!-- kelp 'field' on left --> <use xlink:href="#kelp" x="0" y="30"/> <use xlink:href="#kelp" x="10" y="30"/> . . . <use xlink:href="#kelp" x="35" y="39"/> . . . </g>
Example 1: SVG Illustrating hierarchic modeling of shapes
Several submissions used SVG filters, mainly to provide blurred backgrounds to focus the viewer on the foreground or to give drop shadows. Figure 7 illustrates good re-use of a simple filtered and transformed shape to give a star-field backdrop over which modelled objects are animated. Two students reflected on the costly overhead of using filters in conjunction with animation with respect to decreased frame-rate. One student documented this drawback in the exam. Figure 8 shows a further example submission focused upon giving an animated, visual overview of basic computer network operation.
In the previous module the exam had a strong focus on 3D concepts. During this iteration of the module, with the presence of two lecturers, two questions had a distinct 2D focus, with the remaining two concerning 3D concepts. Although a direct comparison therefore cannot take place, the following observations can be seen as indicative.
In the iteration under observation in this paper, the questions concerning 2D graphics received a slightly lower answer count than those concerning the 3D section of the module. This can be partly attributed to the fact that the Christmas holiday and 4 months had elapsed since the 2D section of the course. The average for these questions combined was 40% compared with the combined average of 47% for the 3D section. Given the time-lapse since looking at SVG and 2D coordinate abstractions this disparity was not as high as was expected. The final average for the exam was 44%. The previous iteration of the module saw an exam average of 48%.
Out of the twenty-nine students enrolled on the module, thirteen of these elected to respond to a review of the 2D component. When asked about their understanding of 2D graphics concepts following the 10 weeks, eleven felt they had gained an understating with two respondents stating they had gained some understanding. When asked about the balance of practical and theoretical work, seven respondents thought it was about right, five though it too theoretical and one respondent wanted more theory. Twelve students thought the examples and work could have been more demanding.
A question was asked as to the choice of SVG over a Java-based approach. Although this cannot provide a true comparison, as the students had not engaged in graphic programming in Java, it yielded a nine to four split in favour of SVG. Two students noted they would have rather used Macromedia’s Flash ([FLASH]), with respect to the nature of the ACW, and two commented on the need for more SVG resources.
A further review undertaken after the whole module was complete revealed a good reflection on the SVG component and the 2D practical submission, with one negative comment. The students appreciated the tie-in with other XML languages (i.e. SMIL) but one would have liked more XML coverage throughout the degree programme.
An unfortunate consequence of the modular system of units of study is that many of SVG’s powerful features, such as integration with other web technologies, were not covered within this module, as they were not part of the remit of the module specification. With this in mind the aim of the last lecture was to place SVG in a wider context illustrating more advanced cases studies and how it can integrate with technologies the students would be experiencing in later units of study. Several past final-year dissertations were discussed, ranging from an SVG map-based front end to a campus-room booking database ([Statham 2002]), to an SVG spatial media interface ([Warner 2003]). More time was spent on the architecture of a disk visualization tool ([Curson 2004]).
This project was concerned with using accessible metaphor-based presentation of sector-level disk information for use with non-technical experts, the focus being members of Jury in Court of Law when digital forensic evidence is to be presented. The technical aim of the project was to provide an interface to a dynamic representation of physical data on the sectors of a disk (the scope of this project was limited to floppy disks). The metaphorical visualization used colour-coded symbols overlaid on a scanned bitmap of a disk in the background. The functionality included highlighting sectors that contained physical data that matched user-entered search criteria (Figure 9). This case study was used because the implementation architecture (illustrated in Figure 10) was based around a Java application rendering SVG through the Batik API. ([BATIK]).
Figure 9: DiskViz Tool illustrating search results, [Curson 2004]
This integration created a scalable architecture for analysing differing physical disk structures coupled with a visualization front end which could offer element based interaction and drilling down to discover attributes of sectors (Figure 11). The ability to save a visualisation as an SVG file, or even, as highlighted in the future work section of the dissertation, remotely render a lightweight browser-based visualization which was able to communicate with the isolated forensic data-source, demonstrated a novel visualisation architecture.
Figure 10: DiskViz Tool architecture, [Curson 2004]
Figure 11: DiskViz Tool illustrating sector query results, [Curson 2004]
The second case study investigated was a thin-client terrain visualization tool that produces cartographic terrain renderings in SVG, based upon parameters passed to a Java Servlet (architecture the students would be looking at in future units of study). The algorithms and processes for the abstraction of key object and view-based visual cues, reported in [Visvalingam & Dowson 1998] and [Whelan & Visvalingam 2003] , were executed in a Servlet reading from a server-based data-source. The resulting SVG data was returned to the client, providing a high-resolution sketch of a user-selected viewpoint, with both a fraction of the data points present in the full un-filtered scene and offering a clear, succinct terrain visualization (Figure 12).
Figure 12: SVG Terrain sketch, Whelan and Visvalingam (2003) (© 2003 IEEE), Data: © Crown Copyright Ordnance Survey
The final case study was used to highlight the power and simplicity of SVG image processing filters. In a similar line to the previous example, an SVG file is created with a vector description of a view of a section of terrain. This description is in the form of cross-section slices through the surface, parallel to the line of sight, rendered in the form of a z-buffer – i.e. the fill colour is directly related to their distance from the viewer (Figure 13). Three SVG filters are passed over this image highlighting the artefacts created by the stepped z-buffer. One filter emphasises silhouettes, strong visual cues exploited in non-photorealistic rendering ([Saito & Takahashi][Whelan & Visvalingam 2003]). Two further filters pick out left and right facing features. As the results of these operations are three separate image buffers, they can be combined using an feComposite filter. This composition provides the ability to add precedent over the visual weighting of the results. A Gaussian blur filter offers a naturalistic style to the final displayed buffer and an feComponentTransfer adjusts the balance of intensity in the final image (Figure 14).
An interesting consequence of having the vector description of the scene coupled with the image processing functionality in a graphic mark-up file is that when a portion of the scene is enlarged, the image-buffers are re-processed, offering further detail as the sampling of the operators is over the newly projected graphic. Although this example is not offering an analytical view of terrain as in the previous case (Figure 12), it does provide an impressionistic view of the scene and a demonstration of the accessibly of powerful image processing in SVG.
This paper has documented the process of reviewing and delivering a 2D computer graphics module in the context of The University of Hull’s Centre for Internet Computing. A discussion justifying the approach was presented which was followed by a proposed method of teaching 2D graphics standards through a balance of theory and practice using the Scalable Vector Graphics mark-up language. Two educational case studies were presented, one to illustrate hierarchic modelling of shapes and coordinate transformations, and one to give students detailed practice modelling with quadratic and cubic curves. Three examples highlighting SVG’s integration with other web architectures and graphics applications were presented to discuss the wider scope of the SVG language.
The assessed coursework showed no change in the average marks between the previous module iteration, based upon Java2D, and the focus of this paper. There was however a noticeable difference of eleven in the standard deviation, with a less polarised set of marks in the SVG iteration. It appears that more students have felt comfortable in achieving the module learning outcomes and demonstrating knowledge of 2D graphics concepts in the environment offered by SVG. Although the modelling, transformation and composition interfaces are at a higher-level in SVG, the standards-based approach permits the practical exploration and understanding of the more theoretical elements of the module such as image processing, defining shapes for re-use / re-styling and modelling scenes in a structured logical way.
The module will be reviewed prior to the next academic session, and the form of the exam assessment component will be considered in detail, but it is intended to proceed further with SVG. Further integration of XML languages and applications will also be considered in other modules throughout the degree programme.
XHTML rendition made possible by SchemaSoft's Document Interpreter™ technology.