Computer Graphics Project

2014

I.

Synopsis

Introduction
1. Generate a graph to analyze the up and downs of a share market
using DDA algorith is about taking the data and showing it in chart type.
Advantage of chart is that it will be easy to understand the data differences
which is given by the user in terms of numbers, he can compare it with
previous

data

in

chart,

he

can

see

the

whether

there

is

improvement/deterioration over the time. Chart is used because it is a

graphical representation of data, where the data is represented as columns.
Charts are often used to ease understanding of large quantities of data and
the relationships between parts of the data. Charts can usually be read
more quickly than the raw data that they are produced from. They are used
in a wide variety of fields, and can be created by hand (often on graph
paper) or by computer using a charting application .These options are
implemented using DDA line algorithm.

2. Developement of

2D Text screen saver with Rotation and

Translation .A screensaver (or screen saver) is a computer program that

blanks the screen or fills it with moving images or patterns when the
computer is not in use. A screen saver also an animated image that is
activated on a personal computer display when no user activity has been
sensed for a certain time or sometimes a user himself makes the screen
saver to run for some time .In this application test input is translated and
rotated as the screen saver application.

Dept.of MCA, RVCE

Page No.1

Computer Graphics Project

2014

II.

Design Specification

Design Specification provides explicit information about the requirements for the
project and how the project has been implemented. It is used to design document that
describes all data, architectural, interface and component-level design for the
software.
1. Generate a graph to analyze the up and downs of a share market using
DDA algorith
DDA algorithm is used to design the chart, when the user provides data, the
first data is taken and the line is drawn for that data, same functionality is
carried out for rest of the data provided by the user. DDA line algorithm is
called for n times, n is the number of times given by the user to draw columns
with n number of datas.
DDA line Algorithm
DDA Line ( X1, Y1, XN, YN):
Description: Here X1 and Y1 denote the starting x coordinate and y
coordinate of the line
and XN and YN denote the ending x coordinate and y coordinate.
1. Set M = (YN Y1) / (XN X1) [Calculate slope of line]
2. Repeat For I = X1 to XN
3. If (M <= 1) Then
4. Set DX = 1
5. Set DY = M * DX
6. Else
7. Set DY = 1
8. Set DX = DY / M
[End of If]
9. Set X1 = X1 + DX
10. Set Y1 = Y1 + DY
11. Call PutPixel(X1, Y1)
[End of For]
12. Exit
Dept.of MCA, RVCE

Page No.2

Computer Graphics Project

2014

Steps to Design X and Y axis

Programmer has to give x, y and z coordinates for two lines.

DDA line function has to be called for two times with the given
coordinates.

This is a predefined line, so programmer has set the x,y and z coordinates and two lines has been drawn.

Steps to Design a chart

User first has to insert the number of columns he want that is n.

Then user has to enter data for n number times.

First draw the x and y axis.

Using DDA line drawing algorithm draw the lines for n number of
times

While drawing the lines use different colours for different lines.

Digital Differential Analyzer:

DDA algorithm is an incremental scan conversion method. Here we perform
calculations at each step using the results from the preceding step. The characteristic
of the DDA algorithm is to take unit steps along one coordinate and compute the
corresponding values along the other coordinate. The unit steps are always along the
coordinate of greatest change, e.g. if dx = 10 and dy = 5, then we would take unit
steps along x and compute the steps along y.

Suppose at step i we have calculated (xi, yi) to be a point on the line.

Since the next point (x i+1,y i+1) should satisfy y/ x =m, where y= y
i+1yi and x= x i+1xi, we have y i+1= yi + m x or x i+1=xi+ y/m.

These formulas are used in DDA algorithm as follows. When |m| 1, we

start with x = x1 (assuming that x1 <x2) and y = y1, and set x =1
(i.e., unit increment in the x direction). The y coordinate of each
successive point on the line is calculated using y i+1= yi + m.

When |m| >1, we start with x= x1 and y= y1 (assuming that y1 <

y2), set y =1 (i.e., unit increment in the y direction). The x coordinate
of each successive point on the line is calculated using x i+1=xi+ 1/m.
This process continues until x reaches x2 (for m| 1 case )or y reaches
y2 (for m| > 1 case ) and all points are scan converted to pixel points.

Dept.of MCA, RVCE

Page No.3

Computer Graphics Project

2014

The explanation is as follows:

In DDA algorithm we have to find the new point xi+1 and yi+1 from the
existing points xi and yi. As a first step here we identify the major axis and the
minor axis of the line to be drawn. Once the major axis is found we sample the
major axis at unit intervals and find the value in the other axis by using the
slope equation of the line.

For example if the end points of the line is given as (x1,y1)= (2,2) and (x2,
y2)= (9,5). Here we will calculate y2-y1 and x2-x1 to find which one is
greater. Here y2-y1 =3 and x2-x1 =7; therefore here the major axis is the x
axis. So here we need to sample the x axis at unit intervals i.e. x = 1 and we
will find out the y values for each x in the x axis using the slope equation.

In DDA we need to consider two cases; one is slope of the line less than or
equal to one (|m| 1)and slope of the line greater than one (m| > 1). When |m|
1 means y2-y1 = x2-x1 or y2-y1 <x2-x1.In both these cases we assume x to be
the major axis. Therefore we sample x axis at unit intervals and find the y
values corresponding to each x value.

We have the slope equation as

y=m x
y2-y1 = m (x2-x1)

In general terms we can say that y i+1 - yi = m(x i+1 - xi ). But here x = 1;
therefore the equation reduces to y i+1= yi + m = yi + dy/dx.

When m| > 1 means y2-y1> x2-x1 and therefore we assume y to be the major
axis. Here we sample y axis at unit intervals and find the x values
corresponding to each y value. We have the slope equation as
y=m x
y2-y1 = m (x2-x1)

In general terms we can say that y i+1 - yi = m(x i+1 - xi ). But here y = 1;
therefore the equation reduces to 1 = m(x i+1 - xi). Therefore
x i+1=xi+ 1/m
x i+1=xi+ dx/dy

The DDA algorithm is faster than the direct use of the line equation since it calculates
points on the line without any floating point multiplication.

Dept.of MCA, RVCE

Page No.4

Computer Graphics Project

2014

Advantages of DDA Algorithm

1. It is the simplest algorithm and it does not require special skills for implementation.
2. It is a faster method for calculating pixel positions than the direct use of equation y
= mx + b. It eliminates the multiplication in the equation by making use of raster
characteristics, so that appropriate increments are applied in the x or v direction to
find the pixel positions along the line path.

2. Developement of 2D Text screen saver with Rotation and Translation in

this the users text is called at a specified positions and the color of the text is
set .Calling the users text with translation,rotation and delay makes this
special and gives the screen saver effects.
Steps to Design text

User has to give a text which is stored in array.

The text rendered onto screen using coordinates specified by user.

The text is filled with different colours.

Steps to call text

The co-ordinates x and y are applied.

The coordinates are passed to the drawstring function which draws the
text on to screen using glutBitmapChar() function.

Delay function

Delay function is used to keep some delay between calling the text
again, so that it makes effect of screen saver.

Initialize i =0; Repeat until i <= 2000000; Increment i by 1.

Applying rotation

glRotatef(angle, 0.0, 0.0, 1.0);

Applying translation

glTranslatef(-750, 0, 0);

Dept.of MCA, RVCE

Page No.5

Computer Graphics Project

2014

III.

Graphical Features

1. Generate a graph to analyze the up and downs of a share market using

DDA algorith

Different RGB colors has been set glColor3f(1.0,0.0,0.0) to GL_POINTS to

make columns colorful.

Gradient effect: Gradient effect has been implemented with GL_LINE

function by giving different values to glcolor for each vertex in polygon gives
the gradient effect.

The text on the graphical window is drawn with the help glutBitmapCharacter.

List of OpenGL functions incorporated in this project is as follows

glClear(GL_COLOR_BUFFER_BIT)
gluOrtho2D

glColor3f

glMatrixMode

GL_PROJECTION

glClearColor

GL_POINTS

glBegin, glEnd

glFlush

glVertex2i

GL_LINES

GL_LINE_STRIP

GL_POLYGON

GL_LINE_LOOP

glRasterPos2i glutBitmapCharacter

2. Develop 2D Text screen saver with Rotation and Translation :

The text animation is implemented with glutStrokeCharacter with rotation and

