Key words: computer graphics,
multimedia, learning, teaching, CAUT, interactive
ABSTRACT
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
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.
| Item | |||||
| Aesthetics | |||||
| Useability | |||||
| Overall Structure | |||||
| Demonstration movies | |||||
| Text | |||||
| Hypertext | |||||
| Appropriateness of exercises | |||||
| Understandability of code |
References
[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)
http://www.metrowerks.com/
Apple Developer World
http://www.devworld.apple.com/
QuickDraw 3D Site
http://quickdraw3d.apple.com/
Apple Media Tool Site
http://ccsmacinfo.ccs.queensu.ca/Mark/AMT2/
QuickTime 2.5
http://www.QuickTimeFAQ.org/
http://www.apple.com/
CodeWarrior 8
http://www.metrowerks.com/
Apple Media Tool
http://amt.apple.com/
Color It! 2.3.2
http://www.microfrontier.com/
StrataStudioPro Blitz 1.7.5+
http://www.strata3d.com/
MooVer 1.3
(from Info-Mac at http://hyperarchive.lcs.mit.edu/HyperArchive.html)
Nisus 3.4
Nisus Software Inc.
http://www.nisus-soft.com/