Animation Fundamentals : Exercises

01/09/2022 - 00/09/2022 / Week 01 - Week 00

Animation Fundamentals GCD61104

NAME: Sea Hirayama

I.D: 0347596

COURSE: Bachelor of Design in Creative Media / Taylor's Design School

---

●Instructions 

---

●Lecture

Week 1 and 2 :

Honestly, I couldn't attend these classes because I got technical issues with Taylor's Microsoft accounts, but I tried to catch up with it learning from some website and youtube as well.

First of all, how does animation work in the first place?
Some people have the image that 'animation = full-fledged para-para-cartoons'. The following terms are used in the field of animation production, although this is not entirely correct.

Original drawing: The animation and the original picture.
The term "parapara manga" is used in the animation industry.
Animation: the animation that is a combination of the original and the split animation.

First, the original picture is drawn for the key point in the animation, and the movement leading up to that point is created as the mid-section. For example, a scene in which a person jumps requires three movements: standing up, squatting down to gain momentum and jumping. In this case, three original drawings are prepared, and the movements between them are drawn as the middle section. Finally, the animation is completed by joining them together as a movie.

1. follow-through
2. anticipation
3. staging
4. throw-in throw-out
5. squash and stretch
6. arc (curve of motion)
7. appeals

Follow-through is a technique where the accessory parts are moved after the character has finished its movement, with a delay. Follow-through allows for softer movements to be expressed. For example, when a character starts to run, the hair moves a little later. When the character stops, the hair returns to its original position after the body.

Follow-through is a way of expressing flexible movement by adding a time delay to the movement in this way.

Anticipation represents a preliminary action to the original movement.

• Swinging before punching.
• Crouching before jumping

Bending over before jumping, etc. are examples of anticipation. Anticipation creates natural and realistic movements and has the effect of making the viewer anticipate the next scene.

Staging is the Japanese term for 'direction'.

It changes the situation on the screen according to what you want to stand out about a single cut.

• To create a sense of intimidation, make certain characters larger.
• Place one character in a different position from the others.

Slow in slow out is the slowing down of movement. The speed of human movement is not constant and varies according to the situation. For example, when you start running and when you finish running, you slow down. By properly slowing down the speed, you can express realistic, rather than mechanical, movement.

Squash & Stretch allows you to express a character's softness and dynamism. For example, squashing the entire face when closing the eyes or stretching the face when making a startled expression can give a more active impression than just moving facial parts. Squash & Stretch can also be used successfully to create a more animated expression, which is also recommended when you want to create a comical effect.

Arc is a technique for representing curvilinear movements. Human movement basically involves curvilinear movements. For example, if you look at the movement of an arm, can you see that the tip of the hand draws a semi-circle? When the face moves, if you pay attention to the tip of the nose, you will also see that it is moving in a curvilinear motion. If you are aware of the body movements and incorporate arc expressions, you can express your characters in more natural movements.

Appeal is 'audience appeal'. It uses movement and design to convey the appeal of the characters. For example, Disney characters move in completely different ways depending on what role they play in the animation. If they are villains, they have movements and designs that make it clear at a glance that they are villains. This method of appeal is used to create characters that are more attractive to the viewer by appealing to them with expressions that are clearly recognizable to the viewer.

Figure 1.1 the animation tutorial in youtube

Figure 1.2 the animation tutorial in youtube

Figure 1.3 the animation tutorial in youtube

Week 3 : 

For this week, we required to create the animation with bouncing ball with tail learning the movement and some details.

Figure 2.1 the animation example for the details in youtube

https://www.animationmentor.com/blog/squash-and-stretch-the-12-basic-principles-of-animation/

About three important points when creating animations

• Understand the frame rate.
• Understand the principles of movement.
• Start with simple movements.

Knowing the frame rate is important in animation production. The frame rate is a number that indicates how many still images are used per second and is used in the form '30 fps' or '60 fps'. In general, animations are often produced at 24 fps. This means that 24 pictures must be prepared per second. Of course, it is not necessary to make all 24 pictures different, and the frame rate itself can be set to a lower rate, such as 12 fps or 20 fps.

The important thing is to express yourself without discomfort, so keep track of the frame rate and decide how much of the original picture or middle part of the picture you want to include as you go along.

