Interactive Input Methods and GUI

Download as pdf or txt
Download as pdf or txt
You are on page 1of 54

Interactive input methods and GUI

Graphical input data


Graphics programs use several kinds of input data,
● coordinate positions
● attribute values
● character-string specifications
● geometric-transformation values
Logical Classification of Input Devices
The standard logical input-data classifications are
LOCATOR - A device for specifying one coordinate position.
STROKE - A device for specifying a set of coordinate positions.
STRING - A device for specifying text input.
VALUATOR - A device for specifying a scalar value.
CHOICE - A device for selecting a menu option.
PICK - A device for selecting a component of a picture
Locator Devices
Interactive selection of a coordinate point is usually accomplished by
positioning the screen cursor at some location in a displayed scene
Ex.: mouse, touchpad, joystick, trackball, spaceball, thumbwheel, hand
cursor or digitizer stylus.
Keyboard usually has four cursor-control keys that move the screen
cursor up, down, left, and right and keyboard can also include a
touchpad, joystick, trackball, or other device for positioning the screen
cursor
Stroke Devices
It is used to input a sequence of coordinate positions.
Continuous movement of a mouse, trackball, joystick, or hand cursor is
translated into a series of input coordinate values.
The graphics tablet is one of the common stroke devices. As the cursor
is moved across the tablet surface, a stream of coordinate values is
generated.
This procedure is used in paintbrush systems to generate drawings
using various brush strokes.
String Devices
The primary physical device used for string input is the keyboard.
Character strings in computer-graphics applications are typically used
for picture or graph labeling.
Individual characters can be sketched on the screen using a stroke or
locator-type device.
Valuator Devices
Valuators are used to set scalar values for geometric
transformations.
Scalar input is also used for setting physical parameters such as
temperature, voltage.
Commonly used valuator is a panel of control dials that produces
numerical values within predefined range.
For one direction of movement, say left to right, can increase scalar
values. Movement in the opposite direction decreases the input value.
Selected values are usually echoed on the screen for verification.
Choice Devices
It is used for selecting from a list of options.
Menus are typically used in graphics programs to select processing
options, parameter values, and object shapes that are to be used in
constructing a picture.
Commonly used choice devices for selecting a menu option are
cursor-positioning devices such as a mouse, trackball, keyboard, touch
panel, or button box.
Pick Devices

It is used to select a part of a scene that is to be transformed or edited.


Mouse, joystick can be used as a pick device
Input Functions for Graphical Data
Input modes-These functions are used to specify how program and input
devices should interact.
Three modes:
1. Request mode-Program can request input at particular time the
processing
2. Sample mode-input devices independently provides the updated input.
3. Event mode-device can store independently all the collected data.
Interactive picture construction techniques
Basic positioning method
This involves choosing a coordinate position with a pointing device, that
records its screen location.
Later this position can be used to draw a new line or to write a text.
Dragging
It involves selecting an object and moving it to new location. This can be
aided by mouse by positioning cursor at the object, press a mouse
button, move cursor to a new location and release the mouse button.
Constraints
Altering input coordinate values to obtain a particular alignment or
orientation of an object is called a constraint.
Ex.: Construction of a line after comparing coordinate values at two
endpoints.
If the difference in the y values of the two endpoints is smaller than the
difference in the x values, a horizontal line is displayed. Otherwise, a
vertical line is drawn.
Grids
Another kind of constraint is a rectangular grid displayed in some part of
the screen area. With an activated grid constraint, input coordinates are
rounded to the nearest grid intersection.
While drawing a straight line, cursor positions are shifted to the nearest
grid intersection point, and a line is drawn between these two grid
positions.
Rubber band methods
Line segments and other basic shapes can be constructed and
positioned using rubber-band methods that allow the sizes of objects to
be interactively stretched or contracted.
Gravity field
Sometimes in line needs to be constructed, at positions
between endpoints that are not grid intersections.
As exact positioning of screen cursor at connecting point
is difficult, therefore a graphic package called gravity
field is introduced.

It converts any input position near a line segment into a position


