the computer graphics course in the computational science ...rsc/nsf/sc02.notes.pdf · • the...

The Computer Graphics Course in theComputational Science Curriculum

Supercomputing 2002 Educators Workshop

Steve Cunningham and Angela Shiflet

November 18, 2002

copyright © 2002, Steve Cunningham and Angela ShifletAll rights reserved

Outline:

Goals of the workshop:• To discuss the role of computer

graphics in computational sciencestudies

• To describe a beginning computergraphics course that uses a currentAPI for its project support and is agood fit for computational science

• To discuss some issues in teachingthis course

Computer graphics in computational science• Computer graphics as a key tool in

computational science• The link between computer graphics

and modeling and simulationtechniques

• Why students need to learn to createtheir own graphics, not just usegraphics software

• How a computer graphics course canfoster graphical problem solving andvisual communication

Context and applications in the computergraphics course

• graphical communication• science applications

Goals of the computer graphics course• develop skill in computer graphics

programming and achieving goodinteractive and dynamic displays

• develop skill in using computergraphics to communicateinformation, especially in thesciences

Prerequisites for the course• programming skills• spatial ability, geometry

fundamentals• more advanced mathematics, such as

linear algebra, is not needed

Tools for the course• hardware• software

Course notes and other materials• where they are• what they contain• supporting materials

Technical content of the course• Background in mathematics• A brief introduction to the API• The graphics pipeline• Projection and viewing• Details of modeling

• modeling with primitives• using transformations in

modeling• the scene graph

• Color• Lights and lighting• Shading• The rendering pipeline• Event handling

• events and callbacks• interaction toolkits

• Texture mapping• Animation• High-performance techniques• Object selection• Interpolations and spline techniques

Introduction to the OpenGL API• An outline of a standard program• Complete examples to illustrate

graphics programming techniqueswith the API

Why this workshop?

This workshop was organized because the authors believe that computer graphics is a key technology incomputational science, and so computational science students must get a good grounding in computergraphics in order to contribute fully to the field. In the first of the papers [CUNSH] included in theseworkshop notes, we discuss the roles of computer graphics packages and computer graphicsprogramming in computational science and argue that students need to develop the understanding ofvisual communication in the sciences that can only be obtained by developing graphical presentationsfrom first principles. In this paper we also show the link between computer graphics and the modelingand simulation techniques that are important in computational science. In the second of the papers inthese notes [CUN02a] we discuss how a beginning computer graphics course can include scientificproblem-solving and visual communication, as would be needed in a computer graphics course intendedfor computational science. Between them, we make the case for a computer graphics course as part of acomputational science curriculum.

After these two papers, we discuss the kind of course that could fit the needs of computational science.Such a course would be built upon a widely-available graphics API such as OpenGL, because of the lowcost and high performance of current graphics hardware. The power and simplicity of OpenGL nowmakes it possible to offer a course that builds on the new kinds of tools [CUN 00a]. We believe that thiskind of course will be available to computational science programs through computer science, becausewe expect that the API-based computer graphics course will begin to supplant the traditional algorithmsand techniques course in many computer science programs over the next few years.

Finally, we include a template for a graphics program with the OpenGL graphics API and a completeprogram for a small scientific simulation that uses OpenGL to present its results. These will bediscussed in a hands-on session to give everyone some experience in using OpenGL in a scientificcontext.

What is assumed of the audience?

We assume that workshop participants have an interest in offering a beginning computer graphics courseand have enough experience with the subject to understand the relationships between the basicoperations of modeling, rendering, and projection. We also assume that the participants have someprogramming experience in C or C++. We do not assume that the participants have extensiveexperience in computer graphics or indeed have ever taught the subject, although the workshop willprobably make more sense to persons who have.

Context and Applications in the Course

The course we describe in these notes differs from most computer graphics courses in its emphasis ontwo areas that are important to computational science: graphical communication and computer graphicsapplications in the sciences. We will describe these here to introduce the course and will discuss otheraspects of the course later.

Graphical communication

Anyone can make a picture, but it takes effort and thought to create a picture that communicates realinformation to the viewer. This communication is particularly important in visualizing scientific data,

processes, and principles. If students only learn how to create images without giving thought to how theimages convey concepts, relationships, or other content, it is almost as if they learn grammar of alanguage without learning how people really communicate. Students should learn to understand thattheir choices of color, shape, motion, and interaction are all meaningful to the user, and to developexperience in making choices for their images based on the meaning they need to convey. This isprobably best done by examining a number of examples and discussing how each is or is not effective incommunicating to a particular audience. This discussion might well go on to having the class worktogether under the instructor’s guidance to design one or two particular images before having them beresponsible for including this kind of communication design in their own projects.

Science applications

We have chosen to focus our examples and student projects around science applications because webelieve that most students in computer science will have had a fairly good background in the sciencesfrom high school or other college work. The wide variety of science areas and the diverse kinds ofpresentations these allow makes this a good choice for projects. This also lets us encourage studentsfrom the sciences to take the course, because they will have an immediate use for this material in theirmajor studies. It also provides a key support for an undergraduate computational science program.

The examples and scope provided by the sciences is very large. The cover sheet of these notes containsthree examples of work from the first author’s students. The top right figure is a diagram of thebehavior of light as it passes through a polarizing film; it is from an interactive program that lets the userrotate the light wave and shows how the light wave is maintained in one direction and is suppressed inthe other. The bottom figure is from an animation that illustrates the operation of a gas chromatographas gas molecules travel down the tube and are detected at the exit; the graph shows the trace they wouldleave at the detector. The top left figure is an evocative, not analytic, figure from a particle systemanimation that shows how particles might stream off a cometary body. None of these students had anyprevious formal work with computer graphics, and each chose their own project.

There are, of course, many different kinds of science examples and projects that can be used in thecourse; just look at all the work that has been done in scientific visualization. Among those we use asexamples are:• the display of various kinds of surfaces in three-space that are associated with various topics, from

graphs of functions of two variables to the display of electrostatic charge• structure displays for molecules based on standard chemical databases,• showing the spread of heat in a metallic bar with fixed boundary points having fixed temperatures,• illustrating the operation of a gas chromatograph,• simulating the gas laws by creating a set of points that move with Brownian motion in a fixed space,

and counting the number of points that hit a wall with each simulation, allowing us to calculate therelation between pressure and volume for a fixed number of molecules,

Students also experimented with several other science-related applications in addition to thosementioned above and shown on the cover of these notes. These include:• Simulating the wave motion of water,• Displaying different kinds of geological uplifts when two blocks of the earth’s crust meet,• Calculating and displaying the spectral separation of white light by a prism with different optical

properties,• Simulating the effect of different gravitational values and wind velocities on a projectile,

• Simulating the effect of a binary system where a star and black hole orbit each other and gas fromthe star streams to the black hole,

• Simulating the motion of a pendulum, using fourth-order Runga-Kutta techniques to do thenumerical integration,

• Controlling a helicopter’s flight from the keyboard, and• Using planetary gravity to slingshot a rocket into space,

Essentially all of the displays in both the examples and the student involve dynamic displays in one wayor another, from animation based on the physics of a model or on animating a parameter of a family ofsurfaces to allowing a user to control the rotation of a model with either the keyboard or mouse motion.Dynamic displays are a very important tool in watching scientific principles work, and students find itvery attractive to create displays with motion and with user control.

Computer Graphics in Undergraduate ComputationalScience Education

Steve Cunningham Angela B. ShifletComputer Science Mathematics and Computer Science

California State University Stanislaus Wofford CollegeTurlock, CA 95382 Spartanburg, SC [email protected] [email protected]

AbstractComputer graphics is an important part of a workingscientist’s toolkit. The graphics may be provided byresources with the scientist’s group or by capabilitiesof the toolkits that the scientist uses directly in his orher work. However, in order for the scientist tounderstand how computer graphics images representmodels and what possibilities there are for thisrepresentation, and for the occasional time when thescientist may want to create a presentation that isbeyond the capability of standard tools, it isimportant for the science student to understand thebasic capabilities and processes of computergraphics. This paper outlines how a computationalscience program can give students the backgroundthey need to have this understanding.

1 An Emerging Discipline

Computational science is an emerging graduate andundergraduate discipline, whose primary focus is theapplication of computational techniques tounderstanding, applying, and advancing the sciences.The computational techniques cover many areas,including high-performance computing anddistributed collaborative work, but most involvemodeling and simulation at their base.

Computational science has grown out of the modernapproach to science that sees the field supported by atripod of activities. These are the traditionalactivities of theoretical and experimental work,together with the new activity of computation.Computational science involves traditional sciencefields such as chemistry, physics, or biology;computer science; and applied mathematics, asdescribed in Figure 1. In terms of academicdisciplines, computational science is usually seen ashaving its home in applied mathematics, and itsorganizational home seems to be in the Society forIndustrial and Applied Mathematics (SIAM) [18].However, other organizations, such as SIGCSE, arerapidly embracing the area [2, 15]. The computer

science issues in computational science range fromvery straightforward programming to research-levelissues in data mining, networking, graphics, andhighly parallel processing.

ScienceComputerScience

AppliedMathematics

ComputationalScience

Figure 1: The position of computational scienceamong other fields

As computational science becomes better organized,undergraduate and graduate programs are becomingorganized in the field. [20, 2, 16]. For example, in2001 the SIAM Working Group on CSE publishedits study of graduate computational science andengineering education [19]. On the undergraduatelevel, some of these programs are very general,while some are focused in a single science disciplinesuch as the Computational Physics program atOregon State University [8]. In a survey ofundergraduate computational science programssponsored by the Krell Institute, Charles Swansonconsidered twenty-four undergraduate computationalscience curricula [17]. Eight of the institutions offersome form of a degree program, such as a minor or amajor, while the remaining sixteen haveundergraduate computational science courseswithout a formal degree. The number of programsand courses is expanding rapidly According toSwanson, Scientific Visualization is among the new

courses that often appear in such undergraduateinterdisciplinary programs.

2 The role of computer graphics incomputational science

As we have seen from the rapid growth in theimportance of scientific visualization [11], theinteractive images and animations that can beproduced by computer graphics can be crucial tounderstand the complexities and subtle details ofscientific problems. These images can range fromthe personal images a scientist would use to probe adetail of a problem to the very sophisticated imagesdeveloped by a visualization team to present a newtheory or solution to the scientific community. Thegoal is to introduce computer graphics into theproblem-solving cycle as shown in the two right-hand boxes in Figure 2; here the geometry and imagefill the same role as the experimental process andresults in the classical presentation of the scientificmethod.

Problem

Model

Geometry

Image

Figure 2: computer graphics in the problem-solvingloop

