curriculume vitae (Resume)
graduation project
current research
learn programming
lecture notes
database and information retrieval
software engineering
image processing
intelligent systems
cisco training & networks
awards received
everday English

 Computer Graphics

Suggested Book: Computer graphics is a sub-field of   computer science and is concerned with synthesizing and manipulating the visual content. I studied the book entitled Computer Graphics Using OpenGL, by F.S.Hill, Jr. Prentice Hall, and Computer Graphics, C Version by Donald Hearn and M. Pauline Baker

ISBN-10: 0136053580 
ISBN-13: 978-0136053583
Publisher: Prentice Hall; 4th edition (November 19, 2010)
Table of Contents Chapter 1 Introduction to Computer Graphics
Chapter 2 Getting Started Drawing Figures
Chapter 3 Additional Drawing Tools
Chapter 4 Vector Tools for Graphics
Chapter 5 Transformations of Objects
Chapter 6 Modeling Shapes with Polygonal Meshes.
Chapter 7 Three-Dimensional Viewing
Chapter 8 Rendering Faces for Visual Realism
Chapter 9 Tools for Raster Displays
Chapter  10 Curve and Surface Design
Chapter  11 Color Theory
Chapter 12 Ray Tracing

Summary: Assuming no background in computer graphics, this junior-to graduate-level book presents basic principles for the design, use, and understanding of computer graphics systems and applications. The authors offer an integrated approach to two-dimensional and three-dimensional graphics topics. A comprehensive explanation of the popular OpenGL programming package, along with C++ programming examples illustrates applications of the various functions in the OpenGL basic library and the related GLU and GLUT packages.

More about computer graphics can be found in Lecture Notes section here

My Project:

I have conducted a small project for Advanced Computer Graphics subject during my master studies at the University of Technology Malaysia. We have been asked to create and animate an image, or a group of objects, which must be constructed by using only geometric primitives such as lines.



Download the presentation slides - by Salha Alzahrani
Download the source code in C#.NET - by Salha Alzahrani (file extension is 7-Zip)
Video for keyboard animation
 Video for timer animation

In this page, I would like to summarise my work which might be of interest to some readers. An aeroplane has been chosen as the main object in the animation scene. The programming language used in this project is C# with the support of the libraries namely GDI+ Library and DirectX Library (released in June 2007). To use these libraries in C#, using keyword is written followed by the library main and sub-class(s).

Programming Code:

//Using GDI+ library with C#
//Add directX libraries to the project

using Microsoft.DirectX.Direct3D;
using Microsoft.DirectX.AudioVideoPlayback;

I. Drawing an Image with Lines

As can be seen in Fig.1, an aeroplane is a complex object which have different views and directions. We can model the aeroplane object using a bunch of geometric primitives linked to each other. Our task is to draw the aeroplane model using only lines. Thus, a group of points are defined as shown in Fig.2.

Fig.1 Different shapes and directions of an aeroplane

Fig.2 Points that connect the shape

As the first shape in Fig.1 is chosen, the hierarchical model of this object is implemented by dividing the whole object into three parts: central part, upper part, and lower part. The central part contains the cockpit and fuselage; which in turn are implemented by using several lines. The upper and lower parts are identical; consist of wings and an elevator. The wings, in turn, contain a small wing and main wing. The main wing consists of two missiles and each has a body and a head. The hierarchical model of the plane is shown in Fig. 3. The points on the lower part of the plane are the same as the upper part expect that the y-axis values shall be increased by the same value decreased in the upper one.

3 Hierarchical model of the aeroplane 


The x and y coordinates of the head (xHeadA,yHeadA) are given the initial values and then an array of Points are used to define the rest of the points based on the value of (xHeadA,yHeadA).

Programming Code:
//Coordinates of the head points of the Aeroplane
private double xHeadA, yHeadA;        
//Airoplane points

System.Drawing.Point [] points = new Point [100];

Three functions (methods) are used to define the plane's points. The first function is for the centre , the other function is for the upper part and the last function for the lower part.

