Strona główna » Poradniki » Grafika SVG » Tło filtru
 

Tło filtru

Wstęp

Filtry mają różnego rodzaju zastosowania. Mogą rozmywać filtrowany obiekt, zmieniać odcień kolorów podanego obiektu, albo dodać pod obiektem cień. Wszystko zależy od inwencji twórczej autora. Wypełnianie wartwy okreśolonym kolorem może być przydatne wszędzie tam, gdzie obiekt ma zmienny tylko jeden kolor. Technika ta jest wykorzystywana podczas tworzenia gier. Dany obiekt ma ten sam wygląd, ale program koloruje go na wybrany kolor.

Implementacja

Jednolite tło

W celu wypełnienia tła jednolitym kolorem można skorzystać z reguły feFlood. Reguła ta przyjmuje region jaki ma zostać zamalowany. Ustala się go poprzez punkt początkowy wartościami x, y oraz rozmiar atrybutami width, height. Określony obszar jest następnie zamalowany przez kolor określony jako atrybut flood-color. Istnieje również możliwość, aby wylany kolor był lekko przezroczysty. Może się to okazać przydatne podczas nakładania kolorowej, przezroczystej warstwy np. na wybrany obiekt.

W poniższym przykładzie został zdefiniowany filtr, który rysuje pośrodku dowolnego obiektu kolorowy kwadrat wcześniej wypełniając figurę kolorowym tłem. Warto zwrócić uwagę, że rozmiar oznaczenia automatycznie dopasowywuje się. Jest to możliwe dzięki ustaleniu wartości początkowej pozycji i rozmiaru wartościami procentowymi. Niestety problem pojawia się w momencie, gdy takim filtrem chcemy wypełnić koło. Regułą feFlood można generować tylko prostokąty (tj. zamalowywany obszar).

Kod odpowiadający za ten filtr został przedstawiony poniżej:

  1. <svg xmlns="http://www.w3.org/2000/svg"
  2.   width="400" height="150" viewBox="0 0 400 150">
  3.   <defs>
  4.     <filter x="0" y="0" width="100%" height="100%"
  5.     id="filtr00" primitiveUnits="objectBoundingBox">
  6.       <feFlood x="40%" y="40%" width="20%" height="20%"
  7.         flood-color="green" result="Warstwa00A"/>
  8.       <feFlood x="0" y="0" width="100%" height="100%"
  9.         flood-color="#ede7f6" result="Warstwa00B"/>
  10.       <feMerge>
  11.         <feMergeNode in="SourceGraphic"/>
  12.         <feMergeNode in="Warstwa00B"/>
  13.         <feMergeNode in="Warstwa00A"/>
  14.       </feMerge>
  15.     </filter>
  16.   </defs>
  17.   <rect x="25" y="25" width="100" height="100"
  18.     filter="url(#filtr00)"/>
  19.   <rect x="200" y="50" width="50" height="50"
  20.     filter="url(#filtr00)"/>
  21.   <circle cx="350" cy="75" r="40"
  22.     filter="url(#filtr00)"/>
  23. </svg>

(4. - 15.) Filtr posiada kilka reguł. (6. - 7.) Pierwsza z nich odpowiada za utworzenie oznaczenia. Pośrodku jest rysowany zielony prostokąt. Warstwę można później wywołać identyfikatorem Warstwa00A. (8. - 9.) Druga warstwa odpowiada za przygotowanie tła. Reguła określa, że cały obszar obiektu ma zostać wypełniony określonym kolorem, a wynik działania zapisany pod identyfikatorem Warstwa00B. Na koniec (10. - 14.) Wszystkie warstwy zostają połączone. W liniach (17. - 22.) są zadeklarowane obiekty, które jak można zauważyć nie definiują koloru wypełnienia, ani obramowania.

Losowe tło

Interesująca jest reguła feTurbulence, która pozwala na utworzenie obrazu turbulencji Perlina. Pozwala to na uzyskanie różnego rodzaju materiałów, pereł czy nawet chmur. W wersji podstawowej reguła przyjmuje dwa atrybuty: baseFrequency, numOctaves oraz type.

Atrybut baseFrequency pozwala określić częstotliwość funkcji szumu. Im większa wartość jest podana tym więcej szumu zostanie użyte do wygenerowania obrazu. Atrybut ten przyjmuje wartość rzeczywistą, albo parę wartości rzeczywistych, ale nieujemne. W przypadku określenie pary pierwsza wartość oznacza częstotliwość dla osi X, a druga dla osi Y. W przypadku podania jednej liczb oś X i oś Y mają tę samą wartość. Domyślna wartość to 0. Oznacza to, że wtedy szum nie zostanie użyty.

Drugi atrybut to numOctaves jest to parametr dla funkcji szumu. Domyślna wartość to jeden, ale można ustalić inną wartość, która jest liczbą całkowitą. Trzeci argument to type, która pozwala określić czy generowane mają być turbulencje tj. wartość turbulence czy szum generowany fraktalami tj. wartość fractalNoise.

Poniżej zostało przedstawione porównanie wyników dla odpowiednich par wartości i typu turbulence:

numOctaves1520frequency0.050.10.5

Tutaj z kolei zostało pokazane takie samo porównanie, ale dla typu fractalNoise:

numOctaves1520frequency0.050.10.5

Jak można zauważyć typ fractalNoise nadaje się do tworzenia prawdziwego szumu znanego z edytorów plików graficznych podczas, gdy typ turbulence może posłużyć do tworzenia ciekawych, losowych tekstu na obiekt.

Definicja

Przykładowo deklaracja filtru z regułą feTurbulence wygląda następująco:

  1.     <filter id="filtr02AA" filterUnits="objectBoundingBox"
  2.       x="0%" y="0%" width="100%" height="100%">
  3.       <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1"/>

Zastosowanie

Wróćmy na chwilę do pierwszego przykładu. Obecnie efekt działania filtru nie jest zbyt niesamowity. Kolory są jednolite co posiada swój charakter, ale spróbujmy dodać fakturę obiektom poprzez zastosowanie reguły feTurbulence.

Teraz kwadraty wyglądają zdecydowanie bardziej interesująco. Oczywiście wylosowane turubulencje można zastosować np. do rozmycia obrazka czy wygenerowania chmur. W celu lepszego zrozumienia jak dokładnie działają podane atrybuty zalecam sprawdzić wywołanie dla różnych wartości.

Zadania

Zadanie 1

Postaraj się utworzyć filtr, który będzie służył do wypełniania prostokątu przy pomocy czterech zielonych kwadratów od lewego, górnego rogu do prawego, dolnego. Potem utwórz drugi filtr, który po prostopadłej przekątnej będzie rysować cztery, ale czerwone kwadraty. Przedstaw działanie filtrów jak na rysunku poniżej:

Zadanie 1

Uzyskaj trawnik pokazany poniżej. Zastanów się jak zmienia się wygląd szumu w zależności od jego częstotliwości, aby ustalić jeden z atrybutów.