JIN Xing－chi ，GONG Guang－jun，DONG Yu－de

（1.School of Information and Software Engineering，University of Electronic Science and Technology of China，Chengdu 611731，China；2.Department of Mechanical Engineering，Anhui Vocational and Technical College，Hefei 230011，China；3.School of Mechanical and Automotive Engineering，Hefei University of Technology，Hefei 230009，China）

0 Introduction

Computer Aided Instruction（CAI）is a new teaching method with which the teacher take the computer as a medium.It provides students with a better learning environment，students can study by alternating control the computer.The effect of the CAI technology in the teaching of the computer graphics is very prominent.Computer graphics［1］is a discipline which researches how to generate，to handle，to display and export the graphics with the computer.The key of the teaching is how to display the process of graphics generating and transforming by more vivid and intuitionistic method make learners in－depth understand the theory and algorithm principle of the computer graphics.

At present the existing method of the computer graphics mainly has following several categories［2－4］：（1）The first teaching method is to use Power Point［5］，these teaching Power Point majorities are static pictures or some fundamental algorithms.However，this teaching pattern has some deficiency on the alternating control and visualization.It is abstract and hard to understand.The teaching effect is not well.（2）The second method is to adopt C or C＋＋language description of computer graphics［6］.It combined the theory with the practice of the computer graphics.These compiling patterns realize the practice of the computer graphics，so learners can apprehend the usage of the computer graphics theory by alternating control.However，learners can not see the program of graphics generation and master the principle of graphics generation.（3）The third method is to adopt the flash to demonstrate and add certain characters explanation together［7］，this way can reveal the algorithm principle of the graphics generation to a great extent.But the flash′s content is not being very all－round and lack of alternating control.

In order to settle the above shortage，this paper created a new method which integrates visualization，alternation，and expansibility together.On the basis of research of the computer graphics theory，we use the Visual C＋＋6.0 to develop a dynamic demonstrating system which can help learners to understand computer graphics theory.It can improve traditional teaching deficiency greatly and make the complicated computer graphics theory more pellucid.The teaching quality and effect can be improved effectively by the teacher′s demonstration and learner′s interactive process.

1 The theory of arithmetic visualization

Arithmetic visualization chooses the data，operation，and semantic components from the program and merges them to dynamic demo，it gathers multimedia tools，such as graphics，text，color，sound，coding，flash，video etc.，to describe the arithmetic.Arithmetic visualization of graphics creates and transformation is to bring forth the function of every element playing in the course dynamically［8］.

The raster display of computer can be considered as a matrix of pixel.No matter what graphics are displayed on it，including text，they are actually the integration of special pixel.But we can not see any single pixel on high definition displays，and that is why we can not see how the graphics are created and transformed.In order to solve the problem，this system will amplify the pixel by creating dummy grids to imitate the pixel and combining the arithmetic of the graphics，where the best pixel can be computed to approaching the graphics in the dummy grids.Then the pixel will be replaced by drawing circles to show the graphics.

In the program environment of VC＋＋6.0，the system adopts program of single document application as the main frame.Under the main frame，the whole system is divided into four function modules to actualize the arithmetic visualization of graphics create and transformation.

The first module is the visualization of arithmetic text.This part is carried out by a view class named CApp View which mainly displays the arithmetic text of graphics generation step by step，arithmetic is programmed in C＋＋language.The second module is the dynamic demo of graphics generate and transformation.This part is carried out by a view class named CDemo View which mainly displays the dynamic course of how the graphics are created and transformed step by step.The aim is to let learners know how each step of the graphics generation and transformation comes out and help learners understand the hypostasis of the arithmetic.The third module is carried out by a view class named CForm View.It displays the calculating datum and relating parameters which come from the course of graphics generation and transformation ever and again.The main aim is to advance learners′understanding of the second module.The fourth module is the alternant interface between the learner and the software.The aim is to provide the learner a platform to control the program and to change various parameters of curves.This part is realized by the dialogue box in VC＋＋.The four function modules mentioned above can be a little different in different courses of graphics demo.The main interface of the system is shown in Fig.1.

Fig.1 The demonstration interface of arithmetic visualization

2 The key technique to actualize arithmetic visualization

2.1 The arithmetic visualization of text

The principle of graphics generation and transformation can be described by the computer languages and the C＋＋language used in this place.In this system，the text of the arithmetic is displayed in the left window of the program′s main frame；and the arithmetic visualization of text is carried out by dynamic demo.

First，several CString［9］arrays are defined to save the arithmetic text of the different graphics；then，outputs them circularly to the window by judging the types of the graphics.But it is just static.In order to simulate the dynamic course of how the computer executes the code，the paper adopts a method to show the sentences which are executed presently by higher brightness，that is，each sentence is first output to the window by black letters with white background，then changes the background into blue of the sentence which is executed right now，and changes the background into white again when the sentence has been executed.So the purpose to execute the sentences one by one is achieved.When a sentence has been finished，the function of Sleep（100）from the VC＋＋is executed to delay 0.1 second before executing the next sentence.

