Printer Friendly

Computer graphics algorithm based on visualization teaching theory.

1. Introduction

Computer graphics is an important subject that solves graphic formation, processing and displaying using computer knowledge, whose major application direction is to construct harmonious man-machine interaction environment [1]. This course aims to make students master the basic concept, method and algorithm of computer graphics. However, we find that, most students are confused on some hard algorithms which must be learned; as a result, many students have less learning enthusiasm and reduced initiative, thereby affecting schedule of the course [2]. Algorithm teaching is considered as complex and difficult, and the most main factors is that students must understand the dynamic change of data structure by implementing static procedure code as algorithm taught by teachers in class cannot be imaged in brain [3]; moreover, textbooks usually present illustrations of key concept but ignore the details of algorithm due to the limitation of space, thus students have to make up the details by their own understanding during reading, which is not good for them to learn and master algorithm [4].

To solve this teaching problem, people begin to study visualization technology related to teaching to convert nonintuitive information into visible graph or image information and demonstrate it on computer screen [5]. Visualization technology has attached great importance since it was proposed in 1986. Many experts and scholars have obtained several achievements in studying process and Balsa visualization prototype system developed by Brown, Sedgewick et al. in workstation is the most influential. It is applied in educational computing laboratory in Brown University as a means for teaching computer science afterwards. Then Stasko designed Tango system which makes algorithm visualization suitable for teaching demonstration [6]. Making use of visualization of Windows programming, thus study converted basic algorithm of computer graphics into visualization algorithm and demonstrated it by dynamic images, which is apparently different from traditional teaching software which only repeats the manufacturing method in textbooks. It can help students to master algorithms deeply as they can directly see implementation process or structure and understand algorithms through vivid graph animation when they are learning algorithm.

2. Overall Design of Visualization of Computer Graphics Algorithm

2.1 Confirming Content and Target

Teaching content of visualization is shown in figure 1. The core lies in visual mapping, including visualization scheme design and graphics drawing. Visualization targets on expressing method, process, concept and significance by visualization method. The first step is to make conceptual description for visualization target and next is to educe visualization scheme from conceptual description.

Detailed process of confirming content and target of visualization can be divided into procedures pf algorithm visualization implementation, interface design, information giving of user, user control and pseudo code comparison.

2.2 Construction of Visualization Teaching Model

Visualization teaching model is shown in figure 2. Every algorithm can be implemented by visualize algorithm by visualization programming tool, then organize these visualization algorithm modules by related software such as PowerPoint and finally form multi-media teaching software for teaching.

2.3 Interface Design

User interface is the important element of application program. Interface is the part first come into sight when users contact application program. Interface usually clearly displaying the distribution of general content of the program decide usability and operability of the program [7]. Its design should follow the principle of simplification and consistency. Aesthetic feeling of interface can be considered only when the design meets the demand of users. Usability and aesthetic feeling can be improved taking layout of interface, position of elements, and consistency of elements into account. Though algorithms in graphics course in this study have different characteristics, their similarity is extracted to form unified algorithm dynamic demonstration interface, as shown in figure 3.

3. Specific Implementation of Visualization Of Computer Graphics Algorithm

3.1 Custom Coordinate

Coordinated system is the graphic basis used by every graphic operation. There are three coordinated systems in VB 6.0, screen coordinated system, form coordinated system and object coordinated system within form. These three coordinated systems differ with common geometric coordinate system in one point, that is, top left corner is their coordinate's origin.

VB allows programmers to define the position of the origin based on demand. In coordinated system of VB, measurement unit defining position along coordinate axis is called scale. Every axis in coordinated system has its own scale. Direction, starting point and scale of coordinate axis are changeable. Users can set it into custom pattern through Scale model attribute of the object, such as [Object.] ScaleMode = vbUser. Coordinated system can be set by Scale method which is the most convenient method to build coordinated system. Its grammar is as follows: [Object.] Scale ([x.sub.1],[y.sub.1])-([x.sub.2],[y.sub.2]), in which, ([x.sub.1],[y.sub.1]) stands for the left-corner coordinate value of the object and ([x.sub.2],[y.sub.2]) stands for the right-corner coordinate value.

3.2 Attribute and Graphic Method of Basic Control