Understanding the principles of movement is also important when creating animation. If you do not understand how characters and backgrounds should move smoothly, it can lead to viewers feeling uncomfortable. Principles exist even for simple movements such as walking and standing, so it is important to understand them while watching sample footage.

The key to making animations is to start with simple movements for the time being. If you try to create full-fledged, detailed movements from the start, you are more likely to fall behind in the process. Start by creating simple movements to familiarise yourself with the production process.

Figure 2.2 the animation tutorial in youtube

Figure 2.3 the animation tutorial in youtube

Figure 2.4 the animation tutorial in youtube

https://archive.org/details/The_Animators_Survival_Kit/page/n62/mode/1up

In this class, we're required to practice creating the ball with tail animation although I forgot to take screenshot of the process.

Here is the animation I made for this exercise.

    

Figure 2.5 the final animation for exercise in class - mp4

Figure 2.6 the final animation for exercise in class - gif

Week 4 :

We learned about Solid Drawing in this week.

The basic premise is that animators need drawing skills before they have the skills to 

create movement. Without drawing, animators cannot express what they want to

create in their animations and are restricted in various ways during the creation

stage.

In animation, characters must be drawn from various angles and in various poses. If

you can't draw a composition, you may not be able to use the ideas you have for the

direction.

Good drawing is of course important, but what is more important is perspective, the

accuracy of three-dimensional expression with an awareness of perspective. When

creating an animation, you must always draw with an awareness of perspective and

three-dimensionality. This is the most important point of "Solid Drawing".

Even if a character is poorly drawn, if there is a sense of three-dimensionality,

substance and weight, the character will appear to be real. Conversely, no matter how

good the character's drawing is and how attractive it is, if the perspective is not

correct or if a sense of weight cannot be expressed, the picture will look

uncomfortable and the character will not appear to have a life of its own.

3DCG animation and Solid Drawing (pictures with a sense of substance)

Today, thanks to the development of 3DCG technology, the problems regarding the

sense of solidity and perspective have been solved. This is because 3D objects are

actually created and placed in a computer space, so a sense of perspective and three

dimensionality can be expressed without the need to be conscious of it.

However, as computer-generated animation is digital, it is more mechanical than

hand-drawn animation. It is important to use the other 12 principles and how to

eliminate the machine-like quality.

Also, because it is 3DCG, there are certain points that you have to be more careful

about than with hand-drawn animation. That is 'twins'. Digitally, left-right reversals

can be easily achieved. So if you have a symmetrical character, you only need to

create one half of the body and the other half can be duplicated.

From a design point of view, symmetry is considered beautiful, but why should we

care about 'twins'? This is because a character with life is not a design, but a 'living

being'.

At first glance, the human face seems symmetrical, but there is some error, and in

fact, no human being has a perfectly symmetrical face.

People tend to think that a symmetrical face is more beautiful, but if it is perfectly

symmetrical, it will look somewhat uncomfortable. When something as alive as a

human being is completely symmetrical, it loses its 'natural' character.

Alex John Beck considered the combined left and right sides of the face, that is

where the reality is.

No creature in the real world is perfectly symmetrical.

The only perfectly symmetrical objects are those created by human hands. This is

what Disney really meant when they said "Beware of 'twins'".

Practical examples in Disney productions

Although Disney has recently moved to 3DCG, hand-drawn animation used to be the

norm. Disney began to realise the potential of CG animation after the huge success of

Toy Story (1995), the world's first full-length CG animation produced by Pixar, and

began to focus on CG animation.

If you look at Disney's hand-drawn animated films from this period, you can see that

they were very conscious of Solid Drawing (drawing with substance).

Solid Drawing makes the characters appear to have life and conveys the world of the

work more realistically.

Figure 3.1 the example of Disney

The scene from 02:13 to the end of this video is a masterpiece of Disney's drawing

skills. This scene is also introduced in 'Arcs (motion curves)', and the technology that

can make the scene look so three-dimensional in two dimensions is so complete that

it can only be described as impressive.

There is also a scene in the film The Bells of Notre Dame where Disney's technical

prowess is astonishing.The scene below is from the beginning of the film and depicts

Notre Dame Cathedral with magnificent music and overwhelming drawing power.

Figure 3.2 the example of Disney

The buildings at the back are blurred at the beginning and gradually become clearer as you move further in, which successfully expresses the three

