Czas na realizację zajęć: 45 minut (1 godzina lekcyjna)
Etap edukacji: szkoła podstawowa, etap II – klasy IV – VIII, w tym klasy VII – VIII

Warunki realizacji

Każdy uczeń podczas zajęć powinien mieć do swojej dyspozycji osobny komputer z dostępem do Internetu i przeglądarką internetową Google Chrome. Lekcje informatyki odbywają się z podziałem na grupy. Sala powinna być wyposażona w projektor multimedialny (tablica interaktywna nie jest konieczna) umożliwiający wyświetlanie zawartości ekranu komputera nauczyciela.

Wprowadzenie

W czasie trzeciej lekcji uczniowie poznają nowe narzędzia rysowania: elipsa i tekst. Doskonalić będziemy wcześniej zdobyte umiejętności (rysowania prostokątów, definiowania kolorów w systemie RGB, zmiany parametru kanału Alfa) oraz poznają bloki Losuj i nauczą się jak wykorzystać współrzędne wskaźnika myszy.

Cele

Cele ogólne

Wyrabianie umiejętności rozumienia, analizowania i rozwiązywania problemów na bazie logicznego i abstrakcyjnego myślenia,
Doskonalenie umiejętności myślenia algorytmicznego,
Poznawanie różnych sposobów reprezentowania informacji,
Nauka układania i programowania algorytmów rysujących proste grafiki i tworzących efekty wizualne.

Cele szczegółowe

Uczeń potrafi:

• Uruchomić środowisko programistyczne LOFI BLOCKS.
• Zapisywać i odczytywać projekty za pomocą konta on-line.
• Określić położenie punktów na ekranie, posługując się współrzędnymi XY.
• Rysować prostokąty i elipsy o wskazanym rozmiarze i w określonym miejscu.
• Pisać tekst w oknie do rysowania.
• Uzyskiwać podstawowe kolory z palety RGB.
• Zmieniać parametr Alfa w bloku Wypełnienie.
• Wstawiać blok Losuj jako parametr w blokach Prostokąt, Elipsa i Wypełnienie.
• Wstawiać blok “Mysz X / Mysz Y” jako parametr XY w blokach Prostokąt i Elipsa.

Treści programowe (związek z podstawą programową)

Podstawa programowa z informatyki – szkoła podstawowa:
Etap I – klasy I-III: I.1, I.2, II.1.
Etap II – klasy IV – VIII, w tym klasy VII – VIII: I.1, I.2, I.3, II.1.

Metody pracy

Podające:
pogadanka,
opis ustny,
pokaz z wykorzystaniem komputera nauczycielskiego i projektora oraz programu on-line LOFI BLOCKS;
Problemowe:
przedstawianie problemu,
pytania,
przedstawianie przykładowych pomysłów rozwiązania,
wspieranie realizacji;
Oglądowe:
eksponowanie materiału z wykorzystaniem komputera nauczycielskiego i projektora;
treningowe:
ćwiczenia z wykorzystaniem komputerów uczniowskich z dostępem do Internetu i przeglądarką internetową Google Chrome (program on-line LOFI BLOCKS).

Formy pracy

praca indywidualna,

Środki dydaktyczne

• komputery uczniowskie
• komputer nauczycielski
• projektor
• tablica projekcyjna
• program on-line LOFI BLOCKS: http://lofiblocks.com/koduj/

Przebieg zajęć

1. Wprowadzenie w tematykę i integracja grupy (ok 10 minut)

Rozpoczynamy dyskusję od zadania uczniom pytań:

• Jak nazywa się program, w którym pracowaliśmy ostatnio?
• Jaki jest adres www tej aplikacji?
• Jakie wymiary ma pole do rysowania w LOFI BLOCKS?
• Jaką literą określamy położenie w poziomie/ szerokość?
• Jaką literą określamy położenie w pionie / wysokość?
• Z jaką częstotliwością odświeżane jest okno do malowania w LOFI BLOCKS?
• Co oznaczają poszczególne litery w skrócie RGB?
• Czym jest parametr A w bloku Wypełnienie?
• Jak uzyskać kolor: czarny, biały, czerwony, zielony, niebieski, ciemno czerwony, ciemno zielony, ciemno niebieski?
• Co trzeba zrobić, aby na bieżąco śledzić zmiany w tworzonym rysunku (bez konieczności zatrzymywania i uruchamiania programu)?
• W jaki sposób można zapisać projekty tworzone w LOFI BLOCKS?

Słuchamy odpowiedzi uczniów. W razie potrzeby uzupełniamy odpowiedzi.

Pokazujemy na projektorze i przypominamy omawiane elementy.

2. Część zasadnicza (ok 30 minut)

Ćwiczenie 1
Prosimy uczniów o uruchomienie komputerów, włączenie przeglądarki Chrome i wpisanie adresu http://lofiblocks.com/koduj.

Przypominamy: Chcąc zapisać pod koniec lekcji efekt pracy – po wejściu na stronę, na samym początku należy się zalogować. Logujemy się więc i rozpoczynamy nowy projekt.

