UNIT IV ANIMATION

Principles of animation: staging, squash and stretch, timing, onion skinning, secondary action, 2D, 2 ½ D, and 3D
animation, Animation techniques: Keyframe, Morphing, Inverse Kinematics, Hand Drawn, Character rigging, vector
animation, stop motion, motion graphics, Fluid Simulation, skeletal animation, skinning. Virtual Reality, Augmented
Reality.

Introduction
Animation is a method of photographing successive drawings, models, or even puppets, to create an illusion of movement
in a sequence. Because our eyes can only retain an image for approximately 1/10 of a second, when multiple images
appear in fast succession, the brain blends them into a single moving image.

In traditional animation, pictures are drawn or painted on transparent celluloid sheets to be photographed. Early cartoons
are examples of this, but today, most animated movies are made with computer-generated imagery or CGI.

To create the appearance of smooth motion from these drawn, painted, or computer-generated images, frame rate, or the
number of consecutive images that are displayed each second, is considered. Moving characters are usually shot “on
twos” which just means one image is shown for two frames, totaling in at 12 drawings per second. 12 frames per second
allows for motion but may look choppy. In the film, a frame rate of 24 frames per second is often used for smooth motion.

Different Types of Animation:

 Traditional Animation
 Rotoscoping
 Anime
 Cutout
 3D Animation
 Stop Motion
 Motion graphics

The 12 Principles of Animation

The 12 Principles of Animation is a group of key teachings for the professional animator. The list has served Disney
animators since the 1930s and was outlined by Ollie Johnston and Frank Thomas in the 1981 book The Illusion of Life:
Disney Animation. Many of these foundational ideas are still utilized in classrooms and studios around the world almost
40 years later. While technology and industries have evolved with new and different ideas being integrated into animation,
the principles can still be seen in movies and web design today.

The 12 Principles of Animation are as follows:

1. Squash and stretch

2. Anticipation
3. Staging
4. Straight-ahead action and pose-to-pose
5. Follow through and overlapping action
6. Slow in and slow out
7. Arc
8. Secondary action
9. Timing
10. Exaggeration
11. Solid drawing
12. Appeal
Understand Disney's 12 principles of animation

(Image credit: Disney)

