Archive Pages Design$type=blogging

Connect Dots - OpenGL Mouse Position Example

A project based on the use of opengl mouse position, that connects the two points on the left mouse button click with a straight line

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.



3D Bi-Cycle 3D Game 3D Laptop 3D Objects 3D Projects 3D Zoo Algorithm Android Aquarium Bellman-Ford Algorithm Bézier curves Block Breaker Blockshooting Bucket Sort C# Chess Clock Code Blocks Colors Complex Project Complex Projects Crab Pong Cross Zero Doll DSAV Escapa Fighter Jet First Come First Serve Flag Flag Hoisting flag of usa Fluids Font Demo Games Gear Motion GlutDino Glutplane Graphics Editor iOS iPhone Java Java OpenGL Graphics Programming Light Torus Linked List Ludo Board Game Mancala board games Martyr’s Monument Memory blocks game Memory Game Menu Mickey Mouse Minesweeper Miniature Steam Engine moth Motion Blur MoveLight moving car Moving Ship Multiplex Networking Based Project Nuclear Power Plant Olympic opengl c++ examples OpenGL ES OpenGL Programming OpenGL Tutorial Origami OS Based Projects Paint Paper Folding Particles Drop Path Finding ping pong Pong Game Project Report Projects Report Puzzles qix like Queuqe Random Flowing lines Ray Rigid Body Rings Robot sample c++ opengl code Screen Saver Screen Saver Ship Shadow Cube Shadowfun Shaheed Minar Ship Iceberg Simple Drawing Simple Haloed Lined Wireframe Simple Move Light Simple Project Simulation SNAKE XENZIA GAME Solar system Sorting Space Invaders Sphere Spot Light Swing Stack Stars Taj Mahal The Edge Game Tic Tac Toe Tower of Hanoi Traffic Signal Transformation Triangular Animation Trippy Tutorial water ripple effects Whirlpool
OpenGL Projects: Connect Dots - OpenGL Mouse Position Example
Connect Dots - OpenGL Mouse Position Example
A project based on the use of opengl mouse position, that connects the two points on the left mouse button click with a straight line
OpenGL Projects
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago