COMUTER GRAPHICS

AND VISUALIZATION
21CS63

MODULE 3
Manasa Sandeep
Asst. Prof., CSE DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 INTERACTIVE INPUT METHODS AND
GRAPHICAL USER INTERFACES
• It is often useful to be able to specify graphical input
interactively, during the execution of a program
• for example
• we might want to change the position the location of an
object in a scene
• we might want to change the position of the camera
• we might want to change animation parameters using menu
selections.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 GRAPHICAL INPUT DATA
• Many graphics packages, including the International Standards Organization
(ISO) and American National Standards Institute (ANSI) standards, provide an
extensive set of input functions for processing input data used by many
graphics programs like coordinate positions, attribute values, character-string
specifications, geometric-transformation values, viewing conditions, and
illumination parameter

• To provide interactive input, input procedures require interaction with display-

window managers and specific hardware devices

• A standard organization for input procedures in a graphics package is to

classify the functions according to the type of data that is to be processed by
each function. This allows any physical device, such as a keyboard or a
mouse, to input any data class

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 LOGICAL CLASSIFICATION OF
INPUT DEVICES
• The device that is used to provide the specified data is referred to as a
logical input device for that data type.
• 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

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 LOCATOR DEVICES
• A device for specifying one coordinate position (x,y).
• Interactive selection of a coordinate point is usually accomplished by
positioning the screen cursor at some location in a displayed scene
• Mouse, touchpad, joystick, trackball, spaceball, thumbwheel, dial,
hand cursor, or digitizer stylus can be used for screen-cursor positioning
• Keyboards are used for locator input in several ways.
• A general-purpose keyboard usually has four cursor-control keys that
move the screen cursor up, down, left, and right.
• We can use a keyboard to type in numerical values or other codes to
indicate coordinate positions

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 STROKE DEVICES

• A device for specifying a set of coordinate positions

• Stroke is similar to multiple locators
• This class of logical devices is used to input a sequence of coordinate
positions, and the physical devices used for generating locator input
are also used as stroke devices.
• Continuous movement of a mouse, trackball, joystick, or hand cursor
is translated into a series of input coordinate values
• This procedure is used in paintbrush systems to generate drawings
using various brush strokes.
• Engineering systems also use this process to trace and digitize layouts.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 STRING DEVICES
• A device for specifying text input
• 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.
• Other physical devices can be used for generating character patterns
for special applications.
• Individual characters can be sketched on the screen using a stroke or
locator-type device.
• A pattern recognition program then interprets the characters using a
stored dictionary of predefined patterns.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 VALUATOR DEVICES
• A device for specifying a scalar value.
• valuator input in a graphics program is used to set scalar values for
geometric transformations, viewing parameters, and illumination
parameters
• Some applications use scalar input for setting physical parameters
such as temperature, voltage, or stress-strain factors
• Physical device used to provide valuator input is a panel of control
dials
• Dial settings are calibrated to produce numerical values within some
predefined range.
• Rotary potentiometers convert dial rotation into a corresponding
voltage, which is then translated into a number within a defined scalar
range, such as −10.5 to 25.5.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Instead of dials, slide potentiometers are sometimes used to convert
linear movements into scalar values
• Any keyboard with a set of numeric keys can be used as a valuator
device
• Joysticks, trackballs, tablets, and other interactive devices can be
adapted for valuator input by interpreting pressure or movement of
the device relative to a scalar range.
• For one direction of movement, say left to right, increasing scalar
values can be input.
• Movement in the opposite direction decreases the scalar input value.
• Selected values are usually echoed on the screen for verification.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 CHOICE DEVICES
• A device for selecting a menu option
• 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.
• Each button or function key is programmed to select a particular
operation or value, although preset buttons or keys are sometimes
included on an input device
• For larger menus with relatively few options displayed, a touch panel is
commonly used
• Alternate methods for choice input include keyboard and voice entry.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 PICK DEVICES
• A device for selecting a component of a picture
• Pick device is used to select a part of a scene that is to be
transformed or edited in some way
• Example: Cursor positioning devices like mouse, joystick , trackball,
• we can perform picking by positioning the screen cursor and pressing
a button or key to record the pixel coordinates. This screen position
can then be used to select an entire object, a polygon edge, or a
vertex.
• cursor-positioning approach: a pick procedure could map a selected
screen position to a world-coordinate location using the inverse
viewing and geometric transformations that were specified for the
scene

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• If we are attempting to pick a sphere whose
coordinate extents overlap the coordinate extents of
some other three-dimensional object, the pick position
could be compared to the coordinate extents of the
individual surface facets of the two objects. If this test
fails, the coordinate extents of individual line segments
can be tested
• When coordinate-extent tests do not uniquely identify
a pick object, the distances from the pick position to
individual line segments could be computed. Figure 1
illustrates a pick position that is within the coordinate
extents of two line segments.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Another picking technique is to associate a pick window with a
selected cursor position. The pick window is centered on the cursor
position