Because computer graphics images are simply partof the problem-solving process and not an end inthemselves, there is probably a tendency forcomputational science to pick tools that workreasonably well and settle for those tools foreveryday work. This may be adequate, but toolsboth empower and limit their users and it is quitepossible that using standard tools may limit the waypeople can think about their science.

3 Computer graphics in the computationalscience curriculum

As students work in the modeling and simulationthat are part of computational science studies, theywill often find the need to express results in agraphical way. In doing so, students will useappropriate-level tools, not sophisticated graphicaltechniques, because the goal of their studies is todevelop broader skills in the overall scientificprocess, not to become scientific visualizationspecialists.

Because of the need to provide appropriate tools forstudents, a computational science program willprobably include several different kinds of computergraphics approaches to familiarize the students withmany ways to integrate computer graphics into theirwork. These may include Matlab [10], Mathematica[21], Maple [9], Excel [12], and STELLA [7]. Eachof these tools has a specific kind of problem it

Figure 3: Mathematica cellular automata of thespread of fire

addresses best, and the graphical displays it presentswill be focused on that kind of problem. Forexample, Figure 3 shows a two dimensionalMathematica graphics for one time step of a cellularautomata simulation of the spread of fire in a forest.

4:48 PM Thu, Aug 8, 2002

Predator vs. Prey Populations

Prey Population

0 250 5000

250

500

Predator Populati… v. Prey Population: 1 -

Figure 4: Predator-Prey STELLA model (top)and graph of predator versus prey populations(bottom)

Although Figure 3 is shown in grayscale, the originalgraphic uses green, yellow, and red to indicate a tree,an empty site, or fire, respectively. A student candevelop a Mathematica program to perform thesimulation, generate an image for each time step,and animate the results. By altering variousparameters, such as the probability of lightning, theuser can investigate various aspects of the spread offire. MatLab, Maple, and Excel are also suitable forsuch two-dimensional graphical simulations. TheSTELLA tool models dynamic systems, such aspredator/prey populations (Figure 4). WithSTELLA, the scientist or student develops a diagramof the model and generates various graphics todepict the results of time-driven simulations. Toolssuch as Mathematica, MatLab, and STELLA areoften used as part of a course in modeling andsimulation.

As we look at any particular tool, however, it is clearthat the tool can only present part of the set ofimages that might be used to represent a givenproblem. In Figure 5, we informally describe the setof all possible images for a problem as the lightergray circle, and the set of images that a particulartool will produce as the darker gray circle. Thelocation of the smaller circle in the larger circle isthe bias of the tool; it shows the position of thetool’s images in the overall set of images. The sizeof the smaller circle is the coverage of the tool; itshows how broad a set of images the tool willprovide in the overall set of possible images. It isreasonable to believe that the bias and coverage ofthe tool are measures of the way the tool influencesthe process of understanding the results of a modelor simulation, encouraging one way and limitingother ways of thinking about a problem [6].

Figure 5: the relation between the images producedby a particular tool and all possible images for a

problem

Because of the limitations of pre-existing tools inproviding ways to visualize a problem, we believethat it is important that a computational scienceprogram include a computer graphics course. This

will give students the experience of proceeding froma model to an image and will show them how manyvariations are possible in the way a model ispresented visually. An appropriate kind of course[1] will also give students experience in creaing aninteractive and animated presentation of an idea andwill teach students important ideas incommunicating their science visually. This willallow them to understand just what the limits of pre-written tools are and to begin to be able to developtheir own presentations when the tools areinadequate for a given problem.

It is important, however, that the computer graphicscourse be appropriate for the program. Thetraditional computer graphics course (for example,[5]) focuses on the technology of creating imagesrather than fundamental graphics concepts and theiruse in creating effective images for real applications.These fundamental concepts, including the graphicspipeline, modeling, transformations, rendering,color, lighting, shading, interaction, texturemapping, and the like, can all be expressed in apractical way through programming with a currentgraphics API, such as OpenGL [4]. Along withthese concepts, the course can also include basicprinciples of visual communication for the sciencesor another application area, preparing thecomputational science student both to understandand create effective images for his or her science [3].

4 Experiences

Wofford College offers an Emphasis inComputational Science for interested studentsobtaining a B.S. in a laboratory science ormathematics. Requirements include C++Programming, Data Structures, Calculus I, twocomputational science courses—Data andVisualization (CS 370) and Modeling andSimulation (CS 375)—and an internship involvingcomputation in the sciences [13]. Half of the CS 370course covers concepts of computer graphics as theyapply to scientific visualization.

With a prerequisite of solid skills in C or C++programming, students quickly learn to createinteractive three-dimensional presentations orcomputer animations by programming in C or C++with the graphics API OpenGL. The courseendeavors to “teach fundamentals, not packages.” Acommercially available package usually performsstandard tasks, while a scientist performing leading-edge research often must write or revise speciallytailored programs. Moreover, the graphics tools oftoday can change significantly in a short amount oftime. Learning fundamental graphics concepts and

algorithms and how to create scientific visualizationsby programming enables these developing scientiststo master new visualization tools quickly and toemploy these tools to obtain insights and tocommunicate information effectively.

Figure 6: interactive display of the psilocybinmolecule from a standard molecule descriptionfile

Using the online text Computer Graphics:Programming, Problem Solving, and Visual

Communication by the first author [4], all examplesand assignments in Wofford's Data and Visualizationcourse involve scientific applications as well asinstruct the student on fundamental graphicsconcepts. The class examines topics such as viewing,geometric modeling, transformations, color, visualcommunication, lighting, shading, and eventhandling with examples such as diffusion of heatthrough a metal bar, the spread of malaria, gas laws,and molecular models with standard atomic sizesand colors (see Figure 6). Students also developthree-dimensional animations of such scientificapplications as a rotating DNA helix and interactingocean waves.

Ten years ago, the ability to create such animationsrequired a supercomputer and sophisticatedsoftware. Today, students at even small liberal artscolleges can study scientific visualization throughcomputer graphics with scientific applications, andgenerate high quality work with readily availablecompilers and personal computers.

References

[1] Cunningham, Steve, “Powers of 10: TheCase for Changing the First Course inComputer Graphics,” Proceedings, ACMSIGCSE Technical Symposium onComputer Science Education, Austin, TX,March 2000, 293-296

[2] Cunningham, Steve et al., “ComputationalScience and Engineering -- Tools andTechniques for Teaching,” Proceedings,ACM SIGCSE Technical Symposium onComputer Science Education, Covington,KY, February 2002, pp. 135-136

[3] Cunningham, Steve, “Graphical ProblemSolving and Visual Communication in theBeginning Computer Graphics Course,”Proceedings, ACM SIGCSE TechnicalSymposium on Computer ScienceEducation, Covington, KY, February 2002,pp. 181-185

[4] Cunningham, Steve, Computer Graphics:Programming, Problem Solving, andVisual Communication, online athttp://www.cs.csustan.edu/~rsc/NSF

[5] Foley, James D. et al., Computer GraphicsPrinciples and Practice, second edition,Addison-Wesley, 1996

[6] Green, Mark, “VR Authoring Tools forNon-Programmers: A Case Study,”presentation at VRAI 2002, Hangzhou,China, April 2002

[7] HPS Inc., developers of STELLA,

http://www.hps-inc.com

[8] Landau, Rubin H. and Manuel J. Páez,Computational Physics: Problem Solvingwith Computers, Wiley, 1997

[9] Waterloo Maple, developers of Maple,http://www.maplesoft.com

[10] The MathWorks, developers of MATLAB,http://www.mathworks.com

[11] McCormick, Bruce, Thomas A. DeFanti,and Maxine D. Brown, Visualization inScientific Computing, Computer Graphics21(6), 1987

[12] Microsoft Corp., developers of Excel,www.microsoft.com

[13] Shiflet, Angela B., Description of WoffordCollege's Emphasis in ComputationalScience, online athttp://www.wofford.edu/computerscience/emphasis_in_cs.htm

[14] Shiflet, Angela B., Computational ScienceModules, available online athttp://www.wofford.edu/ecs

[15] Shiflet, Angela B., “Computer Science withthe Sciences: An Emphasis in ComputationalScience at Wofford College,” inroads–theSIGCSE Bulletin, 34(4), 2002

[16] Stewart, Kris and Jose Castillo, “ComputerGraphics and the Continuum ofComputational Science Education,” SIAMConference on Computational Science &Engineering, Sept. 21-24, 2000, Washington,D.C.

[17] Swanson, Charles D., “Computational ScienceEducation,” Krell Institute, available online athttp://www.krellinst.org

[18] Society for Industrial and AppliedMathematics, activity group on computationalscience and engineering,http://www.siam.org/siags/siagcse.htm

[19] SIAM Working Group on CSE Education,“Graduate Education in ComputationalScience and Engineering,” SIAM Review,Vol. 43, No. 1, pp. 163-177, March 2001,online athttp://www.siam.org/journals/sirev/43-1/37974.html

[20] Turner, Peter R. et al., “UndergraduateComputational Science and EngineeringPrograms and Courses,” Proceedings, ACMSIGCSE Technical Symposium on ComputerScience Education, Covington, KY, February2002, pp. 96-97

[21] Wolfram Research, developers ofMathematica, http://www.wolfram.com

This work was supported by NationalScience Foundation grants DUE-9950121and DUE 0087979. All opinions, findings,conclusions, and recommendations in thiswork are those of the authors and do notnecessarily reflect the views of theNational Science Foundation.

Graphical Problem Solving and Visual Communication in theBeginning Computer Graphics Course

Steve CunninghamCalifornia State University Stanislaus

Turlock, CA 95382 [email protected]

Abstract

The beginning computer graphics course can teachmuch more than just computer graphics. It can alsoprovide an excellent introduction to graphicalproblem solving and visual communication, and in sodoing can be an excellent complement to othercomputer science courses that teach more analyticalproblem solving. This paper describes the graphicalproblem-solving and visual communication contextsand discusses how they can be supported by thebeginning computer graphics course.

1 Problem solving in the computer sciencecurriculum

A graduate of our program recently visited campus torecruit other students, and told us “In my group, wewant to hire people with problem solving abilities.We have found that task-oriented people just wantthe answer and seem to stumble when they run into aproblem, while problem-solving people tend to wantto know what's causing the problem so they can comeup with a solution. The problem solving I learned asa student gave me the skills to tackle increasinglycomplex problems and move up the ladder in mycompany.”

Those of us who teach computer science take greatpride in the fact that our students learn the kind ofproblem solving described above by our graduate.We use textbooks for our beginning courses withtitles such as Programming and Problem Solving inC++ (or C, or Java, or once upon a time Pascal, or...) and we put significant emphasis on analyzingproblems, breaking them down into component parts,and designing solutions with various kinds ofprogramming tools. We then rely on the problemsolving skills that students learn in our early coursesas we teach more advanced courses, and our studentsrely on these skills when they graduate and go intoadvanced studies or professional employment. Inmany ways, one might say that problem solving in acomputational setting is perhaps the most importantvalue-added part of a computer science education.

