Coding 8, Section 9 Animation

For 8^th grade Science/Coding I am doing Pixar in a Box in Khan Academy. Currently, I am doing the ninth section in the course, animation.

The ninth section in Pixar in a Box has two parts: “Introduction to Animation” and “Mathematics of Animation Curves.”

Part One

In the first exercise I animated a ball across the screen. You press the frame you want and drag the ball to the position you want. The animation looks really cool, but it is not very natural and looks jerky.

In the second exercise I could only animate the ball up and down. I was not able to move it around the screen. The animation looks really cool, but it is still jerky and you can tell it is animated.

In the third exercise I learned about Bezier curves. Bezier curves make it easy to ease the animation into its next position. The purple curves that you see below are known as splines, they make curves which eases the yellow dots (the positions we want our animation to go to) into a nice curve. This makes the animation smooth and natural.

It may look messy, but the animation is a lot smoother and natural compared to the two earlier animations.

In the fourth exercise I learned about avars. Avars is short for animation variables. In this exercise I learned how to squish and stretch the ball to make it look more natural while it is bouncing. ‘S’ stands for scale, and ‘Y’ stands for its height on the screen. ‘S’ and ‘Y’ are examples of avars.

The last exercise in the first part of the Animation section was making my own animation.

Here is the link to my animation:

https://www.khanacademy.org/computer-programming/animation-last-exercise-animating-the-ball-with-x-y-scale-and-rotation/4837905338679296

Part Two

Part two of animation is all about learning the math behind the cool animations.

In part two I learned about was linear interpolation. Linear interpolation is “a method of curve fitting using linear polynomials to construct new data points within the range of a discrete set of known data points.”[i]

In the first exercise I had to solve the x position of a certain frame using the linear interpolation formula:

x coordinate – x coordinate, divided by, frame – frame.

Let’s plug in the numbers, and maybe the formula will make more sense. In this case the equation would look like:

30-18, divided by, 14-4 = 1.2

Now, to find the x-coordinate in frame 7, I add 1.2 from frame 4 (because it is the first frame that has a given x-coordinate) to frame 7.

The x-coordinate in frame 7 is 21.6

When the line is sloping down instead of up, the answer to the formula would be negative, which means the x-coordinate decreases.

I also learned about De Casteljau’s Algorithm, which is ways you can make shapes or curves with more than two points. In the picture below you can see little grey dots. Those are connecting and forming the curve.