In short, control is designed for implementing specific tasks. As a concrete object, control possesses attributes, events and methods. VB standard control used in algorithm visualization implementation includes Command Button, Text Box, Label, List Box, Message Box, Picture Box, etc. Caption attribute is used to set text on control; Enabled attribute is to make object respond to users' operation or not, i.e., object valid or invalid; size and font of words is set by Font attribute; display mode of font can be set by MultiLine attribute; Scroll Bars attribute can be used to endow text box with horizontal scroll bar, vertical scroll bar or both of them. VB graphic method refers to precede drawing action on forms, picture box, etc. Common graphic methods include Pset method, Line method, Cirle method. Point, straight line, circle (ellipse) and geometric figures can be drawn by graphic methods of VB, in the process of various events.

3.3 "Rubber band" Drawing

After a point is defined by mouse, another point is defined by dynamically moving mouse. Graph drawn changing accordingly during mouse movement is called "runner band" effect, which can also be achieved by xor method. If we intend to draw any straight line with "rubber band" effect in Picture Box control using a mouse, the first step is to draw a starting point in the current position by mouse, then the previous straight line is erased when the mouse moves, and finally a line is drawn in the new position. To realize the above procedures, we need to respond Mouse Move event in Picture Box control.

3.4 Real-time Tracking of Coordinate

As a common control, status bar is usually taken to do real-time tracking of coordinate, so that users can observe coordinates of points at any time. In default state, status bar is not in control panel; therefore, it need to be added before usage.

For instance, if we hope the first form to display X coordinate of the point and the second form displays Y coordinate when the mouse moves to any position in Picture Box control, the codes are as follows:

Private Sub picture1_MouseMove (Button as Integer, Shift as Integer, X As Single, Y as Single) StatusBar1.Panels (1).Text = "X Coordinate:"& Format(X, "##. ##") StatusBar1.Panels (2).Text = "Y Coordinate:"& Format(Y, "##. ##") End Sub

3.5 Combination of Pseudocode and Demonstration

Operating VB program inside and displaying operation of C program outside is the key of algorithm visualization developing, as shown in figure 4.

4. Specific Problems of Algorithm Visualization Implementation and Solutions

4.1 Visualization Implementation of Curve Derivative Algorithm

As to visualization implementation of curve derivative algorithm, this study put the focus of visualization in presentation form and property of curve. As knowledge involved in learning of curve is complex, visualization demonstration will divide students' attention, which is ineffective in promoting abstract thinking and comprehensive analysis ability of students. Though visualization is a tool for expanding teaching contents, learning means and thinking space, it cannot solve all problems existing in teaching. As to some contents, visualization teaching is supposed to combine with traditional teaching mode, such as performing formula manipulation on blackboard to promote interaction between students and teachers. Therefore, visualization is not suitable for all contents. However, presentation form of curves can be reflected by visualization technology, as shown in figure 5. As a result, students can understand the property and presentation of curve better based on knowing curve derivative principled.

4.2 Fractal Visualization Implementation

Word "Fractals" was invited by a famous mathematician B. Mandelbrot using Latin roots in 1975. It means shred, crush, etc. He set up a brand new geometric mathematical method, i.e., fractal geometry, which provides a useful teaching tool for description of natural scene and computer simulation. In ideas of fractal geometry, every local part of a graphic can be regarded as a reduced copy of the whole graphic, i.e., self-similarity nature of fractal geometry. Based on that, recursive algorithm is required in constructing fractal graphics. Following is a recursive algorithm for building fractal tree.

(1) Suppose coordinate of A, B, C and D is (x,y), ([x.sub.0],[y.sub.0]), ([x.sub.1],[y.sub.1]) and ([x.sub.2],[y.sub.2]) respectively, L is the length of tree stem and [alpha] is the angle between branch and stem.;

(2) Draw stem AB, (x,y)-([x.sub.0],[y.sub.0]);

(3) Calculate coordinate of

C, L = 2 L/3, [x.sub.1] = [x.sub.0] + L * cos ([alpha]), [y.sub.1] = [y.sub.0] - L * sin ([alpha]);

(4) Calculate coordinate of D, L = 2 L/3,

[x.sub.2] = [x.sub.0] + L * cos(-[alpha]), [y.sub.2] = [y.sub.0] - L * sin (- [alpha]);

