Module 5

Input& interaction, Curves

and Computer Animation
 Module - 5

•Input and Interaction: Input devices, clients and servers, Display Lists,
Display Lists and Modeling,
•Programming Event Driven Input, Menus Picking, Building Interactive
Models, Animating Interactive programs, Design of Interactive
programs,
•Logic operations .Curved surfaces, quadric surfaces,
•OpenGL Quadric-Surface and Cubic-Surface Functions, Bezier Spline
Curves, Bezier surfaces, OpenGL curve functions. Corresponding
openGL functions.

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 2
PROGRAMMING EVENT DRIVEN
INPUT
USING POINTING DEVICES
• Pointing devices like mouse, trackball, data tablet allow programmer to indicate a position
on the display.
• There are two types of event associated with pointing device, which is conventionally
assumed to be mouse but could be trackball or data tablet also.
• MOVE EVENT – is generated when the mouse is move with one of the button being
pressed. If the mouse is moved without a button being pressed, this event is called as
“passive move event”.
• MOUSE EVENT – is generated when one of the mouse buttons is either pressed or
released.
• The information returned to the application program includes button that generated the
event, state of the button after event (up or down), position (x,y) of the cursor.
Programming a mouse event involves two steps:
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 3
Cont…
• The mouse callback function must be defined in the form:
void myMouse(int button, int state, int x, int y) is written by the programmer.
• For example,
void myMouse(int button, int state, int x, int y)
{
if(button==GLUT_LEFT_BUTTON && state == GLUT_DOWN)
exit(0);

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 4
Cont…
• The above code ensures whenever the left mouse button is pressed down,
execution of the program gets terminated.
• Register the defined mouse callback function in the main function, by means of
GLUT function:
glutMouseFunc(myMouse);

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 5
Write an OpenGL program to display square when a left button
is pressed and to exit the program if right button is pressed.

#include<stdio.h>
#include<stdlib.h>
#include<GL/glut.h>
int wh=500, ww=500;
float siz=3;
void myinit()
{
glClearColor(1.0,1.0,1.0,1.0);
glViewPort(0,0,w,h)
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0,(GLdouble) ww, 0, (GLdouble) wh);
glMatrixMode(GL_MODELVIEW);
glColor3f(1,0,0);
}
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 6
void drawsq (int x, int y)
{
y=wh-y;
glBegin(GL_POLYGON);
glVertex2f(x+siz, y+siz);
glVertex2f(x-siz, y+siz);
glVertex2f(x-siz, y-siz);
glVertex2f(x+siz, y-siz);
glEnd();
glFlush();
}
void display()
{
glClear(GL_COLOR_BUFFER_BIT);
}
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 7
void myMouse(int button, int state, int x, int y)
{
if(button==GLUT_LEFT_BUTTON && state == GLUT_DOWN)
drawsq(x,y);
if(button==GLUT_RIGHT_BUTTON && state == GLUT_DOWN)
exit(0);
}

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 8
void main(int argc, char **argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_RGB|GLUT_SINGLE);
glutInitWindowSize(wh,ww);
glutCreateWindow(“square”);
glutDisplayFunc(display);
glutMouseFunc(myMouse);
myinit();
glutMainLoop();
}

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 9
8. Mouse Click void display()
# include<GL/glut.h> {
void drawSquare(int x,int y) glClear(GL_COLOR_BUFFER_BIT);
{ glFlush();
glColor3f(1.0,0.0,0.0); }
glBegin(GL_POLYGON); int main(int argc,char **argv)
glVertex2f(0.25,0.25); {
glVertex2f(0.5,0.25); glutInit(&argc,argv);
glVertex2f(0.5,0.75); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB);
glVertex2f(0.25,0.75); glutInitWindowSize(500,500);
glEnd(); glutCreateWindow("Mouse Click");
glFlush(); glutDisplayFunc(display);
} glutMouseFunc(myMouse);
void myMouse(int button,int state, int x, int y) glutMainLoop();
{ return 0;
if(button==GLUT_LEFT_BUTTON && state == }
GLUT_DOWN)
drawSquare(x,y);
if(button==GLUT_RIGHT_BUTTON && state ==
GLUT_DOWN)
exit(0);
}
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 10
9. Mouse Motion {
#include<GL/glut.h> glViewport(0,0,w,h);
int x=0,y=0; glMatrixMode(GL_PROJECTION);
float size = 55; glLoadIdentity();
void drawsquare(int x,int y) gluOrtho2D(0,w,0,h);
{ glMatrixMode(GL_MODELVIEW);
glColor3f(1,1,0); }
glBegin(GL_POLYGON); int main(int argc,char **argv)
glVertex2f(x+size,y+size); {
glVertex2f(x-size,y+size); glutInit(&argc,argv);
glVertex2f(x-size,y-size); glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
glVertex2f(x+size,y-size); glutInitWindowSize(500,500);
glEnd(); glutCreateWindow("Mouse Motion");
} glutDisplayFunc(display);
void display() glutMotionFunc(motion);
{ glutReshapeFunc(reshape);
glClear(GL_COLOR_BUFFER_BIT); reshape(400,400);
glLoadIdentity(); glutMainLoop();
drawsquare(x,y); return 0;
glutSwapBuffers(); }
}
void motion(int mx, int my)
{
x=mx;
y=glutGet(GLUT_WINDOW_HEIGHT)-my;
glutPostRedisplay();
}
void reshape(int w,int h)

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 11
10. Mouse passive Motion }
#include<GL/glut.h> void reshape(int w,int h)
int x=0,y=0; {
float size = 55; glViewport(0,0,w,h);
void drawsquare(int x,int y) /* Matrix Mode */
{ glMatrixMode(GL_PROJECTION);
glColor3f(1,1,0); glLoadIdentity();
glBegin(GL_POLYGON); gluOrtho2D(0,w,0,h);
glVertex2f(x+size,y+size); glMatrixMode(GL_MODELVIEW);
glVertex2f(x-size,y+size); }
glVertex2f(x-size,y-size); int main(int argc,char **argv)
glVertex2f(x+size,y-size); {
glEnd(); glutInit(&argc,argv);
} glutInitDisplayMode(GLUT_DOUBLE|GLUT_RGB);
void display() glutInitWindowSize(500,500);
{ glutCreateWindow("Mouse Motion");
glClear(GL_COLOR_BUFFER_BIT); glutDisplayFunc(display);
glLoadIdentity(); glutPassiveMotionFunc(pmotion);
drawsquare(x,y); glutReshapeFunc(reshape);
glutSwapBuffers(); reshape(400,400);
} glutMainLoop();
void pmotion(int mx, int my) return 0;
{ }
x=mx;
y=glutGet(GLUT_WINDOW_HEIGHT)-my;
glutPostRedisplay();
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 12
WINDOW EVENTS
• A window event is occurred when the corner of the window is dragged to new
position or size of window is minimized or maximized by using mouse.
• The information returned to the program includes the height and width of
newly resized window. Programming the window event involves two steps:
• Window call back function must be defined in the form:
• void myReshape(GLsizei w, GLsizei h) is written by the application
programmer.
• Let us consider drawing square as an example, the square of same size must be
drawn regardless of window size.

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 13
void myReshape(GLsizei w, GLsizei h)
{ The window callback function
glMatrixMode(GL_PROJECTION); must be registered in the main
glLoadIdentity(); function,
gluOrtho2D(0,(GLdouble) w, 0, (GLdouble) h); glutReshapeFunc(myReshape);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glViewPort(0,0,w,h)
/*save new window size in global variables*/
ww=w;
wh=h;
}
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 14
THE DISPLAY AND IDLE CALLBACKS
•Display callback is specified by GLUT using glutDisplayFunc(myDisplay). It is
invoked when GLUT determines that window should be redisplayed.
•Re-execution of the display function can be achieved by using
glutPostRedisplay().
•The idle callback is invoked when there are no other events. It is specified by
GLUT using
glutIdleFunc(myIdle).

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 15
WINDOW MANAGEMENT
• GLUT also supports multiple windows of a given window. We can create a second
top-level window as follows:
id = glutCreateWindow(“second window”);
• The returned integer value allows us to select this window as the current window.
i.e., glutSetWindow(id);
• NOTE: The second window can have different properties from other window by
invoking the glutInitDisplayMode before glutCreateWindow.

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 16
PICKING
• Picking is the logical input operation that allows the user to identify an object on
the display.
• The action of picking uses pointing device but the information returned to the
application program is the identifier of an object not a position.
• It is difficult to implement picking in modern system because of graphics pipeline
architecture. Therefore, converting from location on the display to the
corresponding primitive is not direct calculation.
• There are at least three ways to deal with this difficulty:
1. Selection
2. Bounded Boxes or Extents
3. Use of Back Buffer

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 17
Selection:
• It involves adjusting the clipping region and viewport such that we can keep
track of which primitives lies in a small clipping region and are rendered into
region near the cursor.
• These primitives are sent into a hit list that can be examined later by the user
program.

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 18
Bounding boxes or extents

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 19
Usage of back buffer and extra rendering
• When we use double buffering it has two color buffers: front and back buffers.
The contents present in the front buffer is displayed, whereas contents in back
buffer is not displayed so we can use back buffer for other than rendering the
scene

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 20
Steps for Picking
• Picking can be performed in four steps that are initiated by user defined pick
function in the application:
1. We draw the objects into back buffer with the pick colors.
2. We get the position of the mouse using the mouse callback.
3. Use glReadPixels() to find the color at the position in the frame buffer
corresponding to the mouse position.
4. We search table of colors to find the object corresponds to the color read.

https://www.glprogramming.com/red/chapter13.html

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 21
PICKING AND SELECTION MODE
• The difficulty in implementing the picking is we cannot go backward directly
from the position of the mouse to the primitives.
• OpenGL provides “selection mode” to do picking. The glRenderMode() is used to
choose select mode by passing GL_SELECT value.
• When we enter selection mode and render a scene, each primitive within the
clipping volume generates a message called “hit” that is stored in a buffer called
“name stack”.

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 22
Functions for Selection Mode
• void glSelectBuffer(GLsizei n, GLuint *buff) : specifies array buffer of size
‘n’ in which to place selection data.
• void glInitNames() : initializes the name stack.
• void glPushName(GLuint name) : pushes name on the name stack.
• void glPopName() : pops the top name from the name stack.
• void glLoadName(GLuint name) : replaces the top of the name stack with
name.
• OpenGL allow us to set clipping volume for picking using gluPickMatrix() which
is applied before gluOrtho2D.
• gluPickMatrix(x,y,w,h,*vp) : creates a projection matrix for picking that
restricts drawing to a w x h area and centered at (x,y) in window coordinates
within the viewport vp.
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 23
There is a normal window and image on the display. We also see the cursor with small box around it indicating
the area in which primitive is rendered. It shows window and display after the window has been changed by
gluPickMatrix.

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 24
Program

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 25
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 26
 void myReshape()
{
glViewPort(0,0,w,h)
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0,(GLdouble) w, 0, (GLdouble) h);
glMatrixMode(GL_MODELVIEW);
}

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 27
18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 28
void main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE |GLUT_RGB);
glutInitWindowSize(500,500);
glutInitWindowPosition(100,100);
glutCreateWindow(“picking”);
glutReshapeFunc(myReshape);
glutDisplayFunc(display);
glutMouseFunc(Mouse);
glClearColor(0.0,0.0,0.0,0.0);
glutMainLoop();
}

18CS62 – Computer Graphics and Visualization. V.N. Manju, Dept. of CSE, GCEM, Bangalore. 29