ABSTRACT

Title of project : Graphics Editor

Aim : To implement a graphics editor which must satisfy the following functions :
1. OpenGL based graphics editor, which provides options for drawing primitives like line, rectangle , circle , ellipse. 2. Drawing options such as pencil , eraser , paint , brush and spray. 3. Other options includes reset and exit.

Software requirement specifications:

Platform used :
WINDOWS

Software used : OPENGL

Explanation :
In short all the basic features necessary for the graphics editor have been provided. Care is taken to provide an easy-to-use mouse interface involving an icon-based interaction to provide an intuitive feel to our graphics editor.

Graphics editor

TABLE OF CONTENTS
INDEX 1. Introduction 1.1 Computer Graphics
1.2 1.3 1.4 OpenGL

Page No.

2
2

Project Goal Scope

10 10

2.

Introduction To Graphics Editor 2.1 2.2 Editor Basic Functions Of Editor 11 13 14 15 17

3. 4. 5.

Hardware And Software Requirements Design Testing and Results

Dept. of CSE, BNMIT

2009-2010

Graphics editor

6.

Implementation 6.1 6.2 6.3 6.4 Main Algorithm Algorithm used Module Description Snapshot 18 20 23 25 31

7.

Conclusion and Future Enhancements

8.

Bibliography

32

Dept. of CSE, BNMIT

2009-2010

Graphics editor

1.

Introduction 1.1 Computer Graphics

Graphics provides one of the most natural means of communicating with a computer,

since our highly developed 2D and 3D pattern-recognition abilities allow us to perceive and process pictorial data rapidly and efficiently. Interactive computer graphics is the most important means of producing pictures since the invention of photography and television. It has the added advantage that, with the computer, we can make pictures not only of concrete real world objects but also of abstract, synthetic objects, such as mathematical surfaces and of data that have no inherent geometry, such as survey results. Using this editor you can draw and paint using the mouse. It can also perform a host of other functions like drawing lines, circles, polygons and so on. Interactive picture construction techniques such as basic positioning methods, rubber-band methods, dragging and drawing are used. Block operations like cut, copy and paste are supported to edit large areas of the workspace simultaneously. It is user friendly and intuitive to use.

1.2

OpenGL
OpenGL(open graphics library) is a standard specification defining a cross language

cross platform API for writing applications that produce 2D and 3D computer graphics. The interface consists of over 250 different function calls which can be used to draw complex 3D scenes from simple primitives. OpenGL was developed by silicon graphics Inc.(SGI) in 1992 and is widely used in CAD ,virtual reality , scientific visualization , information visualization and flight simulation. It is also used in video games, where it competes with direct 3D on Microsoft Windows platforms.OpenGL is managed by the non profit technology consortium , the khronos group, Inc Dept. of CSE, BNMIT 2009-2010

Graphics editor

OpenGL serves two main purpose : To hide the complexities of interfacing with different 3D accelerators,by presenting programmer with a single, uniform API To hide the differing capabilities of hardware platforms , by requiring that all Implementations support the full openGL feature set. OpenGL has historically been influential on the development of 3D accelerator, promoting a base level of functionality that is now common in consumer level hardware: Rasterized points, lines and polygons are basic primitives. A transform and lighting pipeline . Z buffering . Texture Mapping. Alpha Blending.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

glClearColor(0.0,0.0,0.0,0.0);
Description
This function sets the color value that will be used when clearing the color buffer with glClear(GL_COLOR_BUFFER_BIT).

glMatrixMode(GL_PROJECTION);
Description
This function is used to determine which matrix stack (GL_MODELVIEW, GL_PROJECTION, or GL_TEXTURE) will be used for matrix operations

glLoadIdentity();
Description
This function replaces the current Transformation matrix with the Identity matrix. This essentially resets the coordinate system to eye coordinates.

gluOrtho2D(0.0,1010.0,0.0,700.0);
Description
This function defines a 2D orthographic projection matrix. This projection matrix is equivalent to calling glOrtho with near and far set to 0 and 1, respectively.

glColor3fv(colors[s]);
Description
This function sets the current color by specifying separate red, green, and blue
Dept. of CSE, BNMIT 2009-2010

