Sterowanie ekranem – lampa z różnymi funkcjami

W czasie tej lekcji uczniowie poznają zasadę działania najbardziej popularny model przestrzeni barw RGB oraz poznają funkcję rysującą prostokąt.

CELE, POJĘCIA, MATERIAŁY ▼

Cele zajęć

Cele ogólne:

• Wyrabianie umiejętności rozumienia, analizowania i rozwiązywania problemów na bazie logicznego i abstrakcyjnego myślenia.
• Doskonalenie myślenia algorytmicznego.
• Programowanie i rozwiązywanie problemów z wykorzystaniem komputera oraz
innych urządzeń cyfrowych, poprzez układanie i programowanie algorytmów.
• Zgłębianie znajomość zasad działania urządzeń cyfrowych oraz wykonywania programów.
• Rozwijanie kompetencji społecznych, takich jak: komunikacja i współpraca w grupie, udział w projektach zespołowych oraz organizacja i zarządzanie projektami.

Cele szczegółowe

Uczeń potrafi:
• Podłączyć wyświetlacz RGB 8×8 do adaptera LOFI Brain (gniazdo OUTPUT3).
• Wyjaśnić zasadę pisania szkiców służących do wyświetlania grafiki na wyświetlaczu RGB 8×8.
• Napisać program wyświetlający na wyświetlaczu dowolny numer z zakresu od 0 do 99 za pomocą funkcji displayNumber(int NUMER), display.show() i displayClear()
• Wyjaśnić na czym polega model przestrzeni barw RGB.
• Uzyskać kilka podstawowych barw z modelu RGB.
• Pisać programy wyświetlające prostokąty konkretnego koloru, wielkości i o konkretnym położeniu.
• Napisać program wyświetlający prostokąt, którego wielkość lub położenie może być sterowana za pomocą potencjometru.

Treści programowe (związek z podstawą programową)
Podstawa programowa z informatyki – szkoła podstawowa:
Etap II – klasy IV – VIII, w tym klasy VII – VIII: I.1.b, I.2.a, I.2.b, I.2.c, I.3, II.1.b, II.3, III.3, IV.1, IV.2, IV.3, IV.4,
Etap II – klasy VII-VIII: I.1, I.2.a, I.4, II.1, II.2, II.5, III.3, IV.1.

Pojęcia kluczowe

• RGB (model przestrzeni barw)
• dioda RGB
• wyświetlacz RGB 8×8
• funkcje (setup, loop, write, delay, read, buzzer, distance, servo, display.begin, display.show, displayClear, displayNumber, rectangle. color, rainbowColor)

Metody pracy

• Wykład problemowy,
• Pogadanka,
• Dyskusja dydaktyczna związana z wykładem,
• Projekt,
• Ćwiczenia laboratoryjne.

Materiały pomocnicze

• Zestaw LOFI Robot CODEBOX Starter z rozszerzeniem CODEBOX Tv,
• Komputery stacjonarne lub przenośne z zainstalowanym Arduino IDE,
• Komputer nauczyciela z zainstalowanym Arduino IDE, projektor, tablica projekcyjna.

ZWIŃ ▲

Czas na realizację zajęć:

2 godziny lekcyjne (2×45 minut)

Przebieg zajęć

1. Wprowadzenie w tematykę i integracja grupy:

Czas na realizację tej części: ok 5 minut.

Pytamy uczniów o czym rozmawialiśmy podczas ostatniej lekcji?
• poznaliśmy funkcję display.begin(); inicjującą działanie wyświetlacza,
• omówiliśmy zasadę działania wyświetlacza – wiemy do czego służą funkcje display.show(); oraz displayClear();
• znamy funkcję rysującą displayNumber(liczba); odpowiedzialną za wyświetlanie liczb od 0 do 99,

Dziś poznacie funkcję rysującą prostokąt oraz omówimy model przestrzeni barw RGB.

2. Część zasadnicza:

Czas na realizację tej części: ok 35 minut.