Problem solving is a much more extensive subjectthan just the approach we cover in our curriculum,however. In [13]. Robert Root-Bernstein, of theCenter for Integrative Studies at Michigan StateUniversity, describes twelve tools of thought thathelp us use our imagination to observe, analyze, andexplore as we solve problems. As quoted andsomewhat expanded in [12], these tools are:

1. Pattern Seeking. The artist as well as the scientistplaces great value in seeing patterns and hiddenstructure where others do not see any. We search forpatterns to discover principles and revealinformation.

2. Pattern Forming. By creating patterns and bybringing ideas and images together we see ourthinking more clearly. Scientific visualization isbased on forming patterns with the data to be able tosee new relationships and new patterns.

3. Analogizing. The ability to see how an idea in onedomain or subject area can be related or transferred toanother domain or subject can help us understand theconcept or a new relationship. Thinking of DNA as“unzipping” helps related common objects toinvisible structures.

4. Abstracting. To abstract is to eliminate all theunnecessary details from our perception and revealthe basic principle or structure.

5. Mental Visualization. Seeing with the mind's eye isour most direct way to create images of what we arethinking about. Trying to picture something helps usto work out its structure. Some people are able toanimate their visualizations and see how they move.

6. Physical Modeling. Our ideas need a threedimensional form because it is so hard to think inthree dimensions. Sculptors do it better than anyoneelse. Architects and molecular biologists must designwith space in mind for new buildings or newmolecules.

7. Kinesthetic thinking. Some people simply need tomove when they think or are learning. Many learningskills are imbedded in muscle memory. Driving a car,using hand tools, throwing pots on a wheel, andcomputer interactivity build on the motion memorythat is being built up in our bodies.

8. Aesthetics. We are often caught off guard by thesudden recognition of the beauty of an image,view, or experience. Beauty has a wholeness andan emotional feel that commands all of ourattention. What do we see when we are movedby beauty?

9. Playacting or Internalizing (imagining oneself asan object). Identifying with an object or concepthelps us to know it better and begin to imagineinteracting with it.

10. Manipulative Skill (hand-eye coordination). Byworking with materials, by sketching, and bybuilding models we derive knowledge throughour senses.

11. Playing (experimenting: trial and error).Sometimes, as a way of learning, we must giveourselves permission to try something at whichwe may fail. Play and humor help us feel morecomfortable with what we don't know so we canexplore what we may find.

12. Transformational Thinking. Change is a part ofus and we transform as we grow and so does theworld. The dynamics and forms of change areimportant to understand. What is the sequence?Where does it begin? What are the critical pointsalong it?

The problem solving approach used in most computerscience courses is very strongly focused on thesymbolic and analytical approach that is emphasizedby our programming languages. These are, in fact, asubset of the problem solving techniques describedabove, with computer science focusing onabstracting (using symbols to represent quantities orobjects), pattern seeking (identifying parts of theproblem that are familiar), and pattern forming(writing re-usable functions or classes). The problemsolving approach called patterns (see, for example,[1] or [9]) that is proving its value in programmingcourses also takes advantage of analogizing by givingstudents examples of many patterns and having themcreate programs (solve problems) by applyinganalogous patterns. But while individual instructorsmay create richer problem solving environments,these typical computer science approaches usually donot include the additional problem solving techniquesnoted by Root-Bernstein.

In addition to listing these 12 problem-solvingtechniques, Root-Bernstein goes on to say that thesetools are not useful unless the ideas can becommunicated by yet another set of skills:• verbal (written) communication,• mathematical communication,• visual communication,• aural (sound) communication, and• kinesthetic-tactile communication.

These methods of communication are to beconsidered for both receiving and expressinginformation.

Our students have the same communicationexperience as other students in the university: verbal,written, and mathematical communication. Visualcommunication is simply not part of their generaleducation pattern. We use little visualcommunication in our teaching except for thediagrams that help students see the patterns of ourprocesses; our students use almost no visualcommunication in expressing their learning. And yetwe know the value of good visual communication,because the world around us is filled with it. We seecarefully-presented diagrams in our textbooks and inonline course materials; we see extraordinarypresentations of scientific principles and processes inpopular scientific publications and on educationaltelevision; we see sophisticated graphic design allaround us in commercial and entertainment areas.We swim in a sea of visual communication but we donot teach our students to create it themselves. Weneed to help our students learn to use effective visualcommunication— something much better than clipart and canned animations in PowerPoint—in theirprofessional work.

2 Graphical problem solving

These aspects of problem solving and communicationare remarkably well supported by computer graphics.Computer graphics relies on traditional analysis, ofcourse, so pattern seeking and pattern forming,analogizing, and abstracting are certainly present.The kinds of patterns, analogies, and abstractions aredifferent in computer graphics, however, becausethey need geometric thinking and reasoning, and thetool domain is different, because it involves light,surface, space, and motion. In general, graphicalproblemsolving may be thought of as using images orgraphical representations of a problem to gain insightinto a problem or its solutions. The space forgraphical problem solving can readily go beyondthree dimensions, involving time and color as twoadditional dimensions that can be brought into playfor modeling a problem and its solution; in this,computer graphics adds problem modelingcapabilities that are not matched in any other field ofstudy.

There are significant ways that computer graphicsinvolves other problem solving techniques. Becausewe create images, students must think in terms of theimages they want to design, so there is a great deal ofmental visualization that must be learned. Becauseour images move—thanks to the advances in graphics

capabilities that are now available to us at modestcost—students are now able to think in kinestheticterms, sometimes actually using physical models tosee analogies and physical motion to see how tocreate similar motion behaviors in their images. Incommunicating their problem solving, students mustlearn about aesthetics and the way it supports visualthinking in order to use the subtler aspects of animage to support their communications. And thereare two other capabilities that are increasinglyavailable to undergraduate courses: the ability to userapid prototyping tools to create physical versions ofour graphical objects allows us to use physicalmodeling to participate in the solution verificationphase of problem solving (for a particularlyinnovative approach to this, see [3]), and the abilityto include sound in animations or slide shows tosupport narration or data-driven sound forcommunication. Sound is becoming simple to createand integrate, and rapid prototyping tools show signsof becoming affordable.

Overall, the problem-solving process is oftendescribed with a feedback loop, where successiverefinement of trial solutions lead to better and bettersolutions. For problem solving involving computergraphics, this loop is described in the figure below.Traditional computer graphics courses have focusedon the technology of rendering an image, so theybuild the Geometry -> Image(s) link; other courseshave added more emphasis on modeling, which is theGeometrizing activity. But overall problem solvingrequires that we start farther back in the process, withthe problem itself, and that we take the images wecreate and ask them to provide insight that informs usabout the problem.

Problem

Geometry

Image(s)

Geometrizing

Rendering

Insight

The graphical problems-solving loop

This feedback loop is very similar to the loop oftheory, experiments, results, and analysis of thescientific method, and is often associated withscientific visualization [11] because of this similarity.This loop is implicit when the goal of the computergraphics is to study scientific questions, but weshould realize that we can use it when we apply

computer graphics to a many different kinds ofquestions that can be chosen to fit the nature of theparticular university, instructor, class, or individualstudent Thus this allows the beginning computergraphics course to serve a wide variety of programs.

3 Visual communication

As Root-Bernstein notes, problem-solving tools mustbe supplemented by communication skills in order tobe useful. It is one thing to be able to analyze aproblem and find a graphical approach to its solution;it is another to be able to communicate that approachto another person. Students need to learn thefundamentals of visual communication in thecomputer graphics context in order to express theirgraphical problem solutions. This means learning tochoose an effective viewpoint for a scene; to choosehow to express the modeling for a problem; to choosewhether to use naturalistic expression throughmodeling realistic geometry and using lightingmodels, or an abstracted expression throughgeometric symbolism and a synthetic color scheme;to lay out controls for any interaction in a way thatseems natural to the audience; to present and expressmotion to the audience in ways that make it clearwhat the student is communicating.

The fundamentals of sound visual communication arenot difficult. Students can be led toward learningsound visual communication by consideringexamples of good (and of not so good) practice ingraphic presentations, using tools such as the annualSIGGRAPH Video Review [14]. We can nurturegood communication by providing positive critiquesof their work and by allowing them to re-work theirimages to a certain extent to improve theircommunication. We can also develop experience ofgroup critiques in class or laboratory environmentsthat can help improve the work of the student beingcritiqued, while at the same time improving thecritical facilities and aesthetic eye of those studentsdoing the critiques. In short, this can be integratedinto the class discussion and into student work fromthe beginning without taking a great deal of extraclassroom time.

The importance of visual communication in thecomputing field has been one of the key results of therise of scientific and information visualization. Wehave seen that the results of computation or a set ofinformation can overwhelm a researcher withoutvisual tools to help it make sense [2], [11]. Thesefields are opening the door to effective ways toexamine large-scale problems and even tocommunicate smaller problems better, and studentsneed to have an understanding of how they can use

similar approaches to present the results of workacross the spectrum of computing applications.

It is important to note, however, that we are notthinking of this visual communication being theequivalent of a study of sound HCI techniques. Weare trying to develop experience in seeing andcreating effective images, not in understanding thedepth of the user task modeling and cognitiveprocessing that are important to sound HCI work.We believe that this could be a very usefulbackground for doing more studies in HCI, however,if that should fit the direction of the computer scienceprogram where the course should live.

4 An example

In a recent class, a student was thinking about thingsshe had learned in physics that interested her, and shechose to focus on the polarization of light. Her finalwork is shown in the figure below, which has beenmade into a grayscale image, though the original is incolor.

A figure illustrating polarized light,from a student-written interactive animation

The basic question she chose to study was the waypolarization modifies light waves. In order to do this,she had to model light waves and a polarizing filter,and develop a way to show the light waves beforeand after they passed through the filter. She also hadto decide how a user should interact with the resultsof he work and how the image could communicatethe polarization process she was interested in.

Most of the modeling for this project wasstraightforward. Light waves can be modeledadequately as cosine waves, a polarizing filter can bemodeled as a set of vertical lines, the before and afterdisplay can be accomplished by showing waves on

both sides of the filter, and the effect of thepolarization can be shown by projecting the waves ontwo orthogonal planes. For effectiveness, one of theplanes is parallel to the polarizing lines and the otheris perpendicular to them, allowing the viewer to seethat the wave is unchanged in one plane butcompletely supressed in the other.

