CS-YIV OpenGL Laboratory Contents October, 2024

Computer Graphics [CoSc4061]

Lab Practice IV
Drawing Circles and Ellipse using OpenGL

1. Circles in OpenGL
2. Draw Circle using OpenGL
3. Draw Ellipse using OpenGL
4. Draw Traffics Signal using OpenGL
5. Important Notes

1
CS-YIV OpenGL Laboratory Contents October, 2024

1. Circles in OpenGL
 A circle is a simple shape of Euclidean geometry consisting
of those points which are the same distance from a given
point called the center.
 The common distance of the points of a circle from its
center is called its radius.
 There are several ways to draw a circle:
1) Draw a circle by algorithms:
 Simple circle drawing algorithm
 Midpoint Circle Algorithm.
 Bresenham’s Circle Algorithm.
 DDA Algorithm.
2) Draw a circle by arithmetic equations:
 Trigonometric functions.
Draw a circle by algorithms:
1. Simple circle drawing algorithm
 In an x-y Coordinate System, the circle with center (a, b)
and radius r is the set of all points(x, y) such as the equation:
(𝑥 - 𝑎) 2+ (𝑦 - 𝑏) 2 = 𝑟2
 If the circle is centered at the origin (0, 0), then the equation
simplifies to:
𝑥2 + 𝑦2 = 𝑟2 where: x= x coordinate,
y = y coordinate, r = radius
 Note: This method : not very GOOD because:
1. The resulting circle has large gaps.

2
CS-YIV OpenGL Laboratory Contents October, 2024

2. The calculations are not very efficient with

square root operations.

Draw a circle by arithmetic equations:

 Using the trigonometric functions:
 If the circle is centered at the origin (Xc, Yc):
➢ sinӨ =(Y-Yc)/r -> Y = YC + r * sinӨ
➢ cosӨ =(X-Xc)/r -> X = XC + r * cosӨ
 If the circle is centered at the origin (0, 0), then the equation
simplifies to
➢ Y = r sinӨ
➢ X = r cosӨ

2. Draw Circle using OpenGL

#include<GL/glut.h>
#include<math.h>
void Circle() {
GLfloat xi, yi, theta = 0;
GLfloat x_c = 0, y_c = 0, r = 0.5;
int COUNT;
glClear(GL_COLOR_BUFFER_BIT);
for (COUNT = 1 ; COUNT <= 10000 ; COUNT++) {
theta = theta + 0.001;
xi = x_c + r*cos(theta);

3
CS-YIV OpenGL Laboratory Contents October, 2024

yi = y_c + r*sin(theta);
glBegin(GL_POINTS);
glVertex2f(xi, yi);
glEnd(); }
glFlush(); }
void Initial() {
glClearColor(1.0, 0.5, 0.5, 0);
glColor3f(1,1,1);
glPointSize(5.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();}
int main(int argc, char *argv[])
{ glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400, 400);
glutInitWindowPosition(0, 0);
glutCreateWindow("Draw Circle");
Initial();
glutDisplayFunc(Circle);
glutMainLoop();
return 0; }
Note: This program to Draw a circle in OpenGL:
 By draw a large number of points near
each other inside loop and this points
draw a circle as the following figure:

4
CS-YIV OpenGL Laboratory Contents October, 2024

3. Draw Ellipse using OpenGL

#include<GL/glut.h>
#include<math.h>
void Ellipse() {
GLfloat xi, yi, theta = 0;
GLfloat x_c = 0, y_c = 0, r_x = 0.8, r_y = 1.8;
int COUNT;
glClear(GL_COLOR_BUFFER_BIT);
for (COUNT = 1 ; COUNT <= 10000 ; COUNT++) {
theta = theta + 0.001;
xi = x_c + r_x*cos(theta);
yi = y_c + r_y*sin(theta);
glBegin(GL_POINTS);
glVertex2f(xi, yi);
glEnd();
}
glFlush();
}
void Initializer() {
glClearColor(1.0, 0.5, 0.1, 0);
glColor3f(1,1,1);
glPointSize(5.0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-2, +2, -2, +2);
}

