Interactive Multimedia Software for

Teaching Computer Graphics

B. Pham, J. Nunn*, I. Anderson, H. Mays, D. Bell

Research Centre for Intelligent Tele-imaging

* Support Centre for Effective Learning and Teaching

University of Ballarat, PO Box 663 Ballarat VIC 3350

Email: [binh, jnunn, iain, hjm, dbell]

Key words: computer graphics, multimedia, learning, teaching, CAUT, interactive


This paper describes the work involved in a project funded by a 1996 CAUT grant, for development of a software package to supplement and enhance the teaching of Computer Graphics. The material which demonstrates fundamental concepts in computer graphics, is designed in a modular way, and aims to utilise the capabilities of interactive, computer-enhanced learning environments. These environments are learner-centred and engage learners in experiential, problem-based approaches to learning.

1. Introduction

Computer Graphics (which is usually taught as an elective unit at third-year level for Computing and Information Technology students at the University of Ballarat) deals with fundamental concepts, computer techniques and algorithms for generating two- and three-dimensional graphical objects. As this is a practical subject, it is essential that students have hands-on experience. However, a number of problems have been identified which hinder students' progress and prevent the objectives of the course from being fully realised. These include:

(i) Students often find it difficult to fully comprehend many graphics algorithms because of the large amount of detail involved. In particular, a large number of these algorithms are of a recursive nature that makes them very efficient to implement, but harder to follow because many details are hidden (e.g. [3,4]). It would greatly facilitate students' understanding if the working of such algorithms were illustrated graphically and dynamically.

(ii) Due to resource limitations, the number of students in the course always exceeds the number of graphical workstations available.

(iii) The amount of supervised lab time for each student every week is limited due to practical constraints on staff time.

(iv) The Computer Graphics unit is one of the most popular and often appeals to some students who have a misconception that it is much easier to learn graphics than other subjects because graphics is visual. Such students get very discouraged when they realise that most graphics algorithms are based on theoretical results in mathematics and physics.

Due to these problems, there is a need for supplementary courseware which guides students through fundamental concepts in graphics using visual means (eg. Images and animation). Students can then work unsupervised and at their own pace. It is also envisaged that students will develop a range of independent learning strategies within a media-rich environment.

This paper presents the work funded under a 1996 National Teaching Development Grant, which aimed to design and implement an interactive multi-media software package to supplement and enhance the teaching of the unit "Introduction to Computer Graphics". Students will be able to "walk through" each algorithm and see step-by-step results displayed graphically and dynamically. Facilities are also provided to give students opportunities to practise devising and implementing their own algorithms, and to view the results.

It is envisaged that the material from this software package will be interwoven with existing material, which is provided in lectures and lab sessions. The package could also be used by postgraduate students from other disciplines who require basic knowledge in specific topics for their research.

Section 2 describes the design and content of the courseware, while Section 3 deals with the underlying educational and evaluation issues that we intend to address. Section 4 provides information relating to the programming language, hardware and software used in the creation of the courseware. Other relevant issues such as methods for interaction and graphical displays are also discussed. Section 5 presents methods for evaluation. Some conclusions are outlined in the last section.

2. Design of Courseware

The unit consists of two main components: theoretical and practical. The theoretical component, which aims to provide students with fundamental concepts in computer graphics, covers methods for generating graphical objects with different geometric characteristics and realistic appearances. The aims of the practical component are to

The instructional material is divided into seven modules. The development of each module involved three main tasks: design, implementation and evaluation. The design task involved identifying the problem, constructing the model for communicating the ideas and selecting appropriate methods and media for interaction. Two main models for dissemination of ideas were employed: the graphical step-by-step display of each algorithm and the display of different effects of alternative algorithms. Animation was used whenever appropriate. During the implementation stage, programs were also developed to allow users to change values of parameters for each algorithm, to implement their own algorithms and to display results. These three tasks formed a cyclic process for continuous improvement as the evaluation provided ideas for improvement by redesign.

The courseware consists of the following seven modules.

Module 1. Graphics Primitives

Module 2. 2D Modelling

Module 3. 3D Modelling

Module 4. Parametric Curves and Surfaces

Module 5. Realistic Display Methods

Module 6. Fractals

Module 7. Simple Animation