Rozdajemy zestawy LOFI Robot CODEBOX. Uczniowie siadają przy komputerach. Prosimy uczniów aby włączyli komputery, zalogowali się i uruchomili Arduino IDE oraz wyjęli z zestawów płytkę Arduino, wyświetlacz i potencjometr.

Nowymi funkcjami, jakie dziś poznamy będą:
• funkcja odpowiedzialna za rysowanie prostokąta:
rectangle(int X, int Y, int SZEROKOŚĆ, int WYSOKOŚĆ);
• funkcja odpowiedzialna za określenie koloru:
color(int RED, int GREEN, int BLUE);
• funkcja do określania koloru pojedynczym parametrem

rainbowColor(int VALUE);

Funkcja rectangle(int X, int Y, int SZEROKOŚĆ, int WYSOKOŚĆ); powoduje wyświetlenie prostokąta o współrzędnych lewego górnego rogu o wartości X i Y oraz określonej szerokości i wysokości.

Pamiętajmy, że nasz wyświetlacz składa się z 64 diod RGB ułożonych w 8 wierszy, czyli jego rozdzielczość wynosi zaledwie 8×8 pikseli. To mało w porównaniu z Full HD gdzie rozdzielczość wynosi 1920×1080 pikseli.

Warto wiedzieć, że współrzędne wyświetlacza liczone są od 0 do 7. Tj. pierwsza od lewej kolumna diod ma wartość X=0, druga X=1 itd. aż do ósmej gdzie X=7. To samo dotyczy wierszy: pierwszy wiersz od góry to Y=0, drugi wiersz licząc od góry to Y=1 itd. Najniżej położony, ósmy rząd licząc od góry, to Y=7.

Przykład / Zadanie 1

Zacznijmy od narysowanie kwadracika. Niej jego lewy górny róg ma współrzędne X=2, Y=2, a wysokość i szerokość wynosi 4. Szkic zapisz jako “lofi_kwadrat”, zweryfikuj program i wgraj na płytkę.

Rozwiązanie:

#include <LOFI.h>
LOFI robot;

void setup() {
robot.displayBegin();
}

void loop() {
  robot.displayClear();
  robot.rectangle(2,2,4,4);
  robot.displayShow();
}

wyświetlacz prostokąt codebox tv

Zadanie 2