• Highlighting can also be used to facilitate picking

• If picture components can be selected by name,

keyboard input can be used to pick an object.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 INPUT FUNCTIONS FOR
GRAPHICAL DATA
• Graphics packages that use the logical classification for input devices
provide several functions for selecting devices and data classes.
• These functions allow a user to specify the following options:
• The input interaction mode for the graphics program and the input devices.
Either the program or the devices can initiate data entry, or both can
operate simultaneously.
• Selection of a physical device that is to provide input within a particular
logical classification (for example, a tablet used as a stroke device).
• Selection of the input time and device for a particular set of data values.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 INPUT MODES
• Input functions in an interactive graphics system are used to specify how
the program and input devices should interact

• It can operate in three modes

• Request Mode
• Sample Mode
• Event Mode

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 REQUEST MODE

• In request mode, the application program initiates data entry

• A program could request input at a particular time in the processing
• When input values are requested, processing is suspended until the
required values are received.
• This input mode corresponds to the typical input operation in a
general programming language.
• The program and the input devices operate alternately.
• Devices are put into a wait state until an input request is made; then
the program waits until the data are delivered

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 SAMPLE MODE
• An input device could independently provide updated input
• The application program and input devices operate independently.
• Input devices may be operating at the same time that the program is
processing other data.
• New values obtained from the input devices replace previously input
data values.
• When the program requires new data, it samples the current values
that have been stored from the device input.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 EVENT MODE
• The device could independently store all collected data
• The input devices initiate data input to the application program.
• The program and the input devices again operate concurrently, but
now the input devices deliver data to an input queue, also called an
event queue.
• All input data is saved. When the program requires new data, it goes
to the data queue

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Any number of devices can be operating at the same time in sample
and event modes.
• Some can be operating in sample mode, while others are operating in
event mode.
• But only one device at a time can deliver input in request mode

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 ECHO FEEDBACK
• Requests can usually be made in an interactive input program for an
echo of input data and associated parameters.
• When an echo of the input data is requested, it is displayed within a
specified screen area.
• Echo feedback can include, for example,
• the size of the pick window,
• the minimum pick distance,
• the type and size of a cursor,
• the type of highlighting to be employed during pick operations,
• The range (mininum and maximum) for valuator input, and
• the resolution (scale) for valuator input.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 CALLBACK FUNCTIONS

• For device-independent graphics packages, a limited set of input