on the line with the help of gravity field.
Any selected position is within the gravity field is moved to the
nearest position on the line.
OpenGL interactive input device functions
GLUT mouse function
glutMouseFunc(mouseFcn);
void mouseFcn(GLint button, GLint action, GLint xMouse, GLint
yMouse)
Values for button can be GLUT_LEFT_BUTTON,
GLUT_MIDDLE_BUTTON or GLUT_RIGHT_BUTTON
Parameter action can be assigned GLUT_DOWN (indicates button
pressed) or GLUT_UP(button released)
Mouse cursor position when mouseFcn is invoked will be returned as
the coordinate position for (xMouse, yMouse)
#include <GL/glut.h>
GLsizei winWidth = 400, winHeight = 300; // Initial display-window size.
void init(void)
{ glClearColor(0.0, 0.0, 1.0, 1.0); // Set display-window color to blue.
glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0, 200.0, 0.0, 150.0);
}
void displayFcn(void)
{ glClear(GL_COLOR_BUFFER_BIT); // Clear display window.
glColor3f(1.0, 0.0, 0.0); // Set point color to red.
glPointSize(3.0); // Set point size to 3.0.
}
void winReshapeFcn(GLint newWidth, GLint newHeight)
{ glViewport(0, 0, newWidth, newHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, GLdouble(newWidth), 0.0, GLdouble(newHeight));
winWidth = newWidth; /* Reset display-window size parameters. */
winHeight = newHeight;
}
void plotPoint(GLint x, GLint y)
{ glBegin(GL_POINTS);
glVertex2i(x, y);
glEnd();
}
void mousePtPlot(GLint button, GLint action, GLint xMouse, GLint yMouse)
{ if (button == GLUT_LEFT_BUTTON && action == GLUT_DOWN)
plotPoint(xMouse, winHeight - yMouse);
glFlush();
}
void main(int argc, char** argv)
{ glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition(100, 100);
glutInitWindowSize(winWidth, winHeight);
glutCreateWindow("Mouse Plot Points");
init();
glutDisplayFunc(displayFcn);
glutReshapeFunc(winReshapeFcn);
glutMouseFunc(mousePtPlot);
glutMainLoop();
}
GLUT Keyboard functions
glutKeyboardFunc(keyFcn);
keyFcn has three arguments,
void keyFcn(GLubyte key, GLint xMouse, GLint yMouse);
Parameter key is assigned a character or the corresponding ASCII
value and mouse location is returned as the position (xMouse, yMouse)
wrt the display window.
#include <GL/glut.h>
GLsizei winWidth = 400, winHeight = 300; // Initial display-window size.
void init(void)
{ glClearColor(0.0, 0.0, 1.0, 1.0); // Set display-window color to blue.
glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0, 200.0, 0.0, 150.0);
}
void displayFcn(void)
{ glClear(GL_COLOR_BUFFER_BIT); // Clear display window.
glColor3f(1.0, 0.0, 0.0); // Set point color to red.
glPointSize(3.0); // Set point size to 3.0.
}
void winReshapeFcn(GLint newWidth, GLint newHeight)
{ glViewport(0, 0, newWidth, newHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, GLdouble(newWidth), 0.0, GLdouble(newHeight));
winWidth = newWidth;
winHeight = newHeight;
}
void plotPoint(GLint x, GLint y)
{ glBegin(GL_POINTS);
glVertex2i(x, y);
glEnd(); }
void curveDrawing(GLubyte curvePlotKey, GLint xMouse, GLint yMouse)
{ GLint x = xMouse; GLint y = winHeight - yMouse;
switch (curvePlotKey)
{ case 'c': plotPoint(x, y); /* Move cursor while pressing c key*/
break;
default: break;
} glFlush(); }
void main(int argc, char** argv)
{ glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition(100, 100);
glutInitWindowSize(winWidth, winHeight);
glutCreateWindow("Keyboard Curve-Drawing Example");
init();
glutDisplayFunc(displayFcn);
glutReshapeFunc(winReshapeFcn);
glutKeyboardFunc(curveDrawing);
glutMainLoop(); }
OpenGL menu functions
Creating a GLUT menu
A pop up menu is created by,
glutCreateMenu(menuFcn);
Where menuFcn is a function which is invoked when menu entry is
selected.
void menuFcn(GLint menuItemNumber);
menuItemNumber is the integer value to which every menu item is
associated with.
To add items to the menu,
glutAddMenuEntry(“First menu item”,1);
glutAddMenuEntry(“Second menu item”,2);

