The Art of Animation

What does a virtual bouncing ball have in common with a video game?

Both are animations!

As a kid in our modern era, you’ve probably seen many animations, regardless of your age – from your favorite video game to animated TV shows or movies. 

Some, like the virtual bouncing ball mentioned earlier, are already pre-programmed; others, like every video game ever made, are interactive and let you manipulate your character and/or your game environment.

You encounter an animation pretty much every time you see anything on your computer, TV, or mobile device screen move; they’re ubiquitous in our lives. 

But have you ever wondered how animations work? 

Some animations are simple, such as the bouncing ball, while others, like the video game environment and characters, are very complex. Some don’t allow for user interaction, while other animations change in response to user commands (mouse clicks, pressing certain keys, etc.). However, all animations share some basic components that allow them to work, and we’ll be discussing three of them in today’s post.

Before we can do that, though, you’ll need to understand two concepts that are very important in the world of animations: frames and “incrementing.”

Concept #1: Frames

If you’ve ever watched a movie with a DVD player and had to rewind, you’ve probably noticed that as the movie goes backward, it appears like a collection of static images. That isn’t a glitch; it’s what the animation actually looks like.

Any animation, whether simple or complex, is simply a collection of static images, with very small and subtle changes between each one. Each ‘static image,’ referred to as a frame, captures the animation at a particular moment in time. The frames are played quickly in succession to generate the effect of movement – that’s how the bouncy ball appears to bounce, or your character in a video game appears to move. The speed at which the frames are played determines how smooth the animation is. Generally, the slower the speed, the more clunky and unrealistic the animation will seem (although this only applies if the speed is under the default setting). The frame speed is indicated in frames per second (fps), or how many frames the editor will run in one second. Perhaps the most typical setting you will find for fps is 60 fps, which means that the code editor will run 60 frames each second. This is also the default setting for the draw() function in JavaScript (JS).

Concept #2: Incrementing

Another important concept in animations is incrementing. “Incrementing” isn’t actually a technical term, I’m only using it for explanation purposes. Here’s what it means.

Any animation displays a change in something, right? Whether that’s the location of a ball in the air, a character’s facial expression, or the weather of a virtual world. But in order for any of those things to change, there must be a change in one or more of the parameters controlling them. 

In JS (and in many other languages), the changes are typically done using variables in conjunction with operators. 

What does this mean?

We often don’t want to use static, “hard” numbers as the parameters for a drawing or object in our projects, especially when we want to animate the image. However, we must start with an initial value – the value of the parameter before any animation can happen – to actually draw the object. So, instead of using a hard-coded number (a term that refers to simply a number, not a variable), we use a variable to store the initial value and input the letter or name that represents that number in the place of the number in the command that draws our object. This outputs the same result, but it allows us to animate the object because we can just change the value of the variable to change a quality of the object. This is where the operators come in.

Whenever we change a variable’s number value, we typically do one of two things: we increase its value or we decrease its value. This is what I mean when I say we “increment” the variable. You might think the term only means “increasing,” but mathematically, it is defined as a “small positive or negative change in a variable quantity or function.” Usually, we only want to implement small changes on the initial value to make sure our animation doesn’t move too fast.

So when we increment, we add or subtract a value from the variable, which gets passed as the new value in the drawing function for our object. This is how we make an object move left, right, up, or down, and how we make it shrink. 

Three Basic Animation Components

Now that you know the basic concepts that are very important in animation, you’ll be able to understand the basic components of any animation.

These are:

1. A variable or several variables that can be changed to produce the desired effect of motion.
2. A special function that the browser will know to run repeatedly and continuously (not a loop, because those have to finish) a set number of times per second (the fps speed). In JS, this is the specially-defined draw() function.
3. A specified fps rate. (Usually, if none is specified, the browser will just run the default, preset speed, often 60 fps.)

These are just three components; of course, there are many other aspects of animation that pertain especially to more complex projects, like video games or movies. Regardless, these ideas and components will help you come up with some sweet animations, and if you combine them with some math, there’s almost no limit to what you can do.

Concluding Remarks & Extension Activities

One more thing I think I should clarify now is that the frame per second speed determines the speed of an animation, but not the resolution. The resolution is determined by completely separate image properties. I encourage you to research it a bit, as the world of graphic resolution (extremely important in video games) is very fascinating.

So there you have the basics of animations, and you’ll probably agree that animation is an art. However, it is an art that anyone can do, regardless of your coding experience levels. All you need are the 3 basic components, a little math, a little creativity, and practice – and soon you’ll be creating your own games!

If you have some experience with JavaScript coding, you can complete the two extension activities below to create a simple animation and test how different frameRate() values impact it.

Steps to Animate Your Drawing

If you’d like to animate a drawing (like a ball) on JS practically, here are the main general steps:

1. Replace the value you want to change (the x-coordinate, y-coordinate, etc.) with a variable containing the same initial value.
2. Increment the variable according to the kind of change you’re looking for. 

This only works, though, inside the JS draw() function. Why? Think about it.

The draw() function runs the code inside it repeatedly, according to the set frame speed. This means that every time the code is run, the variable is incremented by the indicated about. Do this 60 times a second, and you get a pretty cool animation.

Play with frameRate()!

You can use a previously created animation or you can create a new animation to complete this part.

Once you have your program, you’ll need to add the frameRate() command inside the draw() function, but before any code. To change the frame rate, change the parameter inside the frameRate() function to be each of the following values:

• 10
• 24
• 30
• 60

(Clarification: the syntax would look like “frameRate(10);” for example. Always remember the semicolon at the end!) 

Notice how much clunkier 10 fps is than 24 fps, and the 24 fps is than the 30 fps (the 60 fps is the control). If you go higher than 60 fps, the animation will go much faster, but it won’t necessarily appear more realistic. Sixty frames per second is the common default because it offers a good enough speed for your animations, and allows you to customize the animation speed by changing the variables’ increments rather than the frame speed.

Join Us For Our End-of-Year Party on June 7th at 11 AM ET!

In Ms. Jones' LiveLesson Room.