CGA

MODULE: COMPUTER GRAPHICS &

ANIMATION

Vidyalankar School of
Information Technology
Wadala (E), Mumbai

www.vsit.edu.in
 Certificate
This is to certify that the e-book titled “Computer
Graphics and Animation” comprises all elementary
learning tools for a better understating of the relevant
concepts. This e-book is comprehensively compiled as
per the predefined eight parameters and
guidelines.

Signature Date: 25-03-2021

Prof. Madhavi Amondkar
Assistant Professor
Department of IT

DISCLAIMER: The information contained in this e-book is compiled and

distributed for educational purposes only. This e-book has been designed
to help learners understand relevant concepts with a more dynamic
interface. The compiler of this e-book and Vidyalankar School of
Information & Technology give full and due credit to the authors of the
contents, developers and all websites from wherever information has been
sourced. We acknowledge our gratitude towards the websites YouTube,
Wikipedia, and Google search engine. No commercial benefits are being
drawn from this project.
 Unit 5: Computer Animation

Contents
Computer Animation:
Principles of Animation, Key framing, Deformations, Character Animation, Physics-Based Animation,
Procedural Techniques, Groups of Objects.
Image Manipulation and Storage:
What is an Image? Digital image file formats, Image compression standard – JPEG, Image Processing -
Digital image enhancement, contrast stretching, Histogram Equalization, smoothing and median
Filtering.

References:
Sr.
Reference Book Titles Author/s Publisher Edition Module Nos.
No

J. D. Foley, A. Van 2nd

Computer Graphics - Principles
1 Dam, S. K. Feiner and Pearson Unit 1
and Practice
J. F. Hughes

Fundamentals of Computer Steve Marschner,

2 CRC Press 4th Unit 2, 3 & 5
Graphics Peter Shirley

2nd
3 Computer Graphics Hearn, Baker Pearson All

Principles of Interactive William M. Newman 2nd

4 TMH Unit 5
Computer Graphics and Robert F. Sproull

D. F. Rogers, J. A. 2nd
5 Mathematical Elements for CG TMH Unit 2 & 3
Adams

6 Basics of Computer Graphics Atul.P. Godse Technical 1st Unit 1 & 2

Prerequisites and Linking

Unit I Pre- Sem. II Sem. Sem. Sem. Sem. VI

Requisites III IV V

Introduction - OOPS - - - Project

Unit 5 Computer Animation

Principles of Animation
▪ The principles of animation form the basis of all motion work.
▪ The 12 principles of animation were first introduced by Disney animators Ollie Johnston and
Frank Thomas in their book The Illusion of Life: Disney Animation, which was originally
released in 1981.

1. Squash and stretch

▪ The squash and stretch principle gives your animated characters and objects the illusion of
gravity, weight, mass and flexibility. For instance, a bouncing rubber ball may react when
tossed into the air: the ball stretches when it travels up and down and squishes when it hits
the ground.
2. Anticipation
▪ Anticipation helps to prepare the viewer for what's about to happen. When applied, it has the
effect of making the object's action more natural and realistic.
▪ For instance, if you were to jump in the air , the you need to bend your knees, or to throw a
ball, first you need to pull your arm back. Anticipation gives more life to the animating
movements.
3. Staging
▪ Staging in animation is a lot like composition in artwork. It means that, you should use
motion to guide the viewer's eye and draw attention to what's important within the
scene.
▪ Keep the focus on what's important within the scene, and keep the motion of everything else
of non-importance to a minimum.
4. Straight ahead action and pose to pose
▪ There are two ways to handle drawing animation: straight ahead and pose to pose.
▪ Straight ahead action involves drawing frame-by-frame from start to finish. If you're
looking for fluid, realistic movements, straight ahead action is your best bet.
▪ Pose to pose technique involves drawing the beginning frame, the end frame, and a few
key frames in-between. Then you go back and complete the rest. This technique gives you
a bit more control within the scene and allows you to increase the dramatic effect of the
motion.
5. Follow through and overlapping action
▪ When objects come to a standstill after being in motion, different parts of the object will
stop at different rates. Similarly, not everything on an object will move at the same rate.
▪ If your character is running across the scene, their arms and legs may be moving at a different
rate from their head. This is overlapping action.
▪ Likewise, when they stop running, their hair will likely continue to move for a few frames
before coming to rest. This is follow through.
6. Slow in and slow out
▪ Consider the instance of how a car starts up and stops.
▪ It will start moving slowly, before gaining momentum and speeding up. The reverse will
happen when the car brakes.
▪ In animation, this effect is achieved by adding more frames at the beginning and end of an
action sequence.
7. Arc
 ▪ When working in animation, some laws of physics are applied. Most objects follow an arc or