functions can be provided in an auxiliary library.
• Input procedures can then be handled as callback Interactive Input
Methods and Graphical User Interfaces functions that interact with the
system software.
• These functions specify what actions are to be taken by a program
when an input event occurs.
• Typical input events are moving a mouse, pressing a mouse button, or
pressing a key on the keyboard.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 INTERACTIVE PICTURE-
CONSTRUCTION TECHNIQUES
• A variety of interactive methods are often incorporated into a
graphics package that aids in the construction of pictures.
• Routines can be provided for positioning objects, applying constraints,
adjusting the sizes of objects, and designing shapes and patterns

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 BASIC POSITIONING METHODS
• We can interactively choose a coordinate position with a pointing
device that records a screen location
• Selected processing is performed on the chosen coordinate position
• Example: the location could be used to specify the position for a text
string, which could begin at that location or it could be centered on
that location.
• As an additional positioning aid, numeric values for selected positions
can be echoed on the screen. With the echoed coordinate values as
a guide, a user could make small interactive adjustments in the
coordinate values using dials, arrow keys, or other devices

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 DRAGGING
• Another interactive positioning technique is to select an object and
drag it to a new location.

• Using a mouse, for instance, we position the cursor at the object

position, press a mouse button, move the cursor to a new position,
and release the button.

• The object is then displayed at the new cursor location. Usually, the
object is displayed at intermediate positions as the screen cursor
moves.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 CONSTRAINTS
• Any procedure for altering input coordinate values to obtain a particular
orientation or alignment of an object is called a constraint.
• For example, an input line segment can be constrained to be horizontal or
vertical
• constraints can be applied to input coordinates to produce a variety of
alignments, such as 45◦, and input coordinates could be constrained to lie
along predefined paths, such as circular arcs

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 GRIDS

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 RUBBERBAND METHOD

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 INTERACTIVE PAINTING AND
DRAWING METHODS

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 OPENGL INTERACTIVE INPUT-
DEVICE FUNCTIONS
• GLUT Mouse Functions
The following function is used to specify (“register”) a procedure that is
to be called when the mouse pointer is in a display window and a
mouse button is pressed or released:
glutMouseFunc (mouseFcn);
This mouse callback procedure, which we named mouseFcn, has four
arguments:

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Parameter button is assigned a GLUT symbolic constant that denotes one of
the three mouse buttons
• GLUT_LEFT_BUTTON, GLUT_MIDDLE_BUTTON, and GLUT_RIGHT_BUTTON.

• Parameter action is assigned a symbolic constant that specifies which button

action we want to use to trigger the mouse activation event
• GLUT_DOWN or GLUT_UP, depending on whether we want to initiate an action
when we press a mouse button or when we release it

• When procedure mouseFcn is invoked, the display-window location of the

mouse cursor is returned as the coordinate position (xMouse, yMouse).
• This location is relative to the top-left corner of the display window, so that
xMouse is the pixel distance from the left edge of the display window and
yMouse is the pixel distance down from the top of the display window
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 GLUT KEYBOARD FUNCTIONS
• With keyboard input, we use the following function to specify a
procedure that is to be invoked when a key is pressed:
glutKeyboardFunc (keyFcn);

Parameter key is assigned a character value or the corresponding ASCII

code. The display-window mouse location is returned as position
(xMouse, yMouse) relative to the top-left corner of the display window.
When a designated key is pressed, we can use the mouse location to
initiate some action, independently of whether any mouse buttons are
pressed.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• In the following code, presents a simple curve-drawing procedure
using keyboard input.
• A freehand curve is generated by moving the mouse within the
display window while holding down the “c” key.
• This displays a sequence of red dots at each recorded mouse position.
By slowly moving the mouse, we can obtain a solid curved line.
• Mouse buttons have no effect in this example.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
parameter specialKey is assigned an integer-valued GLUT symbolic
constant. To select a function key, we use one of the constants GLUT_KEY
F1 through GLUT_KEY_F12.
For the arrow keys, we use constants such as GLUT_KEY_UP and GLUT_KEY
RIGHT. Other keys can be designated using GLUT KEY PAGE DOWN, GLUT
KEY HOME, and similar constants for the page up, end, and insert keys. The
backspace, delete, and escape keys can be designated with the
glutKeyboardFunc routine using their ASCII codes, which are 8, 127, and
27, respectively.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 OPENGL MENU FUNCTIONS
• GLUT contains various functions for adding simple pop-up menus to
programs
Creating a GLUT Menu
A pop-up menu is created with the statement
glutCreateMenu (menuFcn);
where parameter menuFcn is the name of a procedure that is to be invoked
when a menu entry is selected. This procedure has one argument, which is
the integer value corresponding to the position of a selected option.
void menuFcn (GLint menuItemNumber)
The integer value passed to parameter menuItemNumber is then used by
menuFcn to perform an operation. When a menu is created, it is associated
with the current display window
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• The following function is used to specify the options that are to be listed in
the menu.
glutAddMenuEntry (charString, menuItemNumber);