Module 1 introduces the most basic primitives used for generating graphical objects: points, lines, polygons, circles and colour. Commonly-used algorithms for generating lines, constructing a colour look-up table and filling the interior of a closed polygon, are demonstrated to give students insight into how simple graphical objects and colour are mapped and manipulated on a computer screen. QuickDraw is introduced in this module.

Module 2 introduces the concept of "window", "viewport" and "clipping", and explains how they are used to specify the area of a picture to be displayed, and where it is mapped on the screen. Equations and matrices for 2D transformations are discussed to show students how to achieve different views of a graphical object via translation, scaling or rotation.

Module 3 presents basic concepts for 3D modelling: 3D coordinate systems, parallel and perspective projections, and 3D transformations. A brief introduction to the QuickDraw3D graphics library is also given. Sample programs for demonstrating graphics algorithms and for student exercises were written using functions from these libraries.

Module 4 discusses techniques for generating polygonal surfaces, commonly used parametric curves and surfaces such as Bezier, B-splines and NURBS (Non-Uniform Rational B-Splines).

Module 5 presents methods for achieving realistic display of graphical objects. Topics include simple illumination models, material characteristics, and various types of display effects such as highlights and transparency.

Module 6 introduces the basic concept of fractals. Only simple and natural fractals are discussed.

Module 7 shows how simple 2D and 3D animation can be achieved and how flickering effects can be reduced.

3. Educational and Evaluation Issues

The challenge set by the multi-discipline team was to develop a multimedia learning environment with a "powerful pedagogical pull" (Laurillard, [9]) focused on designing an experiential, inquiry-based environment for students to 'tinker with' computer graphics concepts and models. Multimedia development teams have long been challenged by educationalists to provide sophisticated learning environments that empower the learner to use the computer as a cognitive tool (Rowe, [11]) that overcomes the limitations of existing environments. Cognitive tools enable learners to actively construct and transform their understanding of an area of learning, test their developing ideas and reflect on the products of their learning.

Traditional approaches to tertiary teaching are based on a transmission model of teaching where the teacher delivers their knowledge to a large group of students. This approach is very robust because it is easy and efficient and requires no professional education training. Educational innovations, grounded in Dewey's theory of inquiry learning [2], continue to change learning environments so that the role of the teacher changes from the 'teller' to a 'facilitator of learning'. Advances have been made in all sectors of education but the transmission model is well established in higher education. A model of teaching as transforming learner understanding requires educational training and greater pedagogical understanding by the professional teacher.

Educational software that supports student-centred learning should be designed to facilitate the learner in doing, thinking, manipulating, constructing, testing, analysing, reflecting. A participatory multimedia package should enable the learner to choose their own path, experiment, try different approaches, take their time, start at different stages, reinforce concepts, provide examples and models, store working models of their constructed products, and provide for peers to make comment on their products. The learning environment should provide a map for the learner in the same way as a teacher designs the range of learning activities to achieve a set of learning objectives.

Wills [12] suggests that in this type of alternative design "the learner's interactions with the learning environment are not judged by the computer. The outcomes of their interactions are reflected back to them and it is up to the learner to judge themselves" (p. 63).

CGrUB has been designed to be one part of the learning experience for students studying Computer Graphics. Laurillard [8, 9] proposes that academic learning is predominantly mediated learning that is a second order experience for students. The learning undertaken by students using CGrUB is more appropriately described as situated learning since the students are learning about computer graphics by generating computer graphics. This approach has the intent of students engaging in what Ramsden [10] describes as a deep level of learning. The environment is one where the tools of construction are real and the software has been designed as a cognitive tool to support the students' conceptual understanding of computer graphics.

4. Implementation Issues

  1. Environment

4.1.1 Development Hardware

A Power Macintosh 9500/132/32M/2G with 21" monitor was used for development. Extended with an Apple QuickDraw 3D accelerator card, it allows simultaneous multimedia authoring, graphic creation, and programming, at high speed. The screen design is important; it allows many hours of continual use without eye strain, and the size is sufficient to allow multimedia development and debugging, each of which require a great deal of screen real estate. While this machine has recently been superseded, it was rarely found to be lacking in power.

4.1.2 Development Software