a path when they're moving, and your animations should reflect that arc.
▪ For example, when you toss a ball into the air, it follows a natural arc as the effects of the
Earth's gravity act upon it.
8. Secondary Actions
▪ Secondary actions are used to support or emphasise the main action going on within a
scene. Adding secondary actions help add more dimension to your characters and objects.
▪ For instance, the subtle movement of your character’s hair as they walk, or a facial expression
or a secondary object reacting to the first.
9. Timing
▪ Using the correct timing allows you to control the mood and the reaction of your
characters and objects.
▪ If you move an object more quickly or slowly than it would naturally move in the real world,
the effect won't be believable.
10. Exaggeration
▪ Too much realism can ruin an animation, making it appear static and boring.
▪ Instead, adding some exaggeration to your characters and objects, make them more
dynamic.
11.Solid drawing
▪ You need to understand the basics of drawing. This includes knowing how to draw in three-
dimensional space and understanding form and anatomy, weight and volume, and lights
and shadows.
▪ For instance, if your world has wonky doors and a warped perspective, keep that perspective
throughout the entire animation. Otherwise, things will fall apart.
12. Appeal
▪ Your characters, objects, and the world in which they live need to appeal to the viewer.
▪ This includes having an easy-to-read design, solid drawing, and a personality.
▪ There is no formula for getting this right, but it starts with strong character development and
being able to tell your story through the art of animation.

Key framing
▪ A keyframe in animation is a drawing that defines the starting and ending points of any
smooth transition. The drawings are called "frames" because their position in time is
measured in frames on a strip of film.
 Fig: Keyframe Animation
▪ A sequence of keyframes defines which movement the viewer will see, whereas the position
of the keyframes on the film, video, or animation defines the timing of the movement.
Because only two or three keyframes over the span of a second do not create the illusion of
movement, the remaining frames are filled with inbetweens.
▪ The intermediate frames between the keyframe. The number of in-betweens needed is
determined by the media to be used to display animation.

Deformations:
▪ In computer graphics, free-form deformation (FFD) is a geometric technique used to
model simple deformations of rigid objects. It is based on the idea of enclosing an object
within a cube or another hull object, and transforming the object within the hull as the hull
is deformed.
▪ Deformation of the hull is based on the concept of so-called hyper-patches, which are three-
dimensional analogs of parametric curves such as Bézier curves, B-splines.
▪ The technique was first described by Thomas W. Sederberg and Scott R. Parry in 1986, and
is based on an earlier technique by Alan Barr.
▪ Interactive deformation is an important aspect of geometry processing, used for
instance in CAGD (Computer Animation Graphics and Design) and the movie industry.
▪ Shape manipulation is driven by a variation optimization, which guarantees high quality
deformations by minimizing physically-inspired energies subject to user-controlled
constraints
 ▪ We distinguish between linear and nonlinear approaches, depending on whether the energy
minimization leads to the solution of a linear or nonlinear problem.