In addition to modeling these objects, the studentanimated the model by parametrizing the light waveand changing the parameter in the idle() function,and set up an interactive capability by definingkeystrokes to rotate the entire display and to rotatethe angle of the wave. This lets a user explore theeffect of polarization on waves of different anglesand to look at the display from various viewpoints.However, it added an extra wrinkle to thepresentation because the waves now seem to separateat the polarizing filter, so the center lines of thewaves were added to maintain continuity between thetwo sides of the display. Several people havecommented that the display is effective in showingthe polarization process.

The image shown here, and the model as definedabove, were not the student’s first attempts. Theoriginal approach used much simpler models andlittle color, and we discussed how to showdifferentkinds of effects and how to use color moreeffectively, and worked through several approachesto the display. In the process we used increasinglycomplex ways to do the graphics and increasinglysubtle kinds of color. For example, the polarizingfilter is not simply a set of vertical lines but a planethat is defined to have a shutter-like texture and belargely transparent. The final version illustratedabove was completed about half way through a one-semester course.

5 Implications for the beginning computergraphics course

In recent papers [6] [7] [8] and a developing set ofcourse materials [5], we describe a beginningcomputer graphics course that is based on a currentcomputer graphics API and has some novel aspects:it emphasizes modeling through the use of a scenegraph, graphical interaction through event-drivenprogramming, animation through the API idle event,problem solving through a focus on projects based inthe sciences, and visual communication through astudy of techniques for relating aspects of computergraphics to the way an audience would becomfortable getting information or managingprogram control. The papers cited earlier in thisparagraph include discussions of how to developgraphical problem solving experience while focusing

the primary course attention on creating imagesthrough the graphics API.

There is an interesting dialog going on in thecomputer graphics community at this time about thenature of the beginning computer graphics course.There are two ways to look at this course. It can bethought of as being an inward-looking course,focused on the graphics itself with the intent ofdeveloping specific knowledge and skills in thetechnology or process of creating images; this is thetraditional focus of most computer science courses,with an assumption that the student can somehowlearn how to use the course content in an applicationsetting. The course could alternatively be anoutward-looking that creates a solid graphicsknowledge while at the same time helping the studentto develop a set of solid computer graphics skills plusexperience in using those skills in a problem-solvingsetting that a student can apply to the rest of his orher professional life. This dual nature of the courseallows us to include students from outside computerscience and create an environment in which groups ofstudents can bring their varying experience togetherto solve problems and work on projects.

There are, of course, many approaches to the coursethat are described in the growing literature in the field[4]. A very good paper describing a course with aninward-looking, image-creating emphasis is [10]; theauthors argue that the goals of the beginning courseshould be rendering, modeling, animation, andpostprocessing. This course includes some quiteadvanced concepts but the paper suggests that mostof the emphasis is on mastering various image-creation techniques. Most of the literature in the lastten years has described courses with a similarlyinward-looking focus, but the changes in capabilitiesfor inexpensive desktop graphics systems and thegrowing presence of computer graphics well outsideits traditional technical scope are raise questionsabout whether this inward looking approach is thebest way to begin computer graphics instruction. Ibelieve that in many institutions the outward-lookingbeginning computer graphics course would helpdevelop a broader student background, and for thisthe content of the beginning course would include amix of computer graphics content and problem-solving content. In particular, the areas of modelingand rendering through an API, interaction, animation,graphical problem-solving, and visualcommunication are all possible in a single termcourse.

The two approaches we have discussed have a greatdeal of overlap, but the differences can be quitesignificant. Yet for students who want to specialize

in computer graphics and perhaps use that as thefocus of their careers, the difference is not that great,because both approaches can be the basis of solidadvanced courses that will doubtless be focused onthe details of various techniques for image creation.Individual instructors and departments will need todecide whether their overall, long-term needs are bestserved by an inward-looking beginning course or anoutward-looking beginning course.

6 Conclusions

The beginning computer graphics course offers asolid opportunity to expand the problem solving andcommunications abilities of computer sciencestudents as wekk as students from other disciplines.If this course is conceived as being based on agraphics API and focusing on API-based imagecreation, there is time in the course to discuss morethan just the API and graphics processes, so problemsolving and visual communication can be includedwithout taking anything away from the content of thecourse. Students who complete the course, whetherthey are from computer science or another field, willthen come away from it with significant skills thatwill serve them well in their professional lives.

References

[1] Bergin, Joseph, “Fourteen Pedagogical Patterns,”online at http://csis.pace.edu/~bergin/

[2] Card, Stuart K, Jock D. Mackinlay, and BenShneiderman, Readings in InformationVisualization: Using Vision to Think, MorganKaufmann, 1999

[3] Clark, D. and M. J. Bailey, “Visualization ofHeight Field Data with Physical Models andTexture Photomapping,” Proceedings of IEEEVisualization ‘97, October 1997.

[4] Cunningham, Steve, “Literature Survey onBeginning Computer Graphics Courses inComputer Science,” in preparation

[5] Cunningham, Steve, Computer Graphics:Programming, Problem Solving, and VisualCommunication, draft manuscript online athttp://www.cs.csustan.edu/~rsc/NSF/,2001

[6] Cunningham, Steve and Michael J. Bailey,“Lessons from Scene Graphs: Using SceneGraphs to Teach Hierarchical Modeling,” toappear in Computers & Graphics, 2001

[7] Cunningham, Steve, “Projects for a ComputerGraphics Programming Course,” SIGGRAPH2000 Conference Abstracts and Applications,July 2000, pp. 56–59

[8] Cunningham, Steve, “Powers of 10: The Casefor Changing the First Course in ComputerGraphics,” Proceedings of the ACM SIGCSE2000 Technical Symposium on ComputerScience Education, SIGCSE Bulletin 32(1), pp.293–296

[9] Gamma, Erich et. al., Design Patterns: Elementsof Reusable Object-Oriented Design, Addison-Wesley Longman, Reading MA, 1994

[10] Lowther, John L. and Ching-Kuang Shene,“Rendering + Modeling + Animation +Postprocessing = Computer Graphics,”Proceedings of the Seventh Annual Consortiumfor Computing in Small Colleges: MidwestConference, Valparaiso, Indiana, October 2000,reprinted in Computer Graphics 34(4),November 2000, pp. 17–20

[11] McCormick, Bruce, Thomas A. DeFanti, andMaxine D. Brown, Visualization in ScientificComputing, Computer Graphics 21(6), 1987

[12] O’Connell, Kenneth, “Visual Ways of Knowing,Thinking, and Interacting,” in InteractiveLearning Through Visualization , S. Cunninghamand R. J. Hubbold, eds., Springer-Verlag BerlinHeidelberg, 1992, pp 129–136

[13] Root-Bernstein, R. S., “Tools for Thought:Designing an Integrated Curriculum for LifelongLearners,” Roeper Review 10(1987), 17–21

[14] SIGGRAPH Video Review, a publication ofACM SIGGRAPH that contains the state of theart in computer graphics animations. Forinformation on SVR, seehttp://www.siggraph.org/svr/

The nature of the course described in this workshop

The course we describe here is much like the course described at last year’s SIGCSE Symposiumin [CUN 02a], although we have learned some things in teaching the course over the last year. Itis organized around the concept that students can learn to create three-dimensional, animated,interactive work that expresses familiar content with effective graphical communication. It alsoincludes some material such as scene graphs and procedural textures that are not usually found ina first graphics course.

The course uses important graphics APIs such as OpenGL and possibly Java3D that have madethe GKS and PHIGS standards obsolete, just as high-level languages have made it obsolete tobegin teaching programming by discussing assembly language. We believe that the higher-levelgraphics APIs make it unnecessary to begin teaching computer graphics by introducing studentsto fundamental algorithms and techniques. Instead, we can use the API to introduce students tographics with tools that let them focus on graphical problem-solving through geometry,appearance, interaction, and graphical communication. Moreover, we can use projects that applygraphics in important but familiar areas to give students something to express in the graphics asthey are learning the subject. In this way they can develop an understanding of the overallprocesses of computer graphics and later extend that knowledge with the details of the subject towhatever degree they wish.

Prerequisites for the course

As described in the paper cited above, with the change in emphasis from computer graphicsalgorithms and techniques to a programming approach based on a graphics API, students do notneed to have as strong a computer science background as was needed by the previous kind ofcourse. We believe that students with a solid CS2-level programming background and withapproximately pre-calculus level mathematics skills can be successful in the programming-basedgraphics course, and we will describe why be believe this to be so.

Tools for the course

The API-based course needs only to have systems with API support and with enough processingpower to handle the kind of computational loads required by modest-sized programs. These aregenerally available in modest PC-class systems, although a good graphics card makes a verylarge difference in student satisfaction with interactive and animated projects. Essentially all PC-type machines now have built-in OpenGL capabilities, for example, and it is relatively easy toadd to UNIX workstations.

Resources for the course

The course as described here is not fully supported by current textbooks. With the support ofgrants from the National Science Foundation, the authors are developing materials for the course.The first author is developing a manuscript text and some supporting materials for the course thatmay be found at

http://www.cs.csustan.edu/~rsc/NSF/

The notes found there are being continually revised as the explanations, examples, and studentexercises are developed and as we get experience from using the notes. The site also containspapers and presentation slides on this course, as well as example code for a number of science-focused applications. The second author is developing computational science materials,including additional scientific visualization assignments, that are available at

http://www.woffordcollege.edu/ecs/DataAndVisualization

The course organization

The course is organized along traditional lines, with the course implementation changed by adecreased emphasis on the detailed algorithms for computer graphics and with an increasedemphasis on the graphics API used for the course and with the project work focused on scienceapplications and on graphical communication.

In this section, which is the largest in the workshop notes, we describe the sections of the courseand sketch the issues to be covered in teaching each section. We also indicate how the teachingof each section is changed with the changed emphasis on the material. The references to theprevious approach to the course are the classic text of Foley et al. [Foley] and the many texts thathave followed it. References to current texts would include the current editions of the textbooksby Angel [Angel] and Hill [Hill], which move somewhat in the direction we describe but whichretain some of the properties of the older kind of course and do not include some of the featuresof the new approach. In some ways, the best textbook currently available for the course may be[Woo].

The sequence of sections in this material follow the current version of the notes described earlier[CUN 02b]. This work serves as a text for an introductory computer graphics course and for acomputational science course involving scientific visualization [CUN 00b][SHa]. Because thesenotes are still under development, it is quite possible that there will be some reorganization of thecontent as we get more experience with using them. There are some clear sequence requirementsbecause of the background needed for some of the material, but there is some flexibility to thesequence that can be followed in the course. There are also a number of opportunities for aninstructor to bring his or her own application area to the projects in the course.

Background in mathematics