dimensionality and perspective of the buildings. The Bells of Notre Dame has a unique aura among Disney films, and many people will want to watch the whole film just to see this scene. It is the best scene to bring at the beginning of a film that will give you goosebumps and excitement.

This time it was about Solid Drawing (drawing with a sense of substance).

In brief, the idea is that you should be able to draw well and give a sense of substance to your drawings.

The important thing is not to be able to draw a single picture from a certain angle, but to be able to draw from various angles, even moderately.

There is nothing better than being good at drawing, but the skill of being able to draw from various angles is more important.

Drawing is good practice for giving a sense of substance to a picture, such as three-dimensionality and perspective.

If you have a piece of paper, a pencil and an eraser, you can do sketching. It is good to practise drawing digitally, but I recommend analogue drawing because there is so much to learn from it.

Once you can draw a character with a sense of substance, you can bring that character to life by drawing it with the other 12 principles in mind. 

Figure 3.3 the example of Solid Drawing on YouTube

Week 5 :

In this week, we learned about Turnaround Animation after Perspective

Drawing.

one-point perspective

When a rectangle is placed parallel to the ground and viewed from the

front, the four edges from the front to the back (red dotted lines) converge

at a single point called the vanishing point towards the horizon, as shown in

the image.

The height of the horizon is also the height of your viewpoint, so the

vanishing point of a rectangle placed parallel to the ground you are looking

at can be the height of your viewpoint.

Incidentally, a figure whose cubes converge towards the vanishing point is

called a "parsed figure", for example.

Centre of a rectangular face

It is important to understand how to determine the centre of a rectangular body. To

locate the centre of a rectangular face, draw crossed subsidiary lines from corner to

corner across the face.

The point where the subsidiary lines intersect is the centre point of the face.

If you also determine the centre point of the opposite face and connect the centre

points, you can draw a line through the centre of the rectangle.

Remember that the method of determining the centre of a rectangle is always

necessary for drawing perspective drawings.

two-point perspective

When a rectangular object placed parallel to the ground is viewed from an angle, as

shown in this diagram, the four edges to the right and the four edges to the left

converge towards the vanishing point.

This is called two-point perspective because two vanishing points are created in this

way.

Drawing a cube in two-point perspective

A cube consists of squares surrounded by sides of the same length. However, objects

appear smaller as they move away from the viewpoint, so when drawing a cube in

two-point perspective, the length of the vertical sides changes. The farthest side will

be the shortest.

Parallel line illusion

In the cube drawn here, the width lines (yellow) and depth lines (green) are drawn

parallel. If they do not appear to be parallel, check with a ruler. At a quick glance, the

distance between the green lines seems to widen as you go to the left, while the

distance between the yellow lines seems to widen as you go to the right. However,

this is an optical illusion caused by perspective. To our eyes, the further you go from

the front to the back, the smaller the image appears. The illustration should be

adjusted accordingly.

Vanishing point in two-point perspective

There are several ways to bring perspective to a cube. One of these methods is the

two-point perspective. This method converges the width and depth at a single point,

which is called the vanishing point. All green edges (width) face the left vanishing

point and all yellow edges (depth) face the right vanishing point. The mechanism is

explained in more detail next.

How to draw a cube using two-point perspective

First, draw a horizontal line straight across the screen (blue line in the illustration).

Everything above this horizontal line will be looked up from below and everything

below the horizontal line will be looked down from above. Set vanishing points at the

right and left ends of the horizontal line respectively.

This time the cube will be placed below the horizon line, slightly to the right of the

centre of the screen. First, draw the vertical edge of the front face of the cube (the

front side). This line determines the position and height of the object. At both ends of

the vertical sides, the corners of the front face of the cube are constructed. Connect

these corners with the two vanishing points.

You are now ready to add the two outer ridge lines. The length of those two lines

corresponds to the area between the green and yellow lines, so you can see that they

will be slightly shorter than the first vertical line you drew. The further back the outer

ridge line goes, the shorter it becomes. This is exactly how the two-point perspective

works.

Two lines are drawn in parallel to the first vertical line. In two-point perspective, all

vertical lines are parallel. In this illustration, the cube is placed slightly to the right, so

the right side is slightly narrower than the left side. This is because the right side is

viewed at a steeper angle than the left side. Therefore, draw the lines on the right

