{"id":372,"date":"2018-07-21T06:25:46","date_gmt":"2018-07-21T06:25:46","guid":{"rendered":"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/?post_type=chapter&#038;p=372"},"modified":"2018-12-27T06:27:48","modified_gmt":"2018-12-27T06:27:48","slug":"animation","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/chapter\/animation\/","title":{"rendered":"Animation"},"content":{"raw":"<div><span style=\"float: right\"><a href=\"https:\/\/youtu.be\/IlOjPXcwSeQ\" target=\"_blank\" rel=\"noopener\"><img src=\"http:\/\/epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/2018\/11\/download.png\" alt=\"epgp books\" width=\"75px\" height=\"75px;\" \/><\/a>\r\n<\/span><\/div>\r\n<div>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<strong>Objectives:<\/strong>\r\n<ul>\r\n \t<li>To understand the basic terminology of animation<\/li>\r\n \t<li>To understand the principles behind popular techniques of animation<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<strong>Discussion:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\"><em>Animation <\/em>in simple terms is \u2018any time sequence of visual changes in a scene\u2019. Visual changes may be \u2013 basic transformations like translation, rotation, scaling, transparency, surface texture, shape, color, etc. When a series of images are played at quick succession, the effect is an <em>animation<\/em>. <em>Frame rate<\/em> defines the number of frames played in a second. With the advent of animation software, it has become easier for animators to design, implement and test animation sequences. The software offers a rich set of ready-made functionalities to create interactive rich, smoother animation sequences in short time. The master animators define the important frames \/\u00a0\u00a0 key frames and the software automatically interpolates the desired frames. Animation is fundamentally computer created.<\/p>\r\n&nbsp;\r\n<p style=\"text-align: justify\">Animation sequences can be either 2D or 2 \u00bd D or 3D or 4D. 2D animation involves simple 2D images and they are played in succession at the desired <em>frame rates<\/em>. 2 \u00bd D animation is an extension of 2D animation, in which a feel of 3D is created in 2D. 3D animation adds the 3r d dimension to give a feel of real world objects. In 4D other special effects are added to a 3D animation sequence like, smell, touch, environment, etc..<\/p>\r\n&nbsp;\r\n\r\nThere are four stages to create an animation. They are\r\n<ul>\r\n \t<li><em>Storyboard layout<\/em><\/li>\r\n \t<li><em>Object definitions<\/em><\/li>\r\n \t<li><em>Key-frame specifications<\/em><\/li>\r\n \t<li><em>Generation of in-betweens<\/em><\/li>\r\n<\/ul>\r\n&nbsp;\r\n<p style=\"text-align: justify\">A <em>storyboard<\/em> is a visual \/ graphical layout of an animation. It gives us a preview of the actual animation. Then <em>properties<\/em> and <em>behaviour<\/em> for each of the objects is defined. The properties include, dimension, position, color, texture, shape, etc..The <em>behaviour<\/em> is the role attached to the object or animation character. The <em>behaviour<\/em> defines, how an object should respond when an event occurs. Later <em>Key-frames<\/em> are defined by the master animator to tell the software that the other frames are to be computed by it automatically by assuming <em>key-frames\u00a0<\/em><span style=\"text-align: initial;font-size: 1em\">as reference. <\/span><em style=\"text-align: initial;font-size: 1em\">Key-frames<\/em><span style=\"text-align: initial;font-size: 1em\"> are the important frames where there is a considerable change in the course of animation. Once these frames are defined, the software automatically interpolates the frames between two key frames. The automatic generation of in-betweens is called <\/span><em style=\"text-align: initial;font-size: 1em\">tweening<\/em><span style=\"text-align: initial;font-size: 1em\">.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\"><em>Frame rate <\/em>is an important attribute of animation. Animations that involve rapid action sequences require higher frame rates for a smoother, jerk-free animation. Frame rates for animation start at a minimum of 12 fps, and can go up to any higher value. Once the frame rates are decided, the same if applied for an entire animation sequence. The following are some of the common techniques of animation.<\/p>\r\n\r\n<ul>\r\n \t<li><em>Frame by Frame<\/em><\/li>\r\n \t<li><em>Key-frame<\/em><\/li>\r\n \t<li><em>Onion Skinning<\/em><\/li>\r\n \t<li><em>Rotoscoping<\/em><\/li>\r\n \t<li><em>Squash and Stretch<\/em><\/li>\r\n \t<li><em>Path-Based (Sprite)<\/em><\/li>\r\n \t<li><em>Secondary action<\/em><\/li>\r\n \t<li><em>Morphing<\/em><\/li>\r\n \t<li><em>Motion Capture<\/em><\/li>\r\n \t<li><em>Kinematics<\/em><\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\n<strong>Frame-by-Frame animation:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">In this technique each individual frame is separately edited and when played back in quick succession, we experience animation.<\/p>\r\n<img class=\"size-full wp-image-375 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269.png\" alt=\"\" width=\"482\" height=\"107\" \/>\r\n\r\n&nbsp;\r\n\r\n<strong>Key-frames and Tweening:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">In this technique as described earlier Key frames are defined by the master animator, and the software automatically interpolates the in-betweens in the process called <em>tweening<\/em>. The number of in-betweens is decided by the frame rates required. The interpolation may be <em>linear<\/em> or <em>non-linear<\/em>. In linear interpolation, the objects position is interpolated along a straight line between two key-frames. In non-linear interpolation, the objects path may be interpolated along curves for smoother and realistic animation.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-376 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-270.png\" alt=\"\" width=\"252\" height=\"81\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n<strong>Onion skinning:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">In this, onion skinned versions (semi-transparent) of a few previous positions of an object are shown so as to enable correct positioning of the object in the current frame. Often it is required to know the previous position of an object, to determine the correct current position for the desired animation sequence. It is sufficient to show onion skinned versions of two or three previous frames for editing the current frame. Since the immediate previous frame is important,\u00a0<span style=\"font-size: 1em;text-align: initial\">its near opaque version is provided, and progressively the opaqueness is reduced for the other previous frames.<\/span><\/p>\r\n\r\n<\/div>\r\n<div>\r\n\r\n&nbsp;\r\n\r\n<strong>Squash and Stretch:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">In this technique, the objects\u2019 shape is squeezed \/ stretched as per requirement. This effect is desired to give the audience a feeling that the object is fast approaching a point or about to hit a point and also imitates objects that have elastic properties. The figure below shows the effect for a ball, as it approaches a firm obstruction it gets squeezed and when it re-bounces it gains its shape back and gets stretched.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-377 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-271.png\" alt=\"\" width=\"246\" height=\"174\" \/>\r\n\r\n&nbsp;\r\n\r\n<strong>Morphing:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Morphing is another interesting technique that is used to perform transformation between two different shapes. This is sometimes referred to as \u2018<em>shape-tweening<\/em>\u2019. Here we choose an initial shape in the first key frame and final shape in the second key-frame and the software automatically interpolates the possible in-between shapes depending on the number of frames \/ frame-rate prescribed, which is shown in figure below.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-378 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272.png\" alt=\"\" width=\"367\" height=\"92\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">It is not possible to perform morphing from between any two random shapes. It is made possible if the number of vertices that define the objects (initial and the target) match, i.e. both the objects should have been defined with the same number of vertices. The example below shows, two key frames, key-frame <em>k<\/em> and key-frame <em>k<\/em>+1. Keyframe <em>k<\/em> has two vertices, while keyframe <em>k<\/em>+1 has three vertices. Now to perform morphing between these two shapes we should ensure that both these shapes are defined with the same no. of vertices. The solution is to add an extra vertex to an edge of the initial shape and interpolate to form the new shape.<\/p>\r\n\r\n<\/div>\r\n<img class=\"size-full wp-image-379 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-273.png\" alt=\"\" width=\"294\" height=\"143\" \/>\r\n\r\n<img class=\"size-full wp-image-380 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274.png\" alt=\"\" width=\"442\" height=\"117\" \/>\r\n<div>\r\n<p style=\"text-align: justify\">Another example below shows a triangle to be morphed to a quadrilateral. The suitability of two shapes involved in morphing can be checked either at the vertex level or at the edge level for such standard shapes.<\/p>\r\n<img class=\"size-full wp-image-381 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275.png\" alt=\"\" width=\"520\" height=\"192\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\"><em>vertex: <\/em>Let Vk and Vk +1 denote the number of vertices in the two consecutive frames. Define<\/p>\r\n<p style=\"text-align: justify\">Vmax=max(Vk , Vk +1), where Vmax identifies the maximum no. of vertices among the two.<\/p>\r\n<p style=\"text-align: justify\">Vmin=min(Vk , Vk+1) where Vmin defines the minimum no. of vertices among the two<\/p>\r\n<p style=\"text-align: justify\">Nls=(Vmax -1)mod (Vmin-1) , where Nls defines the number of line segments<\/p>\r\nNp = int (Vmax -1) \/ (Vmin -1) , where Np\u00a0 defines the number of vertices to be added\r\n\r\n&nbsp;\r\n\r\nThe two simple steps of the procedure to add the desired no. of vertices is given below.\r\n<ul>\r\n \t<li>Add <em>N<\/em><em>p<\/em> <em>points to N<\/em><em>ls<\/em>\u00a0 <em>line sections of keyframe<\/em><em>min<\/em><\/li>\r\n \t<li>Add <em>N<\/em><em>p<\/em>-1 points to the remaining edges of keyframe<em>min<\/em><em>.<\/em><\/li>\r\n<\/ul>\r\n&nbsp;\r\n<p style=\"text-align: justify\">For example If Vk=3, and Vk+1=4, Nls= Np=1. So add one point to one edge of keyframe <em>k<\/em>. No points would be added to remaining edges of keyframe <em>k<\/em>.<\/p>\r\n<img class=\"size-full wp-image-382 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276.png\" alt=\"\" width=\"648\" height=\"132\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">The above figures show acceleration and decceleration modeled using trigonometric functions. A<em>cceleration<\/em> is modeled by a function and the corresponding in-between spacing is adjusted as per the function. The second figure above, shows <em>deceleration<\/em> function and the corresponding in-between spacing.<\/p>\r\n\r\n<\/div>\r\n<div>\r\n\r\n<img class=\"size-full wp-image-383 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277.png\" alt=\"\" width=\"614\" height=\"157\" \/>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">The figure above (left) shows how to combine acceleration and deceleration functions, and the corresponding spacing. The figure above (right) shows approximating the motion of a bouncing ball with a damped sine function. The path that should guide the object can be either formed using mathematical function or can be drawn. This kind of animation is sometimes called as path-based animation or sprite animation.<\/p>\r\n&nbsp;\r\n\r\n<strong>Kinematics and dynamics:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">Kinematics is imitating human like motion. Here the human like motion is superimposed on artificially modeled characters to achieve this effect. As shown in the figure below, the human hands, legs and body have various joints, and the movement involves bending at the joints and take motion. This motion can be created in two ways, either by using forward kinematics or by using Inverse kinematics.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-384 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278.png\" alt=\"\" width=\"390\" height=\"143\" \/>\r\n\r\n&nbsp;\r\n\r\n<span style=\"text-decoration: underline\">Forward Kinematics:<\/span>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">This refers to the use of the kinematic equations of a robot to compute the position of the end-effector from specified values for the joint parameters. The figure below shows an illustration of a robotic arm, with one end stuck to the base and the free other end called the end-effector, whose position is to be decided whenever we want it to make some movement. To make the end-effector position itself exactly for a task, we adjust the angles of the shoulder, elbow extension, arms of the device. The animator specifies joint angles say \u03b81, \u03b82 etc., and the computer finds the positions of the end-effector say X.<\/p>\r\n\r\n<\/div>\r\n<img class=\"size-full wp-image-385 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279.png\" alt=\"\" width=\"453\" height=\"182\" \/>\r\n\r\n<span style=\"text-decoration: underline\">Inverse Kinematics:<\/span>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">The reverse process that computes the joint parameters that achieve a specified position of the <em>end-effector <\/em>is known as inverse kinematics. Here the animator Specifies end-effector positions: X and the computer finds joint angles: \u03b81 and \u03b82. This is called goal-directed motion.<\/p>\r\n&nbsp;\r\n\r\n<img class=\"size-full wp-image-386 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-280.png\" alt=\"\" width=\"145\" height=\"129\" \/>\r\n\r\n<strong>Motion Capture:<\/strong>\r\n\r\n&nbsp;\r\n<p style=\"text-align: justify\">This is a technology where the data corresponding to the performances of actual real world characters are superimposed on characters artificially created using computers. The real world characters perform on a systematically positioned stage, which is captured by many Infrared cameras surrounding the performer. At various joints of the performer body, reflective objects are stuck, so that the reflected beam is recorded by the infrared cameras. At any point in time during the performance, information from 3 cameras is recorded and stored in a file. This data is later applied onto the modeled characters to achieve an exact imitation of real characters . This technology is less used since the cost of installation and operational requirements are quite high.<\/p>\r\n&nbsp;\r\n\r\n<strong>Summary:<\/strong>\r\n<ul>\r\n \t<li>Learnt techniques of animation<\/li>\r\n<\/ul>\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td><strong>you can view video on Animation<\/strong><\/td>\r\n<td><a href=\"https:\/\/youtu.be\/IlOjPXcwSeQ\" target=\"_blank\" rel=\"noopener\"><img class=\"alignnone wp-image-120\" src=\"http:\/\/epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/2018\/11\/download.png\" alt=\"\" width=\"36\" height=\"36\" \/><\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n<img class=\"size-full wp-image-387 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281.png\" alt=\"\" width=\"635\" height=\"196\" \/>","rendered":"<div><span style=\"float: right\"><a href=\"https:\/\/youtu.be\/IlOjPXcwSeQ\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"http:\/\/epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/2018\/11\/download.png\" alt=\"epgp books\" width=\"75px\" height=\"75px;\" \/><\/a><br \/>\n<\/span><\/div>\n<div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Objectives:<\/strong><\/p>\n<ul>\n<li>To understand the basic terminology of animation<\/li>\n<li>To understand the principles behind popular techniques of animation<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Discussion:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><em>Animation <\/em>in simple terms is \u2018any time sequence of visual changes in a scene\u2019. Visual changes may be \u2013 basic transformations like translation, rotation, scaling, transparency, surface texture, shape, color, etc. When a series of images are played at quick succession, the effect is an <em>animation<\/em>. <em>Frame rate<\/em> defines the number of frames played in a second. With the advent of animation software, it has become easier for animators to design, implement and test animation sequences. The software offers a rich set of ready-made functionalities to create interactive rich, smoother animation sequences in short time. The master animators define the important frames \/\u00a0\u00a0 key frames and the software automatically interpolates the desired frames. Animation is fundamentally computer created.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Animation sequences can be either 2D or 2 \u00bd D or 3D or 4D. 2D animation involves simple 2D images and they are played in succession at the desired <em>frame rates<\/em>. 2 \u00bd D animation is an extension of 2D animation, in which a feel of 3D is created in 2D. 3D animation adds the 3r d dimension to give a feel of real world objects. In 4D other special effects are added to a 3D animation sequence like, smell, touch, environment, etc..<\/p>\n<p>&nbsp;<\/p>\n<p>There are four stages to create an animation. They are<\/p>\n<ul>\n<li><em>Storyboard layout<\/em><\/li>\n<li><em>Object definitions<\/em><\/li>\n<li><em>Key-frame specifications<\/em><\/li>\n<li><em>Generation of in-betweens<\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">A <em>storyboard<\/em> is a visual \/ graphical layout of an animation. It gives us a preview of the actual animation. Then <em>properties<\/em> and <em>behaviour<\/em> for each of the objects is defined. The properties include, dimension, position, color, texture, shape, etc..The <em>behaviour<\/em> is the role attached to the object or animation character. The <em>behaviour<\/em> defines, how an object should respond when an event occurs. Later <em>Key-frames<\/em> are defined by the master animator to tell the software that the other frames are to be computed by it automatically by assuming <em>key-frames\u00a0<\/em><span style=\"text-align: initial;font-size: 1em\">as reference. <\/span><em style=\"text-align: initial;font-size: 1em\">Key-frames<\/em><span style=\"text-align: initial;font-size: 1em\"> are the important frames where there is a considerable change in the course of animation. Once these frames are defined, the software automatically interpolates the frames between two key frames. The automatic generation of in-betweens is called <\/span><em style=\"text-align: initial;font-size: 1em\">tweening<\/em><span style=\"text-align: initial;font-size: 1em\">.<\/span><\/p>\n<\/div>\n<div>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><em>Frame rate <\/em>is an important attribute of animation. Animations that involve rapid action sequences require higher frame rates for a smoother, jerk-free animation. Frame rates for animation start at a minimum of 12 fps, and can go up to any higher value. Once the frame rates are decided, the same if applied for an entire animation sequence. The following are some of the common techniques of animation.<\/p>\n<ul>\n<li><em>Frame by Frame<\/em><\/li>\n<li><em>Key-frame<\/em><\/li>\n<li><em>Onion Skinning<\/em><\/li>\n<li><em>Rotoscoping<\/em><\/li>\n<li><em>Squash and Stretch<\/em><\/li>\n<li><em>Path-Based (Sprite)<\/em><\/li>\n<li><em>Secondary action<\/em><\/li>\n<li><em>Morphing<\/em><\/li>\n<li><em>Motion Capture<\/em><\/li>\n<li><em>Kinematics<\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><strong>Frame-by-Frame animation:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">In this technique each individual frame is separately edited and when played back in quick succession, we experience animation.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-375 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269.png\" alt=\"\" width=\"482\" height=\"107\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269.png 482w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269-300x67.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269-65x14.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269-225x50.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-269-350x78.png 350w\" sizes=\"auto, (max-width: 482px) 100vw, 482px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Key-frames and Tweening:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">In this technique as described earlier Key frames are defined by the master animator, and the software automatically interpolates the in-betweens in the process called <em>tweening<\/em>. The number of in-betweens is decided by the frame rates required. The interpolation may be <em>linear<\/em> or <em>non-linear<\/em>. In linear interpolation, the objects position is interpolated along a straight line between two key-frames. In non-linear interpolation, the objects path may be interpolated along curves for smoother and realistic animation.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-376 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-270.png\" alt=\"\" width=\"252\" height=\"81\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-270.png 252w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-270-65x21.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-270-225x72.png 225w\" sizes=\"auto, (max-width: 252px) 100vw, 252px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Onion skinning:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">In this, onion skinned versions (semi-transparent) of a few previous positions of an object are shown so as to enable correct positioning of the object in the current frame. Often it is required to know the previous position of an object, to determine the correct current position for the desired animation sequence. It is sufficient to show onion skinned versions of two or three previous frames for editing the current frame. Since the immediate previous frame is important,\u00a0<span style=\"font-size: 1em;text-align: initial\">its near opaque version is provided, and progressively the opaqueness is reduced for the other previous frames.<\/span><\/p>\n<\/div>\n<div>\n<p>&nbsp;<\/p>\n<p><strong>Squash and Stretch:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">In this technique, the objects\u2019 shape is squeezed \/ stretched as per requirement. This effect is desired to give the audience a feeling that the object is fast approaching a point or about to hit a point and also imitates objects that have elastic properties. The figure below shows the effect for a ball, as it approaches a firm obstruction it gets squeezed and when it re-bounces it gains its shape back and gets stretched.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-377 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-271.png\" alt=\"\" width=\"246\" height=\"174\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-271.png 246w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-271-65x46.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-271-225x159.png 225w\" sizes=\"auto, (max-width: 246px) 100vw, 246px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Morphing:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Morphing is another interesting technique that is used to perform transformation between two different shapes. This is sometimes referred to as \u2018<em>shape-tweening<\/em>\u2019. Here we choose an initial shape in the first key frame and final shape in the second key-frame and the software automatically interpolates the possible in-between shapes depending on the number of frames \/ frame-rate prescribed, which is shown in figure below.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-378 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272.png\" alt=\"\" width=\"367\" height=\"92\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272.png 367w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272-300x75.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272-65x16.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272-225x56.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-272-350x88.png 350w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">It is not possible to perform morphing from between any two random shapes. It is made possible if the number of vertices that define the objects (initial and the target) match, i.e. both the objects should have been defined with the same number of vertices. The example below shows, two key frames, key-frame <em>k<\/em> and key-frame <em>k<\/em>+1. Keyframe <em>k<\/em> has two vertices, while keyframe <em>k<\/em>+1 has three vertices. Now to perform morphing between these two shapes we should ensure that both these shapes are defined with the same no. of vertices. The solution is to add an extra vertex to an edge of the initial shape and interpolate to form the new shape.<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-379 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-273.png\" alt=\"\" width=\"294\" height=\"143\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-273.png 294w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-273-65x32.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-273-225x109.png 225w\" sizes=\"auto, (max-width: 294px) 100vw, 294px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-380 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274.png\" alt=\"\" width=\"442\" height=\"117\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274.png 442w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274-300x79.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274-65x17.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274-225x60.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-274-350x93.png 350w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/p>\n<div>\n<p style=\"text-align: justify\">Another example below shows a triangle to be morphed to a quadrilateral. The suitability of two shapes involved in morphing can be checked either at the vertex level or at the edge level for such standard shapes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-381 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275.png\" alt=\"\" width=\"520\" height=\"192\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275.png 520w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275-300x111.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275-65x24.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275-225x83.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-275-350x129.png 350w\" sizes=\"auto, (max-width: 520px) 100vw, 520px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\"><em>vertex: <\/em>Let Vk and Vk +1 denote the number of vertices in the two consecutive frames. Define<\/p>\n<p style=\"text-align: justify\">Vmax=max(Vk , Vk +1), where Vmax identifies the maximum no. of vertices among the two.<\/p>\n<p style=\"text-align: justify\">Vmin=min(Vk , Vk+1) where Vmin defines the minimum no. of vertices among the two<\/p>\n<p style=\"text-align: justify\">Nls=(Vmax -1)mod (Vmin-1) , where Nls defines the number of line segments<\/p>\n<p>Np = int (Vmax -1) \/ (Vmin -1) , where Np\u00a0 defines the number of vertices to be added<\/p>\n<p>&nbsp;<\/p>\n<p>The two simple steps of the procedure to add the desired no. of vertices is given below.<\/p>\n<ul>\n<li>Add <em>N<\/em><em>p<\/em> <em>points to N<\/em><em>ls<\/em>\u00a0 <em>line sections of keyframe<\/em><em>min<\/em><\/li>\n<li>Add <em>N<\/em><em>p<\/em>-1 points to the remaining edges of keyframe<em>min<\/em><em>.<\/em><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">For example If Vk=3, and Vk+1=4, Nls= Np=1. So add one point to one edge of keyframe <em>k<\/em>. No points would be added to remaining edges of keyframe <em>k<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-382 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276.png\" alt=\"\" width=\"648\" height=\"132\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276.png 648w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276-300x61.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276-65x13.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276-225x46.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-276-350x71.png 350w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">The above figures show acceleration and decceleration modeled using trigonometric functions. A<em>cceleration<\/em> is modeled by a function and the corresponding in-between spacing is adjusted as per the function. The second figure above, shows <em>deceleration<\/em> function and the corresponding in-between spacing.<\/p>\n<\/div>\n<div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-383 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277.png\" alt=\"\" width=\"614\" height=\"157\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277.png 614w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277-300x77.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277-65x17.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277-225x58.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-277-350x89.png 350w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">The figure above (left) shows how to combine acceleration and deceleration functions, and the corresponding spacing. The figure above (right) shows approximating the motion of a bouncing ball with a damped sine function. The path that should guide the object can be either formed using mathematical function or can be drawn. This kind of animation is sometimes called as path-based animation or sprite animation.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Kinematics and dynamics:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">Kinematics is imitating human like motion. Here the human like motion is superimposed on artificially modeled characters to achieve this effect. As shown in the figure below, the human hands, legs and body have various joints, and the movement involves bending at the joints and take motion. This motion can be created in two ways, either by using forward kinematics or by using Inverse kinematics.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-384 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278.png\" alt=\"\" width=\"390\" height=\"143\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278.png 390w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278-300x110.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278-65x24.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278-225x83.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-278-350x128.png 350w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"text-decoration: underline\">Forward Kinematics:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">This refers to the use of the kinematic equations of a robot to compute the position of the end-effector from specified values for the joint parameters. The figure below shows an illustration of a robotic arm, with one end stuck to the base and the free other end called the end-effector, whose position is to be decided whenever we want it to make some movement. To make the end-effector position itself exactly for a task, we adjust the angles of the shoulder, elbow extension, arms of the device. The animator specifies joint angles say \u03b81, \u03b82 etc., and the computer finds the positions of the end-effector say X.<\/p>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-385 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279.png\" alt=\"\" width=\"453\" height=\"182\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279.png 453w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279-300x121.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279-65x26.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279-225x90.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-279-350x141.png 350w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/p>\n<p><span style=\"text-decoration: underline\">Inverse Kinematics:<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">The reverse process that computes the joint parameters that achieve a specified position of the <em>end-effector <\/em>is known as inverse kinematics. Here the animator Specifies end-effector positions: X and the computer finds joint angles: \u03b81 and \u03b82. This is called goal-directed motion.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-386 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-280.png\" alt=\"\" width=\"145\" height=\"129\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-280.png 145w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-280-65x58.png 65w\" sizes=\"auto, (max-width: 145px) 100vw, 145px\" \/><\/p>\n<p><strong>Motion Capture:<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">This is a technology where the data corresponding to the performances of actual real world characters are superimposed on characters artificially created using computers. The real world characters perform on a systematically positioned stage, which is captured by many Infrared cameras surrounding the performer. At various joints of the performer body, reflective objects are stuck, so that the reflected beam is recorded by the infrared cameras. At any point in time during the performance, information from 3 cameras is recorded and stored in a file. This data is later applied onto the modeled characters to achieve an exact imitation of real characters . This technology is less used since the cost of installation and operational requirements are quite high.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Summary:<\/strong><\/p>\n<ul>\n<li>Learnt techniques of animation<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td><strong>you can view video on Animation<\/strong><\/td>\n<td><a href=\"https:\/\/youtu.be\/IlOjPXcwSeQ\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-120\" src=\"http:\/\/epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/2018\/11\/download.png\" alt=\"\" width=\"36\" height=\"36\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-387 aligncenter\" src=\"http:\/\/csp06.epgpbooks.inflibnet.ac.in\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281.png\" alt=\"\" width=\"635\" height=\"196\" srcset=\"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281.png 635w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281-300x93.png 300w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281-65x20.png 65w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281-225x69.png 225w, https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-content\/uploads\/sites\/52\/2018\/07\/1-281-350x108.png 350w\" sizes=\"auto, (max-width: 635px) 100vw, 635px\" \/><\/p>\n","protected":false},"author":3,"menu_order":20,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":["dr-t-raghuveera"],"pb_section_license":""},"chapter-type":[],"contributor":[59],"license":[],"class_list":["post-372","chapter","type-chapter","status-publish","hentry","contributor-dr-t-raghuveera"],"part":3,"_links":{"self":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":7,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/372\/revisions"}],"predecessor-version":[{"id":636,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/372\/revisions\/636"}],"part":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapters\/372\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/pressbooks\/v2\/chapter-type?post=372"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/contributor?post=372"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ebooks.inflibnet.ac.in\/csp06\/wp-json\/wp\/v2\/license?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}