To select the menu item, we have to specify the mouse button,


glutAttachMenu(button);
#include <GL/glut.h>
GLsizei winWidth = 400, winHeight = 400;
GLfloat red = 1.0, green = 1.0, blue = 1.0;
GLenum fillMode = GL_SMOOTH; // Initial polygon fill: color interpolation.
void init(void)
{ glClearColor(0.6, 0.6, 0.6, 1.0); // Set display-window color to gray.
glMatrixMode(GL_PROJECTION);
gluOrtho2D(0.0, 300.0, 0.0, 300.0); }
void fillOption(GLint selectedOption)
{ switch (selectedOption) {
case 1: fillMode = GL_FLAT; break; // Flat surface rendering.
case 2: fillMode = GL_SMOOTH; break; // Gouraud rendering. }
glutPostRedisplay(); }
void displayTriangle(void)
{ glClear(GL_COLOR_BUFFER_BIT);
glShadeModel(fillMode); // Set fill method for triangle.
glColor3f(red, green, blue); // Set color for first two vertices.
glBegin(GL_TRIANGLES);
glVertex2i(280, 20); glVertex2i(160, 280); glColor3f(red, 0.0, 0.0); // Set color of last vertex to red.
glVertex2i(20, 100);
glEnd(); glFlush(); }
void reshapeFcn(GLint newWidth, GLint newHeight)
{ glViewport(0, 0, newWidth, newHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, GLfloat(newWidth), 0.0, GLfloat(newHeight));
displayTriangle();
glFlush(); }
void main(int argc, char** argv)
{ glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition(200, 200);
glutInitWindowSize(winWidth, winHeight);
glutCreateWindow("Menu Example");
init();
glutDisplayFunc(displayTriangle);
glutCreateMenu(fillOption); // Create pop-up menu.
glutAddMenuEntry("Solid-Color Fill", 1);
glutAddMenuEntry("Color-Interpolation Fill", 2);
glutAttachMenu(GLUT_RIGHT_BUTTON); /* Select a menu using the right mouse button. */
glutReshapeFunc(reshapeFcn);
glutMainLoop(); }
Creating and Managing Multiple GLUT Menus
The integer identifier for a menu is returned by the glutCreateMenu
routine, and we can record this value with a statement such as
menuID = glutCreateMenu (menuFcn);
A newly created menu becomes the current menu for the current
display window. To activate a menu for the current display window,
glutSetMenu (menuID);
To eliminate a menu with the command
glutDestroyMenu (menuID);
If the designated menu is the current menu for a display window, then
that window has no menu assigned as the current menu, even though
other menus may exist.
The following function is used to obtain the identifier for the current menu
in the current display window
currentMenuID = glutGetMenu ( );
A value of 0 is returned if no menus exist for this display window or if the
previous current menu was eliminated with the glutDestroyMenu
function.
Creating GLUT Submenus
A submenu can be associated with a menu by first creating the
submenu using glutCreateMenu, along with a list of suboptions, and
then listing the submenu as an additional option in the main menu.

The glutAddSubMenu function can also be used to add the submenu


to the current menu.
#include<GL/glut.h>
GLsizei winWidth = 400, winHeight = 400; // Initial display-window size.
GLfloat red = 1.0, green = 1.0, blue = 1.0; // Initial color values.
GLenum renderingMode = GL_SMOOTH; // Initial fill method.
void init (void) {
glClearColor (0.6, 0.6, 0.6, 1.0); // Set display-window color to gray.
glMatrixMode (GL_PROJECTION);
gluOrtho2D (0.0, 300.0, 0.0, 300.0); }
void mainMenu (GLint renderingOption) {
switch (renderingOption)
{ case 1: renderingMode = GL_FLAT;
break;
case 2: renderingMode = GL_SMOOTH;
break;
}
glutPostRedisplay ( );
}
/* Set color values according to the submenu option selected. */
void colorSubMenu (GLint colorOption) {
switch (colorOption)
{ case 1: red = 0.0; green = 0.0; blue = 1.0; break;
case 2: red = 0.0; green = 1.0; blue = 0.0; break;
case 3: red = 1.0; green = 1.0; blue = 1.0;
}
glutPostRedisplay ( );
}
void displayTriangle(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glShadeModel(renderingMode); // Set fill method for triangle.
glColor3f(red, green, blue); // Set color for first two vertices.
glBegin(GL_TRIANGLES);
glVertex2i(280, 20);
glVertex2i(160, 280);
glColor3f(1.0, 0.0, 0.0); // Set color of last vertex to red.
glVertex2i(20, 100);
glEnd();
glFlush();
}
void reshapeFcn(GLint newWidth, GLint newHeight)
{
glViewport(0, 0, newWidth, newHeight);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(0.0, GLfloat(newWidth), 0.0, GLfloat(newHeight));
displayTriangle();
glFlush();
}
void main(int argc, char** argv)
{
GLint subMenu; // Identifier for submenu.
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);
glutInitWindowPosition(200, 200);
glutInitWindowSize(winWidth, winHeight);
glutCreateWindow("Submenu Example");
init();
glutDisplayFunc(displayTriangle);
subMenu = glutCreateMenu(colorSubMenu);
glutAddMenuEntry("Blue", 1);
glutAddMenuEntry("Green", 2);
glutAddMenuEntry("White", 3);
glutCreateMenu(mainMenu); // Create main pop-up menu.
glutAddMenuEntry("Solid-Color Fill", 1);
glutAddMenuEntry("Color-Interpolation Fill", 2);
glutAddSubMenu("Color", subMenu);
/* Select menu option using right mouse button. */
glutAttachMenu(GLUT_RIGHT_BUTTON);
glutReshapeFunc(reshapeFcn);
glutMainLoop();
}
Computer Animation
Design of animation sequence
Basic approach to design animation includes,
1. Storyboard layout: it is an outline of actions. It defines the motion
sequence as a set of basic events that are to take place.
Depending on the animation, storyboard consists of a set of rough
sketches.