Proszę w pętli Rysuj umieścić blok Wypełnienie. Zdefiniujcie kolor zielony z kanałem Alfa=50. Wstawcie blok Prostokąt w X=20, Y=20, o wymiarach 30×30 pixeli.

Następnie zmieniajcie parametr Alfa na 100, 10, 20, 45 itd. Obserwujcie efekt zmian.

Pytanie: Czy widzimy jakąś różnicę?

Pytanie: Czemu mimo zmiany parametru Alfa nie widać efektu przezroczystości zielonego kwadracika?
Słuchamy odpowiedzi uczniów.
Wnioski: W polu do rysowania obraz odświeżany jest z częstotliwością 25 razy na sekundę. W przypadku naszego programu rysującego zielony kwadracik nie daliśmy efektu czyszczenia obrazu na początku pętli Rysuj. Komputer rysuje więc zielony prostokąt z wypełnieniem np. 10, 20, 50%, nakładając taki sam prostokąt na siebie z częstotliwością 25 razy na sekundę. W ten sposób wartości w kanale Alfa nakładają się / sumują aż do 100, przez co widzimy zawsze zielony prostokąt, bez efektu przezroczystości.
Wyjaśnienie na przykładzie: To tak, jakby przy malowaniu płotu jedno pociągnięcie pędzlem kryło drewno w 25%. W takim razie drugie pociągnięcie pędzlem dokłada 25% krycia, czyli zyskujemy efekt 50% pokrycia. Po 4 pociągnięciach pędzlem mamy drewno w 100% pokryte farbą. Nakładanie kolejnych warstw nie zmieni już koloru. Jeśli bylibyśmy w stanie nałożyć 25 warstw w ciągu 1 sekundy, to ludzkie oko nie zauważyłoby momentu, gdy na sztachecie pojawiła się pierwsza, czy druga warstwa. Zawsze widzielibyśmy efekt po kilkunastu warstwach – czyli pełen kolor. Tak samo dzieje się w programie LOFI BLOCKS, gdzie obraz odświeżany jest 25 razy na sekundę.

Pokazujemy uczniom, że w zakładce z blokami, w kategori Zdarzenia, znajduje się blok “Mysz X/Y”:

Blok ten odczytuje aktualne parametry X i Y wskaźnika myszy w oknie do malowania. Możemy zamiast konkretnych liczb (tak jak to robiliśmy do tej pory) w bloku Prostokąt zamiast wartości X wstawić blok “Mysz X”, a zamiast wartości Y – blok “Mysz Y”. Dzięki temu zielony kwadracik będzie podążał za wskaźnikiem myszy.

Pokazujemy uczniom to ćwiczenie za pomocą projektora i prosimy aby wykonali u siebie to samo:

Oczywiście ponieważ nie daliśmy efektu czyszczenia obrazu na początku pętli Rysuj, zielony kwadracik zostawia ślad w oknie do malowania.

Proszę w pętli Rysuj zdefiniować biały prostokąt o wymiarach 100×100 pikseli, który będzie odpowiedzialny za czyszczenie ekranu i umieścić dwa bloki odpowiedzialne za ten prostokąt przed blokami z zielonym prostokątem:

Teraz widzimy, jak zielony prostokąt podąża za wskaźnikiem myszy i nie zostawia śladu. Widzimy też efekt 50% przezroczystości zielonego kwadratu.

Prosimy uczniów, aby zmienili parametr Alfa w zielonym prostokącie na 100.

Następnie prosimy uczniów, aby zmienili parametr Alfa białego prostokąta (pierwsza linia kodu) ze 100 na 20.

Pytamy się uczniów czy wiedzą skąd bierze się ten efekt? Pozwalamy zmieniać parametr Alfa w pierwszej linii.

Wnioski: Wszystko za sprawą odświeżania. Polecenia, które są w pętli Rysuj powtarzane są z częstotliwością 25 razy na sekundę. Jeśli więc namalujemy biały kwadrat z 20% kryciem o wielkości całego okna do malowania, a na nim zielony mały kwadracik w miejscu wskaźnika myszy, to po pierwszym odświeżeniu zamalujemy tło na biało w 20% i namalujemy kolejny zielony kwadracik w miejscu nowego położenia myszy. Widzimy wówczas nowy kwadracik w 100% i poprzedni kwadracik przykryty bielą w 20%. Przy kanale Alfa =20 białego kwadratu, już po 5 odświeżeniach biały duży kwadrat zamalowuje ślad po zielonym obiekcie. Ponieważ proces powtarza się z częstotliwością 25 razy na sekundę, to już po kilku chwilach ślad po poprzednich położeniach zielonego obiektu znika. Zmieniając wartość kanału Alfa uzyskujemy efekt większego lub mniejszego “rozmycia”.

Ćwiczenie 2

Z naszego programu usuwamy ostatnią linijkę kodu – prostokąt. W jego miejsce wstawiamy Elipsę.

Tłumaczymy uczniom, że parametr XY w Elipsie oznacza środek figury i prosimy o narysowanie elipsy z parametrami X=0, Y=0, szerokość 50, wysokość 50.