Graphics editor

components of the color. Some functions also accept an alpha component. Each component represents the range of intensity from zero (0.0) to full intensity (1.0). Functions with the v suffix take a pointer to an array that specifies the components

glVertex2i(cx,cy);
Description
This function is used to specify the vertex coordinates of the points, lines, and polygons specified by a previous call to glBegin. This function may not be called outside the scope of a glBegin/glEnd pair.

glEnd();
Description
This function is used in conjunction with glBegin to delimit the vertices of an OpenGL primitive. Multiple vertices sets may be included within a single glBegin/glEnd pair, as long as they are for the same primitive type. Other settings may also be made with additional OpenGL commands that affect the vertices following them. Only these OpenGL functions may be called within a glBegin/glEnd sequence: glVertex, glColor, glIndex, glNormal, glEvalCoord, glCallList, glCallLists, glTexCoord, glEdgeFlag, and glMaterial glPointSize(1.0);

glBegin(GL_LINE_LOOP);
Description
This function is used in conjunction with glEnd to delimit the vertices of an OpenGL primitive. Multiple vertices sets may be included within a single glBegin/glEnd pair, as long as they are for the same primitive type. Other settings may also be made with
Dept. of CSE, BNMIT 2009-2010

Graphics editor

additional OpenGL commands that affect the vertices following them. Only these OpenGL functions may be called within a glBegin/glEnd sequence: glVertex,glColor, glIndex, glNormal, glEvalCoord, glCallList, glCallLists, glTexCoord, glEdgeFlag, and glMaterial

glReadPixels(x,y,1,1,GL_RGB,GL_FLOAT,curfiller)
Syntax
void glReadPixels(GLint x, GLint y, GLsizei width, GLsizei height, GLenum format, GLenum type, const Glvoid *pixels);

Description
This function copies pixel data from the framebuffer to memory. Besides the format and type arguments, several other parameters define the encoding of pixel data in memory and control the processing of the pixel data before it is placed in the memory buffer. See the references for glPixelMap, glPixelStore, glPixelTransfer. glRasterPos3f(x, y,z);

glutBitmapCharacter(font, *c);
Description
Without using any display lists, glutBitmapCharacter renders the character in the named bitmap font. The available fonts are: GLUT BITMAP 8 BY 13 A fixed width font with every character fitting in an 8 by 13 pixel rectangle. The exact bitmaps to be used is defined by the standard X glyph bitmaps for the X font named:

glRectf(5+k,620,80+k,600);
This function is an efficient method of specifying a rectangle as two corner points. The rectangle is drawn in the xy plane at z = 0.
Dept. of CSE, BNMIT 2009-2010

Graphics editor

glPointSize
Description
This function sets the diameter in pixels of points drawn with the GL_POINTS primitive.

glutInit(&argc,argv);
Description
glutInit will initialize the GLUT library and negotiate a session with the window system. During this process, glutInit may cause the termination of the GLUT program with an error message to the user if GLUT cannot be properly initialized. Examples of this situation include the failure to connect to the window system, the lack of window system support for OpenGL, and invalid command line options. glutInit also processes command line options, but the specific options parse are window system dependent.

glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
Description
The initial display mode is used when creating top-level windows, subwindows, and overlays to determine the OpenGL display mode for the to-be-created window or overlay. Note that GLUT RGBA selects the RGBA color model, but it does not request any bits of alpha (sometimes called an alpha buffer or destination alpha) be allocated. To request alpha, specify GLUT ALPHA. The same applies to GLUT LUMINANCE

Dept. of CSE, BNMIT

2009-2010

Graphics editor

glutInitWindowSize(1010,700); glutInitWindowPosition(0,0);
Description
Windows created by glutCreateWindow will be requested to be created with the current initial window position and size. The initial value of the initial window position GLUT state is -1 and -1. If either the X or Y component to the initial window position is negative, the actual window position is left to the window system to determine. The initial value of the initialwindow size GLUT state is 300 by 300. The initialwindow size componentsmust be greater than zero. The intent of the initial window position and size values is to provide a suggestion to the window system for a windows initial size and position. The window system is not obligated to use this information. Therefore, GLUT programs should not assume thewindow was created at the specified size or position.

