Search Projects

Sunday, December 27, 2015

Connect Dots - OpenGL Mouse Position Example

An interactive project features the use of mouse function. Today we are going to have a project based opengl mouse position. The name of projects is - "Connect Dots".

opengl mouse position example

1. About the Project

This c++ opengl project is based on mouse click position. The theme of project is - draws straight lines connecting dots placed with mouse clicks. First one point is drawn on mouse click, next mouse click will draw a point while connecting it with previous point. This process of connecting points will continues till the max allotted points slots is over, after which first point will get deleted as new point is generate, this continues.

2. Opengl mouse click position 

Problem of the project is getting the position of a user mouse click in C/C++ & GLUT (OpenGL). Solution to this is in our myMouseFunc() function. We will typically pass the parameter to this function while adjusting the algorithm as per our requirement. In our mouse function, will condition to check if only left mouse button can create the point. Similarly only on mouse press down, the point to be generate so we use another condition for it. Logic for both is given below -

 if ( button==GLUT_LEFT_BUTTON && state==GLUT_DOWN ) {}

Next is to create logic for what happen when a left mouse button is pressed. We need to record the opengl mouse position (mouse coordinate). In variables will store the both x, y values of opengl window coordinates. These coordinates are further normalized by dividing with height and width.

float xPos = ((float)x)/((float)(WindowWidth-1)); float yPos = ((float)y)/((float)(WindowHeight-1)); 

Since the Position in OpenGL is define from upper left corner so we need to flip the position of 'y' coordinate as given -

 yPos = 1.0f-yPos;

The coordinate of opengl mouse click position is know, we will draw the point. A function call back is done so a point is added while left mouse is clicked.

addNewPoint( xPos, yPos );

3. Draw Lines to Connect Points 

In display callback function we code to draw the line segments. The lines segment can be drawn only when there is two points, hence we check if there is two or more points. The coordinate of the points will be stored in a two dimensional array. We will draw the lines with use of a loop, so each of the two points are connected with a line segment.

if ( NumPts>1 ) { glBegin( GL_LINE_STRIP ); for ( i=0; i<NumPts; i++ ) { glVertex2f( PointArray[i][0], PointArray[i][1] ); } glEnd(); } Our line are ready to display but where are points? For them we need not to check any condtion. We will use the array and simply display the points. glBegin( GL_POINTS ); for ( i=0; i<NumPts; i++ ) { glVertex2f( PointArray[i][0], PointArray[i][1] ); } glEnd();

The color of the points and the lines can be given in this function to whatever desired.


4. Rendering of Points and Lines

We get the Opengl mouse click position, draw the points and connected them with lines. Now times is to give a little customization by rendering these opengl objects. If we will define the size and width of our points and lines.


The size and width can be passed as above but we need to give a proper shape to our points. We will implements the anti-aliasing of points and lines. Also we will render the points to be round rather than a square. This is implementation dependent unfortunately, may slow down rendering considerably.

glHint(GL_POINT_SMOOTH_HINT, GL_NICEST); // Make round points, not square points glHint(GL_LINE_SMOOTH_HINT, GL_NICEST); // Antialias the lines glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

5. Delete the Lines

We have restricted the no of points to be drawn on screen. The variable named 'MaxNumPts'  will have the value to max no points to be shown on screen. As the points crosses this number the first point and line got deleted, this continues further. To process this we have a callback function which removes the points (similar to adding the points). To make this Opengl mouse click position example more interesting, a keyboard function is added. This function will give another interaction with user. Following is the uses -

 Sl. No. Key Functionality
1 a Switch between aliasing
2 esc Exit the Program
3 f Remove First Point
4 l Remove Last Point
5 t  Switch between thicknesses and size


This Program is taken from the book - 3D Computer Graphics: A Mathematical Introduction with OpenGL, by S. Buss, Cambridge University Press, 2003. The program is modified from the original version a little. The keyboard functionality of switching the alias is not working sometimes. Further you can use a switch function to  changes the thickness and size of lines and points by press the numeric keys.

 Hope you liked this opengl tutorial as well as the project. Download the source code and please comment you thoughts to us.

No comments:

Post a Comment