Disney's 12 principles of animation may have been created several decades ago, but they remain just as relevant today,
even though the technology used to animate has changed considerably. These 12 basic rules of animation still apply to
almost any type of project, not just movie animation and cartoons.
These principles of animation were first published in 1982 in The Illusion of Life: Disney Animation, written by
animators Ollie Johnston and Frank Thomas and one of the best animation books out there. The authors painstakingly
examined the work of leading Disney animators from the 1930s onwards and broke down their approach to create these 12
basic principles of animation.
You can use the Disney principles of animation as a starting point for your animation work, whether you're using a tablet
for animation or a pencil. But the rules also have relevance for areas like UI animation and CSS animation for interfaces
or websites.
01. Squash and stretch
The squash and stretch principle is considered the most important of the 12 principles of animation. When applied, it gives
your animated characters and objects the illusion of gravity, weight, mass and flexibility. Think about how 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.
When using squash and stretch, it's important to keep the object's volume consistent. So when you stretch something it
needs to get thinner, and when you squash something it needs to get wider.
02. 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 realistic.
Consider how if might look if you were to jump in the air without bending your knees, or perhaps to throw a ball without
first pulling your arm back. It would appear very unnatural (it may not even be possible to jump without bending your
knees!). In the same way, animating movements without a flicker of anticipation will also make your motion seem
awkward, stale and lifeless.
03. Staging
Staging in animation is a lot like composition in artwork. What we mean by that is, 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.
04. Straight ahead action and pose to pose
There are two ways to handle drawing animation: straight ahead and pose to pose. Each has its own benefits, and the two
approaches are often combined. 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.
With the pose to pose technique, you draw 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.
05. 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. This forms the essence of the fifth of Disney's principles of
animation.
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. These are important principles to understand if you want your animation to flow
realistically.
06. Slow in and slow out
The best way to understand slow in and slow out is to think about 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. Apply this principle to give your
objects more life.
07. Arc
When working in animation, it's best to stick with the laws of physics. 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.
08. Secondary action
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 perhaps a facial expression or a secondary
object reacting to the first. Whatever the case may be, this secondary action should not distract from the primary one.
09. Timing
For this principle of animation we need to look to the laws of physics again, and apply what we see in the natural world to
our animations. In this case, the focus is on timing.
If you move an object more quickly or slowly than it would naturally move in the real world, the effect won't be
believable. Using the correct timing allows you to control the mood and the reaction of your characters and objects. That's
not to say you can't push things a little (especially if you're creating an imaginary world) – but if you do, be consistent.
10. Exaggeration
Too much realism can ruin an animation, making it appear static and boring. Instead, add some exaggeration to your
characters and objects to make them more dynamic. Find ways to push the limits just beyond what's possible, and your
animations will pop.
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.
While you can push the limits here, too, it's important to remain consistent. 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.
Onion Skinning
In 2D computer graphics, onion skinning is a technique used in creating animated cartoons and editing movies to see
several frames at once. This way, the animator or editor can make decisions on how to create or change an image based on
the previous image in the sequence. Adobe Animate, a comprehensive animation software, incorporates onion skinning
functionality to empower animators to effectively plan, execute, and refine their frame-by-frame animations. By enabling
onion skinning, animators can visualize previous frames, ensuring consistency and continuity throughout the animation.
This visual aid facilitates the creation of smooth and fluid motions, adding a layer of polish and refinement to the
animation.
Benefits of Using Onion Skinning
Onion skinning offers a plethora of benefits for frame-by-frame animation, including:
Smooth and Natural Transitions: Onion skinning facilitates the creation of smooth and natural transitions between poses,
making it easier to achieve realistic and fluid movements.
Consistency and Accuracy: By visualizing previous frames, animators can maintain consistency and accuracy in the
positions and transformations of objects throughout the animation.
Refined Animation Timing: Onion skinning provides a visual reference for timing the animation, allowing animators to
fine- tune the timing of actions and transitions to create a polished and engaging animation.
Error Checking and Correction: Onion skinning allows animators to easily identify and correct mistakes or
inconsistencies in the animation, ensuring a high level of quality.
Mastering Onion Skinning Techniques
To fully utilize the power of onion skinning, animators should practice and experiment with different techniques and
settings. Experiment with varying opacity levels and numbers of onion skin layers to find the optimal combination for the
specific animation. Additionally, consider using different colors for each onion skin layer to enhance the visual clarity and
aid in differentiating between poses.
2D and 3D Animation
Two D (Dimensional) refers to the two dimensional (measurement or space) graphicalrepresentation of a physical
space or figure. It technically refers to any material object,form, shape and space having following two dimensions
referred as axis, means directions:

1) Height or Vertical dimension called Y axis.

2) Width or Horizontal dimension called X axis.

It is also called two axis graphical representations. The popular examples of 2D graphics (also imagery) are handmade
sketches, paintings, illustrations and photographs. The cave sketches of ancient times are the first 2D graphical
representation in the world, these sketches in fact are older than the first language the humans learned to speak. After
the advent of various art forms and impetus given by technological revolution, the 2D graphics gained enormous
popularity and has been applied in various aspect of life. The 2D graphics gained momentum after the advent
ofcomputer graphics and enormous use in media and film industry.

2½ D : Layered image or animation is also called 2½ dimensional imagery. It meansbesides the usual axis of X and Y, it
also has some properties of 3D, that means the features of depth or distance (Z axis). The 2½D is close in appearance to
3D but is actually made of the properties and techniques of 2D. Besides the basic coordinates ofX and Y, following
techniques help to achieve the 2½D imagery:

1. Layers.
2. Shades.
3. Size.
4. Colour.
2D graphics Applications:
1) Media and Film industry.
2) Architecture.
3) Interior Designing.
4) Product Designing.
5) Publications.
6) Graphic Designing. Etc

3D Three D (Dimensional) refers to the three dimensional (measurement or aspect) graphical representation of a physical
space/world. It technically refers to any materialobject, form, shape and space having following properties:

1) Height or Vertical property called Y axis (direction).

2) Width or Horizontal property called X axis (direction).
3) Distance or Depth property called Z axis (direction).

It is also called three axis graphical representation. The popular examples of 3D graphics (also imagery) are Computer
graphics design (3D) and real world space. However, the definition varies from situation to situation, for example,
computer designs3D imagery using specialized 3D softwares (using mathematical codes called Cartesiancoordinate
system) and finally produces results in 2D form through monitor displays, prints and video format outputs by the
processing called rendering (final processing

stage). The humans perceive and live in multi-dimensional world, however the eyes of humans and other living creature
on earth see 3D images due to the eye system (recognizes X and Y axis) and brain system (recognizes Z axis). The 3D is
gaining morepopularity than 2D due to more realistic results and wide range of applications in every aspect of life. 3D
graphics Applications:

• Media and Film industry.

• Engineering.
• Interior Designing.
• Product Designing.
• Publications.
• Medical Science.
• Industrial Designing.
• Pharmaceutical research etc.

3D Animation: Animation is the illusion of motion. 3D animation means the illusion of motion of three dimensional
graphics generally created by computers. Following stagesare applied to create 3D animation production:

1) Character and Object Modeling.

2) Scene Layout.
3) Rigging.
4) Character and Object Positioning
5) Lighting arrangement and positioning.
6) Camera(s) arrangement and positioning.
7) Movement (Animation) by using Timeline.
8) Finally, Rendering.
What is The Difference Between 2d, 2.5d & 3d Animation?
A 2D animation or 2-Dimensional animation is basically an animation that took place in a two-dimensional space. Modern
2D animation can be created by hand or computer animation software. The movement of the object requires one image
to be followed by another with slight different position, followed by another image in another position, and so on. It is a
traditional animation drawn with simple motions. The objects can only move in two axes, either up or down, left or right.
They are generated by creating continuous consecutive images, or “frames”, thus forming motion by each image showing
the next in a gradual progression of steps. Unlike 3D animations, 2D animations are flat images that can move, and
represented by height and width dimensions but not by depth.

3D animation, or 3 Dimensional animation is an animation drawn in three-dimensional space. The objects can maneuver
in three axes rather than two as in 2D animations. 3-D animations like any other 3-D movies you may have seen, allows
you to create a realistic objects that are more exciting. Different textures and lighting are applied to the objects created
that appear solid, and can be applied seamlessly into live video elements. However, to create a beautiful, realistic 3-D
animation, can only be limited by the capabilities within the program itself. A lot of time, effort and resources are greatly
needed towards building a successful 3-D animation, and the returns may not be necessarily as expected.

2.5D animation is a 2D animation drawn into a 3-D space as it involves the motion of 2D-animated object in a 3-D space.
The trick lies behind the perspective and shadows of 2D-animated objects drawn in 2D-space that appears to be 3-D.
Animators use the impression of drawing 2D objects in motion that appears to be moving in a 3D space accomplished by
using brilliant art skills in layering, shadows, perspective animations, morphing, and several other techniques. The result
would create a fluidity movement changes in depth that deceived us into looking a 3-D animations when it was actually
using 2D-animated objects. 2.5D effect can be rendered by using shadows applied to a 2D objects. This can be achieved
by having the drawn object casting a shadow behind it on the background.