Any student of computer graphics must be able to manipulate some mathematical concepts. Therole of calculus in most computer science programs has led to a general assumption that calculusor linear algebra is the appropriate background for this course, but in general we do not supportthat idea. What students really need to have is an understanding of analytic approaches to three-dimensional geometry, and this is not usually found in either the calculus or linear algebracourses.

Because of this, the computer graphics course is probably always faced with “reviewing” somemathematical topics, and this review is more like a quick short course. The particular things thatstudents need to know are geometric representation of points, lines, and planes; the use of the dotand cross product to carry out geometric tests and operations; the representation of parametriclines, curves, and surfaces; and the notion of a transformation that preserves geometry but moves

it into a different space or coordinate system. A discussion of these topics in a computergraphics textbook is usually found somewhere early in the presentation, and the instructor mayneed to refer students to this discussion from time to time in the course. In general, an overviewof the topics should probably be given about the time that modeling with graphical primitives iscovered, and you should feel free to return to this section as needed during the course.

The discussion of transformations is probably the most critical of these topics. Although it maynot come up in the earliest discussion, it is seen very early in the projection and viewingoperations, and is one of the central concepts in the topic of modeling. It is essential thatstudents learn to see transformations as functions that can be manipulated as other functions are:they can be composed to create new operations, and they can be saved and restored on a stack tomaintain consistent operation sets. However, it is not necessarily important that students see theactual matrices that perform the transformations, because a graphics API will allow the studentto define the operation symbolically by setting the parameters of an API function. This is one ofthe first differences between an API-based approach and a fundamental algorithms approach tothe course.

The graphics pipeline

The graphics pipeline is the sequence of operations from the time an object is initially modeledto the time it is displayed on the viewer’s viewing device (which we shall call the screen,because

3D ModelCoordinates

3D WorldCoordinates

3D EyeCoordinates

3D EyeCoordinates

2D EyeCoordinates

2D ScreenCoordinates

Model Transformation

Viewing Transformation

3D Clipping

Projection

Window-to-Viewport Mapping

most student work is simply displayed on a computer monitor). This includes the steps frommodeling in an object’s own model space, to placing the object in world space, to moving theworld space into eye space, to projecting it down to a 2D space, to finally converting the scene to

screen space. This is summed up in the diagram below that outlines not only the spaces (thecoordinate systems) but the transformations that moves the scene from one space to another.

This pipeline forms the basis for the first part of the course, where we deal with projection,viewing, and modeling. We will often refer to this diagram as we describe the early sections ofthe course.

Projection and viewing

Towards the bottom of the graphics pipeline we see the operations of projection and viewing.The projection transformation maps the three-dimensional world space onto a two-dimensionalreal space that we call the 2D eye coordinates. The projection can be either orthogonal orperspective, and students should understand both how to specify and use each projection and theproperties that make each appropriate under certain circumstances. The mathematics of theprojection transformation should probably be described, but need not be worked out in detailbecause the API will carry out the actual work. The view volume for each projection should bedescribed, and students should understand that graphics objects are clipped to the view volume,but the details of this clipping need not be provided. We introduce the reshape event at this pointbecause it is the natural place to define the projection and fit it to the working window.

There are two ways to think about defining a view: as an image produced by a synthetic camera,or as a view from an eye point. It is probably true that there is little real difference betweenthese, but the camera approach seems overly artificial and we consider viewing as simplydefining the eye point within the view. Students should understand that a transformationchanges the geometry of the scene from the world space to the eye space, and that the API toolsthat allow the student to set the view actually define that viewing transformation. The details ofthe viewing transformation are not critical at this point, however.

What is critical is that the students understand how to use primitive transformations to set theviewing transformation. This involves using primitives as necessary to match the position,orientation, and focal point for the view, and is equivalent to using transformations to place theeyepoint in the scene. This is a parallel to placing other objects in the scene, as discussed belowin the modeling chapter. Once the student understands the concept of placing the eye withtransformations, it is straightforward to describe the process of inverting (although we usuallysay “undoing”) those transformations to move the eyepoint back to whatever default position isused by the graphics API. The student can then see that defining the eyepoint is equivalent toapplying the eye placement inversion before starting any other geometry. We have not fullydecided whether this is something that should be introduced in the viewing discussion or shouldbe saved until the modeling discussion, so consider this in the design of your own course.

We typically introduce depth buffering in this general area, because it is natural to think aboutthe depth of an object in the scene from the eye point. This discussion is not long because it issimple to describe the depth-test process, and it doesn’t seem to cause students any problems if itis only covered lightly. This is revisited in the rendering pipeline later in the course, where moredetails are provided.

If an instructor wishes, the discussion on viewing can be a good place to introduce three-dimensional viewing either through stereo pairs that the viewer must converge visually, orthrough overlaid red-blue pairs that can be seen with colored glasses. This kind of genuine 3Dviewing will reinforce the fundamental three-dimensional nature of the graphics process and willgive students an early example of something they do not normally see around them. Later in thetexture mapping section we introduce another kind of 3D viewing that is easier than convergedpairs.

Modeling

Modeling is a very complex subject to teach because it operates at several levels. At the lowestlevel, we find tools in every graphics API to draw graphics primitives that are defined in theworld coordinate system for a scene. We must show students that there are many ways torepresent the components of a model and help them master one or more of them. We alsopresent transformations that allow the student to define models in a simple modeling space andplace them in world space. We may find that the graphics API will provide more complexmodels that can be used in scenes. Finally, we need to introduce the student to the complexity ofhierarchical models having parts that must move properly with respect to all their other parts.All this comes under the general heading of modeling and makes it one of the most difficult partsof the graphics course to cover—yet students must master modeling before they can createobjects on which they can apply the rendering that makes up most of the rest of the course.

Modeling with primitives

The standard graphics primitives are points, line segments, and polygons; these are all supportedby graphics APIs. The coordinate system for the primitives may be world space, if the primitiveis to be used exactly as defined, or a model space where coordinates may be used for theirconvenience and the defined object can be placed in world space using transformations. Thereare often some geometry compression techniques that allow you to define geometry with reducednumbers of vertices; these include line strips (sometimes called polylines), triangle strips andfans, and quad strips. Students should see a number of examples of these, particularly sincethere may be some tricks to the way vertices are defined for some of the compression techniques.

Using transformations in modeling

The standard transformations are scaling, rotation, and translation as always, and support forthese transformations will be available in the API. Students need to understand what each ofthese basic transformations does and how each is defined with the API’s functions. The effect ofcomposing transformations needs to be described and understood, probably with a number ofsimple examples, and in particular the student needs to know the relation between the order inwhich transformations are placed in the code and the order in which they are applied to thegeometry that he or she defines.

The student will then need to know how the transformations are applied in the graphics system.This is basically through creating a modeling transformation that is applied whenever thegeometry of a model is met and is modified as new transformation functions are invoked. As thestudent works with transformations, he or she will need to understand that the transformations

that place an object in the scene should not be retained when placing another object, and so asystem of retaining and replacing the modeling transformation is needed. In OpenGL this isfacility is provided by the transformation stack, and the student must become quite comfortablewith saving the current modeling transformation by pushing the transformation onto the stackand restoring a previous transformation by popping it off the stack. Note that the size of thetransformation stack may be limited (in OpenGL, the default limit is 32 transformations) so insome cases the student may have to write his or her own transformation stack capability.

When talking about the viewing process above, we mentioned that the viewing transformationcould be viewed as the inverse of the transformation that placed the eyepoint in the scene. Thisshould be discussed and the inverse of a transformation should be developed. This is mucheasier to do with the primitive transformations than with a general transformation, and studentscan generally understand that the inverse of a product is the product of the inverses in reverseorder. This discussion should be referred to the earlier discussion that described how to place theeyepoint in the scene, and the appropriate transformations should be described here.

The scene graph

The scene graph is a feature of the Java3D and VRML 2 graphics APIs, and is used both fordefining and for organizing the rendering of a scene in those APIs. We have found that theconcept of the scene graph is an excellent way to introduce students to the process of organizinga scene and understanding the relationship among components of a scene. Instead of describingthis in detail here, however, we would refer the reader to a current paper on using scene graphs inteaching [CUN 01]. The scene graph can be introduced as soon as transformations are used, andit seems that introducing it before students need to do hierarchical modeling gives them aframework that makes the more complex hierarchical modeling and motion easier to work with.

Color

Color was once difficult to do well in a beginning computer graphics course because of thelimited color palette of most moderate-cost systems. Now the standard is 24-bit color, and werarely discuss anything but this full-color model in class. The standard model for computer coloris the RGB (red/green/blue) model because of the design of computer monitors, but the RGBAmodel is supported by graphics APIs and offers the ability to include color blending with anobject’s color. Because RGB color is not especially intuitive and is difficult to use to createparticular colors, it is also useful to introduce other approaches to color such as the HLS or HSVmodels and to discuss the relationship between these models and the conversions among them.Students catch on to the various color models quickly and can readily use RGB color in theirprojects.

The alpha channel will probably be new to the students in the course, and this fourth colorcomponent is rarely covered in the traditional course. The mechanism for alpha blending is quitestraightforward, but there are several options to the blend function that should be discussed. It isquite easy for students to mistake color blending for object transparency, but this is not accurate;only under some restricted circumstances is a transparency effect possible, and students need tounderstand that difference.

Lights and lighting

The lighting facilities in the graphics APIs follow the standard lighting model, which assumesthat light received from an object has three components: ambient, diffuse, and specular. Theseare treated in a unified way, although it is important to be sure that students understand that themodel operates on a per-wavelength basis and so for the API it operations on R, G, and Bseparately. One issue in covering lighting is that the student must develop quite a bit ofinformation in order to compute the color at any point on a surface. This includes the variousproperties of individual lights, such as colors, position, and direction; the properties of materialsas they interact with light, such as front and back properties, the ambient, diffuse, and specularcolors and the specular coefficient; and the computation of a normal vector for each vertex of theobject and possibly averaging the normal vectors for a vertex from each polygon to compute ashared normal vector for the vertex. The lighting calculations in the first course do not includemore sophisticated properties such as anisotropic light, but are quite challenging on their own.

Shading

Shading is the process of calculating colors across a polygon when the only information youhave comes from the polygon vertices. There are three standard approaches to shading: flatshading, in which you choose a single color for each polygon; Gouraud shading, in which youinterpolate the colors at each vertex to calculate the color for each pixel; and Phong shading, inwhich you interpolate the normals at each vertex to calculate the normal for each pixel, fromwhich you can use the full lighting model to determine the color of the pixel. Most graphicsAPIs now support only flat or Gouraud (smooth) shading, both of which have some limitations interms of the kinds of color they can provide for a polygon. Students find it easy to select eitherflat or smooth shading so it is easy to include it in their work, but this is a good place tointroduce them to the general concepts of polygon interpolation. In the process, it probably isuseful to discuss Phong shading in general terms and show that while interpolating the vertexnormals at each vertex is straightforward (it is simply interpolating a triple of real numbers, justas color interpolation is), computing the full lighting model at each pixel is quite time-consuming.

