Teaching guide: Intro to JS - Animation basics

What the student will learn

• The basic idea behind animations - a drawing repeated over and over, slightly different each time.
• How to define a draw() function in their program so that the lines of code inside get repeatedly called by the computer over and over, about 60 frames per second.
• How to code an animation by defining a variable, changing it in each frame, and using that variable to change some aspect of the shapes in the program.
• How to increase and decrease the numbers stored in variables using shortcuts, +=, -=, ++, and --.

The student will be able to write code like:

Where students struggle

• Students often get confused about which code goes inside the draw() function and which code goes outside. For example, they might both declare and increment their animating variable inside the draw() function. The animation won’t work, since the variable doesn’t actually change each frame. They need to declare the variable outside draw(), at the beginning of the program, and make sure all they do inside draw() is change that variable. Encourage students to think about the values of their variables and position of their drawings at each second. They can even sketch an animation on paper first to gain a better intuition for the values involved.
• Students can become confused about which lines of code are actually inside the draw() function. Encourage them to indent the code inside their function to help them visualize it better.
• Students may attempt to animate multiple shapes in multiple directions in their project, and struggle to figure out how to do that. They’ll need to use multiple variables in that case. Suggest they think through what the different values would be for each shape over time, and then they’ll see what variables they need to change at each frame.

Additional materials: Discussion questions

• Do variables make more sense now that they’re using them for animations?
• Watch an animation, like a Pixar short. Talk about how that could be animated using variables.

Additional materials: Trivia questions