Character Animation
▪ Character animation is a specialized area of the animation process, which involves bringing
animated characters to life. The role of a Character Animator is analogous to that of a film
or stage actor, and character animators are often said to be "actors with a pencil" (or a mouse).
▪ Character animators breathe life in their characters, creating the illusion of thought, emotion
and personality. Character animation is distinguished from creature animation, which
involves bringing photo-realistic animals and creatures to life.
▪ Character animation is generally defined as the art of making a particular character move
in a two- or three-dimensional context. It is a process central to the concept of animation.
▪ In computer animation, character animation is the creation of an animated person or animal.
The animator will make a unique character-generated individual and decide how the character
will look, move, and interact with its environment.
▪ The idea of character animation has evolved through various types of animation techniques.
Many associate early character animation with Walt Disney Studios, where cartoon artists
created particular characters and presented them with particular traits and characteristics on
screen. This requires combining a lot of technical drawing or animation with some top-level
ideas about how the character moves, "thinks," behaves and otherwise appears consistently
on screen.
▪ As primitive cartoon animation gave way to modern three-dimensional animation, character
animation has evolved along with it.
▪ Today’s character animation involves elements like character rigging and the creation of
object-oriented frameworks for creating character sequences.
▪ At the same time, processes like voice dubbing by celebrities and advanced character profiles
are doing the conceptual work of building that character’s persona and background. One
example is the early CGI Toy Story movies, where the careful creation of specialized on-
screen characters has sold lots of merchandise and driven the films to legacy blockbuster
status.

Fig: Character Animation

Physics – Based Animation

 ▪ Physics based animation is an area of interest within computer graphics concerned with the
simulation of physically plausible behaviors at interactive rates. Advances in physically based
animation are often motivated by the need to include complex, physically inspired behaviors
in video games, interactive simulations, and movies.
▪ Physics-based animation methods are intended for applications that necessitate physical
accuracy and slow, detailed computations. Techniques in physically based animation are
concerned with physical plausibility, numerical stability, and visual appeal over physical
accuracy.
▪ Physically based animation is often limited to loose approximations of physical behaviors
because of the strict time constraints imposed by interactive applications. The target frame
rate for interactive applications such as games and simulations is often 25-60 hertz, with only
a small fraction of the time allotted to an individual frame remaining for physical simulation.

Physics based animation in games and simulations

▪ Physics based animation is common in games and simulations where users have the
expectation of interaction with the environment. Physics engines such as Havok, PhysX, and
Bullet exist as separately developed products to be licensed and included in games.
▪ In games such as Angry Birds or World of Goo, physics based animation is itself the primary
game mechanic and players are expected to interact with or create physically simulated
systems in order to achieve goals.
▪ Aspects of physics puzzle games exist in many games that belong to other genres but feature
physically based simulation. Allowing physical interaction with the environment through
physically based animation promotes non-linear solutions to puzzles by players, and can
sometimes results in solutions to problems presented in games that were not deliberately
included by level designers.
▪ Simulations used for purposes other than entertainment, such as military simulations, also
make use of physics based animation to portray realistic situations and maintain the
immersion of users.

Physically based animation in movies

▪ Simulations can be performed offline in the development of special effects for movies.
▪ The physical accuracy of small details in a special effect are not meaningful to their visual
appeal, restrict the amount of control that artists and directors can exert over behavior, and
increase the monetary cost and time required to achieve results.
▪ It is necessary to be able to dictate the high level behavior of physically inspired effects in
movies in order to achieve a desired artistic direction, but scripting physical behaviors on the
level of small details can be unfeasible when fluids, smoke, or many individual objects are
involved.
▪ Physically based animation generally affords more artist control over the appearance of
simulated results and is also more convenient when desired effects might bend or defy
physics.

Procedural Techniques
 ▪ A procedural animation is a type of computer animation, used to automatically generate
animation in real-time to allow for a more diverse series of actions than could otherwise be
created using predefined animations.
▪ Procedural animation is used to simulate particle systems (smoke, fire, water), cloth and
clothing, rigid body dynamics, and hair and fur dynamics, as well as character animation.
▪ In a procedural animation objects are animated by a procedure (a set of rules). The animator
specifies rules and initial conditions and runs simulation. Rules are often based on physical
rules of the real world expressed by mathematical equations.

Categories of procedural animation

Two large categories of procedural animation are
1. Physics-based modeling/animation
2. Alife (artificial life)