The rendering pipeline

With the lighting and shading processes in hand, students are ready to look into the way this kindof rendering is carried out. This involves a number of steps that together make up the renderingpipeline. This can be executed in software or, when the system has a graphics card, in the card’shardware. In the traditional course, a great deal of the discussion goes into the details of how therendering operations are carried out, but these details are not included when the emphasis is ongraphics programming. Instead the instructor should describe the sequence of operations andshould discuss what is involved in each, deferring the detailed discussion to a more advancedcourse for those students who want to know more.

The rendering pipeline begins with the three-dimensional coordinates of each vertex of the objectbeing rendered. The modeling and viewing transformations are applied to these coordinates andclipping is performed against the bounds of the appropriate view volume. If lighting or texturingis to be done, the per-vertex color information and texture coordinates are computed here.

Finally, the projection transformation converts the coordinates to two-dimensional eye space. Ina graphics card, this sequence of operations are called the per-vertex operations, and the resultsare 2D coordinates with the attributes of depth, color, and texture coordinate.

Once the vertices are transformed into two-dimensional space and their attributes are organized,they are rasterized, or converted into screen coordinates. When a polygon is being rasterized,interpolations are performed that convert the polygon into a set of scanlines with endpointswhose attributes are interpolated from the attributes of the original polygon. This interpolationprocess is important to describe in general terms, but the details need not be presented. Theresult of the rasterization operation is a set of fragments that must be turned into actual pixels.

Finally, the fragments are processed by interpolating the pixels between the scanline endpointsand computing the properties for those pixels to be passed into the color buffer for output. Thisinvolves a number of steps. The first is to interpolate the colors at the endpoints if needed, andthen generate the texture colors for each pixel, using the texture coordinates and the appropriatetexture mode. Fog is then applied, if it is defined. Then the pixels are tested for depth againstthe depth buffer, for blending against the color buffer, and for other logical operations, and theresult is written to the color buffer, finishing the rendering process.

Event handling

Events and event handling are the key to creating interactive, animated scenes, and so they arevery important in the course. Graphics APIs have the capability of handling a wide variety ofevents, but we focus on keyboard and mouse events, with the latter including menu handling,mouse clicks, and mouse dragging. This gives the graphics course an opportunity to extend thestudent’s concept of how a system works, as well as providing what may be the student’s firstexperience with event-driven programming.

Events and callbacks

Events are interesting phenomena because of the different models people have for them. To thestudent, an event is something they can recognize happening: a keypress, a mouse click or drag,or the completion of an activity. To the system, an event is a record (or the absence of a record)in a certain system structure, and an application such as a graphics program must request that thesystem provide it with such a record. Students should learn about the event queue as a systemresource, how it is used by the windowing system generally, and how events are passed to thevarious applications that may be running on the system.

In actual work in computer graphics, event handling is quite simple with the toolkits thataccompany a graphics API, and students learn quickly from some examples and discussion howto write callback functions that are called by an event and that change some property of thegraphics environment to affect the display. We begin even the simplest examples with the idleevent callback so that students always see figures in motion, because it is easier to see how tomake something not move than it is to see how to make it move. Because students have alreadyseen the idle and reshape events, keyboard, menu, mouse, and mouse motion events are the maintopics of this section. Students enjoy writing interactive projects, so this section is covered fairlyearly in the course so students can use its results.

Interaction toolkits

It seems appropriate to give students the opportunity to develop programs that interact with theuser at levels beyond the simple menu-and-mouse interface. For OpenGL there are two toolkitsfor creating graphical interfaces to a program: MUI (micro-user interface) and GLUI (GL userinterface). The former is very easy to install in any system and is described in the course notes;the latter is written in C++ and is more challenging to install, but provides a set of tools that isperhaps more flexible and capable. Students learn how to use these very quickly once they havea good grounding in event handling. If you have students use this kind of interface toolkit, it isprobably a good idea to include a discussion of the process of user and task modeling, anevaluation of each student’s interface by the rest of the class, or even better by persons whomight use the program. This will help students realize that designing an interface is a verydifferent kind of activity and requires very different skills than designing a program. One of themantras of computing is probably that programmers should never design the interface for realusers.

Texture mapping

Texture mapping is one of the more important ways a student can add realism to a model. Witha graphics API it is relatively easy to apply textures to any geometric model, although there aremany details involved and it will likely take a while for a student to learn how to understand allthese details and be successful in getting their texture mapping to work well. The instructorshould have a number of examples for the class and should work through the various bindingsbetween texture map and objects that are required.

Texture maps can be rather simple (think of painting a leaf texture on a cone to make a tree), orthey can be more complex (environment mapping onto a piece of simulated chrome). They canbe scanned images from a photograph, can be raster images from a screen capture or a digitalcamera, or can be generated procedurally; we like to introduce the procedural noise function inthis section because it can produce such interesting results for students. Textures can be theprimary thing seen on a surface, or they can be added to a surface that can still show lighting andshading (using a technique called modulating in OpenGL). One-dimensional texture maps canprovide techniques such as contour mapping, or can be used for coloring an image so it can beseen as three-dimensional with ChromaDepth™ techniques. Students should be encouraged toadd texture mapping to their standard set of techniques because of its importance in applications.

Animation

One of the keys to student interest is getting images to move on their own, and learning aboutanimation is one of the things that makes the new version of the course stand out. The key tomotion is to design the scene with motion in mind by using parameters while defining thetransformations in the scene graph. These parameters can be changed by the idle event callback,making the different objects in the scene move as designed.

In teaching about animation, the instructor should discuss the differences between the kind ofprocedural animation described above and the film kind of animation with storyboarding. Even

if the course will not do any film-style animation, it is probably useful to describe the planningprovided by the traditional storyboard and show how this can be implemented as a sequence ofshots with each shot being designed separately. This is a design process that complements theindividual scene design that is implicit in the course up to this point. If there is time to introducekey-frame animation and some film techniques, the students will welcome it.

High-performance techniques

In both games programming and computational science applications there are significant high-performance computing needs. In order to help the course meet the needs of students in theseareas, we include a short section on high-performance graphics. This primarily discusses waysto structure a scene or animation to avoid around using the slower API operations. For example,if a scene can be organized so that you can display the objects from back to front, you do notneed depth tests so you can disable that part of the API and save significant time. This canrequire careful design and possibly some dynamic re-ordering of the display sequence. Anothercommon high-performance technique is billboarding, creating two-dimensional objects that arealways oriented towards the viewer. These can be texture-mapped with a partially-transparenttexture so they look like three-dimensional objects without the extra computation of 3Dprocessing. In general, this section allows the instructor to step outside the API and showstudents that they should not always rely on the API’s tools but should be prepared to developtheir own approaches to their work.

Object selection

Interactive object selection has always been an attractive feature of interactive graphics, but ishas been difficult to use in older systems. With the new graphics APIs, selection isstraightforward, if not simple. Learning to establish the vocabulary of selection in an interactiveapplication is probably the most challenging conceptual task students face in this area—now thatthey can select something, what do they do with it? Students also need to understand both theprinciples and the mechanism for selection, and need to understand how to deal with multipleselections from both overlapping objects and nested selection structures. For overlappingobjects, the student will have to select the nearest object that has been selected; for nestedselections, the semantics of the application will have to be used to choose which of the individualobjects have been selected. But this can become one of the capabilities that students will findmost compelling in the beginning course, so it should be developed carefully with a number ofexamples.

Interpolation and spline techniques

Very early in the graphics course, students will have been introduced to the parametric form for aline segment. This is an example of an interpolation process, and it can be extended withoutmuch difficulty to interpolations of other kinds. One of these is spline interpolations for curvesand surfaces. Sometimes a spline curve or surface is only called an interpolation if it actuallycontains all the control points, but we relax the concept of interpolation to discuss interpolatingsets of points instead of individual points.

A graphics API will probably contain functions that will calculate spline curves and surfaces(usually the more straightforward kinds of splines, such as Bézier splines) with little more inputthan an array of control points and a desired number of grid cells in the result. This is useful, ofcourse, but it is such a jump from the basic concept that students seem to have difficulty makingthe connection between the control points and the resulting geometry. We believe that it is mostuseful to do some simple interpolation with basis polynomials and actual parametric equations toget students used to the ideas of splines and to how to compute tangents and normals. Only thendo we give them the functions in the API to do more complex work.

Cover Credits:Top left: Particles, courtesy of Kenneth BrownTom right: Polarization, courtesy of Virginia MuncyBottom: Gas chromatograph, courtesy of Mike Dibley

Hands-on Work to Introduce OpenGL

In this section we will introduce the structure of an OpenGL program and will work through anexample that the authors both use in introducing their students to OpenGL. This example is notsimple, but it offers a good introduction to simple modeling and to time-based simulations. Thecomputer graphics in the example does not include lighting and shading or many other moresophisticated graphical functions, but it effectively illustrates the straightforward scientificprinciple of heat diffusion. In the workshop we will work through this code and suggest someways participants can modify the example to achieve other kinds of simulations.

A brief introduction to the API

Before beginning to discuss the concepts and processes of computer graphics, the student shouldsee the general shape of a program that uses the graphics API for the course. This may varyfrom course to course, but we will describe the OpenGL graphics API here because it is the mostcommon API in current textbooks and is readily available on current systems. This introductionshould provide a template that describes the parts of a typical program to help students up thefirst step of the learning ladder and to give the instructor a reference point for describing wherevarious operations are defined for the API. Such a template is given in the meta-listing below:

Following this meta-listing, we have the complete code for the heat diffusion simulation. Oneframe of the output is shown in the figure below, and in the workshop you will compile andexecute the complete code and then will modify it to see how some of the OpenGL functionswork. It is our experience that with this beginning, students can begin to write their ownprograms effectively and focus on the modeling, the presentation, and the interaction needed tounderstand scientific problems.

// include section#include <GL/glut.h> // alternately "glut.h" for Macintosh// other includes as needed

// typedef and global data sections// as needed

// function template sectionvoid doMyInit(void);void display(void);void reshape(int,int);void idle(void);// others as defined

// initialization functionvoid doMyInit(void) {

set up basic OpenGL parameters and environmentset up projection transformation (ortho or perspective)

}

// reshape functionvoid reshape(int w, int h) {

set up projection transformation with new window dimensions w and hpost redisplay

}

