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();
}

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”?

• 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”.