1. Physics-based modeling/animation
▪ It deals with things that are not alive. Physics-based modeling/animation refers to
techniques that include various physical parameters, as well as geometrical information, into
models. The behavior of the models is simulated using well-know natural physical laws.
Physics-based modeling/animation can be considered as a sub-set of procedural animation
and includes particle systems, flexible dynamics, rigid body dynamics, fluid dynamics, and
fur/hair dynamics.

2. Alife (artificial life)

▪ It deals with things are virtually alive.

Groups of Objects

▪ Multiple objects are animated using any standard technique such as flocking and particle
systems
▪ During flocking, as the number of objects in the group increases, the intelligence of an
individual group member decreases. This creates an emergent behavior that arises as a result
of limited interactions of group members / objects.
▪ They interact with only few of the nearest neighbours. The motion of the objects in a group
is called a “boid”
▪ When boid is applied on flocks then, external physical forces acts on boid such as gravity,
wind etc. Boid acts to global environments and to the behavior of other group members.
▪ In particle system, the number of particles are much higher than the number of boids in a
flock. During animation, the exact number of particles may fluctuate.
▪ Particles are independent from each other. It ignores the neighborhoods and interacts with
the global environment. Unlike flocking, particle system interacts with the environment by
experiencing external forces and collision with the objects.
▪ Particle system creates new particles with initial parameters, terminates or destroys old
particles, computes necessary forces and updates the velocities and position of the
remaining particles.

What is an Image?
 ▪ An image is a picture that has been created or copied and stored in electronic form.
▪ An image can be described in terms of vector graphics or raster graphics.
▪ An image stored in raster form is sometimes called a bitmap.

Digital image file formats

▪ Some common image file formats are as follows:

1. JPEG
▪ It is a graphic image file produced according to a standard from the JPEG.
▪ JPEGs usually have a .jpg file extension.

1. JPEG
▪ It stands for Joint Photographic Experts Group.
▪ It is a graphic image file produced according to a standard from the JPEG.
▪ JPEGs have a .jpg file extension.

2. GIF
▪ It stands for Graphics Interchange Format.
▪ The GIF uses the 2D raster data type and is encoded in binary.
▪ GIF files ordinarily have the .gif extension.

3. GIF89a
▪ It is an animated GIF image, formatted according to GIF Version 89a.
▪ Animated GIF image has the ability to create an animated image that can be played after
transmitting to a viewer page that moves.

4. PNG
▪ It stands for Portable Network Graphics.
▪ It is a file format for image compression that was designed to provide a number of
improvements over the GIF format.
▪ A PNG file is compressed in lossless fashion (meaning all image information is restored when
the file is decompressed during viewing).
▪ PNGs have a .png extension.

5. SVG
▪ It stands for Scalable Vector Graphics.
▪ The image is a description of an image as an application of XML.
▪ Any program such as a browser that recognizes XML can display the image using the
information provided in the SVG format.
▪ Scalability means that the file can be viewed on a computer display of any size and resolution.
▪ SVGs have .svg extension.

6. TIFF
▪ It stands for Tag Image File Format.
▪ It is a common format for exchanging raster graphics (bitmap) images between application
programs, including those used for scanner images.
▪ These files have a .tiff or ".tif" file name suffix.
7. BMP
▪ The BMP file format handles graphic files within the Microsoft Windows OS.
▪ BMP files are uncompressed, and therefore large and lossless.

8. WebP
▪ WebP is a new open image format that uses both lossless and lossy compression.
▪ It was designed by Google to reduce image file size to speed up web page loading.
▪ Its principal purpose is to supersede JPEG as the primary format for photographs on the web.

9. HEIF
▪ It stands for High Efficiency Image File Format
▪ It is an image container format that was standardized by MPEG.

10. BAT
▪ BAT was released into the public domain by C-Cube Microsystems.
▪ The "official" file format for JPEG files is SPIFF (Still Picture Interchange File Format), but
by the time it was released, BAT had already achieved wide acceptance.

11. BPG
▪ It stands for Better Portable Graphics.
▪ Its purpose is to replace the JPEG image format when quality or file size is an issue.

Image compression standard – JPEG

▪ Image compression is the method of data compression on digital images.