Next, we must specify a mouse button that is to be used to select a menu

option. This is accomplished with glutAttachMenu (button);

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 glutCreateMenu(demo_menu);
glutAddMenuEntry(“quit”,1);
glutAddMenuEntry(“increase square size”,2);
glutAddMenuEntry(“decrease square size”,3);
glutAttachMenu(GLUT_RIGHT_BUTTON);

• callback function is:

void demo_menu(int id)
{
if(id==1) exit( );
else if(id==2)size = 2*size;
else if (size>1) size = size/2;
glutPostRedisplay( );
}

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 CREATING AND MANAGING MULTIPLE
GLUT MENUS
• When a menu is created, it is associated with the current display
window.
• We can create multiple menus for a single display window, and we
can create different menus for different windows.
• As each menu is created, it is assigned an integer identifier, starting
with the value 1 for the first menu created.
• The integer identifier for a menu is returned by the glutCreateMenu
routine, and we can record this value with a statement such a

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• A newly created menu becomes the current menu for the current display
window. To activate a menu for the current display window, we use the
statement
glutSetMenu (menuID);
This menu then becomes the current menu, which will pop up in the display
window when the mouse button that has been attached to that menu is
pressed
We eliminate a menu with the command
glutDestroyMenu (menuID);
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.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 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. We can add the
submenu to the option list in a main menu (or other submenu) using a
sequence of statements such as

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 • GLUT also supports hierarchical menus

sub_menu = glutCreateMenu(size_menu);
glutAddMenuEntry(“increase square size”,2);
glutAddMenuEntry(“decrease square size”,3);

glutCreateMenu(top_menu);
glutAddMenuEntry(“quit”,1);
glutAddSubMenu(“Resize”, sub_menu);
glutAttachMenu(GLUTRIGHTBUTTON);
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 MODIFYING GLUT MENUS
• If we want to change the mouse button that is used to select a menu
option, we first cancel the current button attachment and then attach the
new button.
• A button attachment is cancelled for the current menu with
glutDetachMenu (mouseButton);

• we can delete an option in the current menu with the function

glutRemoveMenuItem (itemNumber);

where parameter itemNumber is assigned the integer value of the menu

option that is to be deleted.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 DESIGNING A GRAPHICAL USER
INTERFACE.
• A common feature of modern applications software is a graphical
user interface (GUI) composed of display windows, icons, menus,
and other features to aid a user in applying the software to a
particular problem.
• Graphical user interfaces (GUIs) are now standard features of
applications software.
• A dialogue for the software is designed from the user’s model, which
describes the purpose and functions of the applications package.
• All elements of the dialogue are presented in the language of the
application

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 THE USER DIALOGUE
• User’s model of an application describes the system design and its
operation
• It states the type of objects that can be displayed and how the
objects can be manipulated.
• User-dialogue design tells about the ease of use, clarity, and flexibility.

• For example, if the system is to be used as a tool for architectural

design, the model describes how the package can be used to
construct and display views of buildings by positioning walls, doors,
windows, and other building components.
• A facility-layout package might include a set of furniture items along
with the operations for positioning and removing different objects in a
specified floor plan.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 THE USER DIALOGUE

• A circuit-design program provides electrical or logic symbols and the

