Drawing with OpenGL

Introduction

In this example I will try to explain how to visualize an opengl drawing in your drawing tool. This might apply to many shapes, but I think it is best  for plane geometric shapes like triangles, rectangles etc.

Getting Started

Here is a basic opengl example from a book. It draws two triangles and a polygon structure with 5 visible sides. I have added the code from the red book for rotation. Thus the structure rotates when we click left mouse button and stops when we click middle mouse button. Lets see the source code.

// sample.c

#include <GL/gl.h>
#include <GL/glu.h>
#include <GL/glut.h>
#include <stdlib.h>

// clang -o sample sample.c -lGL -lglut -lGLU
// or
// gcc -o sample sample.c -lGL -lglut -lGLU

static GLfloat spin = 0.0;

void init(void) 
{
   glClearColor (0.0, 0.0, 0.0, 0.0);
   glShadeModel (GL_FLAT);
}

void display(void)
{
   glClear(GL_COLOR_BUFFER_BIT);

   glPushMatrix();            
   glRotatef(spin, 0.0, 0.0, 1.0);

    glBegin(GL_TRIANGLES);
		//Send the vertices and colors for the triangle
		glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
		glVertex3f(2.0f, 2.5f, -1.0f);
		glVertex3f(-3.5f, -2.5f, -1.0f);
		glVertex3f(2.0f, -4.0f, -1.0f);
	glEnd();

    glBegin(GL_TRIANGLES);
        glColor4f(1.0f, 1.0f, 0.0f, 1.0f);
        glVertex3f(-3.5f, 2.5f, -1.0f);
        glVertex3f(0.0f, -4.5f, -1.0f);
        glVertex3f(3.5f, -1.0f, -1.0f);
    glEnd();

    // Draw traingle fan
    glBegin(GL_TRIANGLE_FAN);
		//Send the vertices and colors for the pentagon
		glColor4f(0.0f, 1.0f, 0.0f, 1.0f);
		glVertex3f(-1.0f, 2.0f, 0.0f);
		glVertex3f(-3.0f, -0.5f, 0.0f);
		glVertex3f(-1.5f, -3.0f, 0.0f);
		glColor4f(1.0f, 0.0f, 0.0f, 1.0f);
		glVertex3f(1.0f, -2.0f, 0.0f);
		glColor4f(0.1f, 0.9f, 0.3f, 1.0f);
		glVertex3f(1.0f, 3.0f, 0.0f);
		glColor4f(0.0f, 0.0f, 1.0f, 1.0f);
		glVertex3f(-0.5f, 4.0f, 0.0f);
		glColor4f(0.6f, 0.2f, 0.8f, 1.0f);
		glVertex3f(-3.0f, -0.5f, 0.0f);
	glEnd();

   glPopMatrix();
   glutSwapBuffers();
}

void spinDisplay(void)
{
   spin = spin + 2.0;
   if (spin > 360.0)
      spin = spin - 360.0;
   glutPostRedisplay();
}

void reshape(int w, int h)
{
   glViewport (0, 0, (GLsizei) w, (GLsizei) h);
   glMatrixMode(GL_PROJECTION);
   glLoadIdentity();
   //glOrtho(-50.0, 50.0, -50.0, 50.0, -1.0, 1.0);
   glOrtho(-5.0, 5.0, -5.0, 5.0, -1.0, 1.0);
   glMatrixMode(GL_MODELVIEW);
   glLoadIdentity();
}

void mouse(int button, int state, int x, int y) 
{
   switch (button) {
      case GLUT_LEFT_BUTTON:
         if (state == GLUT_DOWN)
            glutIdleFunc(spinDisplay);
         break;
      case GLUT_MIDDLE_BUTTON:
         if (state == GLUT_DOWN)
            glutIdleFunc(NULL);
         break;
      default:
         break;
   }
}

/* 
 *  Request double buffer display mode.
 *  Register mouse input callback functions
 */
int main(int argc, char** argv)
{
   glutInit(&argc, argv);
   glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);
   glutInitWindowSize (600, 500); 
   glutInitWindowPosition (100, 100);
   glutCreateWindow (argv[0]);
   init ();
   glutDisplayFunc(display); 
   glutReshapeFunc(reshape); 
   glutMouseFunc(mouse);
   glutMainLoop();
   return 0;
}

If you go through the source code we use glPushMatrix to push the drawing into the stack. We then draw triangles and a fan. We pop the stack and swap buffers to render the drawing. Before drawing starts, we rotate the drawing with spin factor. That means, if we have changed the spin value from our previous frame we are going to see a rotation. Which we do in spinDisplay function. If we change our drawing window, we call reshape to adjust the drawing. In main method we use glut to draw a window. We initialize and call display function as main loop.

Build the Source Code

$ gcc -o sample sample1.c -lGL -lglut -lGLU
$ ./sample

Visualize

If you run the sample program as above, you will see the drawing. We have two yellow and blue traingles. Then we have the polygon with red, green, blue and purple colors in its sides. If you can visualize why exactly opengl have drawn the diagrams as this, you will be able to create many figures as you want them to. Lets use a software called LibreCad to do that. I tried to use blender for this purpose, but its sad I could not get started(even this time, blender is hard). LibreCad is a simple CAD program that will help us draw lines. We use points approximately specified in our drawing above and create two traingles. As for the fan after we finish drawing first three lines (a triangle), we then join every new point with the adjacent points of this triangle to create the polygon.

In LibreCad create three lines (x, y and z axis) as you would do on a paper.Make sure they lie on the grid. Grids help us to move through points. It is easier to choose one grid block as one unit in the drawing. To draw glVertex3f(2.0f, 2.5f, -1.0f) go to 2 blocks right, 2.5 blocks up. You can ignore the z axis (so that you can make your lines stay on grid), if it ranges from +1 to -1. Join lines glVertex3f(-3.5f, -2.5f, -1.0f) and glVertex3f(2.0f,-4.0f, -1.0f) and we should have a triangle. Similarly draw other figures using the line tool. In LibreCad for lines with two points you can right click the mouse when you want to stop drawing joining line segments.

Conclusion

In this tutorial we saw how to visualize opengl drawing using a CAD too. You can use any CAD tool to do this. For this demonstration I used LibreCad program.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s