Grafika żółwia cz. 1 (Wstęp do LOGO i GD)

Pod tą dziwną nazwą kryje się dość ciekawe zagadnienie. Grafika żółwia to odmiana grafiki wektorowej używana np. w języku programowania LOGO. Dzięki temu językowi możemy łatwo i przyjemnie rysować grafikę za pomocą tzw. żółwia. Jak to działa dokładnie przedstawię za chwilę.

Chcę pokazać przykładową implementację tego zagadnienia w PHP. Dlatego, że jest ono dość skomplikowane (bardziej niż sam myślałem) postanowiłem rozdzielić je na 4 części: "Wstęp do LOGO i GD", "Klasa żółwia", "Odbijanie" i "Parser rozkazów".

Wstęp do LOGO.

Jak sama nazwa wskazuje (grafika żółwia) rysować będziemy za pomocą żółwia. Wirtualny żółw to wskaźnik, który przemieszczając się po powierzchni rysunku zostawia za sobą ślady. Możemy sterować żółwiem wydając mu proste rozkazy języka LOGO takie jak: "idź do przodu" (FORWARD {ilość kroków}), "obróć się w lewo" (LEFT {kąt}), "obróć się w prawo" (RIGHT {kąt}). Dla ułatwienia "programowania rysunków" mamy dostępne także: instrukcje warunkowe (IF {warunek} [{lista kroków}] END), pętle (REPEAT {ile razy} [{lista kroków}]) czy możliwość definiowania funkcji (TO {nazwa} {lista argumentów} {lista kroków} END).

Aby zaprezentować jak proste jest rysowanie w LOGO pokażę kilka przykładów:

Trójkąt równoboczny o długości boku równej 40

FORWARD 40
LEFT 120
FORWARD 40
LEFT 120
FORWARD 40

Kwadrat o boku równym 60

FORWARD 60
LEFT 90
FORWARD 60
LEFT 90
FORWARD 60
LEFT 90
FORWARD 60

Możemy też zadeklarować procedure rysującą wielokąt

TO wielokat :ile :dlugosc
REPEAT :ile [FORWARD :dlugosc LEFT 360 / :ile]
END

To tylko najprostsze przykłady użycia języka LOGO, jednak obrazują one całą idee rysowania za pomocą żółwia. Więcej informacji można znaleźć na oficjalnej stronie fundacji.

Wstęp do biblioteki GD

Biblioteka GD umożliwia generowanie grafiki za pomocą PHP. Jej obsługa nie powinna nastręczać wielu problemów jeśli będziemy pamiętać o kilku rzeczach. Na początku pokażę schemat tworzenia rysunku do podstaw.

Krok pierwszy: stwórz płótno obrazu. Służy do tego kilka funkcja imagecreate, której argumentami są rozmiary obrazka. Funkcja ta zwraca nam uchwyt to płótna obrazu, który koniecznie musimy zapisać w jakiejś zmiennej.

Krok drugi: dodaj kolory. Musimy dodać do obrazka kolor tła i kolor, w którym chcemy rysować. Robimy to za pomocą kolejnej funkcji imagecolorallocate. Jej argumentami jest uchwyt do obrazka i kolejno wartości liczbowe RGB. Imagecolorallocate zwraca specjalny numer koloru, który także zapisujemy do zmiennej.

Krok trzeci: narysuj/napisz coś. Jesteśmy już gotowi do tworzenia naszego dzieła i mamy całkiem spory zasób narzędzi do rysowania. Możemy stworzyć elipsę (imageellipse), linię (imageline), prostokąt (imagerectangle) czy wypisać jakis tekst (imagestring). Więcej funkcji znajdziesz oczywiście w manualu.

UWAGA! We wszystkich funkcjach rysujących musimy podawać pozycje na osiach x i y. Pewnie od razu masz skojarzenia z kartezjańskim układem współrzędnych. Niestety osie x i y przy generowaniu grafiki są trochę inne. Oś x wygląda identycznie jak na kartezjańskim układzie współrzędnych, jednak wartości osi y zupełnie inne. Pokazuje to obrazek:

Krok czwarty: pokaż co stworzyłeś! Teraz musimy wyświetlić obrazek. Bardzo ważne jest to, że generując grafikę nie możemy nic innego wyświetlać. Na początku musimy zadecydować w jakim formacie chcemy wyświetlić nasz obrazek. Do wyboru mamy: jpeg, gif, png, wbmp. Jak już zdecydujemy, powiadamy przeglądarkę jaki typ zawartości zostanie pokazany, po przez użycie header('Content-type: image/{format}');. Teraz wyświetlamy nasz rysunek używając funkcji zgodnej z wybranym przez nas formatem: imagejpeg, imagegif, imagepng, imagewbmp. Po wyświetleniu, niszczymy obrazek (aby nie zajmował pamięci) używając funkcji imagedestroy.

To jedynie jedna z dróg tworzenia obrazka za pomocą biblioteki GD. Jeżeli chcesz się dowiedzieć więcej, jak zwykle zapraszam do manuala.

Wstęp ten zwalnia mnie od tłumaczenia teorii w kolejnych częściach co umożliwi skupienie się na dziedzinie problemu.

W następnym odcinku stworzymy podstawową klasę żółwia.