positioning operations for adding or deleting elements within a layout.
• All information in the user dialogue is presented in the language of the
application.
• In an architectural design package, this means that all interactions
are described only in architectural terms, without reference to
particular data structures, computer-graphics terms, or other
concepts that may be unfamiliar to an architect.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 WINDOWS AND ICONS
• GUIs provide visual representations both for the objects that are to be
manipulated in an application and for the actions to be performed on the
application objects
• It provides standard display-window operations, such as opening, closing,
positioning, and resizing, other operations needed for working with the sliders,
buttons, icons, and menus.
• Some systems are capable of supporting multiple window managers so that
different window managers so that different window styles can be
accommodated, each with its own window manager, which could be
structured for a particular application.
• Icons representing objects such walls, doors, windows, and circuit elements
are often referred to as application icons. The icons representing actions,
such as rotate, magnify, scale, clip, or paste, are called control icons, or
command icons.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 ACCOMMODATING MULTIPLE
SKILL LEVELS
• Interactive GUIs provide several methods for selecting actions.
• For example, an option could be specified by pointing to an icon,
accessing a pulldown or pop-up menu, or by typing a keyboard command.
This allows a package to accommodate users that have different skill levels.
• A less experienced user may find an interface with a large, comprehensive
set of operations to be difficult to use, so a smaller interface with fewer but
more easily understood operations and detailed prompting may be
preferable.
• A simplified set of menus and options is easy to learn and remember, and
the user can concentrate on the application instead of on the details of the
interface

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Experienced users, on the other hand, typically want speed. This means fewer
prompts and more input from the keyboard or with multiple mouse-button
clicks. Actions are selected with function keys or with simultaneous
combinations of keyboard keys, because experienced users will remember
these shortcuts for commonly used actions

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 CONSISTENCY
• An important design consideration in an interface is consistency.
• An icon shape should always have a single meaning, rather than
serving to represent different actions or objects depending on the
context.
• Some other examples of consistency are
• always placing menus in the same relative positions so that a user does
not have to hunt for a particular option,
• always using the same combination of keyboard keys for an action, and
• always using the same color encoding so that a color does not have
different meanings in different situations.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 MINIMIZING MEMORIZATION
• Operations in an interface should also be structured so that they are easy to
understand and to remember.
• Obscure, complicated, inconsistent, and abbreviated command formats lead
to confusion and reduction in the effective application of the software.
• One key or button used for all delete operations, for example, is easier to
remember than a number of different keys for different kinds of delete
procedures.
• Icons and window systems can also be organized to minimize memorization.
• Different kinds of information can be separated into different windows so that
a user can identify and select items easily.
• Icons should be designed as easily recognizable shapes that are related to
application objects and actions. To select a particular action, a user should
be able to select an icon that resembles that action.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 BACKUP AND ERROR HANDLING
• A mechanism for undoing a sequence of operations is another common
feature of an interface, which allows a user to explore the capabilities of a
system, knowing that the effects of a mistake can be corrected.
• Systems can now undo several operations, thus allowing a user to reset the
system to some specified action.
• For those actions that cannot be reversed, such as closing an application
without saving changes, the system asks for a verification of the requested
operation.
• Good diagnostics and error messages help a user to determine the cause
of an error.
• Interfaces can attempt to minimize errors by anticipating certain actions
that could lead to an error; and users can be warned if they are requesting
ambiguous or incorrect actions, such as attempting to apply a procedure
to multiple application objects
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 FEEDBACK
• Responding to user actions is another important feature of an interface,
particularly for an inexperienced user.
• As each action is entered, some response should be given. Otherwise, a
user might begin to wonder what the system is doing and whether the
input should be reentered.
• Feedback can be given in many forms,
• such as highlighting an object,
• displaying an icon or message
• displaying a selected menu option in a different color.
• When the processing of a requested action is lengthy:
• the display of a flashing message, clock, hourglass, or other progress indicator
is important.
• It may also be possible for the system to display partial results as they are
completed, so that the final display is built up a piece at a time.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 COMPUTER ANIMATION
• Computer animation is the process used for digitally generating moving
images.