translation function to make text to display on the screen with translation and
rotation .
glRotatef(angle, 0.0, 0.0, 1.0);
glTranslatef(-750, 0, 0);
len = (int) strlen(message);
for (i = 0; i < len; i++) {

Dept.of MCA, RVCE

Page No.6

Computer Graphics Project

2014

glutStrokeCharacter(font, message[i]);
Delay : Delay function is implemented to suspend the execution of a program for a
particular time. Here unsigned int is the number of milliseconds ( 1 second = 1000
milliseconds ).
void delay()
{
for( int i = 0; i <= 2000000; i++)
}
Graphic Library

#include <GL/glut.h> Because a very large window system software vendor

(who will remain nameless) has an apparent inability to appreciate that
OpenGL's API is independent of their window system API, portable ANSI C
GLUT programs should not directly include <GL/gl.h> or <GL/glu.h>.

Instead, ANSI C GLUT programs should rely on <GL/glut.h> to include the

necessary OpenGL and GLU related header files.

The ANSI C GLUT library archive is typically named libglut.a on Unix

systems. GLUT programs need to link with the system's OpenGL and GLUT
libraries (and any libraries these libraries potentially depend on).

A set of window system dependent libraries may also be necessary for linking
GLUT

programs.

For

example,

programs

using

the

X11

GLUT

implementation typically need to link with Xlib, the X extension library,

possibly the X Input extension library, the X miscellaneous utilities library,
and the math library.
Window Management Functions:

glutInit(int *argc, char *argv) : It initializes GLUT and processes any command

line arguments.
glutInitDisplayMode(unsigned int mode) : It specifies whether to use an RGBA
or color-index color model. One can also specify whether they want a single or double
buffered window.
glutInitWindowPosition(int x,int y) : It specifies the screen location for upperleft corner of the window.
glutInitWindowSize(int w, int h) : It specifies the size in pixels of window.
glutCreateWindow(char *string) : It creates an window with openGL context. It
Dept.of MCA, RVCE

Page No.7

Computer Graphics Project

2014

returns a unique identifier for the new window. This function sends the request for
new window to be constructed.
glVertex : The main function (and probably the most used OpenGL function) is
function named glVertex. This function defines a point (or a vertex) in your 3D world
and it can vary from receiving 2 up to 4 coordinates.

glVertex2f(100.0f, 150.0f); defines a point at x = 100, y = 150, z = 0; this function

takes only 2 parameters, z is always 0. glVertex2f can be used in special cases and
won't be used a lot unless you're working with pseudo-2D sprites or triangles and
points that always have to be constrained by the depth coordinate.

glVertex3f(100.0f, 150.0f, -25.0f); defines a point at x = 100, y = 150, z = -25.0f;

this function takes 3 parameters, defining a fully 3D point in your world.

glVertex4f(100.0f, 150.0f, -25.0f, 1.0f); this is the same as glVertex3f, the only

difference is in the last coordinate that specifies a scaling factor. The scaling factor is
set to 1.0f by default. It can be used to make your 3D points look thicker than one
pixel.
glBegin and glEnd : glVertex alone won't draw anything on the screen, it merely
defines a vertex, usually of a more complex object. To really start displaying
something on the screen you will have to use two additional functions. These
functions are
glBegin(int mode); and glEnd( void );
glBegin and glEnd delimit the vertices of a primitive or a group of like primitives.
What this means is that everytime you want to draw a primitive on the screen you will
first have to call glBegin, specifying what kind of primitive it is that you want to draw
in the mode parameter of glBegin, and then list all vertices one by one (by
sequentially calling glVertex) and finally call glEnd to let OpenGL know that you're
done drawing a primitive. The parameter mode of the function glBegin can be one of
the following:

GL_POINTS

GL_LINES

GL_LINE_STRIP

Dept.of MCA, RVCE

Page No.8

Computer Graphics Project

2014

GL_LINE_LOOP

OpenGL Color effects: The goal of almost all OpenGL applications is to draw color
pictures in a window on the screen. The window is a rectangular array of pixels, each
of which contains and displays its own color. Thus, in a sense, the point of all the
calculations performed by an OpenGL implementation - calculations that take into
account OpenGL commands, state information, and values of parameters - is to
determine the final color of every pixel that's to be drawn in the window. This chapter
explains the commands for specifying colors and how OpenGL interprets them in the
following major sections:

"Color Perception" discusses how the eye perceives color.

"Computer

Color" describes

the

relationship

between

pixels

on

computer monitor and their colors; it also defines the two display modes, RGBA and
color index.

"RGBA versus Color-Index Mode" explains how the two display modes use

graphics hardware and how to decide which mode to use.

"Specifying a Color and a Shading Model" describes the OpenGL commands you

use to specify the desired color or shading model.

Dept.of MCA, RVCE

Page No.9

Computer Graphics Project

2014
2. OUTPUT SCREEN

Enter the percentage of progress in 1st year: 10

Enter the percentage of progress in 2nd year: 65
Enter the percentage of progress in 3rd year: 85
Enter the percentage of progress in 4th year: 63
Enter the percentage of progress in 5th year:40

Figure1: Graph to analyze the up and downs of a share market using DDA
algorith.
Dept.of MCA, RVCE

Page No.10

Computer Graphics Project

2014

Enter the text: HELLO RVCE

Figure 2: 2D Text screen saver with Rotation and Translation.

Dept.of MCA, RVCE

Page No.11

Computer Graphics Project

2014

Conclusion
A chart visualizes the numeric data in a graphical format.Charts are often used to ease
understanding of large quantities of data and the relationships between parts of the
data. Charts can usually be read more quickly than the raw data that they are produced
from.
They are used in a wide variety of fields, and can be created by hand (often on graph
paper) or by computer using a charting application. Certain types of charts are more
useful for presenting a given data set than others. For example, data that
presents percentages in different groups (such as "satisfied, not satisfied, unsure") are
often displayed in a pie chart, but may be more easily understood when presented in a
horizontal bar chart. On the other hand, data that represents numbers that change over
a period of time (such as "annual revenue from 1990 to 2000") might be best shown
as a line chart.
The future enhancement of the dda line algorithm for making charts can be as
making use of keyboard/Mouse events for the dragging and releasing the columns
height to compare data by making changes. We can make the columns 3D which
looks better than 2D.
Many modern television operating systems, media players and other
entertainment systems have a form of screensaver integrated. Most simply display
a logo moving around the screen. We can implements screen savers not only with text
but with this we can include different objects and applying different transformations
to it.

Dept.of MCA, RVCE

Page No.12

Computer Graphics Project

2014

References
1. Donald D. Hearn, M Pauline Baker, Warren Carthers, Computer Graphics
output primitives in Computer Graphics with OpenGL, 4th edition, Pearson,
2014, Chapter 3, Page no. 45.
2. Donald D. Hearn, M Pauline Baker, Warren Carthers, Attributes of Graphics
primitives in Computer Graphics with OpenGL, 4th edition, Pearson, 2014,
Chapter 4, Page no. 99.
3. Donald D. Hearn, M Pauline Baker, Warren Carthers, Implementation
Algorithms for Graphics primitives and attributes in Computer Graphics with
OpenGL, 4th edition, Pearson, 2014, Chapter 5, Page no. 131.

Dept.of MCA, RVCE

Page No.13

Computer Graphics Project

2014

Source Code
//1. Generate a graph to analyze the up and downs of a share market using DDA
algorith
#include<iostream>
#include<cstdio>
#include<GL/gl.h>
#include<GL/glu.h>
#include<GL/glut.h>
#include<math.h>
using namespace std;
void initialize();
void display();
void dl(int,int,int,int);
void fill(int,int);
int a[20],n;
float f=0.2,e=1.0;
int main(int argc,char** argv){
cout<<"enter the number of bar charts\n";
cin>>n;
cout<<"enter user values\n";
for(int i=0;i<n;i++)
{
cin>>a[i];
}
for(int i=0;i<n;i++)
Dept.of MCA, RVCE

Page No.14

Computer Graphics Project

2014

{
a[i]=50+(a[i]*5);
}
glutInit(&argc,argv);
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glutInitWindowSize(900,900);
glutInitWindowPosition(00,00);
glutCreateWindow("chess board");
glutDisplayFunc(display);
initialize();
glutMainLoop();
return 0;
}
void initialize()
{
glClear(GL_COLOR_BUFFER_BIT);
glClearColor(0.0,0.0,0.0,0.0);
glColor3f(1.0,1.0,1.0);
glPointSize(3.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
//gluOrtho2D(10.0,499.0,10.0,499.0);
gluOrtho2D(00.0,700.0,00.0,700.0);
}
void fill(int x,int y)
Dept.of MCA, RVCE

Page No.15

Computer Graphics Project

2014

{
for(int i=x;i<x+50;i++)
dl(i,y,i,y+50);
}
void drawString1(float x, float y){
glColor3f(1.0, 0.0, 0.0);
glRasterPos2f(x, y);
char scoreArr[300];
sprintf(scoreArr, "Progress in percentage");
for (const char* c=scoreArr; *c != '\0'; c++){
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12, *c); // Updates the
position
}
}
void drawString(float x, float y)
{
glColor3f(1.0, 0.0, 0.0);
glRasterPos2f(x, y);
char scoreArr[300];
sprintf(scoreArr, "

2010

2011

2012

2013

2014

<----work in year");

for (const char* c=scoreArr; *c != '\0'; c++)

{
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12, *c); //
Updates the position
Dept.of MCA, RVCE

Page No.16

Computer Graphics Project

2014

}
}
void display()
{
int c=0;
dl(30,50,30,570);
dl(30,50,450,50);
drawString1(7,600);
drawString(20,30);
glRasterPos2i(10,50);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,100);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'1');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,150);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'2');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,200);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'3');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,250);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'4');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,300);
Dept.of MCA, RVCE