side closer to the lines on the front side.

Finally, draw the edges of the back side face. Connect the right line end to the left

vanishing point and the left line end to the right vanishing point; where the two lines

intersect, the last back corner is constructed.

You now have a two-point perspective cube. Compared to the first cube, it is much

more realistic.

The hidden side should also be drawn with a view to making it into a complex object.

This can be expressed by adding invisible opposite sides on the back side of the cube.

three-point perspective

The two-point perspective, plus a vanishing point that can be either above or below

is called three-point perspective.

When looking up at a rectangular object, the four sides converge towards directly

above you.

Figure 4.1 the sketch by me

---

●Exercise

Exercise 1 : BOUNCING BALL ANIMATION

1. Using Adobe Animate, you are required to animate normal weight with moderate timing of bouncing ball (Soccer ball).
2. Applying the animation principles that you have learned on Week 2, Timing, Spacing,
3. Slow in & Slow out andArcs is required.
4. You may refer to any bouncing ball video to get the sense of the right timing.
5. The required frame rate is 24fps, 16:9 aspect ratio with resolution of 1280 x 720 (HD 720p)
6. The final animation should be animated on ‘2’ with clean up stroke and output as .mp4 format.
7. Upload progress in your e-portfolio and update the link on MYTIMES platform as submission.
8. Deadline for submission is by next Wednesday 14th September 2022, 12.00pm.

Figure 5.1 the bouncing ball animation tutorial in youtube

Figure 5.2 the soccer ball animation tutorial in youtube

Figure 5.3 the soccer ball animation example in youtube

So for this exercise, I tried to create a bouncing soccer ball animation in Adobe Animate. Here is the process for creating ball animation,

Figure 5.4 the soccer ball animation process in Adobe Animate

Figure 5.5 the soccer ball animation process in Adobe Animate

Figure 5.6 the soccer ball animation process in Adobe Animate

Figure 5.7 the final soccer ball animation - mp4

Figure 5.8 the final soccer ball animation - gif

After the class, I got the feedback to create this again because it's needed to show the simple bounce, so I tried tore-create it again.

Figure 5.9 the final soccer ball animation - mp4

Exercise 2 : BOUNCING BALL WITH TAIL ANIMATION

1. Using Adobe Animate, you are required to animate a bouncing ball by applying squash and stretch principles that show elasticity of the material and giving it a life as a character through pose to pose animation method. Attached to the squashy and stretchy ball is a tail which you need to show its flexibility of motion by applying the principles of Drag, Follow Through and Overlapping action through a straight ahead animation method.
   

2. Applying the animation principles that you have learned on Week 2, Timing, Spacing, Slow in & Slow out andArcs is required as part of the process.
   

3. You may refer to any bouncing ball video to get the sense of the right timing.
   

4. The required frame rate is 24fps, 16:9 aspect ratio with resolution of 1280 x 720 (HD 720p)

5. The final animation should be animated on ‘2’ with clean up stroke and output as .mp4 format.

6. Upload progress and final work on your e-portfolio and update the link on MYTIMES platform as submission.

7. Deadline for submission is by next Wednesday 21st September 2022, 12.00pm.

So for this exercise, I tried to create with some levels that is why I could know how the tail moves following ball.

Figure 6.1 the screenshot of the process with background

Figure 6.2 the screenshot of the process with ball

Figure 6.3 the screenshot of the process with details of ball bouncing

Figure 6.4 the screenshot of the process with details of ball bouncing

Figure 6.5 the screenshot of the process with details of tail following ball

Figure 6.6 the screenshot of the process with details of tail following ball

Figure 6.7 the final animation of bouncing ball with tail - mp4

Figure 6.8 the final animation of bouncing ball with tail - gif

After the class, I got the feedback to create this again because it's needed to show the simple bounce, so I tried tore-create it again. It also needed to put the color on the tail.

Figure 6.9 the final soccer ball animation - mp4

Exercise 3 : EMOTION POSES

1. Find reference images for these emotion poses (just choose one):

• Happy
• Sad
• Angry
• Scared

2. Observe those reference images and identify the best to show the emotion. This is what we call ‘Key Pose’ or ‘Storytelling Pose’, an important pose that tells a story through emotion.

3. Observe the pose structure, its weight and balance or contrapposto.

