- Programming content overview
- Tracking progress of programming students
- Classroom debugging guide
- Pair programming in the classroom
- Teaching guide: Intro to JS - Drawing Basics
- Teaching guide: Intro to JS - Coloring
- Teaching guide: Intro to JS - Variables
- Teaching guide: Intro to JS - Animation basics
- Teaching guide: Intro to JS - Interactive Programs
- Teaching guide: Intro to JS - Resizing with variable expressions
- Teaching guide: Intro to JS - Text and strings
- Teaching guide: Intro to JS - Functions
- Teaching guide: Intro to JS - Logic and if statements
- Teaching guide: Intro to JS - Looping
- Teaching guide: Intro to JS - Arrays
- Teaching guide: Intro to JS - Objects
- Teaching guide: Intro to JS - Object-oriented design
- Programming classroom handouts
- Additional programming projects
- Lesson plans: teaching programming in the classroom
- Programming case study: Encouraging cross-disciplinary projects
- Programming case study: Going beyond the KA curriculum
- Programming case study: Teaching an elementary school class
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
These are questions that you can ask students individually after they've done the lesson, or lead a group discussion around, if everyone's gotten to the same point.
- 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
These can be fun to do as a class after everyone’s gotten through the lesson. They can also lead to discussion about which questions are the hardest. Play them on Quizizz.
Want to join the conversation?
- I am also not finding the animation Quizizz. My students have been loving them and I am super sad they won't be able to take it tomorrow.(1 vote)
- The link above goes to the Quizizz for Variables. Can't seem to find the animation one on Quizizz. Does it exist?(1 vote)
- i need to learn how ot animate or else cause i see youtubers animateing and i want to try it so please help me with this!(0 votes)