glutCreateWindow("EDITOR");
glutDisplayFunc(display);

Description
glutDisplayFunc sets the display callback for the current window. When GLUT determines that the normal plane for the window needs to be redisplayed, the display callback for the window is called. Before the callback, the current window is set to the window needing to be redisplayed and (if no overlay display callback is registered) the layer in use is set to the normal plane. The display callback is called with no parameters. The entire normal plane region should be redisplayed in response to the callback (this includes ancillary buffers if your program depends on their state).

Dept. of CSE, BNMIT

2009-2010

Graphics editor

glutMouseFunc(mouse);
glutMouseFunc sets the mouse callback for the current window. When a user presses and releases mouse buttons in the window, each press and each release generates a mouse callback. The button parameter is one of GLUT LEFT BUTTON, GLUT MIDDLE BUTTON, or GLUT RIGHT BUTTON. For systems with only two mouse buttons, it may not be possible to generate GLUT MIDDLE BUTTON callback. For systems with a single mouse button, it may be possible to generate only a GLUT LEFT BUTTON callback

glutMotionFunc(mousemotion); glutPassiveMotionFunc(motion);
Description
glutMotionFunc and glutPassiveMotionFunc set the motion and passive motion callback respectively for the current window. The motion callback for a window is called when the mouse moves within the window while one or more mouse buttons are pressed. The passive motion callback for a window is called when the mouse moves within the window while no mouse buttons are pressed. The x and y callback parameters indicate the mouse location in window relative coordinates. Passing NULL to glutMotionFunc or glutPassiveMotionFunc disables the generation of the mouse or passive motion callback respectively.

glutMainLoop();
Description
glutMainLoopenters theGLUT event processing loop. This routine should be called at most once in A glut program. Once called, this routine will never return. It will call as necessary any callbacks that have been registered.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

1.3 Project Goal

The aim of this project is to develop a 2-D graphics package which supports basic operations which include creating objects like lines, circles, polygons, spirals, etc and also transformation operations like translation, rotation, etc on such objects. The package must also have a user-friendly interface that may be menu-oriented, iconic or a combination of both.

1.4 Scope
It provides most the features that a 2D graphic editor should have. It is developed in VC++. it has been implemented on WINDOWS platform. The 2D graphics package designed here provides an interface for the users for handling the display and manipulation of basic picture objects like point, line, rectangle, ellipse, polygon, spiral, etc. It can also perform operations on selected objects like clipping, translation, rotation, area filling etc. It is capable of loading and saving the picture files. The interface is user -friendly with icons for all the functions. The mouse is the main input device used.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

2.INTRODUCTION TO GRAPHICS EDITOR 2.1 Editor