• The term computer animation generally refers to any time sequence of visual
changes in a picture

• In addition to changing object position with translation or rotation, a

computer generated animations could display time variations in object size,
color, transparency or surface texture

• Computer animations can be generated by varying camera parameters, such as

position, orientation, or focal length, and variations in lighting effects or other
parameters and procedures associated with illumination and rendering can be
used to produce computer animations.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 COMPUTER ANIMATION

• Another consideration in computer-generated animation is realism. Many

applications require realistic displays

• An animation sequence can be constructed frame by frame, or it can be

generated in real time.

• When separate frames of an animation are constructed and stored, the frames can
later be transferred to film or displayed in rapid succession on a video monitor.

• Animations involving complex scenes and motions are commonly produced one
frame at a time, while simpler motion sequences are displayed in real time.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 DESIGN OF ANIMATION
SEQUENCES
• Constructing an animation sequence can be a complicated task,
particularly when it involves a story line and multiple objects, each of
which can move in a different way.

• A basic approach is to design such animation sequences using the

following development stages:
• Storyboard layout
• Object definitions
• Key-frame specifications
• Generation of in-between frames

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 STORYBOARD LAYOUT

• The storyboard is an outline of the action.

• It defines the motion sequence as a set of basic events that are to take
place.

• Depending on the type of animation to be produced, the storyboard

could consist of a set of rough sketches, along with a brief description of
the movements, or it could just be a list of the basic ideas for the action.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 OBJECT DEFINITION

• An object definition is given for each participant in the animation.

• Objects can be defined in terms of basic shapes, such as polygons or spline

surfaces.

• In addition, a description is often given of the movements that are to be

performed by each character or object in the story.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 KEY FRAME
• key frame is a detailed drawing of the scene at a certain time in the
animation sequence.
• Within each key frame, each object (or character) is positioned
according to the time for that frame.
• Some key frames are chosen at extreme positions in the action; others
are spaced so that the time interval between key frames is not too
great.
• More key frames are specified for intricate motions than for simple,
slowly varying motions.
• Development of the key frames is generally the responsibility of the
senior animators, and often a separate animator is assigned to each
character in the animation.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 IN-BETWEENS
• In-betweens are the intermediate frames between the key frames.
• The total number of frames, and hence the total number of in-betweens,
needed for an animation is determined by the display media that is to be
used.
• Film requires 24 frames per second, and graphics terminals are refreshed at
the rate of 60 or more frames per second.
• Typically, time intervals for the motion are set up so that there are from three
to five in-betweens for each pair of key frames.
• Depending on the speed specified for the motion, some key frames could
be duplicated.
• As an example, a 1-minute film sequence with no duplication requires a
total of 1,440 frames. If five in-betweens are required for each pair of key
frames, then 288 key frames would need to be developed
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• [Link]
• [Link]

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• Example taken from: [Link]

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 TRADITIONAL ANIMATION
TECHNIQUES

• Film animators use a variety of methods for depicting and emphasizing

motion sequences.
• These include object deformations, spacing between animation frames,
motion anticipation and follow-through, and action focusing.
• One of the most important techniques for simulating acceleration effects,
particularly for nonrigid objects, is squash and stretch.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 TRADITIONAL ANIMATION
TECHNIQUES
SQUASH AND STRETCH

• Purpose is to give a sense of weight and flexibility to drawn object