// display functionvoid display(void){

set up viewing transformationdefine transformations, appearance, and geometry as neededpost redisplay

}

// idle functionvoid idle(void) {

update anything that changes from one display to another - animationpost redisplay

}

// other graphics and application functions as needed

// main function -- set up the system and then turn it over to eventsvoid main(int argc, char** argv) {// initialize system through GLUT and your own initialization

glutInit(&argc,argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);glutInitWindowSize(windW,windH);glutInitWindowPosition(topLeftX,topLeftY);glutCreateWindow("A Sample Program");doMyInit();

// define callbacks for events as needed and go into main event loopglutDisplayFunc(display);glutReshapeFunc(reshape);glutIdleFunc(idle);

glutMainLoop();}

// Example - heat flow in a thin rectangular body

// first section of code is declarations and initialization// of the variables and of the system.#include "glut.h" // <GL/glut.h> for windows#include <stdlib.h>#include <stdio.h>#include <math.h>

#define ROWS 10 // body is ROWSxCOLS (unitless) squares#define COLS 30#define AMBIENT 25.0;// ambient temperature, degrees Celsius#define HOT 50.0 // hot temperature of heat-source cell#define COLD 0.0 // cold temperature of cold-sink cell#define NHOTS 4#define NCOLDS 5

GLfloat angle = 0.0;GLfloat temps[ROWS][COLS], back[ROWS+2][COLS+2];GLfloat theta = 0.0, vp = 30.0;// set locations of fixed hot and cold spots on the barint hotspots[NHOTS][2] =

{ {ROWS/2,0},{ROWS/2-1,0},{ROWS/2-2,0},{0,3*COLS/4} };int coldspots[NCOLDS][2] =

{ {ROWS-1,COLS/3}, {ROWS-1,1+COLS/3}, {ROWS-1,2+COLS/3}, {ROWS-1,3+COLS/3}, {ROWS-1,4+COLS/3} };

int myWin;

void myinit(void);void cube(void);void display(void);void reshape(int, int);void animate(void);

void myinit(void){

int i,j;

glEnable (GL_DEPTH_TEST);glClearColor(0.6, 0.6, 0.6, 1.0);

// set up initial temperatures in cellsfor (i=0; i<ROWS; i++) {

for (j=0; j < COLS; j++) {temps[i][j] = AMBIENT;

}}for (i=0; i<NHOTS; i++) {

temps[hotspots[i][0]][hotspots[i][1]]=HOT; }for (i=0; i<NCOLDS; i++) {

temps[coldspots[i][0]][coldspots[i][1]]=COLD; }}

// This section creates a cube in model coordinates// Unit cube in first octantvoid cube (void){

typedef GLfloat point [3];

point v[8] = {{0.0, 0.0, 0.0}, {0.0, 0.0, 1.0},{0.0, 1.0, 0.0}, {0.0, 1.0, 1.0},{1.0, 0.0, 0.0}, {1.0, 0.0, 1.0},{1.0, 1.0, 0.0}, {1.0, 1.0, 1.0} };

glBegin (GL_QUAD_STRIP);glVertex3fv(v[4]);glVertex3fv(v[5]);glVertex3fv(v[0]);glVertex3fv(v[1]);glVertex3fv(v[2]);glVertex3fv(v[3]);glVertex3fv(v[6]);glVertex3fv(v[7]);

glEnd();

glBegin (GL_QUAD_STRIP);glVertex3fv(v[1]);glVertex3fv(v[3]);glVertex3fv(v[5]);glVertex3fv(v[7]);glVertex3fv(v[4]);glVertex3fv(v[6]);glVertex3fv(v[0]);glVertex3fv(v[2]);

glEnd();}

void display( void ){

#define SCALE 10.0int i,j;

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

// This short section defines the viewing transformationglMatrixMode(GL_MODELVIEW);glLoadIdentity();// eye point center of view upgluLookAt(vp, vp/2., vp/4., 0.0, 0.0, 0.0, 0.0, 0.0, 1.0);

// Draw the barsfor (i = 0; i < ROWS; i++) {

for (j = 0; j < COLS; j++) {// hotter redder; colder bluerglColor3f( temps[i][j]/HOT, 0.0, 1.0-temps[i][j]/HOT );

// Here is the modeling transformation for each item in the displayglPushMatrix();glTranslatef((float)i-(float)ROWS/2.0,

(float)j-(float)COLS/2.0,0.0);// 0.1 cold, 4.0 hotglScalef(1.0, 1.0, 0.1+3.9*temps[i][j]/HOT);cube();glPopMatrix();}

}glutSwapBuffers();

}

void reshape(int w,int h){// This defines the projection transformation

glViewport(0,0,(GLsizei)w,(GLsizei)h);glMatrixMode(GL_PROJECTION);glLoadIdentity();gluPerspective(60.0, (float)w/(float)h, 1.0, 300.0);

}

void animate(void){// This function is called whenever the system is idle; it makes // changes in the data so that the next image is changed

int i, j, m, n;float filter[3][3]={{ 0. , 0.125, 0. },

{ 0.125 , 0.5, 0.125 }, { 0. , 0.125, 0. } };

// increment temperatures throughout the materialfor (i=0; i<ROWS; i++) // backup temps up to recreate it

for (j=0; j<COLS; j++)back[i+1][j+1] = temps[i][j]; // leave boundaries on back

// fill boundaries with adjacent values from original temps[][]for (i=1; i<ROWS+2; i++) {

back[i][0]=back[i][1];back[i][COLS+1]=back[i][COLS];}

for (j=0; j<COLS+2; j++) {back[0][j] = back[1][j];back[ROWS+1][j]=back[ROWS][j];}

for (i=0; i<ROWS; i++) // diffusion based on back valuesfor (j=0; j<COLS; j++) {

temps[i][j]=0.0;for (m=-1; m<=1; m++)

for (n=-1; n<=1; n++)temps[i][j]+=back[i+1+m][j+1+n]*filter[m+1][n+1];

}for (i=0; i<NHOTS; i++) {

temps[hotspots[i][0]][hotspots[i][1]]=HOT; }for (i=0; i<NCOLDS; i++) {

temps[coldspots[i][0]][coldspots[i][1]]=COLD; }

// finished updating temps; now do the displayglutPostRedisplay();

}

void main(int argc, char** argv){// Initialize the GLUT system and define the window

glutInit(&argc,argv);glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);glutInitWindowSize(500,500);glutInitWindowPosition(50,50);myWin = glutCreateWindow("Temperature in bar");

myinit();

// define the event callbacks and enter main event loopglutDisplayFunc(display);glutReshapeFunc(reshape);glutIdleFunc(animate);glutMainLoop(); /* enter event loop */

}

References for the Workshop Notes

[Angel] Angel, Ed, Interactive Computer Graphics with OpenGL, third edition, Addison-Wesley, 2002

[CUN 00a] Re-Inventing the Introductory Computer Graphics Course: Providing Tools for aWider Audience, Computers & Graphics , v. 24(12), April 2000, pp 293-296

[CUN 00b] Cunningham, Steve, “Projects for a Computer Graphics Programming Course,”SIGGRAPH 2000 Conference Abstracts and Applications, pp. 56-59

[CUN 01] Cunningham, Steve and Michael J. Bailey, “Lessons from Scene Graphs: UsingScene Graphs to Teach Heirarchical Modeling,” Computers & Graphics 25(2001), pp 703-711

[CUN02a] Cunningham, Steve, “Graphical Problem Solving and Visual Communication in theBeginning Computer Graphics Course,” Proceedings of the SIGCSE 2002 TechnicalSymposium on Computer Science Education

[CUN 02b] Cunningham, Steve, Computer Graphics: Programming, Problem Solving, andVisual Communication , draft manuscript (~23MB PDF file) available for downloadfrom http://www.cs.csustan.edu/~rsc/NSF/

[CUNSH] Cunningham, Steve and Angela Shiflet, “Computer Graphics in UndergraduateComputational Science Education,” submitted

[Foley] Foley, James D. et al, Computer Graphics Principles and Practice, 2nd edition,Addison-Wesley, 1990

[Hill] Hill, F. S. Jr., Computer Graphics Using OpenGL, second edition, Prentice-Hall,2001

[SHa] Shiflet, Angela B., Computational Science Modules, available online athttp://www.wofford.edu/ecs/

[Shb] Shiflet, Angela B., “Computer Science with the Sciences: An Emphasis onComputational Science at Wofford College,” inroads—the SIGCSE Bulletin, 34(4),2002

[Woo] Woo, Mason et al., OpenGL Programming Guide, third edition for OpenGL 1.2,Addison-Wesley, 1999

This work was supported by National Science Foundation grants DUE-9950121 (first author)and DUE-0087979 (second author). All opinions, findings, conclusions, and recommendationsin this work are those of the author and do not necessarily reflect the views of the NationalScience Foundation. The first author also gratefully acknowledges sabbatical support fromCalifornia State University Stanislaus and thanks the San Diego Supercomputer Center, and mostparticularly Dr. Michael J. Bailey, for hosting this work and for providing significant assistancewith both visualization and science content.

Getting Started Practice

34

Getting Started Practice

Run barchart.c to display a 3D bar chart. Make each of the following changes and answer anyassociated questions:

1. Change the window size to be 400 x 300 pixels (screen dots). Is the window more wide thantall or vice versa?

2. Place the window at position (0, 0). Where is the origin on the screen? What corner of thewindow is placed at the origin?

3. Place the window at position (100, 200). Does the 100 indicate the number of pixels to theright of or down from the origin on the screen? Does the 200 indicate the number of pixelsto the right of or down from the origin on the screen?

4. Change the name of the window to be the possessive of your name and “3D Bar Chart,” suchas “J. D. Smith’s 3D Bar Chart”.

5. Make the animation move slower.

6. Have the animation stop completely without adjusting the assignment to angle.

7. Change the location of the eyepoint in gluLookAt, which reshape calls, and observe theeffect.

8. The parameters of gluPerspective are the angle of the field of view in the yz-plane, the aspectratio (width/height), and the distances from the viewpoint to the near and far clipping planes.Change the distance from the viewpoint to the near clipping plane to be 4.0 and observe theeffect. The function reshape calls gluPerspective.

9. While running the program, reshape the graphics window and notice how the drawingresizes. Also, observe the distortion. What function is responsible for responding to theuser’s manipulation of this window?

10. Change the aspect ratio to (float)w/(float)h in gluPerspective. While running the program,reshape the graphics window. Do you get a similar distortion to that in the previousquestion?

11. Change the background color.