Programming Code:
//Define onAiroplanePointsCenter Method
void onAiroplanePointsCenter(){
    //Get the start point to draw
    int x = (int) this.xHeadA;
    int y = (int) this.yHeadA;               
    //........... MAIN PART points 1-15 ............//               
points[0].X = x;              points[0].Y = y;             
points[1].X = x+30;           points[1].Y = y;

//Define onAiroplanePointsUpWing Method
private void onAiroplanePointsUpWing()
    //Get the start point to draw              
int x = (int) this.xHeadA;
y = (int) this.yHeadA;
    //........... UP WING points 16-35 ............//
points[16].X = x+220;         points[16].Y = y-20;


//Define onAiroplanePointsDownWing Method         
private void onAiroplanePointsDownWing(){
    //Get the start point to draw
x = (int) this.xHeadA;
int y = (int) this.yHeadA;
    //........... DOWN WING points 16-35 ............//
points[16].X = x+220;         points[16].Y = y+20;

To draw the object, graphics smoothing mode is used. The smoothing mode, as stated in the msdn help, specifies whether lines, curves, and the edges of filled areas use smoothing (also called antialiasing). Fig.4 shows the effect of using Graphics.SmoothingMode property.

Programming Code:
//use SmoothingMode to make lines as smooth as possible

g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

Fig.4 Graphics.SmoothingMode Property  Line1: without SmoothingMode Line2: with the use of SmoothingMode    

Three types of classes have been used to make the graphics in C#. Firstly, the Color Class, which is used to define the colour either by choosing a well-known colour or by using the ARGB (Alpha, Red, Green, Blue) colour system. Secondly, the Pen Class, which is used to define an object used to draw lines and curves. Lastly, the Brush Class, which is used to define an object used to draw lines and curves.

Programming Code:
//Select Colors According to the planeNo              
Color color1 = Color.White, color2 = Color.White, color3 = Color.White;

//Assign Colors for each planeNo
color2 = Color.Orange;
color3 = Color.SaddleBrown;                                
color2 = Color.Turquoise;    
color3 = Color.Green;                                      
color2 = Color.Pink;
color3 = Color.Purple;

//Drawing with Pens: pen1, pen2, pen3, pen4
System.Drawing.Pen pen1 =  new Pen (color1,3f);
System.Drawing.Pen pen2 =  new Pen (color3,2f);
System.Drawing.Pen pen3 =  new Pen (color1,2f);
System.Drawing.Pen pen4 =  new Pen (color2,4f);

//Drawing with texture brushes: txBrush1, txBrush2, txBrush3, txBrush4
               System.Drawing.SolidBrush txBrush1 = new SolidBrush(color1);              
System.Drawing.SolidBrush txBrush2 = new SolidBrush(color2);
System.Drawing.SolidBrush txBrush3 = new SolidBrush(color3);


Creating Graphics using DrawLine Method:

The whole aeroplane object is drawn by using lines. Lines, in turn, are drawn by using Graphics.DrawLine method which creates a line connecting two points specified by the coordinate pairs.


Drawing the central part of the plane:


//#5.1 : Draw lines in the central part to make the shape better
g.DrawLine (pen2,points[13],points[15]);                             
//#5.2 : Draw the main part (central part of the plain)                
g.DrawLine (pen4,points[0],points[1]);
//#5.3 : Draw inner parts
g.DrawLine (pen3,points[4].X,points[4].Y,points[4].X+60,points[4].Y);


Drawing the upper part of the plane:


 Drawing the lower part of the plane:



Filling areas with colours:

Several areas in the aeroplane are filled with colours by using Graphics.FillPolygon method which fills the interior of a polygon defined by an array of points.


Programming Code:               
//Step #1: Define center and up wing points

//Step #2: Fill the whole center half-up in the plane
System.Drawing.Point [] center_up = new Point [6];
center_up[0] = points[16]; center_up[1] = points[17];
center_up[2] = points[18]; center_up[3] = points[34];
center_up[4] = points[35]; center_up[5] = points[15];


Drawing Missiles on the main wing:

The missiles are numbered from one up to four. Two methods are defined to draw missiles. The first method is used to determine the x and y coordinates to start the missile based on its number. The second one is used to draw each missile based on the received x and y coordinated from the previous method.



Painting and Geometric Transformations:

In C#, we can overwrite (override) OnPaint method in order to control what to draw on the screen. One aeroplane is drawn and then scaling and translating transformations using ScaleTransform and TranslateTransform are performed in order to draw another two aeroplanes.

Programming Code:         
override void OnPaint(PaintEventArgs e){
g = e.Graphics ;              
k = e.Graphics;
g.ScaleTransform(0.8f, 0.8f);
g.ScaleTransform(0.5f, 0.5f);
g.ScaleTransform(0.5f, 0.5f);
Font font = new Font("Times New Roman", 14, FontStyle.Bold);
g.DrawString("Airoplane Position : " + this.xHeadA + " X " +
this.yHeadA , font, Brushes.Yellow,     this.Width/2-200, 10);              


Drawing the stars to enhance the scene:

Now, the image contains two named objects: aeroplanes and missiles. One star is drawn in the screen using the same graphics techniques explained in the previous paragraphs. Then, scaling, translation and rotation are used in order to get several size, position and shape (according to the rotation angle) of several stars. 




II. Animating the Image

This project employs the timer tool in C# and hence a Timer-Based Animation is implemented very well.  Here is the algorithm that has been used for the animation.



Note that the double buffer capability in C# is used in order to hide the movement steps and to make the animation as real as possible.

//Set Double Buffer to the drawing in the screen              



Finally, here are some of the methods that have been written to implement the previous algorithm.


Programming Code (1)


III. conclusion

Creating graphics using geometric primitives such as lines is not a complicated process if each object in the image is implemented by a hierarchical model. The idea of animation can be simplified by designing an algorithm to show how each object shall move in a certain time to a certain location during the animation.  

My Summary:

Summary Doc. Advanced Computer Graphics - Summary of Geometric Transformations
By: Salha Alzahrani
- Translation
- Scaling
- Rotation
- Inverse Transformations
- Composite 2D Pivot-Point Rotation
- Composite 2D Fixed-Point Scaling
- Composite 2D Translations
- Composite 2D Scaling
- Composite 2D Rotation
- Reflection
- Shear

:: Home :: Lecture notes :: Calendar :: E-Learning :: Contact us :: Guest book :: Taif University :: CIT ::

All rights reserved for © 2008-2012

For best resolution use: 1024 x 768
You are using :