Unless noted, the software was purchased and registered by an agent of the Research Centre for Intelligent Tele-imaging at the University of Ballarat. For multimedia development: Apple Media Tool (AMT) and Apple Programming Environment 2.0. AMT is an interactive, script-free authoring tool; it allows drag and drop placement and editing of multimedia components. No media is created within AMT itself; it imports text, graphics, and movies made with other tools.

Text was created within Nisus 3.4. As AMT requires RTF files as output, a filter was used to export directly from Nisus. The output filter does not give much control over text colours, and a bug in AMT forces the first entry in an RTF colour table to be read as black. As we needed white text with another colour for headings, a macro in Nisus converts, in RTF colour tables, blue to our heading colour and black to white. Standard stationery files allowed predefined formatting for text files, and preset styles made headings and hypertext links easier.

Graphics for multimedia presentation were created using Color It! 2.3.2. AMT requires PICT files, a Macintosh standard format, and Color It! proved an easy tool for generating and updating many small graphics files needed in the course of the product's development. Shareware tools for creating movies from PICT files are available from the Internet, and MooVer was chosen for its convenient, time-saving user interface. It allows a chosen compression method to be used repeatedly, and with subtle resource editing, produces movies which conform to a naming standard.

To create the QuickTime VR movie in Module 3, a QuickTime animation of the axes rotating was created in StrataStudioPro Blitz 1.75+, and that was passed to a freely available Apple development tool, Make QTVR Object. StrataStudio was also used to render the CGrUB logo, the CGrUB demo movie, and some of the demonstration movies within CGrUB (in the Realistic Display Methods module).

Programming in C language was performed within the CodeWarrior 8 development environment. Initial source files included one given away free with CodeWarrior, and various source files freely available from Apple. All these files have been extensively modified, built-upon, and commented from their initial forms.

4.1.3 Development Programming

All code produced in CGrUB is in C programming language, and uses the graphics libraries QuickDraw and QuickDraw 3D [1]. QuickDraw is included with every Macintosh, and attracts no licensing fees. QuickDraw 3D exists as an optional, freely available set of extensions, and is expected to be included in a future update of the system software. Producers of QuickDraw 3D software, however, must pay a $250/title/year licensing fee to Apple. Currently, we are awaiting a response to e-mail sent to the licensing department as an enquiry about our special requirements.

4.1.4 End-User Environment

It is expected that the end user will need certain hardware and software. To run CGrUB MM at a basic level, the user needs about 3M of free RAM, a 13" (or larger) screen, preferably in 16-bit colour (thousands of colours), and either a Macintosh or Power Macintosh running System 7 or greater, or a PC running Windows 3.1 or 95. CGrUB MM runs on Windows 95 in 16-bit mode. To run most of the CGrUB package, the user needs additional RAM for running linked applications, and a Macintosh or Power Macintosh. To run the complete CGrUB package, including QuickDraw 3D applications, the user needs substantial additional RAM and a Power Macintosh. At least 16M total system RAM is recommended, and hardware acceleration is also recommended.

At least 16M of RAM is recommended in order to use CGrUB MM concurrently with a development environment (such as CodeWarrior) on files in the Code folder. QuickTime must be installed on the user's system. To run any QuickDraw 3D applications, the user must also install QuickDraw 3D. We intend to include the latest installers for this software. To be able to use the source code provided, the user needs access to a C compiler. On the Mac, CodeWarrior is recommended, and native project files are included for that package.

4.2 Product Issues

4.2.1 User Interface

Consistency has been a major consideration in designing the interface. Throughout, green text buttons (at an intensity level of 0% , 70%) are used for navigation; they highlight as the mouse moves over them and blur when clicked (at intensity value of 25%, 100%). The logo is also used as a button; a green halo appears when the mouse moves over it. Green is not used elsewhere in the package, and it's sufficiently different from the other colours to allow the "green means action" implication.

Each technique also has a consistent user interface. The movie controller, text scroll bar and other clicking actions work in the same way on each page. Direct grabbing of the text as an alternative to the scroll bar is permitted Consistency between screens was achieved largely through cut and paste. Entire technique pages can be copied and pasted, and drag and drop allows new pictures to be placed where old ones were, maintaining the same functions (highlight when mouse enters graphic area, etc.).

4.2.2 Graphic Design