Zmodyfikuj powyższy szkic, aby uzyskać:

  • “wyśrodkowany” na ekranie kwadrat o boku 6×6. Gdzie ma znajdować się jego lewy górny róg?
  • “wyśrodkowany” prostokąt o szerokości 2 i wysokości 8 pikseli.
  • “wyśrodkowany” prostokąt o szerokości 8 i wysokości 4 pikseli.
  • prostokąt wg własnego pomysłu
  • Każdy szkic przed wgraniem na płytkę Arduino najpierw zapisz pod inną nazwą (np. lofi_rys_2a, lofi_rys_2b, itd), zweryfikuj program i wgraj na płytkę.

    Przykładowe rozwiązanie do Zadania 2 c)

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    }
    
    void loop() {
      robot.displayClear();
      robot.rectangle(0,2,8,4);
      robot.displayShow();
    }
    

    Zadanie 3

    Napisz skrypt umożliwiający sterowanie szerokością prostokąta przy pomocy potencjometru przypiętego do INPUT2. Użyj do tego celu funkcji read(INPUT2);. Pamiętaj jednak, że wartości jakie zwraca ta funkcja mieszczą się w przedziale od 0 do 100, podczas gdy dysponujesz matrycą o szerokości do 8 pikseli. Jak więc dostosować tą zmienną?

    Podpowiedź: do programu wprowadź zmienną potencjometr której przypiszesz wartość z funkcji read(INPUT2); podzieloną przez 12. Dzięki temu zmienna będzie przyjmowała wartości od 0 do 8, bo 100/12=8,33.

    Szkic zapisz jako “lofi_prostokat_potencjometr”, zweryfikuj program i wgraj na płytkę.

    Przykładowe rozwiązanie:

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    robot.displayShow();
    }
    
    void loop() {
    int potencjometr = robot.read(INPUT2)/12;
    robot.displayClear();
    robot.rectangle(0,0,potencjometr,8);
    robot.displayShow();
    }
    

    Po wykonaniu tego ćwiczenia mówimy uczniom, że zapewne zauważyli, że wszystkie uzyskiwane do tej pory efekty graficzne wykonywane były za pomocą światła białego.

    Teraz nauczymy się zmieniać kolor rysowanych efektów. Najpierw zajmiemy się funkcją odpowiedzialną za określenie koloru w systemie RGB:

    color(int RED, int GREEN, int BLUE);

    Dyskusja problemowa nt. “Czym jest RGB”?

    12_rgb

    RGB to jeden z najpopularniejszych modeli przestrzeni barw.
    • Nazwa pochodzi od pierwszych liter angielskich nazw barw: R – red (czerwonej), G – green (zielonej) i B – blue (niebieskiej), z których model ten się składa.
    • Jest to model wynikający z właściwości naszych oczu, w których wrażenie widzenia dowolnej barwy można wywołać przez zmieszanie w ustalonych proporcjach trzech wiązek światła o barwach: czerwonej, zielonej i niebieskiej.
    • Model RGB obecnie wykorzystywany jest w urządzeniach analizujących obraz (aparatach cyfrowych, skanerach) oraz w urządzeniach wyświetlających obraz (telewizorach, monitorach, projektorach).
    • Wprowadzenie wartości R=0, G=0, B=0 daje kolor czarny (to tak, jakbyśmy byli zamknięci w ciemnym pomieszczeniu, do dyspozycji mielibyśmy 3 latarki: czerwoną, zieloną i niebieską. Jeśli nie włączymy żadnej latarki w pomieszczeniu będzie panowała ciemność – kolor czarny).
    • Wprowadzenie wartości R=255, G=255, B=255 daje kolor biały (3 latarki włączone na 100% świecące w jeden punkt dadzą w tym punkcie kolor biały).
    • Ustawienie wartości tylko jednego z kolorów na 255, a dwóch pozostałych na 0, da nam dany kolor (np. gdy włączymy tylko latarkę czerwoną na 100%, a zielona i niebieska będą wyłączone tj. = 0, to w pomieszczeniu będzie kolor czerwony) itd.
    • Mieszając w różnych proporcjach te 3 kolory światła można uzyskać wszystkie kolory jakimi dysponują monitory i telewizory. W języku C jest to ponad 16 mln kombinacji.

    Przykład / Zadanie 4
    Narysuj kwadrat, którego lewy górny róg ma współrzędne X=2, Y=2, a wysokość i szerokość wynosi 4 – taki sam jak w zadaniu 1, jednak jego kolor ma być zielony. Szkic zapisz jako “lofi_kwadrat_kolor”, zweryfikuj program i wgraj na płytkę.

    Podpowiedź: funkcję color(int RED, int GREEN, int BLUE) należy wstawić przed funkcją rysującą kwadrat.

    Przykładowe rozwiązanie:

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    }
    
    void loop() {
    robot.displayClear();
    robot.color(0,255,0);
    robot.rectangle(2,2,4,4);
    robot.displayShow();
    }
    

    Zadanie 5

    Zmodyfikuj powyższy szkic, aby uzyskać:

    • czerwony kwadrat o współrzędnych X=1, Y=3 i wymiarach 5×5,
    • niebieski prostokąt o współrzędnych X=2, Y=0, szerokości 3 i wysokości 2,
    • żółty prostokąt o współrzędnych X=0, Y=1, szerokości 2 i wysokości 6 (podpowiedź kolor żółty uzyskujemy ze zmieszania dwóch barw: czerwonej i zielonej).

    Każdy szkic przed wgraniem na płytkę Arduino najpierw zapisz pod inną nazwą (np. lofi_rys_5a, lofi_rys_5b, itd), zweryfikuj program i wgraj na płytkę.

    Przykładowe rozwiązanie do Zadania 5 c)

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    }
    
    void loop() {
    robot.displayClear();
    robot.color(255,255,0);
    robot.rectangle(0,1,2,6);
    robot.displayShow();
    }
    

    Zadanie 6

    Zmodyfikuj szkic z zadania 5c tak, aby położeniem (lewa-prawa) żółtego prostokąta można było sterować za pomocą potencjometru podpiętego pod INPUT2.

    Przykładowe rozwiązanie

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    
    }
    
    void loop() {
      int potencjometr = robot.read(INPUT2)/14;
      robot.displayClear();
      robot.color(255,255,0);
      robot.rectangle(potencjometr,1,2,6);
      robot.displayShow();
    }
    

    Zadanie 7

    Napisz program rysujący dwa kwadraty jak na poniższym obrazku:

    Szkic zapisz jako “lofi_szachownica”, zweryfikuj program i wgraj na płytkę.

    Przykładowe rozwiązanie

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    }
    
    void loop() {
      robot.displayClear();
      robot.color(255, 0, 0);
      robot.rectangle(0,0,4,4);
      robot.color(0,255, 0);
      robot.rectangle(4,4,4,4);
      robot.displayShow();
    }
    

    Po wykonaniu tego zadania mówimy uczniom, że istnieje jeszcze możliwość określania koloru pojedynczym parametrem. Służy do tego funkcja

    rainbowColor(int VALUE);

    Funkcja ta umożliwia wybranie dowolnego koloru z pełnej palety barw przy pomocy pojedynczej wartości liczbowej (nie trzeba osobno określać składowych RGB). Funkcja jest szczególnie przydatna gdy chcemy uzyskać na wyświetlaczu efekt płynnie zmieniających się barw np. efekt tęczy.

    Przykład

    Poniżej zaprezentowano szkic, w którym dla wszystkich 64 diod RGB na wyświetlaczu przypisywany będzie kolejny kolor, gdzie zmienna i to kolejny numer diody / piksela na naszym wyświetlaczu.

    Za pomocą funkcji display.setPixelColor(dioda, kolor); ustawiamy konkretnej diodzie (od 0 do 63, bo pierwsza dioda ma nr 0) konkretny kolor.

    W tym przypadku zamiast definicji koloru za pomocą RGB użyto funkcji określającej kolor pojedynczym parametrem rainbowColor(int VALUE);

    Przykład ten zawiera również iterację – pętlę powtarzającą działanie od i = 0, do i mniejszego niż 64, dodając za każdym razem do zmiennej i wartość 1 (i++).

    #include <LOFI.h>
    LOFI robot;
    
    void setup() {
    robot.displayBegin();
    }
    
    void loop() {
      for (int i=0;i<64;i++) {
         robot.display.setPixelColor(i, robot.rainbowColor(i));
      }
      robot.displayShow();
    }
    

    W zależności od sprawności wykonywanych zadań nauczyciel może zrezygnować z realizacji wybranych zadań. Jeżeli natomiast zostanie trochę wolnego czasu – można pozwolić uczniom na eksperymenty graficzne lub zlecać do uzyskania konkretne efekty graficzne.

    3. Podsumowanie i ewaluacja:

    Czas na realizację tej części: ok. 5 minut.

    Prosimy aby uczniowie ostrożnie spakowali zestawy. Jeden przedstawiciel każdej grupy przynosi zestaw na wyznaczone przez nauczyciela miejsce w klasie.

    Zadajemy uczniom pytanie: Czego nauczyliśmy się na dzisiejszej lekcji?
    • umiemy rysować prostokąty
    • wiemy na czym polega model przestrzeni barw RGB,
    • posługujemy się funkcją odpowiedzialną za określenie koloru w systemie RGB,
    • poznaliśmy funkcję do określania koloru pojedynczym parametrem.

    Na zakończenie mówimy uczniom, że na kolejnej lekcji będziemy wykorzystywać zdobytą do tej pory wiedzę i umiejętności przy realizacji projektów – własnych urządzeń i gier. Pierwszym z nich będzie “strzelnica”.

    O autorze scenariusza:

    Grzegorz Zawistowski

    Grzegorz Zawistowski

    Nauczyciel informatyki w szkole podstawowej. Miłośnik komputerów, nowinek technicznych i robotyki. Szkoleniowiec i trener m.in, w #Superkoderach i Mistrzach Kodowania.