• Can be applied to simple objects like bouncing ball to complex
constructions like musculature of a human face
• Figure stretched or squashed to an exaggerated degree will have a
comical effect
• So, in realistic animation, the object’s volume shouldn’t change when
squashed or stretched
• Example: if the length of the ball is stretched vertically, its width (also depth
in 3D) needs to contract horizontally

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Figure 4 in next slide shows how this technique is used to emphasize
the acceleration and deceleration of a bouncing ball. As the ball
accelerates, it begins to stretch. When the ball hits the floor and stops,
it is first compressed (squashed) and then stretched again as it
accelerates and bounces upwards.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 TIMING
• Another technique used by film animators is timing, which refers to the
spacing between motion frames.

• A slower moving object is represented with more closely spaced frames,

and a faster moving object is displayed with fewer frames over the path of
the motion.

• This effect is illustrated in Figure 5, where the position changes between

frames increase as a bouncing ball moves faster

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

ANTICIPATION
• Used to prepare the audience for an action, and make the action appear
more realistic
• Object movements can also be emphasized by creating preliminary
actions that indicate an anticipation of a coming motion.
• For example, a cartoon character might lean forward and rotate its body
before starting to run; or a character might perform a “windup” before
throwing a ball.
• This technique can be used for less physical actions. Example: character
looking off screen to anticipate someone’s arrival, or attention focusing on
an object that a character is about to pickup
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
FOLLOW-THROUGH ACTIONS
• follow-through actions can be used to emphasize a previous motion.
• After throwing a ball, a character can continue the arm swing back to its
body; or a hat can fly off a character that is stopped abruptly.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

STAGING
• Its purpose is to direct the audience’s attention, make it clear what is of
greatest importance in the scene
• Such an action can be emphasized with staging, which refers to any
method for focusing on an important part of a scene, such as a
character hiding something.

• This can be done by various means, such as placement of a character in

the frame, the use of light and shadow, or the angle and position of the
camera
• It focuses only on relevant details and avoids unnecessary detail

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 GENERAL COMPUTER-ANIMATION
FUNCTIONS

• Many software packages have been developed either for general

animation design or for performing specialized animation tasks.

• Typical animation functions include

• managing object motions,
• generating views of objects,
• producing camera motions, and
• generation of in-between frames.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 GENERAL COMPUTER-ANIMATION
FUNCTIONS
• Animation packages, such as Wavefront, provide special functions for
both the overall animation design and the processing of individual
objects.

• Others are special-purpose packages for particular features of an

animation, such as a system for generating in-between frames or a
system for figure animation

• A set of routines is often provided in a general animation package for

storing and managing the object database.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Object shapes and associated parameters are stored and updated in the
database.
• Other object functions include those for generating the object motion and
those for rendering the object surfaces.
• Movements can be generated according to specified constraints using two
dimensional or three-dimensional transformations.
• Standard functions can then be applied to identify visible surfaces and apply
the rendering algorithms.
• Another typical function set simulates camera movements. Standard
camera motions are zooming, panning, and tilting.
• Finally, given the specification for the key frames, the in-betweens can be
generated automatically.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 COMPUTER-ANIMATION
LANGUAGES

• We can develop routines to design and control animation sequences

within a general-purpose programming language, such as C, C++,
Lisp, or Fortran, but several specialized animation languages have
been developed.
• These languages typically include a graphics editor, a key-frame
generator, an in-between generator, and standard graphics routines.

• The graphics editor allows an animator to design and modify object

