Temat: Kolorowa płaszczyzna

Klasa VIII  18-20.05.2020 r.

Zaloguj się Platformę WSiPnet - otwórz podręcznik - https://app.wsipnet.pl/sc-194744/podreczniki/strona/149349

Zapisz temat w zeszycie, Zapoznaj się z tematem i wykonaj ćwiczenia z lekcji.

Dowiesz się jak:

• posługiwać się kolorami w programie Scratch i w środowisku Akademii Khana,
• programować w środowisku Akademii Khana.

Przeczytaj podrozdział i wykonaj polecenia i  ćwiczenia:

ZABAWA W CIEPŁO-ZIMNO

Na pewno znasz tę zabawę z przedszkola albo pierwszych klas szkoły. Taką grę można też zaprogramować, np. w Scratchu. Przestrzeń poszukiwań ma wówczas postać mapy kolorów, które zależą od odległości między tym, kto szuka a schowanym przedmiotem.

Rys. 1. Przestrzeń poszukiwań w komputerowej zabawie w ciepło–zimno

CIEPŁO-ZIMNO W STRATCHU

Przygotuj w Scratchu projekt z dwoma duszkami. Duszek mazak – rysuje kółko w miejscu kursora, jeżeli został naciśnięty przycisk myszy. Duszek niespodzianka losuje swoje położenie na płaszczyźnie i kostium oraz pozwala się znaleźć.
Twoje skrypty powinny wyglądać następująco:

Rys. 2. Skrypty duszków wykorzystanych w projekcie

Zauważ, że skrypty obu duszków zawierają nieskończoną pętlę zawsze.

Rys. 3. Zrzut jednego z poszukiwań

CIEEPŁO ZIMNO W AKADEMII KHANA

Teraz zaimplementuj takie kolorowe poszukiwania w środowisku Akademii Khana.

• Otwórz stronę pl.khanacademy.org i się zaloguj. Możesz to zrobić za pośrednictwem swojego konta Google lub Facebooka.
• Kliknij zakładkę Projekty i wybierz opcję Zacznij program od zera.
  

  Rys. 4. Widok zakładki Projekty

• Zatytułuj swój projekt ciepło-zimno, a następnie narysuj kółko. W lewym oknie przeznaczonym na program wpisz polecenie ellipse() z odpowiednimi parametrami. Skorzystaj z pomocy dostępnej w tym środowisku.
  

  Rys. 5. Rysowanie kółka w środowisku Akademii Khana

• Teraz zamaluj kółko i usuń jego obwódkę. Aby znaleźć odpowiednie polecenia, skorzystaj z dokumentacji języka Processing JS wykorzystywanego w Akademii Khana. W którym miejscu je umieścić?
  

  Rys. 6. Fragment dokumentacji języka Processing JS w Akademii Khana

• Teraz „przyklej” kółko do kursora myszy i uruchom pętlę animacji (działa podobnie do bloku zawsze w Scratchu).
  • Zamień dwa pierwsze parametry polecenia ellipse na mouseX i mouseY, czyli współrzędne kursora myszy.
  • Wpisz polecenie var draw = zaczynające nieskończoną pętlę animacji. Pozostała część polecenia zostanie uzupełniona przez środowisko.
  • Wstaw wiersze kodu odpowiedzialne za rysowanie kolorowego kółka do wnętrza pętli, między nawiasy klamrowe {}. Przesuwanie kursorem myszy po kanwie powinno powodować rysowanie kółek. Ponieważ czynność ta ma być wywołana przez naciśnięcie przycisku myszy, trzeba w pętli wstawić warunek – polecenie if.
  • W dokumentacji programu znajdź polecenie dotyczące sprawdzania, czy naciśnięto przycisk myszy. Jest to: if (mouseIsPressed) {}. Wiersze kodu z poleceniami dotyczącymi rysowania kółka musisz ponownie umieścić w nawiasach klamrowych wewnątrz instrukcji warunkowej.
• Pozostało jeszcze wylosowanie położenia duszka niespodzianki na płaszczyźnie (x,y) oraz uzależnienie koloru kółka od odległości do tego położenia.
  • Właściwe funkcje znajdź w dokumentacji funkcji matematycznych.
    

    Rys. 7. Fragment dokumentacji języka Processing JS

  • Wiersz losowania zawiera zapis przypisania wartości dwóm nowym zmiennym i może wyglądać następująco:
    var xl=random(1,399); var yl=random(1,399);
  • Odległość od niespodzianki do kursora myszy to kolejna zmienna – r.
    var r=dist(xl,yl, mouseX,mouseY);
  • Uważaj na te wiersze kodu w swoim programie. Położenie niespodzianki trzeba wyznaczyć na początku zapisu przed pętlą, a obliczanie odległości – umieścić w pętli.
• Uzależnij kolor kółka od obliczonej odległości. Zrobisz to poprzez obliczenie składowych koloru: var R=255-r; var G=r; var B=r;. Zmienne R, G, B wstaw do polecenia fill.

To wszystko. No prawie wszystko. Sprawdź działanie swojego programu. Jeśli coś nie działa dobrze, porównaj swój kod z przedstawionym na rysunku na następnej stronie, a następnie zapisz gotowy projekt.

Rys. 8. Zrzut jednej z rozgrywek zabawy ciepło–zimno

Jeśli interesuje cię programowanie, chcesz się go uczyć i doskonalić, korzystaj z materiałów i ćwiczeń zamieszczonych w Akademii Khana i zajrzyj do lekcji 5.5.