(5) [x.sub.0] [right arrow] x, [y.sub.0] [right arrow] y, [x.sub.1] [right arrow] [x.sub.0], [y.sub.1] [right arrow] [y.sub.0] in the second step, then draw a straight line between (x,y) and ([x.sub.0],[y.sub.0]), i.e., draw branch BC;

(6) [x.sub.0] [right arrow] x, [y.sub.0] [right arrow] y, [x.sub.2] [right arrow] [x.sub.0], [y.sub.2] [right arrow] [y.sub.0] in the second step, then draw a straight line between (x,y) and ([x.sub.0],[y.sub.0]), i.e., draw branch BD;

(7) Repeat step 3 [right arrow ] 6 until recursive times is finished.

5. Conclusion

Essence of visualization technology lies in integrating graphic formation and image understanding. As the emerging hot computer technology recently, it can analyze image data input into computer, generate graphics from complex multi-dimensional data, i.e., converting data and results produced in scientific computation into geometric figure and image information, which is easy for understanding and communication [8].

Recently, problems faced by teachers and students in teaching and learning become frequent. Especially when teachers teach abstract knowledge, students often have a superficial knowledge or even completely confuse; at this moment, visualization teaching is required to solve this problem [9]. Knowledge in computer field is always abstract, which cannot be perfectly represented by traditional teaching. To meet this teaching demand, people start to study and develop visualization tool used in education. Studying and developing visualization teaching system and model can effectively reform teaching mode of computer course and improve teaching efficiency and quality, which plays a vital role in learning of students and teaching of teachers.


Project category: Guidance Project of Research Fund for Philosophy and Social Science Research Fund of Jiangsu Universities.

Project Name: Application of Knowledge Visualization in Computer Courses in Higher Vocational Colleges Project approval number: 2014SJD704


[1] Yuzhen, Jiang. (2011). Construction of Algorithm Visualization Instruction System on Computer Graphics. Modem Computer, (11) 44-46.

[2] Gui, Wu., Jun, Tao. (2011). 3D algorithms and visualization of computer graphics education based on VRML and JAVA. Journal of Hubei Adult Education Institute, (5) 140-143.

[3] Weidong, Chen., Jiping, Zhang. (2010). Positioning and Characteristics of Future Class. E-education Research, (7) 23-28.

[4] Yuanmei, Duan., Shichun, Wang., Shuzun, Jiang. (2010). Classroom Teaching Research Based on Interactive Whiteboard. China Educational Technology, (3) 84-86.

[5] Guohua, Wu., Kedong, Li. (2011). Meta-analysis of Knowledge Visualization Teaching Application. E-education Research, (12) 84-90.

[6] Hongjiang, Li., Zijuan, Gui. (2011). Application of Computer Graphics in Electrical Power System. Technology Trend, (11) 68-69.

[7] Minya, Chen., Xudong, Jin. (2011). Discussion on Computer Graphics and Graphic and Image Processing Technology. Journal of Changchun University of Science and Technology, (1):138-139, 146.

[8] Kaibin, Lei., Zhixia, Ma. (2010). Application Ability Cultivation Based on Computer Graphics Course Teaching. Journal of Southwest University for Nationalities (Natural Science Edition), 36 (9): 56-59

[9] Dan, Wu. (2010). Introduction and Development of Leafy Interactive Model in Classroom. Elementary Education Studies, (2)16-19.

Fangzheng Wang

Yancheng Institute of Health Sciences

Yancheng, Jiangsu, 224005


Received: 12 January 2015, Revised 20 February 2015, Accepted 25 February 2015
COPYRIGHT 2015 Digital Information Research Foundation
No portion of this article can be reproduced without the express written permission from the copyright holder.
Copyright 2015 Gale, Cengage Learning. All rights reserved.

Article Details
Printer friendly Cite/link Email Feedback
Author:Wang, Fangzheng
Publication:Journal of Digital Information Management
Article Type:Report
Date:Jun 1, 2015
Previous Article:Tenth International Conference on Digital Information Management (ICDIM 2015).
Next Article:Optimization of reconstruction of 2D medical images based on computer 3D reconstruction technology.

Terms of use | Privacy policy | Copyright © 2020 Farlex, Inc. | Feedback | For webmasters