Dziudek's jogger

Wraz z tą częścią kursu mootools poznamy kolejny plugin - color.js . Ta i dwie następne części kursu skupią się na zagadnieniach teoretycznych - do testów wykorzystamy tym razem konsolę JavaScript. Jak sama nazwa wskazuje omawiany plugin służy on do operowania na kolorach. Zawiera on klasę Color, która posiada 5 metod, dodatkowo w pliku znajdują się dwie metody konwertujące tablice oraz dwie funkcje będące skrótami do tworzenia instancji klasy Color.

Klasa Color wspiera trzy formy zapisu barw - heksadecymalną, RGB i HSB. Sama klasa przy inicjalizacji tworzy tablicę na której można później operować odpowiednimi metodami. Mamy do dyspozycji 5 metod operujących na kolorze:

• mix - metoda mieszająca dowolną ilość kolorów - jako argument podajemy dowolną ilość kolorów wygenerowanych poprzez klasę Color oddzielonych przecinkami. Ponadto jeżeli jako ostatni "kolor" podamy wartość numeryczną to będzie to procentowa wartość parametru alpha określającego w jakich proporcjach zostaną zmieszane kolory - bliżej przyjrzymy się temu zagadnieniu niedługo.
• invert - metoda tworząca z danego koloru kolor do niego przeciwny (odwraca kolor).
• setHue - metoda pozwalająca zmienić odcień danego koloru - jako argument przyjmuje wartość odcieniu (od 0 do 255)
• setSaturation - metoda określająca nasycenie koloru - nasycenie podajemy w procentach.
• setBrightness - metoda do określania jasności kolorów, podobnie jak w wypadku poprzedniej metody jako argument podajemy wartość procentową (oczywiście w obu wypadkach bez znaku %).

Oprócz wspomnianych metod mamy jeszcze do dyspozycji funkcje skracające tworzenie koloru:

• $RGB - jako argumenty przyjmuje kolejne wartości składowych opisujących kolor w formacie RGB,
• $HSB - jak wyżej tylko tym razem chodzi o format HSB.

I pozostały nam jeszcze dwie nowe metody obiektu Array:

rgbToHsb - metoda konwertująca format RGB na format HSB,

hsbToRgb - metoda konwertująca format HSB na RGB.

Obie wyżej wymienione metody jako argument przyjmują tablicę składowych koloru w danym formacie.

Pora na praktykę. Jak już wspominałem posłużymy się dziś konsolą JavaScript. Zdaje sobie jednak sprawę, że tylko Firefoks ma to narzędzie zaimplementowane - nie zostawię jednak użytkowników Opery i IE (są tacy :>) na pastwę losu ;) Przygotowałem maleńki (3 linijki JS z czego dwie odpowiadają za dodanie zdarzenia onload obiektu window) skrypt, który symuluje konsolę JavaScript:

Konsola JS [prawie jak konsola :P]

Ale zacznijmy od podstaw - stwórzmy nasz pierwszy kolor z użyciem plugina color.js, niech będzie to kolor zielony - możemy go stworzyć na trzy sposoby :

var zielony = new Color("#008000");
var zielony = new Color([0,128,0]);
var zielony = new Color([120,100,50],"hsb");

Każdy z powyższych zapisów definiuje kolor zielony - pierwszy to zapis heksadecymalny, drugi to format RGB, a ostatni to format HSB.

UWAGA użytkownicy IE ;) W poniższych przykładam document.body zamieńcie na $("run") - Wasza przeglądarka ma jakieś dziwne problemy z document.body i metodą setStyle (razem wziętymi) więc musicie zadowolić się zmianą koloru tła przycisku (jaka przeglądarka taki efekt xD).

Pora na pierwszy kod "użytkowy" ;) Do konsoli JS kopiujemy poniższy kod:

var zielony = new Color("#008000");

document.body.setStyle( 'background-color', zielony); 

Powyższy kod tworzy kolor zielony, a następnie ustawia go jako kolor tła strony.

