Wskazówki dla nauczycieli: podstawy animacji w JS

Czego uczniowie się nauczą

• Podstawowa koncepcja animacji — Rysunek powtarzany w kółko, nieco inny za każdym razem.
• Jak zdefiniować funkcję draw() w ich programach, tak żeby kod w tej funkcji był powtarzany przez komputer w kółko, przynajmniej w 60 klatek na sekundę.
• Jak zaprogramować animacje poprzez definiowanie zmiennej, oraz zmienianie jej w każdej klatce, oraz używanie zmiennych, aby zmienić pewne aspekty kształtów w ich programie.
• Jak zwiększyć i zmniejszyć cyfry przechowywane w zmiennych za pomocą skrótów +=, -= oraz --.

Uczniowie nauczą się pisać kod taki jak:

Z czym uczniowie mają kłopoty

• 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 draw it out.
• 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.

Dodatkowe materiały: pytania do dyskusji

• Czy zmienne mają sens, teraz kiedy używają ich w animacjach?
• Obejrzyj animację, taką jak krótki film Pixara. Porozmawiaj na temat tego, jak to mogło być animowane za pomocą zmiennych.

Dodatkowe materiały: pytania i ciekawostki