▪ The main objective in the image compression is:
o Store data in an efficient form
o Transmit data in an efficient form
▪ Image compression can be lossy or lossless.

JPEG compression
▪ JPEG stands for Joint photographic experts group.
▪ It is the first interanational standard in image compression.
▪ It is widely used today.
▪ It could be lossy as well as lossless.
Steps to perform JPEG compression:
▪ The first step is to an image of 8 x 8 blocks.

▪ Let’s say that the image has the following pixel values.

▪ The range of the pixels intensities now are from 0 to 255. We will change the range from -
128 to 127. Starting from the first block, we will subtract 128 from each of the pixel values.
▪ After that we have to find the discrete fourier transform of the matrix using the following.

Let’s say it is A(i,j)

 ▪ The result of this should be quantized.
▪ The last step is to apply encoding in the zig zag manner and do it till you find all zero.

▪ Save this one dimensional array and you are done.

Image Processing - Digital image enhancement

▪ Image processing is a method to perform some operations on an image, in order to get an

enhanced image or to extract some useful information from it.
▪ It is a type of signal processing in which input is an image and output may be image or
characteristics/features associated with that image.
▪ Image processing basically includes the following three steps:
o Importing the image via image acquisition tools.
o Analysing and manipulating the image.
o Output in which result can be altered image or report that is based on image analysis.
▪ There are two types of methods used for image processing namely, analogue and digital
image processing.
▪ Analogue image processing can be used for the hard copies like printouts and photographs.
▪ Digital image processing techniques help in manipulation of the digital images by using
computers.

▪ Image enhancement is the process of adjusting digital images so that the results are more
suitable for display or further image analysis.
▪ For example, you can remove noise, sharpen, or brighten an image, making it easier to identify
key features.
▪ Methods of image enhancement:
o Filtering with morphological operators
o Histogram equalization
o Noise removal using a Wiener filter
 o Linear contrast adjustment
o Median filtering
o Unsharp mask filtering
o Contrast-limited adaptive histogram equalization (CLAHE)
o Decorrelation stretch

Fig: Correcting nonuniform illumination with morphological operators

Fig: Enhancing grayscale images with histogram equalization.

Fig: 12.3: Deblurring images using a Wiener filter.

Contrast stretching
▪ Contrast stretching (often called normalization) is a simple image enhancement technique
that attempts to improve the contrast in an image by `stretching' the range of intensity values
 it contains to span a desired range of values, e.g. the the full range of pixel values that the
image type concerned allows.
▪ It differs from the more sophisticated histogram equalization where it can only apply a linear
scaling function to the image pixel values.
▪ As a result the `enhancement' is less harsh.
▪ Contrast stretching techniqus accept a graylevel image as input and produce another graylevel
image as output.
▪ The contrast of an image is a measure of its dynamic range, or the "spread" of its histogram.
▪ The dynamic range of an image is defined to be the entire range of intensity values contained
within an image.
▪ Contrast stretching is a linear mapping of input to output values.

Procedure:
▪ The first step is to determine the limits over which image intensity values will be extended.
▪ These lower and upper limits will be called a and b, respectively (for standard 8-bit grayscale
pictures, these limits are usually 0 and 255).
▪ Next, the histogram of the original image is examined to determine the value limits (lower =
c, upper = d) in the unmodified picture.
▪ If the original range covers the full possible set of values, straightforward contrast stretching
will achieve nothing, but even then sometimes most of the image data is contained within a
restricted range; this restricted range can be stretched linearly, with original values which lie
outside the range being set to the appropriate limit of the extended output range.
▪ Then for each pixel, the original value r is mapped to output value s using the function:
 Fig: Image enhancement after contrast stretching

Fig: 12.5: X-ray image (a) Low contrast chest x-ray image, (b) Low contrast histogram

Fig: (a) Contrast-stretched chest x-ray image, (b) Modified histogram.