shapes, using spline surfaces, constructive solid geometry methods, or
other representation schemes.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• An important task in an animation specification is scene description.
• This includes the
• positioning of objects and light sources,
• defining the photometric parameters (light-source intensities and surface
illumination properties), and
• setting the camera parameters (position, orientation, and lens
characteristics).
• action specification, which involves the layout of motion paths for the
objects and camera.
• We need the usual graphics routines: viewing and perspective
transformations, geometric transformations to generate object
movements as a function of accelerations or kinematic path
specifications, visible-surface identification, and the surface-rendering
operations.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• Key-frame systems were originally designed as a separate set of animation
routines for generating the in-betweens from the user-specified key frames.
Now, these routines are often a component in a more general animation
package.
• In the simplest case, each object in a scene is defined as a set of rigid bodies
connected at the joints and with a limited number of degrees of freedom.
• As an example, the single-armed robot in has 6 degrees of freedom, which
are referred to as arm sweep, shoulder swivel, elbow extension, pitch, yaw,
and roll.
• We can extend the number of degrees of freedom for this robot arm to 9 by
allowing three-dimensional translations for the base

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• If we also allow base rotations, the robot arm can have a total of 12
degrees of freedom.
• The human body, in comparison, has more than 200 degrees of
freedom
• Parameterized systems allow object motion characteristics to be
specified as part of the object definitions.
• The adjustable parameters control such object characteristics as
degrees of freedom, motion limitations, and allowable shape changes.
• Scripting systems allow object specifications and animation sequences
to be defined with a user-input script.
• From the script, a library of various objects and motions can be
constructed.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 CHARACTER ANIMATION
• Animation of simple objects is relatively straightforward.
• When we consider the animation of more complex figures such as
humans or animals, however, it becomes much more difficult to
create realistic animation.
• Consider the animation of walking or running human (or humanoid)
characters.
• Based upon observations in their own lives of walking or running
people, viewers will expect to see animated characters move in
particular ways.
• If an animated character’s movement doesn’t match this
expectation, the believability of the character may suffer.
• Thus, much of the work involved in character animation is focused on
creating believable movements.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 ARTICULATED
FIGURE ANIMATION

• A basic technique for animating people, animals, insects, and other

critters is to model them as articulated figures, which are hierarchical
structures composed of a set of rigid links that are connected at rotary
joints
• Also called as moving stick figures, or simplified skeletons,
• They can later be wrapped with surfaces representing skin, hair, fur,
feathers, clothes, or other outer coverings
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• A series of walking leg motions, for instance, might be defined as in
Figure 18.
• The hip joint is translated forward along a horizontal line, while the
connecting links perform a series of movements about the hip, knee,
and angle joints.
• Starting with a straight leg [Figure 18(a)], the first motion is a knee
bend as the hip moves forward [Figure 18(b)].
• Then the leg swings forward, returns to the vertical position, and swings
back, as shown in Figures 18(c), (d), and (e). The final motions are a
wide swing back and a return to the straight vertical position, as in
Figures 18(f) and (g). This motion cycle is repeated for the duration of
the animation as the figure moves over a specified distance or time
interval.
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
• Both kinematic-motion descriptions and inverse kinematics are used in
figure animations.
• Specifying the joint motions is generally an easier task, but inverse
kinematics can be useful for producing simple motion over arbitrary
terrain.
• For a complicated figure, inverse kinematics may not produce a
unique animation sequence: Many different rotational motions may
be possible for a given set of initial and final conditions.
• In such cases, a unique solution may be possible by adding more
constraints, such as conservation of momentum, to the system.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 [Link]

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 MOTION CAPTURE
• This technique digitally record the movement of a live actor and to
base the movement of an animated character on that information.
• The animated character will perform the same series of movements as
the live actor
• The classic motion capture technique involves placing a set of
markers at strategic positions on the actor’s body, such as the arms,
legs, hands, feet, and joints.
• The markers are more commonly affixed to a special skintight body
suit worn by the actor.
• The actor is then filmed performing the scene.

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

• Image processing techniques are then used to identify the positions of
the markers in each frame of the film, and their positions are
translated to coordinates.
• These coordinates are used to determine the positioning of the body
of the animated character.
• The movement of each marker from frame to frame in the film is
tracked and used to control the corresponding movement of the
animated character

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

 PERIODIC MOTIONS
• When we construct an animation with repeated motion patterns, such as
a rotating object, we need to be sure that the motion is sampled
frequently enough to represent the movements correctly.
• In other words, 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

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM
 OPENGL ANIMATION
PROCEDURES

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM

CG&FIP(21CS63) Manasa Sandeep, Dept. of CSE, DSATM