A simple example would be drawing any object on a white, plain piece of paper, and then add in shadows that stretches
behind it into the distance, a dimension that does not actually exist for this object unlike 3-D which have 3 axes, but we
can imply. Your perspective on the object from 2D now appears to look like 3-D simply by adding a shadow behind it.
Programs such as Adobe After Effects allows you to generate 2.5D effects by creating the false perspective, and then
animate that perspective changing for 2.5D effect. In short the difference between 2D, 2.5D and 3D is about to their depth
that our eyes detect. 2D animation feels flat, 2.5D animation feels like it has some kind of depth and 3D animation give us
a feeling that there is 100% depth from every angle that camera follows.

Animation techniques:

1. Keyframe Animation:
 Keyframe animation is a fundamental technique where animators define specific frames
(keyframes) that represent important positions or poses of an object or character.
 These keyframes serve as reference points, and the animation software interpolates between
them to create smooth motion.
 Animators can adjust timing, spacing, and interpolation methods to achieve the desired motion
style, such as easing in or out.
2. Morphing:
 Morphing involves smoothly transforming one image or shape into another over a sequence of
frames.
 It's often used for visual effects, transitions between scenes, or transforming one character into
another.
 Morphing typically involves defining corresponding points in the two images and interpolating
between them to create the morphing effect.
3. Inverse Kinematics (IK):
 Inverse kinematics is a method used to animate articulated figures, such as characters with limbs
or joints.
 Instead of manually animating each joint, IK calculates the movement of connected parts based
on the position of an end effector (e.g., hand or foot).
  This allows for more natural and efficient animation of complex movements like walking or
reaching.
4. Hand Drawn Animation:
 Hand-drawn animation, also known as traditional animation, involves creating each frame of the
animation by hand.
 Animators draw images on paper or digitally, often following a sequence of rough sketches
(storyboards) and refining them over multiple passes.
 While time-consuming, hand-drawn animation offers a unique, organic look and allows for
artistic expression in every frame.
5. Character Rigging:
 Character rigging involves creating a digital skeleton (rig) for a character and assigning controls
(rigging) to manipulate its movement.
 Rigging allows animators to pose characters by adjusting the rig controls, rather than
manipulating individual vertices or bones.
 It's essential for creating lifelike character animations in both 2D and 3D environments.
6. Vector Animation:
 Vector animation uses mathematical formulas to describe shapes, allowing them to be scaled,
rotated, and manipulated without losing quality.
 It's commonly used for motion graphics, explainer videos, and animated logos.
 Vector animation software allows animators to create smooth, scalable animations with crisp
lines and shapes.
7. Stop Motion:
 Stop motion animation involves photographing physical objects or puppets one frame at a time
and then playing them back to create motion.
 Common techniques include claymation, puppet animation, and object animation.
 Stop motion requires meticulous planning and patience but offers a tactile, tangible quality that's
visually appealing.
8. Motion Graphics:
 Motion graphics involve animating graphic elements, text, and imagery to communicate
information or enhance visual storytelling.
 It's widely used in advertising, user interfaces, title sequences, and explainer videos.
 Motion graphics software provides tools for animating typography, creating transitions, and
adding visual effects.
9. Fluid Simulation:
 Fluid simulation is a computer graphics technique used to simulate the behavior of fluids such as
water, smoke, or fire.
 It's used to create realistic fluid motion in animated films, video games, and visual effects.
 Fluid simulation algorithms simulate the behavior of fluid particles based on physical properties
like viscosity, density, and pressure.
10. Skeletal Animation:
 Skeletal animation, also known as rigging and skinning, involves animating characters by
deforming a digital skeleton (rig) and attaching a mesh (skin) to it.
 The skeleton is made up of interconnected bones, and each bone influences a specific part of the
mesh.
 Animators pose characters by manipulating the skeleton, and the skin deforms accordingly to
create realistic movement.
11. Skinning:
 Skinning is the process of deforming a digital mesh (skin) to follow the movements of a digital
skeleton (rig) in skeletal animation.
 It involves assigning weights to vertices on the mesh to control how they move with the skeleton.
 Skinning algorithms calculate the influence of each bone on nearby vertices to produce smooth