Na razie mało praktyczne było nasze pierwsze użycie klasy Color - przecież mogliśmy dodać po prostu w miejsce zmiennej zielony zapis heksadecymalny. Sytuacja zmienia się w momencie gdy potrzebujemy pokombinować z kolorami. Powiedzmy, że chcemy zobaczyć co wyjdzie z mieszanki zielony + pomarańczowy:

var zielony = new Color("#008000");
var pomaranczowy = new Color("#FFA500");

zielony = zielony.mix(pomaranczowy);

document.body.setStyle( 'background-color', zielony);

Powyższy kod najpierw tworzy dwa kolory - zielony i pomarańczowy. Następnie korzystamy z metody mix o następującej składni:

kolor_bazowy.mix(kolor_1, kolor_2, kolor_3, ... , kolor_n, alpha);

gdzie zmienna alpha jest opcjonalna.

W efekcie tło powinno się zmienić na ładny według mnie odcień zieleni :)

I jeszcze jedno - domyślna wartość zmiennej alpha wynosi 50 w wypadku jednego koloru i spada w wypadku większej liczby kolorów - chodzi o to, że mieszamy w ten sposób kolory pół na pół - w pozostałych wypadkach każdy kolor stanowi taką samą część końcowego koloru co pozostałe kolory składowe.

Zresztą co ja będę się rozpisywał - dodajcie do linijki:

zielony = zielony.mix(pomaranczowy);

nowy argument i zmieniajcie go do woli patrząc jak wpływa on na kolor tła strony ;)

Oczywiście możecie dodać kolejne kolory i mieszać do woli - to są właśnie zalety konsoli ;) [koniec rymowania :P]

Pora na kolejną metodę - invert. Jak wspominałem służy ona odwracaniu kolorów. Biały zamienia na czarny i odwrotnie. Pozostańmy przy kolorze zielonym i zapiszmy:

var zielony = new Color("#008000");
zielony = zielony.invert();

document.body.setStyle( 'background-color', zielony);

Efekt powinien troszkę porażać ;)

Oczywiście nic nie stoi na przeszkodzie do tworzenia większych miksów:

var zielony = new Color("#008000");
var pomaranczowy = new Color("#FFA500");
zielony = zielony.mix(pomaranczowy).invert();

document.body.setStyle( 'background-color', zielony);

Nie ma to jak zamieszać i wywrócić wszystko do góry nogami (bardzo często spotykane w pewnych grupach ludzi :P) ;)

Oczywiście dalszą inwencję twórczą pozostawiam w tej kwestii Wam - w końcu możecie sami wybrać co chcecie zrobić...

Pora zająć się formatem HSB i operowaniem na jego poszczególnych wartościach - metody setHue, setSaturation i setBrightness są banalne w użyciu więc zabierzemy się za wszystkie naraz - od czego mamy chaining:

var zielony = new Color("#008000").setHue(10).setSaturation(200).setBrightness(200);

document.body.setStyle( 'background-color', zielony);

Jak ktoś jest bardzo dociekliwy to sam sobie usunie odpowiednie części łańcucha i zobaczy jak co działa (gdyby przypadkiem nazewnictwo nie oddziaływało wystarczająco na wyobraźnie ;) ).

Także życzę miłej zabawy z kolorami, bo wiecie już w zakresie mieszania i wpływania na cechy koloru wszystko co powinniście wiedzieć (przynajmniej w przypadku pluginiu color.js).

Myślę, że pozostałe funkcje (te skracające jak i metody obiektu Array) nie wymagają dodatkowego komentarza, a i ich działanie z punktu "efektowności" nie ma większego znaczenia - przydają się głównie przy prezentacji/operowaniu na danych i skracaniu kodu.

Mam nadzieję, że operowcy i użytkownicy IE zaprzyjaźnili się już z konsolą JS - jeszcze dwie części kursu nas z nią czekają ;)

W następnej części kursu omówię plik Hash.js .