Helion dhtml site





Filtr Light Internet ExploreraAndrzej Szewczyk
[strona główna] [skrypty]

Spośród wszystkich filtrów przeglądarki Internet Explorer najbardziej skomplikowanym i za razem umożliwiającym tworzenie najciekawszych efektów jest niewątpliwie Light (pozostałe filtry zostały opisane w numerze 7'99 Magazynu Internet).

Ogólnie można stwierdzić, że filtr Light umożliwia dodawanie do różnego rodzaju elementów znajdujących się na stronie internetowej efektów związanych z projekcją światła. Metody filtra umożliwiają dokładne określanie rodzajów źródeł światła ich umiejscowienia, mocy, itd. Manipulowanie możliwościami filtra Light przypomina nieco tworzenie scen z programów do tworzenia grafiki trójwymiarowej.
Definiowanie filtrów zostało dokładnie omówione w jednym z poprzednich tekstów. Przypomnijmy tylko, że wykorzystując style danemu obiektowi na stronie internetowej możemy nadać filtr za pomocą następującej składni: 
STYLE="filter:nazwa_filtra(lista parametrow)"  

Metody filtra
Filtr Light nie ma w zasadzie żadnych parametrów, a cała konfiguracja odbywa się za pomocą następujących metod: 

AddAmbient(R, G, B, natężenie)
wprowadza źródło światła o kolorze zadanym parametrami R, G i B (wartości od 0 do 255). Takie źródło światła rozjaśnia cały obiekt, dla którego jest zdefiniowane i jest interpretowane jako jasność atmosfery. Możliwe jest także określenie natężenia światła dla źródła.
 


AddCone(X1, Y1, Z1, X2, Y2, R, G, B, natężenie, kąt)
umożliwia wprowadzenie stożkowego źródła światła. Parametry X1, Y1, Z1 określają współrzędne źródła, natomiast współrzędne X2, Y2 określają współrzędne miejsca oświetlanego światłem (trzecia współrzędna jest domyślnie równa zero, gdyż - co oczywiste - oświetlana jest powierzchnia obiektu). Kolor światła precyzujemy składowymi RGB (wartości od 0 do 255). Pozostałe dwa parametry określają natężenie światła oraz kąt stożka światła (wartość w stopniach od 0 do 90).  

AddPoint(X, Y, Z, R, G, B, natężenie)
metoda umożliwia prowadzenie punktowego źródła światła w miejscu o współrzędnych określonych parametrami X, Y i Z. Kolor źródła światła definiujemy składowymi RGB (wartości od 0 do 255). Ostatni parametr służy do określania natężenia światła.
 

ChangeColor(numer_źródła, R, G, B, zbezwzgl.)
zmienia kolor źródła światła, które reprezentuje parametr numer_źródła. Nową wartość koloru światła określają składowe RGB - parametry przyjmują wartości od 0 do 255. W przypadku, gdy wartość parametru zbezwzgl. jest różna od zera, kolor źródła światła przyjmuje nową wartość podaną w parametrach R, G i B. Gdy zbezwzgl. przyjmuje wartość 0, źródło zmienia kolor światła o wartość podaną trzema poprzedzającymi parametrami.
 


ChangeStrength(numer_światła, wart., zbezwzgl.)
zmienia natężenie źródła światła o podanym numerze. Gdy parametr zbezwzgl. ma wartość różną od zera, źródło światła przyjmuje natężenie o wartości podanej parametrem wart. Natężenie światła zmienia się o wartość podaną parametrem wart., gdy zbezwzgl. wynosi 0.
 
Clear
usuwa wszystkie źródła światła skojarzone z konkretnym filtrem Light.
 
MoveLight(numer_źródła, X, Y, Z, zbezwzgl.)
metoda umożliwia przesunięcie źródła światła o podanym numerze - dla źródeł typu Point - lub współrzędnych miejsca obiektu oświetlanego źródłem światła typu Cone. Parametr zbezwgl. określa, czy liczby podane w parametrach X, Y, Z określają nowe współrzędne źródła (dla zbezwzgl. różnego od zera), czy też o jakie wartości pozycja źródła ma się zmienić.
 
Skryptowe definiowanie filtra
Wszystkie metody filtra Light możemy wykorzystywać w skryptach JavaScript. Przedstawiony poniżej fragment kodu wprowadza na stronę WWW plik graficzny ze zdefiniowanym filtrem: 
<img id="obiekt" style="filter:Light()" src="obrazek.gif" width=500 height=400> 
Odpowiedni skrypt, wprowadzający dwa przykładowe źródła światła typu Ambient i Point (patrz rys.) może wyglądać następująco: 
<script>
obiekt.filters.Light.addAmbient(66,66,66,100)
obiekt.filters.Light.addPoint(300,200,100,255,255,255,100)
</script> 

 
Pierwsze z wprowadzonych w ten sposób źródeł emituje nieco przytłumione światło lekko oświetlając cały obrazek. Źródło drugie emituje mocne światło koloru białego.  
Poruszanie źródłem światła
Bardzo interesujące rezultaty można osiągnąć dynamicznie modyfikując parametry zdefiniowanego już filtra. Na przykład wykorzystując metodę MoveLight skonstruujemy ciekawą prezentację.
Przedstawiony poniżej skrypt języka JavaScript cyklicznie przesuwa źródło światła, tworząc ciekawy efekt "spacerowania" reflektora po pliku graficznym (rys.): 

 


<html>
<head>
<style>
#napis{
filter:light
}
</style>

</head>
<body bgcolor=black>
<img id="napis" src="mi.gif" width=570 height=162 alt="" border="0">
<script>
napis.filters.light.addPoint(0,90,110,255,255,255,100)
napis.filters.light.addAmbient(255,255,255,25)
i=100;
kierunek=1;

function anim() {
if (kierunek==1){
i+=10;
if (i>600) kierunek=0;
}
if (kierunek==0){
i-=10;
if (i<0) kierunek=1;
}
napis.filters.light.moveLight(0,i,70,100,1);
zegar = setTimeout('anim()', 1);

}
onLoad=anim();
</script>
</body>
</html>


 
Powyższa strona udowadnia jak szerokie możliwości otwiera przed każdym twórcom stron internetowych stosowanie filtra Light. Zmieniając pozycje źródeł oraz natężenie emitowanego przez nie światła można osiągać bardzo interesujące efekty. Ciekawe możliwości udostępnia także możliwość podświetlania obiektów światłem o kolorach innych niż biały (rys.).  


 
Ważne jest, że w filtrze zdefiniowanym dla konkretnego obiektu możemy wprowadzić najwyżej 10 źródeł światła. Liczba ta wydaje się w zupełności wystarczająca i w żaden sposób nie ogranicza pola manewru osobom korzystającym z tego rozszerzenia przeglądarki Internet Explorer. Uzyskanie podobnych rezultatów bez wykorzystania udogodnień wprowadzonych w przeglądarce Microsoftu byłoby bardzo trudne i wymagałoby stosowania na przykład skomplikowanych apletów języka Java.



© Wydawnictwo Helion