4. Bring the reference image in Adobe Animate. Set the setting as 24fps, 16:9 aspect ratio with 1280 x 720 (HD720p) resolution.
From the observation that you have done, draw on the existing image to show:

• Line of Action 
• Structure and Proportion
• Silhouette
• Basic Form

Notes: Each section needs to hold for 2 seconds from a to d and label accordingly.

6. Output the drawing as video with any of these format, *.mp4 format or quicktime *.mov

7. Upload progress and final work on your e-portfolio and update the link on MYTIMES platform as submission.

8. Deadline for submission is by next Wednesday 28th September 2022, 12.00am.

https://medibangpaint.com/use/2021/05/human-bodies-from-a-lower-angle/

https://comic.smiles55.jp/guide/11181/

https://yourartpath.com/gesture-drawing-tips-and-things-to-avoid

Figure 7.1 the example of Line of action

Figure 7.2 the example of Silhouette

Figure 7.3 the example of Basic Form

So for this exercise, I selected to do with Scared pose in animation that is why I just pick some images from Pinterest and describe about the pose with sketch.

This sketch show scared poses with references images. Why it's scared pose I think is the shoulder rise diagonally up to toward the feared direction, and at the same time, the arms are in a pose that hide the face to protect form fear thing. Also the leg show trying hide from fear thing.

Figure 7.4 the sketch for research - png

After I finish sketching and researching about the scared pose, I tried to create the animation which shows the process of emotion poses in Adobe Animate.

Figure 7.5 the screenshot of process in Adobe Animate

Figure 7.6 the screenshot of process in Adobe Animate

Figure 7.7 the screenshot of process in Adobe Animate

Figure 7.8 the screenshot of process in Adobe Animate

Figure 7.9 the screenshot of process in Adobe Animate

Figure 7.10 the screenshot of process in Adobe Animate

Figure 7.11 the screenshot of process in Adobe Animate

Figure7.12 Final design for Exercise 3 - mp4

Exercise 4 :  TURNAROUND ANIMATION

1. Pick a character and find his/her images as references. For minimum requirements, the character must have at least:

1. Head

2. Body

3. Arm

4. Leg
   
   

Notes: Head and body can be in one combined shape. (Refer Example: Character Design)

2. Create a project in Adobe Animate. Set the setting as 24fps, 16:9 aspect ratio with 1280 x 720 (HD720p) resolution.
   
   

3. Draw the character in neutral standing pose for all 360 angle with 8 drawings of:

1. Front view

2. ¾ front view left

3. Side view left

4. ¾ rear view left

5. Rear view

6. ¾ rear view right

7. Side view right

8. ¾ front view right

9. Front view (same drawing as the a.)
   
   

4. Show construction drawing with blue color and clean up drawing over the construction drawing (Refer Example: Line Drawing). Everything is stroke and no fill for color.

5. Animate the turnaround by animating it on 2. Loop the turnaround cycle for 3 times.

6. Output the drawing as video with any of these format, *.mp4 format or quicktime *.mov.

7. Upload progress and final work on your e-portfolio and update the link on MYTIMES platform as submission.

8. Deadline for submission is by next Wednesday 5th October 2022, 12.00am.

Figure 8.1 Example with Sponge Bob

Figure 8.2 Example with Simpsons

So for this exercise, I just tried to create simple character, Astro Boy.

First of all, I prepared to fundamentals of shape in Adobe Illustrator and then I put them into Adobe Animate.

Figure 8.3-6 Example with Astroboy

Figure 8.7 The screenshot of process of drawing base shape in Illustrator

Figure 8.8 The screenshot of process of drawing base shape in Illustrator

Figure 8.9 The screenshot of process of drawing base shape in Illustrator

Figure 8.10 The design with Astroboy in turnaround drawing - pdf

Figure 8.11 The final design with Astroboy in turnaround drawing - mp4

＊To add, it's just my curious though, I tried to create this with Lum chan as well. It's kind of difficult for me to do it, so I gave up as well..... I would like to try someday.

Figure 8.12-13 The design with Lum-chan in turnaround drawing - png

---

●Feedback

Week 1 and 2 :

General feedback

For these week, I just tried to catch up with the lecture I couldn't join. I just felt that creating animation is more complicated and details than I expected that is why I really looking forward to explore the creating animation skills from now. I would like to try harder and harder with learning English as well.