and realistic deformation.
Each of these animation techniques has its own strengths and applications, and skilled animators often combine
multiple techniques to achieve their desired artistic vision. Whether creating hand-drawn masterpieces, realistic
character animations, or dynamic motion graphics, animators have a diverse toolkit at their disposal.

Virtual Reality – Introduction

Imagination is to Technology as Fuel is to Fire. Imagination and purpose together drive technology. It is due to
these that technology today is evolving at an exponential rate. Virtual Reality on one hand places the viewer
inside a moment or a place, made possible by visual and sound technology that maneuvers the brain into
believing it is somewhere else. It is an experience of a world that does not exist. Sounds cool, right?! Virtual
Reality tricks one’s mind using computers that allow one to experience and more interestingly, interact with a
3D world. This is made possible by putting on a head-mounted display that sends a form of input tracking. The
display is split between the eyes and thus creates a stereoscopic 3D effect with stereo sound to give you a
graphic experience. The technology feeds in the images of the objects taken at slightly different angles which
creates an impression of depth and solidity.

The LCD or OLED panels inside are refracted by lenses completely fill the field of vision with what is to be
displayed and experienced. Together with the technology and the input tracking, it creates an immersive and
exciting believable world that the computer generates. What we know today as VR, has been existing for
decades now. Taking you back to when 360° paintings took the world by surprise, giving a virtual element. VR
merely is ‘The Wise Guy’ of the digital world. It creates a world that neither functions according to you, nor
does it respond to your actions. It gives you a first-hand experience with even the after-effects of an event along
with the ability to interact and interrelate with the world created. This technology holds vast potential insights
into the workings of the Human Brain. According to researchers and medical specialists, VRs have the ability to
diagnose medical conditions from social anxiety to chronic pain.

Though the use of VR to tweak the brain is still at a budding stage. While most people were too engrossed in its
advancements and leap in gaming and exploring the industry, many are unaware of its achievements in the
health sector. VRs have been successfully treating post-traumatic stress disorder since the 1990s, the new
programs thus address a much broader range of conditions. The VR content exposes the patients to a virtual,
safe, and controlled environment where they can explore and eventually learn that the threats they are worried
about can be tackled patiently with time, thinking, and analyzing. VR displays are available in various forms.
Ranging from the ones that already contain the display, splitting the feed for each eye using a cable to transfer
the feed to the console, to the more affordable ones which depend upon the VR mode and applications on
Smartphones. The HTC Vive, the Oculus Rift, and Sony PlayStation VR are a few of the head mounts that use
this setup. One can create one’s own Virtual Reality Box at home, along with a smartphone compatible with the
VR mode. Irrespective of the use, Virtual Reality produces a set of data that can be used to develop models,
communication, training methods, and interaction. In simple words, the possibilities are endless.

Types of Virtual Reality (VR)

On the basis of the most important feature of VR i.e. immersion and the types of systems and interfaces used,
The VR systems can be classified into 3 types :

 Immersive
 Semi-immersive
 Non – immersive
1. Immersive VR system
Immersive VR system is closest to the virtual environment. It makes us experience the highest level of
immersion. This VR system is expensive than others. It provides the closest feeling of being in virtual world.
Tools and gadgets used in this system are advanced and not so common to use.
2. Semi – immersive VR system
Semi – immersive VR systems also make us to experience a high level of immersion but the tools and gadgets
used are not so advanced and costly. Tools and gadgets used in this system are common to us and utilize
physical models.
Non-immersive VR system
Non-immersive VR system is the least immersive and least immersive VR system. It is not expensive to use this
system. It is also known as desktop VR system because the gadgets used are limited to glasses and display
monitors and it uses the least expensive components.
What are the basic components for VR systems?
Input devices
Output devices
Software
1. Input Devices
Input devices in VR are the tools for the users to interact with virtual world. Using Input devices , the users
communicates with the computer.
Example – 3D mouse.
2. Output devices
Output devices is used to represent the virtual world and it’s effect to the users. It generates the feeling of
immersion to the users.
Example : LCD shutter glasses.
3. Software
Software has a key role in VR . It is used for the handling Input and output devices, data analysis and generate
feedback. Software controls and synchronize the whole environment.