Overall screen design is a compromise between aesthetics and functionality. An involved 3D design would have taken too much screen space; the 640x480 size is quite restrictive (though still a common denominator, and thus a necessary evil). Titles and navigation graphics are consistently placed, and geared to be economical yet elegant. The overlapping of the white titles and the single-pixel white line (which draws the elements along the top of the screen together) is not accidental. In fact, black pixels have been made transparent in all titles, to ensure they don't obscure one another, and to allow a consistent size for all title graphics.

Movie size has been set to 450x300, again a compromise. A large amount of information can be shown, and the increased width over height allows source code to be shown alongside graphics. Much larger than this, however, and the text becomes quite squashed. Hypertext is large enough to accommodate 255 characters of average Helvetica 12, the maximum allowed as a hypertext entry. Red arrows are used to attract and hold the user's attention, and to make a connection between the pseudocode and the graphical parts of the movie.

Certain fonts were chosen for screen use. Helvetica 12 is used throughout for the text content and hypertext, and Helvetica 12 Italic, antialiased, is used for labels within the techniques' movies. Helvetica is a common font, included in standard system installations across both Mac and PC platforms, and it is reasonable to expect its presence. Franklin Gothic Heavy 36, FG 24, and FG 18 are all used, antialiased, in graphics for titles (white) and buttons (green). FG Italic is used for some labels where needed, and for text on the credit screens. It is not similar enough to Helvetica 12 Italic to conflict, yet its resemblance to FG Plain is enough to support the connection. Geneva 10, a common programming font, is used for the pseudocode in the movies. Other fonts tend to take too much space, and smaller fonts can be too difficult to read.

Consistency between graphics was attained by using a consistent pixel distance between the edge of a graphical character (e.g. the slash in the frame number) and the edge of the screen. In this way, the many technique titles, the frame numbers and other items retain a neat, constant appearance. Titles are located in exactly the same place (0,0) in each technique; consistency at this level becomes especially important when dealing with large projects.

Another aid to consistency was the cut and paste of entire screens. By using an existing screen as a template for future screens, screen creation becomes much more efficient. It is easiest to add pre-constructed content to the multimedia environment as a final step as this allows for independent graphic design and user interface prototyping;

4.2.3 Content Design

Consistent headings are used for text files associated with each technique. An attempt has also been made to keep the writing style consistent in both the main text and the hypertext definitions. RTF provides limited control over text placement, and certain compromises to do with line spacing and left justification have been made. Headings are the same golden yellow colour, it matches a colour in the logo, unifying the colour scheme.

The text provided for each technique contains an Introduction, and one or more of the following components:

Underlined words are hyperlinked, and provide both a glossary and a language reference for QuickDraw. AMT interprets any StrikeThru-styled text as a hyperlink; and hyperlinks are underlined to show the user that a link exists. Graphical content follows the font standards outlined above. Pseudocode is stepped through if the technique explains an algorithm and if a graphical explanation is appropriate. Generally, algorithms are simplified to allow a graphical explanation, and they have not been optimised. Colour use has been controlled to enhance readability; only hyperlinks and headings are coloured. In particular, green has been largely avoided to prevent clashes with the "green means action" idea.

5. Testing and Evaluation

Resources such as CGrUB are very beneficial to lecturers teaching computer graphics for the first time. Traditionally, students rely on the content of lectures and textbooks to provide enough information to gain an understanding of the concepts of a particular subject. However, the visual nature of computer graphics means that algorithms and concepts are usually best understood when explained visually. Students often cannot understand concepts discussed in textbooks, and time and resource restrictions on lecture content prevent the detailed examination of algorithms and concepts that some students need to gain an understanding of them. CGrUB fills a gap in the available resources through the unified approach of providing text and dynamic algorithm walk-throughs in a medium that allows information to be presented in an intuitive way. The multimedia application also allows students to work at their own pace and in their own time. The availability of a package such as CGrUB reduces the pressure on a new computer graphics lecturer to produce the large quantity of visual aids required to present a course in computer graphics.

CGrUB also aids the new computer graphics lecturer by providing an integrated environment that facilitates learning. Programming exercises aid the understanding of the algorithm or concept presented by requiring the student to implement the new concept. The availability of this facility in CGrUB reduces the requirement on the lecturer to provide the exercise content, as well as the necessary programming environment and tools required. The supplied exercises are provided for use only on Macintosh platforms (with some porting they could be used under MS Windows), which is one of the most limiting factors of the CGrUB package.