Page No.17

Computer Graphics Project

2014

glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'5');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,350);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'6');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,400);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'7');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,450);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'8');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,500);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'9');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glRasterPos2i(10,550);
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'1');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
glutBitmapCharacter(GLUT_BITMAP_HELVETICA_12,'0');
//drawString(10.0,45.0,0.0);
for(int z=0;z<n;z++)
{
glColor3f(0.5,0.5,f);
for(int i=55;i<a[z];i++)
dl(50*z+40,i,50*(z+1),i);
f=f+0.3;
Dept.of MCA, RVCE

Page No.18

Computer Graphics Project

2014

if(f>1)
f=f-1;
glFlush();
}
glFlush();
}
void dl(int x1,int y1,int x2,int y2)
{
int s,dx,dy,m;
float xi,yi,x,y;
dx=x2-x1;
dy=y2-y1;
if(abs(dx)>abs(dy))
s=abs(dx);
else
s=abs(dy);
xi=dx/float(s);
yi=dy/float(s);
x=x1;
y=y1;
glBegin(GL_POINTS);
glVertex2f(x,y);
glEnd();
for(m=0;m<s;m++)
{
Dept.of MCA, RVCE

Page No.19

Computer Graphics Project

2014

x+=xi;
y+=yi;
glBegin(GL_POINTS);
glVertex2f(x,y);
glEnd();
}
}
//2. Develop 2D Text screen saver with Rotation and Translation)
#include <string.h>
#include <GL/glut.h>
void *font = GLUT_BITMAP_TIMES_ROMAN_24;
void *fonts[] ={GLUT_STROKE_ROMAN, GLUT_STROKE_MONO_ROMAN};
char defaultMessage[] = "Neelendu Shekhar";
char defaultMessage1[] = "Shekhar";
char *message = defaultMessage;
int angle = 0;
void tick(void)
{
angle -= 5;
glutPostRedisplay();
}
void tick1(void)
{
angle += 5;
glutPostRedisplay();
Dept.of MCA, RVCE

Page No.20

Computer Graphics Project

2014

}
void display(void)
{
int len, i;
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glRotatef(angle, 0.0, 0.0, 1.0);
glTranslatef(-750, 0, 0);
len = (int) strlen(message);
for (i = 0; i < len; i++) {
glutStrokeCharacter(font, message[i]);
}
glPopMatrix();
glutSwapBuffers();
}
void delay()
{
for(int i=0;i<=200000;i++)
}
int main(int argc, char **argv)
{
int i, submenu;
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowSize(600, 600);
Dept.of MCA, RVCE

Page No.21

Computer Graphics Project

2014

glutCreateWindow("text rotation screen saver");

glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0, 2000, 0, 2000);
glMatrixMode(GL_MODELVIEW);
glEnable(GL_LINE_SMOOTH);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glLineWidth(3.0);
glTranslatef(1000, 1000, 0);
glClearColor(0.0, 0.0, 0.0, 1.0);
glColor3f(1.0, 1.0, 1.0);
glutDisplayFunc(display);
glutIdleFunc(tick);
delay();
glutIdleFunc(tick1);
glutAttachMenu(GLUT_RIGHT_BUTTON);
glutMainLoop();
return 0;
}

Dept.of MCA, RVCE

Page No.22