Basics of Augmented Reality

Augmented Reality or A.R is a way by which technology can change how we perceive the world around us.
It’s also very useful in various fields, but first, we need to know what is augmented reality and how it is
different from virtual reality.

What is Augmented Reality?

Augmented reality is made up of the word “augment” which means to make something great by adding
something to it. So basically, augmented reality is a method by which we can alter our real world by adding
some digital elements to it. This is done by superimposing a digital image on the person’s current view thus it
enhances the experience of reality.

Difference between Augmented Reality and Virtual Reality

We all know about Virtual Reality. Virtual reality makes a virtual environment and puts the user in it whereas
Augmented reality just adds the virtual components into the user’s real-world view. Virtual reality sends a
person into a virtual place created by a computer whereas augmented reality brings the digital world into our
real world.to experience virtual reality the person needs to wear a special VR headset that is connected to a
computer like the Oculus Rift or a gaming console like PlayStation VR but there are devices that work with a
smartphone- like Google Cardboard. In this, all you have to do is insert a smartphone, wear a headset, and
immerse yourself in virtual reality. For Augmented reality you only need a modern smartphone then you can
easily download an AR app like Google’s “just a line” and try this technology. There’s also a different way to
experience augmented reality, through special AR headsets, such as “Google Glass“, where digital content is
displayed on a tiny screen in front of a user’s eye, or “Microsoft Hololens” which displays the information in
real-world all you have to do is wear the headset and you can see the digital images.
The Reality-Virtuality Continuum

The reality-virtuality continuum is a scale that was given by Paul Milgram. It is a scale which has two
extremes one part depicts the ‘virtuality’ or an environment which is completely virtual and, the other part
describes a real environment or ‘reality’ and the middle part is termed as “mixed reality”, thus this scale
contains all possibilities for one object or plane being completely digital or completely real.

Examples: One of the best examples of augmented reality is the app “Pokemon GO“.so what that game does is
that it imposes the images of pokemon which are digitally created and puts them into our real-world view which
we can see through our phone’s camera. the newest development in augmented reality technology is done by
Google through their ARcore app.
ARcore is a platform for developers to design and run AR apps on their devices. Google also created an app
called “just a line” which lets users draw virtually in the real world. There are tons of apps on google play store
that uses AR technologies like “houzz” or apple store like “amikasa” which helps you style your room and
helps you design a room layout by implementing the furniture in your room using your phone’s
camera. one of the biggest examples that use AR is H.U.D. A head-up display (HUD) is a transparent display
that presents data without requiring users to look away from their usual viewpoints. they were developed for
the aviation industry and now they are now used in automobiles, airplanes, military, and other applications.

Why Augmented Reality is Important?

The development of AR technology is set to revolutionize industries from retail to military to education to
tourism and transform the way we interact with the digital world every
day. Augmented reality has many uses in different fields like archaeology, architecture. visual arts, commerce,
education, video games, and military training, etc. some applications of AR are

1. AR is being used to aid research in archaeology. AR can be used to recreate different structures and
overlay them in the real environment so that researchers can study them correctly.
2. AR applications in smartphones include Global Positioning System (GPS) to locate the person’s location
and its phone’s inbuilt compass to find device orientation.
3. Augmented reality can be used in the field of tourism to enrich visitor’s experience during visits like the
Eiffel tower has an AR app that can show you it looked throughout history when it was being built.

and the list goes on that’s why AR and VR companies have raised more than $3 billion in 2017 in funding, thus
2018 has been doubled the year when AR goes mainstream, we can be sure that in the coming years it will
change the way we look at technology and improve the integration of technology in our daily lives.

*****************