2. Object definitions: it is given for each participant in the action.


Objects will be defined in terms of basic shapes such as polygons.
It also consists information about the movements that are to be
performed by each character of the story.
3. Key-frame specifications: Key-frame is a detailed drawing of the
scene at a certain time in the animation sequence. Within each key-
frame, each object is positioned according to the time for that frame.
4. Generation of in-between frames: These are the intermediate
frames between the key frames.
Traditional animation techniques
Squash and stretch:
This technique is used emphasise acceleration and deceleration of an
object. Consider object to be a water balloon, it stretches as it
accelerates and when it hits the ground, it squashes or compressed.
Character animation
Articulated figure animation
A basic technique for animating people,
animals, insects is to model them as articulated
figures.
Articulated figures are the structures composed
of a set of rigid links that are connected at
rotary joints, as if it is a moving stick figures or
skeletons.
Different types of movement, such as walking, running, or jumping,
are defined and associated with particular motions for the joints and
connecting links.
Motion capture (mo-cap)
It digitally records the movements of a live actor and the same will be
used as a basis for movement of the animated character.
This can be used when the movements are predetermined as in case
of scripted scene.
It involves placing markers on the strategic positions on the actor’s
body such as arms, legs, hands, feet, etc.,. Then actor is filmed
performing the scene.
Image processing techniques are used to identify the position of
markers in each frame and positions are translated to coordinates,
which will be used to determine the positioning of the body of the
animated character.
Optical motion capture systems rely on the reflection of light from a
marker into the camera.
These can be relatively simple passive systems using photo-reflective
markers that reflect illumination from special lights placed near the
cameras, or more advanced active systems in which the markers are
powered and emit light.
Active systems can be constructed so that the markers illuminate in a
pattern or sequence, which allows each marker to be uniquely
identified in each frame of the recording, simplifying the tracking
process.
Non-optical systems rely on the direct transmission of position
information from the markers to a recording device. Some non-optical
systems use inertial sensors that provide gyroscope-based position
and orientation information.
Others use magnetic sensors that measure changes in magnetic flux.
A series of transmitters placed around the stage generate magnetic
fields that induce current in the magnetic sensors; that information is
then transmitted to receivers.
Periodic Motions
When an animation with repeated motion patterns is constructed, such
as a rotating an object, the motion must be synchronized with the
frame-generation rate so that we display enough frames per cycle to
show the true motion. Otherwise, the animation may be displayed
incorrectly.
Fig illustrates one complete cycle in the rotation of a wagon wheel with
one red spoke that makes 18 clockwise revolutions per second.
If this motion is recorded on film at the standard motion-picture
projection rate of 24 frames per second, then the first five frames
depicting this motion would be
OpenGL animation procedures
Animation procedures usually requires two buffers, which can be
activated as,
glutInitDisplayMode(GLUT_DOUBLE);
This provides two buffers: front buffer and back buffer. One will be used
for refreshing the screen display and another for constructing the next
frame of animation. The role of these two buffers will be interchanged
as,
glutSwapBuffers();
To determine whether two buffers are available,
glGetBooleanv(GL_DOUBLE_BUFFER,status);
If parameter status returns GL_TRUE, then double buffers are available
and if GL_FALSE is returned then no two buffers are available.
For continuous animation,
glutIdleFunc(animationFcn);
Where animationFcn can be assigned the name of the function that is to
be performed for displaying animation. To stop or to disable animation,
glutIdleFunc(NULL); or glutIdleFunc(0);
6. Develop a program to demonstrate
animation effects on simple objects
#include <GL/glut.h>
#include <math.h>
#include <stdlib.h>
const double TWO_PI = 6.2831853;
GLuint regHex;
GLfloat rotTheta = 0.0, hexVertex;
GLint x, y;
void init(void)
{
GLdouble hexTheta;
GLint k;
glClearColor(1.0, 1.0, 1.0, 0.0);
regHex = glGenLists(1);
glNewList(regHex, GL_COMPILE);
glColor3f(1.0, 0.0, 0.0);
glBegin(GL_POLYGON);
for (k = 0; k < 6; k++) {
hexTheta = TWO_PI * k / 6;
x = 150 + 100 * cos(hexTheta);
y = 150 + 100 * sin(hexTheta);
glVertex2i(x, y);
}
glEnd();
glEndList();
}
void displayHex(void)
{
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glRotatef(rotTheta, 0.0, 0.0, 1.0);
glCallList(regHex);
glPopMatrix();
glutSwapBuffers();
glFlush();
}
void rotateHex(void)
{
rotTheta += 3.0;
if (rotTheta > 360.0)
rotTheta -= 360.0;
glutPostRedisplay();
}
void winReshapeFcn(GLint w, GLint h)
{
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluOrtho2D(-320.0, 320.0, -320.0, 320.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
glClear(GL_COLOR_BUFFER_BIT);
}
void mouseFcn(GLint button, GLint action, GLint x, GLint y)
{
switch (button) {
case GLUT_LEFT_BUTTON:
if (action == GLUT_DOWN)
glutIdleFunc(rotateHex);
break;
case GLUT_RIGHT_BUTTON:
if (action == GLUT_DOWN)
glutIdleFunc(NULL);
break;
default:
break;
}
}
void main(int argc, char** argv)
{
glutInit(&argc, argv);
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB);
glutInitWindowPosition(150, 150);
glutInitWindowSize(500,500);
glutCreateWindow("Animation");
init();
glutDisplayFunc(displayHex);
glutReshapeFunc(winReshapeFcn);
glutMouseFunc(mouseFcn);
glutMainLoop();
}

You might also like