The pseudocodes of the arithmetic′s demo program are shown as follows：

case line//the line is used as an example

call Draw Graphics Text（13，false）//firstly，the text of all arithmetic are displayed with white background.

for i←2 to nStep//the“i”begins from the start to the end of the arithmetic.

call Draw Graphics Text（i，true）//show the text of arithmetic that are executed right now with blue background.

call Draw Graphics Text（i，false）//show the text of arithmetic that are executed right now with white background.

call Sleep（100）//delay for 0.1 second and then go on to execute the next one.

return//return.

We can change the static output to slowly dynamic demo by repeating the forementioned steps.Fig.2 shows the effect of continuous demo.

Fig.2 The continuous demo of arithmetic text

2.2 The visualization of graphics generating

2.2.1 “Dummy grid”and coordinate system.To realizing the visualization of the graphics′generating process，and to make learners not only see the point but see the process that the computer draws the point clearly，this system applies“dummy grid”technology.The meaning of the“dummy grid”is：in the space of 400 pixels＊400 pixels，we draw 25 vertical lines and 25 horizontal lines which composition a“dummy grid”，whose pixel density is 25＊25，being equal to having enlarged 16 times with grid of actual pixel grid，so，every intersection point represents a“dummy pixel”.

We need to establish a coordinate system after finishing the“dummy grid”.In VC＋＋［6］，the coordinate system′s origin is in the top left corner in default，while the positive direction of x axis towards the right and the positive direction of y axis is downward.But our habit is that the lower left corner is the coordinate system′s origin，and the positive direction of x axis towards the right and the positive direction of y axis is upward.Therefore this system has built a relative coordinate system；the coordinate system′s origin has built on the intersection point of the second line from the left of the“dummy grid”and the second line from the bottom of the“dummy grid”.So the transform relation between the point（X，Y）in coordinate system and the point（X1，Y1）in relative coordinate system can be described as follows：

The grid and coordinate system is shown as Fig.3.

2.2.2 Draw point in dummy grid.According to the graphics′algorithm，we can calculate all points′coordinate of various graphics after finishing building the dummy grid and relative coordinates system and save them in their arrays.Finally，we will display all points in the dummy grid.In order to draw

point slowly，we defined a array Point Pos［］of CPoint class and a Get Point（）function.We calculate every point′s coordinate of the line by the algorithm and save them in PointPos［］array，then use draw Point（）function output the point in PointPos［］array gradually.The pseudo－code of the algorithms as follows：

Fig.3 Grid and coordinate

In fact painting directly from practically every step of the current number of points.Painting point in the above process，the faster speed of the computer gives the impression that it had drawn one point each step.There will be a pause in the process after each step finished；the purpose is to let learners see more clearly.General speaking，the point is very small，and invisible，in order to realize visualization we need to enlarge the points.In Draw Point（）function，it called function BOOL Ellipse（int x1，int y1，x2int，int y2）in VC＋＋，which

x1，y1，x2，y2，express the coordinates of the points which in the top left corner and the down right corner of the ellipse′s external rectangle.A small circle for the center to replace point here.We can get the points shown in Fig.4 by taking the appropriate coordinate and color.

Fig.4 Point in grid

2.3 Graphics transform visualization

We use（x，y）to show one point of plane in two－dimensional plane space.In computer painting，the essential of graphics′transformation is points′transformation.Because the point aggregate can use matrix to express，points′transformation can come true by corresponding matrix operation.Namely［10］：

Two dimension transformation and three dimension transformation of graphics have realized in this article，take the visualization principle of the graphics′three dimension transformation for example.3－D graphics′geometry transformation can express by the matrix as follows：

Where x，y，z express the coordinate before transform，x′，y′，z′express the coordinate after transform.T3Dis a transform matrix and it can be divided into four parts，the different part can produce different transform which you can find it in reference［1］in detail.

The mission of graphics transform visualization is to demonstrates the entire proceeding of the graphics′transform dynamically and show the effect of the parametrics′change to the learner intuitionistically by the way of changing graphics.So learners can understand the effect of every parameter in depth by alternant control and algorithm incisively.

2.3.1 Building－up the coordinate system and the changing of coordinate.Any graphics should be obliged to a reference coordinate system.We set up a 3D′s tilted two scroll of measure coordinate system which is shown as Fig.5 for 3D graphics in this article.In this coordinate system，the positive direction of x axis sets up being horizontal towards the left，z axis positive direction is erect make progress，the positive direction of y axis is the level direction forms an angle of 45 degrees.When demonstrating a graphics in that coordinate system，the direction length fetches the x axis and the z axis are the same as the actual length of graphics，but the direction length of y axis takes the halves of the actual length.Namely：

Fig.5 3D coordinate

ηx，ηy，ηzare the axial deformation modulus of OX axis，OY axis，OZ axis.According to the matrix of the oblique axis measuring projection transform，we can reach following equation：

The solution can be got

For gaining stronger third dimension，we choose d＝f＝－0.354，so tilted two axis measure projection alternation matrix：

We should change the graphics 3D coordinate into upper screen equipment coordinate after building three－dimensional coordinate system，coordinate system plain system is acquiesced in mounts an angle in the screen left in VC＋＋，and use towards the right direction is x axis positive direction，downward direction is y axis positive direction.It shown as Fig.6，the small dot′s coordinate is（x，y，z）in three－dimensional coordinate system and it is（xx，yy）in coordinate of equipment.The transform formulary is as follows：

Fig.6 Coordinate transform

Among them，x X，y Y are relative coordinate of the three－dimensional coordinate system′s coordinate origin in the equipment coordinate system respectively.

2.3.2 Interactive control of transformation.We have used interactive control technique when realizing dynamic demonstration.In the area of data feed back and interactive controls，we use 6 control－buttons as what Fig.7 shows，the meaning is change along x，y，z axis forward direction and opposite direction.Click one certain button among them，it will be deployed in three separate indicators to view a demonstration of the dynamic function.

Fig.7 Control button

2.4 Interactive revise of parameter

Part IV of program is an interactive interface between software and learners.Maximal visualization target is that the interactive model shows and whose basic purpose is to promote learners′grasp to science phenomenon by strong visual stimulation.

The mainly purpose of the system′s adopts interactive technology is to provide learners an interface to change various graphics parametric.There are some sub－menus of initialization parameters under the systematic pulling menu“program control”menu.The system may pop－up the corresponding parameter initial dialog after the learner click the different menu.Dialog initialization parameters of the curve shown as Fig.8.The other graphics′initial parameter dialogs are similar.

Click the ok button after finish the initialization of various graphics value，the dynamic demonstration view and the data displaying view will make corresponding change ever and again.So in order to realize the essence of algorithm more thorough learners can observe the change of graphics by initial a few peculiar values.

3 Examples

The examples of graphics visualization show as Fig.9 to 14.Fig.9 shows the visualization of circle，the visualization of 2D transform is shown on Fig.10，Fig.11 and Fig.12 are parabola curve and triple B－spline curve visualization respectively，Fig.13 is 3D revolution transform visualization，Fig.14 is Bezier curve surface visualization.

Fig.8 Initialization of graphics

4 Conclusion

Fig.9 Circle

Fig.10 2D proportion

Fig.11 Parabola curve

Fig.12 Triple B－spline curve

Fig.13 3D rotation transform

Fig.14 Bezier surface

Systematic visualization is a direction of various soft－ware in the future，facing a number of information data，visualization system can reflect the essence of information intuitively and plain［11］.This teaching demonstrates CAI system abiding by visualization soft－ware design philosophy and opened up a new train of thought of CAI system.The system has bigger extension value in the computer graphics teaching and the write of teaching CAI in the same kind of software.

The system should set out from practice teaching in the next step of research and improving defects with the feedback information，making it more perfect in teaching process and applying to a long－distance education and being used in colleges and universities classroom at the same time.

［1］ SUN Jiaguang.Computer graphics［M］.Beijing：Tsinghua University Publishing Company，2005.

［2］ HE Qingfang.The principle and arithmetic of the computer graphics［M］.Beijing：Tsinghua University Publishing Company，2006.

［3］ WANG Fengchan，SUN Youchao.Simulation of virtual maintenance process based on parameterized action representation［J］.Journal of Graphics，2013，34（2）：119－124.

［4］ WANG Jianhua.The thinking and practice of engineering drawing CAI［J］.Journal of graphics，2012，33（6）：116－120.

［5］ JIANG Xiaohong，SONG Yan.The 3D modeling and analysis of hyperbolic paraboloid based on the spatial affine point ranges［J］.Journal of Graphics，2012，33（5）：24－27.

［6］ HOU Shijiang，LIU Guohua.Information visualization，physicality and intuitive use for tangible user interfaces［J］.Caddm，2012，22（3）：18－22.

［7］ FENG Zhiquan.A hand gesture－based interactive model to choose one from many［J］.Caddm，2012，22（1）：12－14.

［8］ HU Jianping.Interpolation and approximation for data living on manifold surfaces［J］.Caddm，2012，22（4）：16－20.

［9］ PAN Aiming.The principle of visual C＋＋technology［M］.Beijing：Tsinghua University Publishing Company，2006.

［10］ HOU Hongsheng，YAN Guan，GU Yanhua.A new method to recover 3D object from 2D views［J］.Journal of Graphics，2011，32（3）：95－99.

［11］ LU Feng，CHENG Chuanbo，LU Zhengding.Research and implementation of visualization constructivism based on interactive models［J］.Computer Engineering ＆ Science，2003，25（4）：4－6.