Następnie prosimy aby uczniowie zastanowili się i powiedzieli: jakie parametry XY należy wstawić chcąc uzyskać elipsę na środku ekranu?

Odpowiedź: Zmieniamy X=50, Y=50.

Prosimy aby uczniowie przez chwilę eksperymentowali z szerokością i wysokością elipsy.

Ćwiczenie 3

Pokazujemy uczniom, że w zakładce z blokami, w kategori Rysuj, znajduje się blok “Tekst”.
Wyjaśniamy, że w bloku tym możemy sami wpisywać dowolny tekst, a parametrami tego pola są: Wielkość (wysokość liter w pikselach) oraz XY – czyli położenie lewego górnego rogu, skąd będzie pisany tekst (tak samo jak w Prostokącie). Kolor zmieniać możemy tak samo jak kolor figur, czyli poprzedzając blok “Tekst”, blokiem “Wypełnienie”.
Prosimy aby uczniowie wykonali następujące ćwiczenie:

Ćwiczenie 4

Pokazujemy uczniom, że w zakładce z blokami, w kategori Liczby, znajduje się blok “Losuj”:

Blokiem tym zastąpić możemy dowolną konkretną liczbę. W ten sposób za każdym razem wybrany parametr będzie przyjmował wartość losową, z zakresu od 0 do 100, inną z każdym odświeżeniem pętli Rysuj.

Liczbę losową możemy wstawić jako X lub Y, albo szerokość i wysokość dowolnej figury. Najciekawsze efekty uzyskamy wstawiając liczbę losową w parametry RGB i kanał Alfa bloku Wypełnienie.

Zakres losowania również możemy zmieniać. Domyślnie jest od 0 do 100.

Pokazujemy uczniom za pomocą projektora przykłady wykorzystania funkcji Losuj, zadajemy pytania pomocnicze i prosimy o eksperymentowanie:

• Jaki efekt uzyskamy wstawiając “losuj” w polu X prostokąta?
• Jaki efekt uzyskamy wstawiając blok “losuj” w polu Y prostokąta?
• Jaki efekt uzyskamy wstawiając blok “losuj” w polu szerokość prostokąta?
• Jaki efekt uzyskamy wstawiając blok “losuj” w polu wysokość prostokąta?
• Jaki efekt uzyskamy zmieniając zakres w bloku “losuj”?
• Jaki efekt uzyskamy wstawiając blok “losuj” w więcej niż jednym parametrze?
• Jaki efekt uzyskamy wstawiając blok “losuj” jako parametr RGB/A (jeden, dwa, trzy lub cztery) w bloku “Wypełnienie”

Wykorzystując kilka bloków “Wypełnienie”, “Prostokąt”, “Elipsa”, “Tekst”, “Losuj” oraz “Mysz X/Y” zaprogramuj – DYSKOTEKĘ

W czasie tego zadania nie wymagamy osiągnięcia żadnego konkretnego, precyzyjnego efektu. Zależy nam na tym, aby uczniowie popuścili wodze fantazji, zrelaksowali się i pobawili się różnymi poznanymi blokami. Uczniowie mają sprawdzić jak wpływa podmienianie konkretnych liczb – parametrami losowych i współrzędnymi wskaźnika myszy.

Po tym ćwiczeniu zwracamy uwagę uczniów, że aby stworzyć efekt dyskotekowego ekranu wcale nie trzeba było łączyć tysięcy bloków. Wystarczyło 2-3 wypełnienia, 2-3 figury i kilka parametrów losowych.

LINK DO GOTOWEGO PROJEKTU – DYSKOTEKA

3. Podsumowanie i ewaluacja (ok 10 minut)

Dziękujemy uczniom za pracę. Prosimy aby zapisali swoje projekty. Wylogowali się i wyłączyli aplikację oraz komputer.

Zadajemy uczniom pytania:
Co podobało się Wam najbardziej podczas dzisiejszej lekcji?
Do czego można wykorzystać blok Losuj?
Do czego służy blok “Mysz X/Y”?
Czy każdy potrafi narysować prostokąt?
Czy każdy potrafi narysować koło/elipsę?
Czy potraficie definiować kolory tych figur? Jak to zrobić?
W jaki sposób można napisać tekst w oknie do rysowania?
W jaki sposób zmieniać kolor tekstu?
Jak można udoskonalić naszą dyskotekę?

Uwagi:

Scenariusze lekcji przygotowane zostały z myślą do realizacji przede wszystkim w klasach VII-VIII ośmioletniej szkoły podstawowej (po reformie z 2017 r.) na lekcjach informatyki. Scenariusze pozwalają zrealizować następujące treści programowe z podstawy programowej przedmiotu informatyka w szkole podstawowej, etap II – klasy IV – VIII, w tym klasy VII – VIII: I.1, I.2, I.3, II.1. Scenariusze mogą być realizowane, w zależności od potrzeb nauczyciela i poziomu grupy, również w klasach IV-VI na lekcjach informatyki, czy w czasie kół komputerowych.