12. In display, cause the arrow to be yellow; make it smaller; have it point straight up and down,instead of at a 45 degree angle; and make it point to the top of the bar whose x and zcoordinates are 0. glColor3f(1, 1, 0) indicates full yellow. All arguments are floating pointnumbers between 0 and 1. The first number indicates the amount of red; the second indicatesthe amount of green; and the third, the amount of blue.

13. Change the colors of the bars to be only red, green, and blue. Use all three colors.

Diffusion Simulation Practice

35

Diffusion Simulation Practice

Run heatflow.c to display a visualization of heat transfer in a bar. Starting with the originalheatflow.c file each time, make each of the following changes and answer any associatedquestions:

1. Modify the code to have cold applied only initially but heat applied continuously and observethe changes.

2. Modify the code to have one hot area composed of 2 grid points and one cold area of 2 gridpoints at opposite ends of the bar and observe the changes.

3. Modify the code so that the behavior of the fixed hot and cold points changes. Every N timeperiods, the fixed points are all to change: from hot to cold or from cold to hot. Make thischange in the animate function that is the idle callback. Experiment with the value of N (try20 as a starting point) until you can clearly see waves of temperature change propagatingthrough the bar.

4. Modify the code to have all the bars of a constant height but varying color. Is thevisualization more or less understandable?

5. Modify the code to have all the bars of a constant color but varying heights. Is thevisualization more or less understandable?

6. Modify the code to have periodic boundary conditions. Thus, the bar is considered to becontinuous. The first and last rows are considered to be adjacent, and the first and lastcolumns are adjacent. Such periodic boundary conditions are employed in a number ofsimulations.

Lorenz Equations

36

Lorenz Equations*

by Angela B. Shiflet

Wofford CollegeSpartanburg, SC

[email protected]

Computational Science: http://www.wofford.edu/ecs/Data and Visualization online course modules:

http://www.woffordcollege.org/ecs/DataAndVisualization/

Introduction

Meteorologist Edward Lorenz discovered Lorenz equations in 1963 as part of a model ofatmospheric convection when temperature differences exist between horizontal and verticallayers of air. Other applications involve a simple chaotic waterwheel, batteries, lasers, and evendata encryption.

The Model

The Lorenz equations are differential equations as follows, where σ, r, and b are positiveconstants:

dx

dt= −σ x + σ y

dy

dt= −x z+ r x − y

dzdt

= x y− b z

As indicated by the derivatives with respect to t, the coordinates of a point (x, y, z,) on the graphdepend on time, t. Thus, the plot of the graph grows with time. This dynamic system exhibitsinteresting behaviors.

* Copyright © 2002, Dr. Angela B. Shiflet. All rights reserved

This work was supported by National Science Foundation grant DUE-0087979. All opinions, findings,conclusions, and recommendations in this work are those of the author and do not necessarily reflect theviews of the National Science Foundation

Lorenz Equations

37

Definition The Lorenz equations are the following differential equations:

dx

dt= −σ x + σ y

dy

dt= −x z+ r x − y

dzdt

= x y− b z

,

where σ, r, and b are positive constants

Three points of particular significance are the origin and the pair C+ = ( b r −1( ) , b r −1( ) , r -

1) and C- = (- b r −1( ) , - b r −1( ) , r - 1). With the derivative being zero at (0, 0, 0), the origin is

an equilibrium solution or fixed point for the Lorenz differential equation. Moreover, when ris greater than 1 so that the number under the square root sign is positive, C+ and C- are alsoequilibrium points. The x and y coordinates of these equilibrium points differ only in sign.

Taking σ to be 10 and b to be 8/3, various r values can result in drastically different figures. Forexample, with r = 28 and an initial point of (0.1, 0.2, 0.3), we obtain the butterfly graph of Figure1. Red, green, and blue arrow tips indicate the x-, y-, and z-axes, respectively. For emphasis, theequilibrium points C+ = ( 72 , 72 , 27) and C- = (- 72 , - 72 , 27) are rendered as red andblue spheres, respectively. The developing graph swirls around the two points, perhaps movingaround one of the equilibrium points several times before switching to the other. It can beproved that this three-dimensional path never crosses itself and that the trajectory is bounded,never moving very far from where pictured in Figure 1. However, the three fixed points serve torepel the graph. With C+ and C- aligned vertically instead of horizontally, this graph can serveto model the swirling winds generated by hot and cold layers of atmosphere.

Figure 1 Butterfly graph from r = 28, σ = 10, and b = 8/3 with an initial point of (0.1, 0.2, 0.3)in the Lorenz equations

Lorenz Equations

38

If we make the value of r smaller, the equilibrium points become closer. A different graphresults when r is greater than 1 but less than a certain threshold. For example, if we change r tobe 14 and have an initial point. such as (12, 1, 1), close enough to C+ or C-, we obtain a graphsimilar to Figure 2. The graph quickly starts moving around and converging to one of the pairedequilibrium points, here C-. If the initial point is outside a convergent cycle, the graph diverges,looping to infinity.

Figure 2 Graph from r = 14, σ = 10, and b = 8/3 with an initial point of (12, 1, 1) in the Lorenzequations

If r is less than 1, so that the value under the square root is negative, the equilibrium points C+and C- do not exist. In this case, from any initial point, the graph dives into the origin. Thus, for0 < r < 1, we say that the origin is a stable solution of the Lorenz equations. Figure 3 illustratessuch a situation for r = 0.5 and an initial point of (10, 20, 25).

Figure 3 Graph from r = 0.5, σ = 10, and b = 8/3 with an initial point of (10, 20, 25) in theLorenz equations

Lorenz Equations

39

For any set of parameters, if the initial point is the origin, C+, or C-, the graph never leaves thatfixed point because the derivative is zero there. However, if r is greater than 1 as in Figure 1 andFigure 2, even if the initial point is very close to the origin, the trajectory eventually startsspiraling around one or both of the equilibrium points. Thus, we call the origin a repeller andC+ and C- attractors.

Chaotic Behavior

When the value of r is large enough so that the graph resembles the butterfly of Figure 1, thegraph is chaotic. A small change in the initial point can lead to a dramatic change in thetrajectory. Figure 4 shows graphs of the y coordinate versus time with initial points (0.1, 0.2,0.3) and (0.11, 0.2, 0.3) for r = 28, σ = 10, and b = 8/3. Although the x coordinates of the initialpoints only differ by one-hundredth of a unit, the trajectories quickly diverge.

-30

-20

-10

0

10

20

30

40

time

y

Init. Pt. (0.1, 0.2, 0.3) Init. Pt. (0.11, 0.2, 0.3)

Figure 4 Plot of y versus time with initial points (0.1, 0.2, 0.3) and (0.11, 0.2, 0.3) for r = 28,σ = 10, and b = 8/3

Because slight variations result in drastically different trajectories, we say that the graphs exhibitchaotic behavior. The implication of this chaotic behavior is that it is impossible to haveaccurate long-term weather forecasts. Because of such chaos, it is said that the flutter of abutterfly's wings in Africa can result in a hurricane in Florida. As another application,researchers have built a circuit to encrypt messages through masking with the chaotic noise fromthe x coordinate of the Lorenz equation. Another piece of hardware, which also uses the Lorenzequation, can decrypt the message.

A computer program that generates a graph of a Lorenz equation, such as in Figure 1, 2, or 3above, computes each new point using the point at the previous time step and the calculatedchanges in the x, y, and z directions. Because of the iterative and cumulative nature of this

Lorenz Equations

40

computer program, people were concerned that the apparently random behavior was a result ofcomputer round-off errors. However, in 1995 Konstantin Mischaikow and Marian Mrozekproved that the chaos real and is not a result of such computer errors.

Projects

Run lorenz.c to display a visualization of a Lorenz equation.

1. Make the following changes to lorenz.c and observe the effects:a. Comment out the following command in myinit:

glEnable(GL_LIGHT0);

b. Define a global array yellow of type point4 that has full red and green, but no blue. Indisplay, have the ambient and diffuse highlights for the material of the Lorenz curvebe yellow. In myinit, change the background color to be an appealing shade of blue.

2. Change lorenz.c to draw a red sphere at equilibrium point C+ and a blue sphere atequilibrium point C-. The command glutSolidSphere(1, 20, 20) results in a solid sphere ofradius 1. (The second argument indicates the number of slices, which are parallel to the z-axis; and the third argument is the number of stacks, which are perpendicular to the z-axis.)

3. Make the spheres from the previous project have radius 5. Rotate and notice that at timesthe sphere that is further away partially blocks the view of the closer sphere. Correct theproblem by placing in myinit the following command to enable z-buffer display:

glEnable(GL_DEPTH_TEST);

Observe the changes.

4. For the previous project, change the alpha (fourth) value of the colors of the spheres to be0.5 and enable alpha-channel blending by including the following commands in myinit:

glEnable(GL_BLEND); // enable alpha-channel blendingglBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

Observe the changes.

5. Add keyboard controls to barchart.c or heatflow.c.

6. Add lighting to barchart.c or heatflow.c.

7. Using lorenz.c with σ = 10 and b = 8/3, find the r value to two decimal places at which thegraph changes from exhibiting divergent behavior or behavior similar to Figure 2 tobehavior similar to Figure 1. Does the initial point change the result?

Lorenz Equations

41

8. Using lorenz.c with r = 14, σ = 10, and b = 8/3, determine the limiting cycle of C+. Whenthe initial point is inside the limiting cycle, the trajectory appears similar to Figure 2, butwhen it is outside the limiting cycle, the plot diverges away from C+. By making the othertwo coordinates 0, determine each coordinate to one decimal place.

9. Develop a program to display the trajectory of the following differential equation, calledthe Rössler attractor:

dx

dt= −(y + z)

dy

dt= x + ay

dzdt

= b + z(x − c)

By holding two parameters fixed and varying the third, explore the behavior of the graph.If possible, find a point at which the graph becomes chaotic.

References

The following are links and references to other material on Lorenz Equations:

Cunningham, Steve, Computer Graphics: Programming, Problem Solving, and VisualCommunication, draft manuscript (~23MB PDF file) available for download fromhttp://www.cs.csustan.edu/~rsc/NSF/

Danby, J. M. A., Computer Modeling: From Sports to Spaceflight…From Order to ChaosWillmann-Bell, Inc., Richmond, VA, 1997, pp. 66-73

Fischel, Georg, "Obervation of the Lorenz Systems Using Scientific Visualization,"available online at http://www.cg.tuwien.ac.at/~fischel/Lorenz97/index.html

Fraser, Blair, "The Lorenz Equations," available online athttp://kong.apmaths.uwo.ca/~bfraser/version1/lorenzintro.html

Shiflet, Angela B., Computational Science Modules, available online athttp://www.wofford.edu/ecs/

the computer graphics course in the computational science ...rsc/nsf/sc02.notes.pdf · • the...

Documents