Histogram Equalization
Histogram equalization is a method in image processing of contrast adjustment using the image's
histogram. It is a technique for adjusting image intensities to enhance contrast.
Let f be a given image represented as a mr X mc matrix of integer pixel intensities ranging from 0
to L − 1.
L is the number of possible intensity values, often 256.
Let p denote the normalized histogram of f with each possible intensity.
So, we have
𝑁𝑢𝑚𝑏𝑒𝑟 𝑜𝑓 𝑝𝑖𝑥𝑒𝑙𝑠 𝑤𝑖𝑡ℎ 𝑖𝑛𝑡𝑒𝑛𝑠𝑖𝑡𝑦 𝑛
𝑝𝑛 = 𝑤ℎ𝑒𝑟𝑒 𝑛 = 0, 1, . . . . , 𝐿 − 1
𝑇𝑜𝑡𝑎𝑙 𝑛𝑢𝑚𝑏𝑒𝑟 𝑜𝑓 𝑝𝑖𝑥𝑒𝑙𝑠

The histogram equalized image g will be defined by

where floor() rounds down to the nearest integer. This is equivalent to transforming the pixel
intensities, k, of f by the function

This transformation comes from the intensities of f and g as continuous random variables X, Y on [0,L
− 1] with Y defined by

where PX is the probability density function of f. T is the cumulative distributive function of X

multiplied by (L − 1).
 Fig: Histogram equalization applied to low contrast image

Smoothing and median Filtering

▪ Smoothing technique is applied by taking average of neighbourhood pixels, where each pixel
is replaced by the average value of the pixels contained in some neighborhood about it.
▪ Smoothing is used for blurring and noise reduction.
▪ Blurring is used in pre – processing steps to remove small details from an image prior to
knowledge extraction.
▪ The idea of smoothing or mean filtering is to replace each pixel value in an image with the
mean(average) value of its neighborhood, including itself.
 ▪ This process eliminates pixel values which are unrepresentative of their surroundings.

▪ The median filter is a nonlinear digital filtering technique, often used to remove noise from
an image or signal.
▪ Such noise reduction is a typical pre-processing step to improve the results of later processing
(for example, edge detection on an image).
▪ Median filtering is very widely used in digital image processing because, under certain
conditions, it preserves edges while removing noise.
▪ Median filtering is one kind of smoothing technique.

Fig: Example of median filtering

Questions:
1. Explain 4 principles of Animation.
2. Differentiate between Key framing & procedural animation.
3. What is Physics Based animation?
4. What are the types of deformations used in animation?
5. Explain any 5 image file formats.
6. How JPEG compression happens? Explain the technique in detail.
7. What is Median filtering in Image processing?
8. Write a short note on Histogram equalization.

Multiple Choice Questions:

1. Following are the principles of Animation.
a. Squash and stretch
b. Anticipation
c. Staging
d. All of the above.
2. ________ is a picture that has been created or copied and stored in electronic form.
a. An Image
b. A pixel
c. An animation
 d. A frame
3. _______________ is common in games and simulations where users have the expectation of
interaction with the environment.
a. Procedural Animation
b.Physics based animation
c.Key-framing
d.None of the above
4. JPEG stands for _________________.
a. Portable Network Graphics.
b. Scalable Vector Graphics.
c. Tag Image File Format
d. Joint photographic experts group
5. What is Alife?
a. Animation Life
b. Real life
c. Artificial Life
d. None of the above
6. __________ technique is applied by taking average of neighbourhood pixels.
a. Filtering
b. Histogram
c. Transformation
d. Smoothing
7. ___________ is a method in image processing of contrast adjustment using the image's
histogram.
a. Filtering
b. Histogram equalization
c. Transformation
d. Smoothing
8. ____________ attempts to improve the contrast in an image by `stretching' the range of intensity
values it contains to span a desired range of values.
a. Filtering
b. Histogram equalization
c. Contrast Stretching
d. Smoothing
9. ________________ is a method to perform some operations on an image, in order to get an
enhanced image or to extract some useful information from it.
a. Image Processing
b. Histogram equalization
c. Contrast Stretching
d. Smoothing
10. ____________ in animation is a drawing that defines the starting and ending points of any
smooth transition.
a. Procedural
b. Keyframe
c. Physics based
d. None of the above.