5
CS-YIV OpenGL Laboratory Contents October, 2024

int main(int argc, char *argv[]) {

glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400, 400);
glutInitWindowPosition(0, 0);
glutCreateWindow("Draw Ellipse");
Initializer();
glutDisplayFunc(Ellipse);
glutMainLoop();
return 0; }
 Note: To draw ellipse: The different between circle & ellipse only in
radius, in ellipse we have 2 radius:
i. X radius.
ii. Y radius.

4. Draw Traffic signal

#include<GL/glut.h>
#include<math.h>
void trafficLight()
{
GLfloat xi, yi, theta = 0;
GLfloat x_c, y_c, r;
glClear(GL_COLOR_BUFFER_BIT);
int i;
glColor3f(0.0,0.0,0.0);
glBegin(GL_QUADS);
glVertex2d(40, 30);
glVertex2d(60, 30);

6
CS-YIV OpenGL Laboratory Contents October, 2024

glVertex2d(60, 80);
glVertex2d(40, 80);
glEnd();
glColor3f(0.5, 0.5, 0.5);
glBegin(GL_QUADS);
glVertex2d(45, 0);
glVertex2d(55, 0);
glVertex2d(55, 30);
glVertex2d(45, 30);
glEnd();
x_c=50, y_c=70, r=6;
glBegin(GL_POLYGON);
for(i=1; i<=10000; i++)
{
theta = theta + 0.001;
xi = x_c + r*cos(theta);
yi = y_c + r*sin(theta);
glColor3f(1, 0, 0);
glVertex2d(xi, yi);
}
glEnd();
x_c=50, y_c=55, r=6;
glBegin(GL_POLYGON);
for(i=1; i<=10000; i++)
{
theta = theta + 0.001;
xi = x_c + r*cos(theta);
yi = y_c + r*sin(theta);
glColor3f(1, 1, 0);
glVertex2d(xi, yi);
}
glEnd();
x_c=50, y_c=40, r=6;
glBegin(GL_POLYGON);
for(i=1; i<=10000; i++)

7
CS-YIV OpenGL Laboratory Contents October, 2024

{
theta = theta + 0.001;
xi = x_c + r*cos(theta);
yi = y_c + r*sin(theta);
glColor3f(0, 1, 0);
glVertex2d(xi, yi);
}
glEnd();
glFlush();
}
void Initializer() {
glClearColor(.6, 0.9, 0.8, 0);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0, 100, 0, 100);
}
int main(int argc, char *argv[])
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowSize(400, 400);
glutInitWindowPosition(0, 0);
glutCreateWindow("Draw Circle");
Initializer();
glutDisplayFunc(trafficLight);
glutMainLoop();
return 0; }

8
CS-YIV OpenGL Laboratory Contents October, 2024

5. Important Notes
 You can draw a circle by 2 shapes:
1. Solid (Fill) Circle by use glBegin(GL_POLYGON)
function and write a for loop inside it as the program(3).
2. Edge (empty) Circle by use:
 glBegin(GL_POINTS) inside the for loop as program(1).
 glBegin(GL_LINE_LOOP) or glBegin(GL_LINE_STRIP)
as we Use glBegin(GL_POLYGON) with
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE)
 You can use Stipple pattern (lines, polygons) with draw a
circle.
 You can draw one circle by multiple colors using:
glColor3f(1, V, 200) or glColor3ub(V1 , V2, V3) functions
inside for loop and use also variables in this function as the
figure.
 You can draw a circle in any place by change the center point
(Xc, Yc).
 You can draw a circle by any size by change radius value.

Exercise: Draw a Circle that satisfies the following specifications:

 Point Size= 16.
 X = x_c = 0, Y = y_c = 0, Radius = 0.8, and theta = 0.
 Circle Color Line = Blue.
 Background Color = Yellow.
 Window Title Bar = “My Circle”.