Formative evaluation of CGrUB was conducted as part of the iterative design-development phase. It involved volunteers from both the staff and second- and third-year students at the University of Ballarat. The students' knowledge of graphics ranged from none (interested, but never studied graphics) to high (have completed more than one unit in graphics). Staff included graphics lecturers and educationalists with experience in instructional design and the use of multimedia in education.

The evaluation form used was in two parts. The first comprised eight questions using a five-point Likert scale and addressing the interface design and the content quality. The second part comprised five open-ended questions addressing users' impressions of the package and suggested changes/improvements. A summary of the responses is included in table 1 below.

Summative evaluation of CGrUB is in progress at the time of writing. A beta version of CGrUB was released in early October. More than 30 members of ASCILITE volunteered to evaluate the package - these included lecturers of General Computing, Computer Graphics, Computer Aided Design and developers of interactive, multimedia courseware. (We would like to take this opportunity to thank all people who participated in the evaluation.)

6. Conclusion

A visually-oriented approach is essential for teaching Computer Graphics because it is set in a context of "learning-by-doing" and the results can only be appreciated effectively by seeing the displays. We believe that well-designed, interactive courseware will encourage independent learning by students by providing them with an environment which facilitates an experiential and discovery learning approach. This would move students away from a rote learning approach and encourage them to use cognitive skills to compare, analyse and evaluate different material. Furthermore, students will develop a life-long orientation towards this mode of learning. Our experience in developing CGrUB has proved beneficial to both staff and students, giving us insights not only into course design and evaluation, but also into issues involved in the integration of a programming environment with an authoring environment. The latter knowledge is essential in order to create a dynamic and truly interactive multimedia environment, moving away from the commonly-used, but much more restrictive, cut-and-paste alternative.

Very Good
Very Poor
Overall Structure
Demonstration movies
Appropriateness of exercises
Understandability of code

Table 1. Summary of Formative Evaluation Data


[1] 3D Graphics Programming With QuickDraw 3D (1995), Apple Computer Inc., Addison-Wesley 1995

[2] Alessi, S. M. and Trollip, S. R. (1991) Computer-Based Instruction - Methods and Development 2nd. ed. Prentice hall, Englewood Cliffs, New Jersey

[3] Dewey, J. (1910). How We Think. Boston: Heath.

[4] Dick, W. & Carey, L. (1985) The Systematic Design of Instruction Scott-Foresman, Glenview IL.

[5] Faux, I. D. and Pratt, M. J. (1979) Computational Geometry for Design and Manufacture New York, Wiley & Sons.

[6] Foley J. D., Van Dam A., Feiner S. K., Hughes J. F., Philips R. L. (1993), Introduction to Computer Graphics, New York Addison-Wesley.

[7] Hearn D. and Baker M.P. (1995), Computer Graphics, New Jersey Prentice-Hall.

[8] Laurillard, D. (1993). Rethinking University Teaching. A framework for the effective use of educational technology. London: Routledge.

[9] Laurillard, D. (1994). Multimedia and the Changing Experience of the Learner. Proceedings of APITITE 94, Australian Society for Computers in Learning in Tertiary Education, 19-21.

[10] Ramsden, P. (1992). Learning to Teach in Higher Education. London: Routledge.

[11] Rowe, H. (1993). Learning with Personal Computers. Hawthorn: ACER.

[12] Wills, S. (1994). Beyond Browsing: Making Interactive Multimedia Interactive in Rethinking the Role of Technology in Education, proceedings of Educational Technology 1994, Singapore, Ministry of Education and National Computer Board, May 1994, 59-68.

Internet Addresses for Software Used to Create CGrUB

CodeWarrior Documentation

(supplied on CD with CW)

Apple Developer World

QuickDraw 3D Site

Apple Media Tool Site

QuickTime 2.5

CodeWarrior 8

Apple Media Tool

Color It! 2.3.2

StrataStudioPro Blitz 1.7.5+

MooVer 1.3

(from Info-Mac at

Nisus 3.4

Nisus Software Inc.