CG Manual
CG Manual
List of Assignments
SN TITLE
1 Install and explore the OpenGL
Implement DDA and Bresenham line drawing algorithm to draw:
2
i) Simple Line
ii) Dotted Line
iii) Dashed Line
iv) Solid line
using mouse interface Divide the screen in four quadrants with center as (0, 0). The
line should work for all the slopes positive as well as negative.
Implement Bresenham circle drawing algorithm to draw any object. The object should
3
be displayed in all the quadrants with respect to center and radius
Implement the following polygon filling methods:
4
i) Flood fill / Seed fill
ii) Boundary fill
using mouse click, keyboard interface and menu driven programming
Implement Cohen Sutherland polygon clipping method to clip the polygon with
5 respect the viewport and window. Use mouse click, keyboard interface
Theory:
The OpenGL specification specifies exactly what the result/output of each function should be and how it
should perform. It is then up to the developers implementing this specification to come up with a solution of
how this function should operate. Since the OpenGL specification does not give us implementation details,
the actual developed versions of OpenGL are allowed to have different implementations, as long as their
results comply with the specification
Steps to Follow:
1) Open a terminal and enter the following commands to install the necessary libraries for
OpenGL development:
following commands:
NVIDIA 310.44
Cg compilerOpenGL extensions:
STEP 01-
STEP 3 –
OPEN FREE GLUT INSTALLED FILE DESTINTION -
STEP 3 –
ALSO OPEN FOLLOWING PATH-
STEP 4 –
IN freeglut OPEN INCLUDE FOLDER COPY ALL FILES AND PASTE IN ABOVE OPEN
LOCATION ININCLUDE FOLDER
STEP 5-
IN freeglut OPEN LIB FOLDER COPY ALL FILES
C:\Windows\System32
STEP 7-
NOW OPEN DEV C++ AND CREATE NEW PROJECT
STEP 8-
OPEN PROJECT OPTION AND COPY FOLLOWING COMMANDS IN LINKER OPTION
CLICK ON OK .
NOW YOU ARE READY TO WRITE PROGRAM AND RUN IT
Conclusion:
Assignment No: 02
Title: DDA and Bresenham line drawing algorithm
Problem Statement: Implement DDA and Bresenham line drawing algorithm to draw: i)
Simple Line ii) Dotted Line iii) Dashed Line iv) Solid line; using mouse interface Divide
the screen in four quadrants with center as (0, 0). The line should work for all the slopes
positive as well as negative.
Outcomes: 1. Students will be able to draw a line using DDA and Bresenham‘s algorithm.
2. Students will be able to understand object-oriented programming concepts like
inheritanceand function overloading.
Theory:
Introduction:
A line drawing algorithm is a graphical algorithm for approximating a line segment on discrete
graphical media. On discrete media, such as pixel-based displays and printers, line drawing requires
such an approximation.
Line Equation
The Cartesian slop-intercept equation for a straight line is
The 2 end points of a line segment are specified at a position (x1, y1)
Determine the values for the slope m and y intercept b with the following calculation. Here,
slopem:
m = (y2 - y1) / (x2 - x1)
m= Dy / Dx ............ (2)
y intercept b
b=y1-mx1............. (3)
m= Dy / Dx
Dy= m. Dx ...... (4)
equationm = Dy / Dx
Dx = Dy /m …… (5)
Line drawing algorithms:
• Digital Differential Analyzer
• Bresenham's Line Analyzer
The digital differential analyzer (DDA) is a scan conversion line algorithm based on
calculation either Dy or Dx.
The line at unit intervals is one coordinate and determine corresponding integer values
nearest line for the other coordinate.
Consider first a line with positive slope.
Step: 1
If the slope is less than or equal to 1, the unit x intervals Dx=1 and compute each
successive y values.
Dx=1
m = Dy / Dx
m = (y2-y1) / 1
m = (yk+1 – yk) /1
yk+1 = yk + m ……… (6)
subscript k takes integer values starting from 1, for the first point and increment by 1
untilthe final end point is reached.
m->any real numbers between 0 and 1
Calculate y values must be rounded to the nearest integer
Step: 2
If the slope is greater than 1, t he roles of x any y at the unit y intervals Dy=1 and compute each
successive y values.
Dy=1
m= Dy / Dx
m= 1/ (x2-x1)
m = 1 / (xk+1 – xk)
xk+1 = xk + (1 / m) …… (7)
Equation 6 and Equation 7 that the lines are to be processed from left end point to the
rightend point.
Step: 3
Step: 4
Here, Dy=-1
m= Dy / Dx
m = -1 / (x2 – x1)
m = -1 / (xk+1 – xk)
xk+1 = xk + (1 / m) ............... (9)
Equation 6 and Equation 9 used to calculate pixel position along a line with –ve slope.
Bresenham's Line Analyzer:
Theory: -
The basic principle of Bresenham’s line algorithm is to select the optimum raster
locations to represent a straight line.
To accomplish this, the algorithm always increments either x or y by one unit
depending on the slope of line.
The increment in the other variable is determined by examining the distance between
the actual line location & the nearest pixel. This distance is called decision variable
or error or decision parameter.
Algorithm:
1. Start.
2. Declare variables x, y, x1, y1, x2, y2, k, dx,dy,s,xi,yi
3. Initialize the graphic mode.
4. Input the two-line end-points and store the left end-points in (x1, y1).
5.Load (x1, y1) into the frame buffer;thatis,plot the first point.put
x=x1,y=y1.6.Calculate dx=x2-x1 and dy=y2-y1.
7.If abs(dx) > abs(dy), do s=abs(dx).
8.Otherwise s= abs(dy).
9. Then xi=dx/s and yi=dy/s.
10. Start from k=0 and continuing till k<s,the points will be
i. x=x+xi.
ii. y=y+yi.
11. Place pixels using putpixel at points (x,y) in specified colour.
12.Close Graph.
13.Stop.
Conclusion:.
Assignment No: 03
Problem Statement: Implement Bresenham circle drawing algorithm to draw any object. The
object shouldbe displayed in all the quadrants with respect to center and radius
Outcomes: 1. Students will be able to draw a circle using Bresenham‘s circle drawing algorithm.
2. Students will be able to understand object-oriented programming concepts like
inheritance.
Theory:
Circle:
A circle is a set of points that are placed at a given distance ‘r’ from center (xc, yc).
- We can divide the circle in 4 quadrants or ion 8 octants also. Here we find only one octant’s co-
ordinates and then we will just replicate that one octant’s co-ordinates to rest seven octants.
- Suppose we have calculated a point (x,y) then from this (x,y) we will plot rest 7 points as,
(x,y) (x,-y) (-x, y) (-x,-y) (y,x) (y,-x) (-y,x) (-y,-x)
Derivation:
Let us consider the circle at origin (0,0) i.e. x2 + y2 = r2 and (xk, yk) be initial points
F(x,y) = x2 + y2 – r2
F(N) = (xk + 1)2 + y2 k– r2 F(S)
= (xk + 1)2 + (yk - 1)2 – r2
Decision parameter
(Pk) = F(N) + F(S)Pk = 2(xk + 1 )2 + y2 + (yk - 1)2 – r2
k
Initial decision parameter (Po) = 2(1+0)2 + r2 + (r-1)2 – 2r2
Po = 3-2r
Pk+1 = 2(xk + 2)2 + y2 k+1 + (yk+1 -1)2 – 2r2
Pk+1 – Pk = 2[(xk+2)2 – (xk+1)2] + (y2 – y2) + (yk+1 -1)2 – (yk-1)2
Pk+1 = pk + 2(2xk+3) + [(yk+1 + yk) (yk+1 - y )]k+ [k(yk+1 + yk - 2) (yk +1 - yk)] ------------------------- (A)
k+1
Case 1:
If P is negative
xk+1 – xk = 1
yk+1 – yk = 0
Put in (A)
Pk+1 = Pk + 2(2xk + 3)
Pk+1 = Pk + 4xk + 6
Case 2:
If P is positive
xk+1 – xk = 1
yk+1 – yk = -1
Put in (A)
Pk+1 = Pk + 4xk+6 + (yk+1 +yk) (-1) + (yk+1 +yk -2) (-1)
Pk+1 = Pk + 4xk – 4yk + 10
Algorithm:
1. Start.
2. Declare variables x, y, p
3. Initialise the graphic mode.
4. Input the radius of the circle r.
5. Load x-0, y=r, initial decision parameter p=1-r.so the first point is (0, r).
6.Repeat Step 7 while (x<y) and increment x-value simultaneously.
7.If (p>0), do p=p+2*(x-y) +1.
8. Otherwise, p=p+2*x+1 and y are decremented simultaneously.
9. Then calculate the value of the function circlepoints() with parameters (x,y).
10. Place pixels using putpixel at respective coordinate locations (x,y) in specified color in
circlepoints() function.
11. Close Graph.
12.Stop.
Conclusion
Assignment No: 04
Title: Polygon filling methods: i) Flood fill / Seed fill ii) Boundary fill
Problem Statement: Implement the following polygon filling methods: i) Flood fill / Seed fill ii)
Boundary fill;using mouse click, keyboard interface and menu driven programming
Outcomes: 1. Students will be able to understand the various polygon filling methods.
2. Students will be able to fill the given polygon using scan line fill algorithm.
Theory:
The basic scan-line algorithm is as follows:
Find the intersections of the scan line with all edges of the polygon
Sort the intersections by increasing x coordinate
Fill in all pixels between pairs of intersections that lie interior to the polygon
Process involved:
The scan-line polygon-filling algorithm involves
• the horizontal scanning of the polygon from its lowermost to its topmost vertex,
• identifying which edges intersect the scan-line,
• and finally drawing the interior horizontal lines with the specified fill color process.
Computational structures
Edge table
o One table entry for each scan line which contains at least one “lower” vertexof a
polygon edge
o Properties of each edge are stored in a “bucket”
o Table entry consists of an array of buckets
Each bucket contains edges whose minimum y coordinate (ymin) starts at the bucket’s line
Each entry is a record containing:
Ymax xmin increment
The array of buckets sorted according to ymin
Conclusion:
Assignment No: 05
Problem Statement: Implement Cohen Sutherland polygon clipping method to clip the polygon with
respectthe viewport and window. Use mouse click, keyboard interface.
Line Clipping
In line clipping, we will cut the portion of line which is outside of window and keep only the portion
that is inside the window.
We will use 4-bits to divide the entire region. These 4 bits represent the Top, Bottom, Right, and Left
of the region as shown in the following figure. Here, the TOP and LEFT bit is set to1 because it is
the TOP-LEFT corner.
Fig: Region Codes
Algorithm:
Step 1 − Assign a region code for each endpoint.
Step 2 − If both endpoints have a region code 0000 then accept this line.
Step 3− Else, perform the logical AND operation for both region codes.
Step 3.1 − Ifthe result is not 0000, then reject the line.
Step 3.2 − Else you need clipping.
Step 3.2.1 − Choose an endpoint of the line that is outside the window.
Step 3.2.2 − Find the intersection point at the window boundary (base on region code).
Step 3.2.3 − Replace endpoint with the intersection point and update the region code.
Step 3.2.4 − Repeat step 2 until we find a clipped line either trivially accepted or trivially rejected.
Step 4 − Repeat step 1 for other lines.
Conclusion:
Assignment No: 06
Title: 2D transformation
Problem Statement: Implement following 2D transformations on the object with respect to axis:
i) Scaling
ii) Rotation about arbitrary point
iii) Reflection
1. Translation: Translation is defined as moving the object from one position to another
positionalong straight line path.
We can move the objects based on translation distances along x and y axis. tx denotes translation
distance
along x-axis and ty denotes translation distance along y axis.
Translation Distance: It is nothing but by how much units we should shift the object from one
location to another along x, y-axis.
Consider (x,y) are old coordinates of a point. Then the new coordinates of that same point(x’,y’) can
be obtained as follows:
X’=x+tx
Y’=y+ty
We denote translation transformation as P. we express above equations in matrix form as:
x,y---old coordinates
x’,y’—new coordinates after translationtx,ty—
translation distances, T is
Scaling: scaling refers to changing the size of the object either by increasing or decreasing. We will increase
or decrease the size of the object based on scaling factors along x and y- axis.
If (x, y) are old coordinates of object, then new coordinates of object after applying scaling transformation
are obtained as:
x’=x*sx
y’=y*sy.
sx and sy are scaling factors along x-axis and y-axis. we express the above equations inmatrix
form as:
2. Rotation: A rotation repositions all points in an object along a circular path in the plane centered
at the pivot point. We rotate an object by an angle theta. New coordinates after rotation depend on both
x and y
• x’ = xcosθ -y sinθ
• y’ = xsinθ+ ycosθ
or in matrix form:
Conclusion:
Assignment No: 07
Theory:
In computer graphics, we often need to draw different types of objects onto the screen. Objects are
not flat all the time and we need to draw curves many times to draw an object.
Types of Curves
A curve is an infinitely large set of points. Each point has two neighbors except endpoints. Curves can
be broadly classified into three categories − explicit, implicit, and parametric curves.
Implicit Curves
Implicit curve representations define the set of points on a curve by employing a procedure that can
test to see if a point in on the curve. Usually, an implicit curve is defined by an implicit function of
the form –
f(x, y) = 0
It can represent multivalued curves (multiple y values for an x value). A common example is the
circle, whose implicit representation is
x2 + y2 - R2 = 0
Explicit Curves
A mathematical function y = f(x) can be plotted as a curve. Such a function is the explicit
representation of the curve. The explicit representation is not general, since it cannot represent
vertical lines and is also single-valued. For each value of x, only a single value of y is normally
computed by the function.
Parametric Curves
Curves having parametric form are called parametric curves. The explicit and implicit curve
representations can be used only when the function is known. In practice the parametric curves are
used. A two-dimensional parametric curve has the following form −
The functions f and g become the (x, y) coordinates of any point on the curve, and the points are
obtained when the parameter t is varied over a certain interval [a, b], normally [0, 1].
Bezier Curves:
A Bezier curve is a parametric curve frequently used in computer graphics and related fields.
Generalizations of Bezier curves to higher dimensions are called Bezier surfaces, of which the
Bezier triangle is a special case.
In vector graphics, Bezier curves are used to model smooth curves that can be scaled indefinitely.
"Paths," as they are commonly referred to in image manipulation programs are combinations of linked
Bezier curves. Paths are not bound by the limits of rasterized images and are intuitive to modify.
Bezier curves are also used in animation as a tool to control motion Four points P0, P1, P2 and P3 in
the plane or in higher dimensional space define a cubic Bezier curve. The curve starts at P0 going
toward P1and arrives at P3 coming from the direction of P2. Usually, it will not pass through P1or P2;
these points are only there to provide directional information. The distance between P0 and
P1determines "how long" the curve moves into direction P2 before turning towards P3.
Bezier curve is discovered by the French engineer Pierre Bezier. These curves can be generated
under the control of other points. Approximate tangents by using control points are used to generate
curve. The Bezier curve can be represented mathematically as −
They generally follow the shape of the control polygon, which consists of the segments
joining the control points.
They always pass through the first and last control points.
The degree of the polynomial defining the curve segment is one less that the number of
defining polygon point. Therefore, for 4 control points, the degree of the polynomial is 3, i.e.
cubic polynomial.
B-Spline Curves:
The Bezier-curve produced by the Bernstein basis function has limited flexibility.
First, the number of specified polygon vertices fixes the order of the resulting polynomial
which defines the curve.
The second limiting characteristic is that the value of the blending function is nonzero for all
parameter values over the entire curve.
The sum of the B-spline basis functions for any parameter value is 1.
Each basis function is positive or zero for all parameter values.
Each basis function has precisely one maximum value, except for k=1.
The maximum order of the curve is equal to the number of vertices of defining
polygon.
The curve line within the convex hull of its defining polygon.
Algorithm:
Step 1: Select a value t Î [0,1]. This value remains constant for the rest of the steps.
Step 2: Set Pi [0] (t) = Pi, for i = 0,...,n.
Step 3: For j= 0,...,n, set for i = j,...,n.
Step 4: g (t) = Pn[n] (t)
Koch Curve-
The Koch snowflake (also known as the Koch curve, Koch star, or Koch Island) is a mathematical curve and
one of the earliest fractal curves to have been described. It is based on the Koch curve, which appeared in a
1904 paper titled “On a continuous curve without tangents, constructible from elementary geometry” by the
Swedish mathematician Helge von Koch.
The progression for the area of the snowflake converges to 8/5 times the area of the original triangle, while
the progression for the snowflake’s perimeter diverges to infinity. Consequently, the snowflake has a finite
area bounded by an infinitely long line.
Construction of Koch curve-
Step1:
Draw an equilateral triangle. You can draw it with a compass or protractor, or just eyeball it if you don’t
want to spend too much time drawing the snowflake.
It’s best if the length of the sides is divisible by 3, because of the nature of this fractal. This will become
clear in the next few steps.
Step2:Divide each side in three equal parts. This is why it is handy to have the sides divisible by three.
Step3:
Draw an equilateral triangle on each middle part. Measure the length of the middle third to know the length
of the sides of these new triangles.
Step4:
Divide each outer side into thirds. You can see the 2nd generation of triangles covers a bit of the first. These
three-line segments shouldn’t be parted in three.
Step5:
Draw an equilateral triangle on each middle part.
Note how you draw each next generation of parts that are one 3rd of the mast one.
Conclusion:
Assignment No: 08
Title: Animation
Theory:
Squash and stretch refer to distorting or deforming an object or character to give the illusion of weight and
flexibility. As a character moves, its body stretches and squashes to create the impression of mass and
elasticity. For example, when a ball bounces, it squashes on impact and then stretches back into shape. The
same tips apply to character animation. As a character runs, its body squashes down with footsteps and
2. Anticipation
Anticipation prepares the audience for an upcoming movement or action. It builds anticipation through subtle
movements that lead to the main action. For example, a golfer might waggle their club back and forth before
swinging, or a pitcher might wind up their throw by bringing the ball backward first.
3. Staging
Staging refers to the composition and framing of a scene to focus the audience’s attention on the most
important parts of the action. Animators stage scenes with appropriate camera angles, lighting, and character
There are two main approaches to creating animation: straight-ahead and pose-to-pose animation.
Straight-ahead animation means drawing out the frames one by one in order from start to finish. Animators
taking this approach don’t plan ahead but rather figure out each subsequent frame as they go. This creates a
very organic, fluid feel and allows for experimentation. However, it can also result in inconsistent volumes and
proportions.
Pose-to-pose animation involves planning out specific keyframes and poses first, then filling in the in-
betweens afterward. This allows for greater control in terms of volumes and proportions. However, the motion
Using follow-through and overlapping action makes animation more natural and lifelike. Follow-
through refers to the continuation of motion after the character has stopped applying force. For example, when
a character swings their arm, the arm, hair, clothing, etc., will continue to move after the character stops
actively swinging. Without follow-through, the motion would look unnatural since things don’t just stop
The principle of slow in and out means animating with more drawings near the start and end of an action. This
exaggerates the extreme poses and makes the movement feel smoother. For example, if a character is jumping,
more frames would be used at the highest and lowest parts of the jump arc to accentuate those poses. Fewer
7. Arcs
Animators follow arched trajectories when animating actions like jumping and throwing. Rather than moving
in straight lines, characters swing arms and bodies in expressive curve paths. Arms don’t just move up and
Secondary actions are subtle motions that complement or support the main action. For example, a character
telling an energetic story may swing their arms around as they talk. Or if a character jumps down from a ledge,
they may readjust their clothing when landing. These secondary motions reinforce what’s happening in the
9. Timing
Timing refers to the number of frames allotted to each action. It determines the pace and rhythm of the
animation. Timing impacts how movements feel—the more frames, the slower and more exaggerated the
action becomes. For example, a ball that drops quickly has fewer frames than one that bounces slowly to a stop.
10. Exaggeration
Exaggeration in animation means overstating movements and actions beyond normal proportions. A fist bump
becomes a full-body motion. Eyes pop out of an astonished character’s head. Exaggerating the squash and
stretch is one form, but exaggeration applies to all aspects of movement, from arcs to timing.
Solid drawing means creating figures and objects with volume, weight, and convincing form. Characters feel
believable when drawn with anatomically correct proportions and dimensions—when they have substance and
mass. Solid drawing especially applies to key poses where characters demonstrate their shape based on
12. Appeal
Appeal in animation refers to creating characters and motions that are compelling, entertaining, and
aesthetically pleasing. Animators aim to give characters charm and whimsy through their design and
movement. Disney stressed the principle of appeal—animation should above all be charming and captivating.
Conclusion:
Graphics Functions
Following table gives us various commands and functions with short description, syntax and example.
int endangle,int
xradius, int yradius)
37 Outtextxy Displays a Void far Void far outtextxy(int 230, int 240, char
string at the outtextxy(int x,int y, far* hello);
specified char far
location *textstring);