Week 3 :

I could use new adobe tool, Animate which never used before. It's clear to utilize and seen potential to improve the animation skill. In this class, I tried to create the bouncing ball with tail animation, it was kind of difficult for me to think about the details of tail following the ball. I just supposed that I need doing practice more for high-quality animation.

Week 4 :

General feedback

In this week, I could learn the balance of human body shape. It's really enjoyable lecture for me to explore the how to draw human with kinds of emotional poses. I just realized that I've ever drawn too simple poses that is why I need to know about this more and more, also I need to practice to utilize the skill of drawing more fun.

Week 5 :

General feedback

I could get really good opportunity to learn about turnaround drawing and perspective drawing which I wanted to learn. It was kind of difficult for me to utilize the skill, but I wondered that I'll be able to draw some well if I practice a lot. So I thought that I need to do sketch more and more in everyday (especially the day I haven't any assignment).

---

●Reflections

>Experience

In this exercise session, I could learn a lot of skills I gotta utilize for drawing animation. It was really good opportunity for me to get knowledge of animation fundamental. Also I could know how to use Adobe Animate as well. At first, I just confused about it, but now I can use smoothly. I would like to explore the animation skill and create some cool design in this module.

>Observations

From learning animation fundamentals, I supposed that I gotta do sketch a lot in everyday just because I cannot express thing I want with my drawing skill. So I just realized that I need to practice of drawing in order to explore the drawing expression which should be more interesting.

>Findings

In Adobe Animate, I confused about the shortcut key, because it's completely different between Adobe Illustrator, Photoshop and so on. I need remember about it in this module as well.

>Further readings/references

Animators' basic rules for character drawing.

This is a book by toshi, an active animator on Pixiv, who explains the basic laws of character drawing. It is not a theoretically structured book.

This book can be said to be a collection of line drawings for intermediate-level users who have graduated from copying and want to draw various compositions, rather than for beginners as there are many compositions drawn using line drawings.

It is recommended for gentlemen and ladies who want to be able to draw girls with a lot of movement.

For example, there are plenty of composition patterns for running, flexible and jumping girls!

The basics of how to get a bite, face and body drawing techniques and how to capture difficult wrinkle shapes, overhead and agitation are also kept in check.

Many illustrations are corrected in red pen from a single composition, so the author's ideas on how to capture lines and skeletons are helpful.

Expanded Animator's Survival Kit.

The Animator's Survival Kit is a book by international animator 'Richard William'.

It does not cover any technical use of 2D and 3D animation software such as Adobe's after effect.

It is characterised by a careful explanation of animation techniques in theory, rather than a sense of the movement of objects based on hand-drawn CG.

For example, the book explains how to make a walking animation or the way a ball bounces attractive by adding movement to a series of hand-drawn pictures in increments of 24 per second ✨.

In addition to animation, the book also serves as a reference for still pictures, as it is marked with colours which parts of the body are dynamic.

This is an instructional book that combines the traditional fundamentals and applied techniques of animators in a single volume.

Rather than reading a number of structured animation books, try reading one Animator's Survival Kit.

The latter will greatly increase your understanding and skills in animation.

Animation books - basic knowledge of drawing moving pictures and the practicalities of drawing.

This is a book by six professional animators who are members of the Animation 6 Association.

This book is recommended for aspiring animators.

It comprehensively explains everything from basic animation knowledge to the process of creating an animation.

This book will give you a basic understanding of animation ✨.

The book is full of examples of human walking and running animation, animal walking and frame-by-frame animation of natural phenomena.

It uses a wealth of material, illustrations and storyboards, and also explains frame-by-frame and mid-split, making it easy to understand.

The human Figure in Motion

This is not a systematic book.

It is an international animation resource that does not use animation but uses continuous photographs to reproduce human movement.

A grid is drawn on the background, and the detailed frame-by-frame movements can be seen in realistic photographs.

There are mountains of frame layouts of walking alone.

For example, it features not only normal walking scenes, but also scenes of people holding things and walking up and down stairs.

Male and female nudity, different height differences, and shots taken from the front, back and side, can be used as a reference for various animation patterns.

It can be used as a reference for converting a series of movements into animation, and the ability to split frame rates and mid-frames based on the frame rate is a big advantage.