Wskazówki dla nauczycieli: interaktywność w JS

Czego uczniowie się nauczą

• Jak używać mouseX i mouseY aby stworzyć program, który rysuje kształty zgodnie z aktualną pozycją myszki tak jak program rysujący.

Uczniowie nauczą się pisać kod taki jak:

Z czym uczniowie mają kłopoty

• Uczniowie mogą próbować użyć mouseX oraz mouseY poza funkcją draw i być rozczarowani, gdy ich program nie zadziała. Jeżeli te zmienne są użyte poza funkcją draw, przechowają tylko wstępną wartość pozycji myszki. Te zmienne muszą być użyte w funkcji draw aby program widział, że ich wartości zmieniają się z biegiem czasu i zaktualizuje je odpowiednio.
• Uczniowie mogą mieć problemy ze zrozumieniem jak używać zmiennych mouseX oraz mouseY aby zmieniać kolor ich kształtów. Przypominaj im, że kolory RGB posiadają wartośc od 0 do 255, amouseX i mouseY będzie zmieniać się od 0 do 400. Zachęcaj ich do eksperymentowania z używaniem zmiennych jako różnych parametrów w ich funkcjach, aby zobaczyli co się dzieje jako rezultat tej zmiany. Pokaż im, że mogą także używać czwartego parametru fill() aby zmienić nieprzezroczystość, aby stworzyć więcej fajnych efektów.

Dodatkowe materiały: pytania do dyskusji

• Jeżeli masz artykuły plastyczne pod ręką, poświęć czas na rysowanie lub malowanie i zapytaj się uczniów jak mogliby stworzyć program który naśladuje tworzenie obrazków.

Dodatkowe materiały: pytania i ciekawostki