Wstęp – omówienie poszczególnych bloków

Pełną dokumentację poszczególnych bloków znaleźć można w dziale DOKUMENTACJA aplikacji, w zakładce RYSOWANIE.

Układ współrzędnych

OTWORZ PRZYKAD Z FILMU VIDEO

Wszystkie parametry w aplikacji LOFI Blocks wyrażane są w zakresie od 0 do 100. Podobnie jest też z polem do rysowania, którego rozmiar to 100 na 100 jednostek. Aby precyzyjnie poruszać się po polu do rysowania położenie każdego punktu określamy przy pomocy dwóch współrzędnych poziomej – X oraz pionowej – Y.

Powszechnie przyjmuje się, że opisując obiekty na ekranie monitora współrzędna pionowa SKIEROWANA JEST W DÓŁ czyli lewy-górny róg pola do rysowania ma współrzędne X = 0, Y = 0, natomiast prawy-dolny róg pola do rysowania ma współrzędne X = 100, Y – 100

Odświeżanie ekranu

Odświeżanie ekranu to jedna z właściwości rywosania w LOFI Blocks, która nie jest intuicyjna, szczególnie jeśli przyzwyczailiśmy się do sposobu działania rysowania np. w Scratchu. Niepożądane “rozmazywanie się” rysowanych elementów może z początku wydawać się dziwne i wyglądać jak jakiś błąd w programie dlatego istotne jest zrozumienie, że pole do rysowania w LOFI Blocks działa bardzo podobnie jak każdy ekran komputera, który też musi być odświeżany (choć na codzień tego nie dostrzegamy).

Jeśli narysujemy jakiś obiekt na polu do rysowania pozostanie on na nim do momentu aż nie zamalujemy go innym obiektem. Dlatego jeśli narysujemy np. prostokąt, a następnie zmienimy jego pozycję zobaczymy, że prostokąt pojawił się w nowym miejscu ale jego ślad pozostał też w miejscu, w którym był wcześniej.

Żeby animowane obiekty nie pozostawiały po sobie “rozmazujących się śladów” na początku każdego odtworzenia pętli RYSUJ, musimy odświeżyć ekran, wyczyścić go np. zamalowując cały na biało przy pomocy protstokąta zakrywającego całą powierzchnię pola do rysowania.

Kolory RGB

Tryb RGB (Red Green Blue) to jeden z najpopularniejszych sposobów opisywania kolorów. Wynika ona bezpośrednio z konstrukcji ekranów ledowych, które jeśli popatrzymy na nie przez lupę okazują się złożone z szeregu czerwonych, zielonych i niebieskich diód led.

Każdy z kolorów określany jest więc przez mieszankę proporcji trzech kolorów podstawowych, do których dochodzi dodatkowo parametr ALPHA czyli przezroczystość, gdzie 0 to przezroczystość całkowita (obiekt jest niewidoczny) a 100 to brak przezroczystości (obietk jest w pełni widoczny)

Obracanie i transformacje

Na pierwszy rzut oka funkcja obracania wydaje się działać niezbyt intuicyjnie i faktycznie jeśli obracamy tylko jeden obiekt dodatkowe określanie środka ciężkości wydaje się zbędne. Sytuacja zmienia się jeśli chcemy obracać więcej obiektów względem jednego punktu, wówczas logiczne okazuje się, że wpierw musimy ustalić położenie punktu obrotu a dopiero potem względem niego przesuwamy obiekty wewnątrz funkcji OBRÓT.

PRZYKŁADY

• Rysowanie prostych kształtów
• Układ współrzędnych
• Malowanie lini
• Animowana twarz
• Proste wzory generowane losowo
• Obracanie
• Funkcje trygonometryczne – SINUS
• Funkcje trygonometryczne – SINUS animowany
• Pętle – generowanie animowanych wzorów przy pomocy powtórzeń
• Gradient jednowymiarowy – płynne przejście tonalne w osi X
• Gradient dwuwymiarowy – płynne przejście tonalne w osi X i Y
• PONG – kompletna gra zaprogramowana w LOFI Blocks

Trochę skomplikowanej technologii (dla zainteresowanych)

Aplikacja LOFI Blocks jest napisana w językach programowania Javascript, HTML i CSS i naturalnym krokiem w rozwoju wydaje nam się uczenie programowania w tych właśnie językach.

Moduł RYSOWANIA w LOFI Blocks stworzony jest na bazie technologii CANVAS powszechnie wykorzystywanej w tworzeniu aplikacji opartych o HTML5. W praktyce poszczególne bloki były projektowane tak by jak najmniej odbiegały od standardowych instrukcji języka Javascript wykorzystywanych przez CANVAS.

Zobacz CIEKAWE PRZYKŁADY efektów jakie można osiągnąć przy pomocy obiektu HTML CANVAS.

W praktyce nauka rysowania w LOFI Blocks może być potraktowana jako wstęp do nauki programowania w języku Javascript z wykorzystaniem technologii CANVAS.

Ciekawym rozwinięciem nauki programowania w LOFI Blocks może być również nauka programowania w środowisku p5.js