Graphics provides one of the most natural means of communicating with a computer, since our highly developed 2D and 3D pattern-recognition abilities allow us to perceive and process pictorial data rapidly and efficiently. Interactive computer graphics is the most important means of producing pictures since the invention of photography and television. It has the added advantage that, with the computer, we can make pictures not only of concrete real world objects but also of abstract, synthetic objects, such as mathematical surfaces and of data that have no inherent geometry, such as survey results. Using this editor you can draw and paint using the mouse. It can also perform a host of other functions like drawing lines, circles, polygons and so on. Interactive picture construction techniques such as basic positioning methods, rubber-band methods, dragging and drawing are used. Block operations like cut, copy and paste are supported to edit large areas of the workspace simultaneously. It is user friendly and intuitive to use. Graphics Editors can normally be classified as: 2D Graphics Editors. 3D Graphics Editors. A 2D Graphics Editor is used to draw 2D primitives (Line, Rectangle, Circle, Ellipse, etc. and alter those with operations like cut, copy and paste.
Dept. of CSE, BNMIT 2009-2010

Graphics editor

These may also support features like layers and object precision etc. A simple 2D Graphics Editor should include the following features:

Facilities: Cursor Movement, Editing picture objects Good User Interface: GUI / Toolbars / Icon based User Interface.

A 3D Graphics Editor refers to program used to create 3D computergenerated imagery. There are typically many stages in the "pipeline" that studios use to create 3D objects for film and games. Many 3D modelers are general-purpose and can be used to produce models of various real-world entities, from plants to automobiles to people. Some are specially designed to model certain objects, such as chemical compounds or internal organs. 3D modelers allow users to create and alter models via their 3D mesh. Users can add, subtract, stretch and otherwise change the mesh to their desire. Models can be viewed from a variety of angles, usually simultaneously. Models can be rotated and the view can be zoomed in and out. 3D modelers are used in a wide variety of industries. The medical industry uses them to create detailed models of organs. The movie industry uses them to create and manipulate characters and objects for animated and real-life motion pictures. The video game industry uses them to create assets for video games. The science sector uses them to create highly detailed models of chemical compounds. The architecture industry uses them to create models of proposed buildings and landscapes. The engineering community uses them to design new devices, vehicles and structures as well as a host of other uses. [5]

Dept. of CSE, BNMIT

2009-2010

Graphics editor

2.2 Basic Functions Of Editor

The objective is to build a graphics editor having all required operations that a normal graphics editor should offer. The coding is implemented for a single canvas graphics editor. In this editor importance is given to a simple user interface and implementation of all basic graphic routines and basic graphic editing options. The basic requirements of the graphics editor were analysed to be: 1. User Interface

2. Color Selection

3. Graphics Drawing

Dept. of CSE, BNMIT

2009-2010

Graphics editor

3.HARDWARE AND SOFTWARE REQIREMENTS

Hardware Requirements
Pentium or higher processor. 128 MB or more RAM. A standard keyboard,compatible mouse and a VGA monitor.

Software Requirements
This graphics package has been designed for WINDOWS 9X,XP and higher Versions. OpenGL libraries are used and hence VC++ v6.0 or later is required. required. OpenGL libraries are used and hence VC++ v6.0 or later is

Development Platform WINDOWS XP Language Used In Coding MICROSOFT VISUAL C++ V6.0

Dept. of CSE, BNMIT

2009-2010

Graphics editor

4.Design

The basic requirements of the graphics editor were analysed to be:

User Interface- The presentation of the graphics editor is crucial to

its acceptance by its users. The package should provide easy selection and implementation of the features through iconic interfaces.

Color Selection -

To select a suitable color for drawing the

primitives. The editor implements support for drawing various shapes mentioned above. The implementation is done using the graphics scan conversion algorithm.

Graphics Drawing

To draw basic primitives like line, circle,

ellipse, rectangle on the canvas and to use tools like pencil, flood filling, eraser, copy, cut, paste etc. to manipulate the image.

Line: Line is drawn by selecting two points start point and the end
point. The start point begins with mouse click and end point is the point where mouse button is released.

Rectangle: Rectangle is drawn by selecting a start point and

dragging to end point of required size

Circle: Circle is drawn by selecting a point and dragging

thereafter till the desired radius.

Ellipse: Ellipse is drawn by selecting a start point and dragging

till the required radius is achieved.
2009-2010

Dept. of CSE, BNMIT

Graphics editor

Freehand Drawing: A freehand drawing is the one in which

wherever mouse is dragged pixels are plotted

Fill Shapes: This is done by selecting a co-ordinate by click of

mouse and the enclosed area of the point is filled with the selected color.

Other Features:

Eraser: This feature allows deleting particular portions of Spray: This feature allows plotting of pixels randomly in Clear :Clears the entire user area. Bullet : This allows us to create bullets which can be Mesh : This allows us to create a rectangular mesh.

figure as selected by click of the user..

the neighboring regions where the mouse is clicked.

used for numbering.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

5. TESTING AND RESULTS

The full graphics editior has been designed under windows operating system using Visual C++ 6.0 .the options that in the editor satisfies the basic need of a good editor . Using GL/glut.h library and built-in function it makes easy to design good graphics package such as the graphics editor. The editor is very useful in graphical primitives drawing such as lines, rectangles, circles, ellipses, free hand drawing .The editor is very useful in graphics editing. The editor has been thoroughly tested for any bugs that may have crept in our design or implementation so far no such bugs have been discovered. Though the aim was to develop a complete graphics editor because of shortage of time lots of features could not be implemented . Testing involves unit testing, module testing and system testing.

Unit testing:
Here the individual components are tested to ensure that they operate correctly. Each component is tested independently ,without other system components.

Module testing:
Module is a collection of dependent components such as procedures and functions . Since the module encapsulates related components can be tested without other system modules. The testing process is concerned with finding errors which results from erroneous function calls from the main function to various individual functions.

System testing:
The modules are integrated to make up the entire system . The testing process is concerned with finding errors with results from unanticipated interactions between module and system components. It is also concerned with validating that the system meets its functional and non-functional requirements.
Dept. of CSE, BNMIT 2009-2010

Graphics editor

IMPLEMENTATION
6.1 Main Algorithm

The main algorithm for the graphics editor is the one shown below. 1. Initialize the graphics window and its size using glut functions. 2. Register the mouse ,passivemotion and motion callbacks in main function. 3. Draw the toolbar icons, color palette, and the user area. 4. Repeat the following steps until the user wants to exit 4.1 Check if left button of the mouse is clicked. 4.2 If so then 4.2.1 Check to see if mouse is on one of the buttons on Tool bar. If so execute the function associated with that button. 4.2.2 Else check to see if the mouse is on the color palette. If so then change the present color to the selected color. 4.2.3 Else check to see if mouse is on the drawing area. If so carry on with the operation previously being executed.
Dept. of CSE, BNMIT 2009-2010

Graphics editor

5.Close the graphics window and restore back the CRT mode.

As we see above, the main algorithm is an infinite loop continuously polling for mouse movements. Whenever the mouse is clicked, the position of the mouse is checked and depending on the position of the mouse the appropriate operation is executed. The loop is exited when the user wants to quit the editor.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

6.2 Algorithms Used

Bresenhem Midpoint Circle Algorithm
Given the integer center point and radius, it generates the optimal set of pixels for the circles. We consider only 46 degrees of a circle, the second octant from x=0 to x=y=R/root(2) and use CirclePoints to display points on the entire circle. The strategy is to select which of the 2 pixels is closer to the circle by evaluating a function at the midpoint between the 2 pixels. [2] Void MidpointCircle( int radius, int value ) { int x = 0 ; int y = radius ; int d = 1 radius ; int deltaE = 3 ; int deltaSE = -2 * radius + 5; Circlepoints( x, y, value ); While( y > x ) { If( d < 0 ) { d + = deltaE ; deltaE + = 2 ; deltaSE + = 2 ; } else { d + = deltaSE ; deltaE + = 2 ; deltaSE + = 4 ; y--; } x++;
Dept. of CSE, BNMIT 2009-2010

/* Select E */

/* Select SE */

Graphics editor

CirclePoints( x, y, value ); } }

Scanline Area Filling Algorithm

This algorithm draws a filled rectangle or square of chosen color when the mouse is clicked on the user area and dragged on to the required size void edgedetect(float x1,float y1,float x2,float y2,int *le,int *re) { float mx,x,temp; int i; if((y2-y1)<0) { temp=y1; y1=y2;y2=temp; temp=x1;x1=x2;x2=temp; } if((y2-y1)!=0) mx=(x2-x1)/(y2-y1); else mx=x2-x1; x=x1; for(i=y1;i<y2;i++) { if(x<(float)le[i]) le[i]=(int)x; if(x>(float)re[i])
Dept. of CSE, BNMIT 2009-2010

Graphics editor

re[i]=(int)x; x+=mx; } }

SCANFILL ALGORITHM
void scanfill(float x1,float y1,float x2,float y2,float x3,float y3,float x4,float y4) { int le[2000],re[2000]; int i,y; if(test(x1,y1)) if(test(x2,y2)) if(test(x3,y3)) if(test(x4,y4)) { for(i=0;i<2000;i++) { le[i]=2000; re[i]=0; } edgedetect(x1,y1,x2,y2,le,re); edgedetect(x2,y2,x3,y3,le,re); edgedetect(x3,y3,x4,y4,le,re); edgedetect(x4,y4,x1,y1,le,re); for(y=0;y<2000;y++) { if(le[y]<=re[y])
Dept. of CSE, BNMIT 2009-2010

Graphics editor

for(i=(int)le[y];i<(int)re[y];i++) draw_pixel(i,y); } }

6.3 Modules Description

void myinit();
Sets the background color and Orthographic Window .

int test(int cx,int cy);

Tests if point p(cx,cy) is within user area .

void draw_pixel(GLint cx,GLint cy);

Draws a Point given by p(cx,cy).

void scanfill(float x1,float y1,float x2,float y2,float x3,float y3,float x4,float y4);
This function draws a filled rectangle or square of chosen color when the mouse is clicked on the user area and dragged on to the required size.

void spray(int x,int y);

A spray function that draws points randomly around a point where mouse is clicked.

void draw(int x,int y);

Draws the point wherever mouse is moved while button is held.Used for Pencil and Brush.

int area() ;
Checks weather the co-ordinates returned by mouse is within user area . Dept. of CSE, BNMIT 2009-2010

Graphics editor

void renderBitmapString(float x,float y,float z,void *font,char *string);

Renders the string on the Display.

void circle(GLint hx,GLint hy,GLint r);

A function to draw circle.Uses BRESNHAM'S Midpoint Circle drawing algorithm.

void drawEllipse(float xradius, float yradius);

This function draws ellipse using values of x and y.

void display();
A display function that displays entire output on the screen.

void mouse(int btn,int state,int x,int y);

A Mouse Function that returns the co-ordinates and pressed button when Mouse is clicked.

void motion(int x,int y);

A PassiveMotion Function that returns the x and y co-ordinates when mouse is being moved.

void mousemotion(int x,int y);

A Motion Function that returns the x and y co-ordinates when mouse button is being pressed and moved.

void main(int argc,char *argv[]);

Main Function to intialise Window for output.Used for registering various functions.

void fill();
If the mouse is clicked in any closed region in the user area ,the area is filled with chosen color.

void cube3d();
Draws the 3 dimensional cube of any height , width, depth.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

void triangle3d();
Draws the 3 dimensional triangle of any height , width, depth.

void ccube3d();
Draws the 3 dimensional Colored cube of any height , width, depth.

Void keyboard();
Accepts the character from the keyboard and renders it on display.

Dept. of CSE, BNMIT

2009-2010

Graphics editor

SNAPSHOTS

Dept. of CSE, BNMIT

2009-2010

Graphics editor

Dept. of CSE, BNMIT

2009-2010

Graphics editor

Dept. of CSE, BNMIT

2009-2010

Graphics editor

Dept. of CSE, BNMIT

2009-2010

Graphics editor

Dept. of CSE, BNMIT

2009-2010

Graphics editor

Conclusion And Future Enhancements

This graphics is very user friendly tool. The user can very easily use this tool to draw or manipulate a drawing. The interface is mouse driven and the user can select a function by clicking on an icon representing that function. For the users help the function performed by each icon is displayed in the status bar as soon as the mouse pointer moves over the icon. We have tried our best to make this editor very realistic, so that the user does not face any trouble when switching over from any real life graphics editor to this highly useful one. The following are some of the features that are planned to be supported in the future versions of the graphics editor. The package currently is platform dependent and runs only On DOS based machines so making it portable for other machines also. Features like "Undo" and "Redo " could be provided.

The editor saves images in a very raw format and cannot load or save in standard image file formats such as bmp, jpeg, gif. Therefore Support for different file formats like bmp, jpeg, gif etc. could be provided

Support for advanced 3d drawings and transformations. Only Single Document Interface (SDI) has been provided, multiple document interface can be provided.
Dept. of CSE, BNMIT 2009-2010

Graphics editor

Bibliography

1)Reference from Interactive Computer Graphics by EDWARD ANGEL 2)Donald Hearn and Pauline Baker <computer graphics opengl version 2nd edition, Pearson education,2003> 3) James D Folley,Andries Van Dam ,Steven K Feiner ,John F Huges <computer graphics adison Wesley -1997>

urls:

www.wikipedia.org www.codeguru.com www.openglforum.com

Dept. of CSE, BNMIT

2009-2010