diff --git a/05/README-pl.md b/05/README-pl.md new file mode 100644 index 0000000..394fa66 --- /dev/null +++ b/05/README-pl.md @@ -0,0 +1,216 @@ +# Rysowanie algorytmiczne +## Funkcje kształtujące (ang. "shaping functions") + +Rozdział ten mógłby się nazywać "lekcja płota Pana Miyagiego". Poprzednio, mapowaliśmy znormalizowane pozycje *x* i *y* do *czerwonego* i *zielonego* kanału. W skróćie, stworzyliśmy fumkcję, która przyjmuje dwuwymiarowy wektor (x i y) i zwraca czterowymiarowy wektor (r, g, b i a). Jednak zanim zagłębimy się w takie transformacje między wymiarami, wypada najpierw opanować tworzenie jednowymiarowych funkcji w pełni. Im więcej czasu spędzisz na szlifowaniu tej umiejętności, tym lepsze będzie twoje "shader karate". + + + +![The Karate Kid (1984)](mr_miyagi.jpg) + +Poniższy kod będzie naszym płotem. Wizualizujemy w nim znormalizowaną wartość współrzędnej *x* (`st.x`) w dwojaki sposób: poprzez jasność (zauważ płynny gradient od czerni do bieli) oraz przez rysowanie zielonego wykresu funkcji (w poniższym przykładzie funkcji *x* = *y*). Nie przejmuj się za bardzo funkcją `plot` - wrócimy do niej później. + + + +
+ +**Krótka uwaga**: Konstruktor typu `vec3` "rozumie", że chcesz przypisać tę samą wartość do każdego z trzech kanałów koloru, natomaist typu `vec4` rozumie, że chcesz stworzyć czterowymiarowy wektor z wektora trójwymiarowego i czwartej wartości (w tym wypadku wartość ta controluje alphę, czyli przezroczystość). Spójrz na linjki 19 i 25 powyżej. + + + +Kod jest twoim płotem - ważne, żebyś umiał na niego spojrzeć i go zrozumieć. Będziesz zakres od *0.0* do *1.0* będzie ci stale towarzyszył. Opanujesz sztukę blendowania (pol. "mieszania", "łączenia") i kształtowaniatej linii + +This code is your fence; it's important to observe and understand it. You will come back over and over to this space between *0.0* and *1.0*. You will master the art of blending and shaping this line. += + +Tę wzajmnie jednoznaczną (ang. "one-to-one") funkcję między *x* i *y* (lub jasnością) nazywamy *interpolacją liniową*. Możemy użyć funkcji matematycznych by *uformować* tę linię. Przykładowo, możemy podnieść *x* do potęgi 5, aby utworzyć *krzywą* linię. + + + +
+ +Ciekawe, prawda? W linijce 22 spróbuj użyć następujących wykładników: 20.0, 2.0, 1.0, 0.0, 0.2 czy 0.02. Zrozumienie związków między końcową wartością a wykładnikiem będzie bardzo porzydatne. Używanie tego typu funkcji matematycznych tu i tam da ci pełnię kontroli nad twoim kodem. + + + +[`pow()`](../glossary/?search=pow) są natywnymi funkcjami w GLSL. Większość z nich zaimplementowana jest na poziomie hardware'u, co oznacza, że odpowiednie ich użycie przypiszy twój kod. + + + +Zastąp funkcję potęgową w linijce 22 inną funkcją. Spróbuj [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log) i [`sqrt()`](../glossary/?search=sqrt). W wypadku funkcji trygonometrycznych warto użyć liczby PI. Jest ona zdefiniowana w 8 linijce za pomocą makra, który zastąpi każde użycie `PI` wartością `3.14159265359`. + + + +### Step i Smoothstep + +GLSL posiada też unikalne natywne funckje interpolacyjne wykorzystujące akcelerację sprzętową. + + +Funkcja [`step()`](../glossary/?search=step) otrzymuje dwa argumenty. Pierwszy z nich to limit lub próg, natomiast drugi to wartość, którą chcemy sprawdzić lub przekazać. Każda wartość poniżej limitu zwróci `0.0`, natomiast wszystko powyżej limitu zwróci `1.0`. + + + + +Spróbuj zmienić tę wartość progową w linijce 20 poniższego kodu. + +
+ +Druga unikalna funkcja znana jest jako [`smoothstep()`](../glossary/?search=smoothstep) i otrzymuje trzy argumenty Dwa pierwsze argumenty służą do określenia początku i końca przejścia (interpolacji), natomiast trzeci jest wartością interpolowaną. + + + +
+ +W poprzednim przykładzie, w linii 12, zauważ, że użyliśmy smoothstep wewnątrz funkcji `plot()` do narysowania zielonej linii. Dla każdej pozycji wzdłuż osi x funkcja ta zwraca odpowiednią wartość y. Jak? Poprzez połączenie ze sobą dwóch [`smoothstep()`](../glossary/?search=smoothstep). Spójrz na poniżśzy fragment kodu i wstaw go w linijce 20 powyższego przykładu; pomyśl, że dokonane została pionowe cięcie - tło wygląda jak linia, prawda? + + + +```glsl +float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x); +``` + +### Sinus i Cosinus + +Kiedy chcesz użyć matematyki do animacji, kształtowania lub blendowania wartości, nie ma nic lepszego niż zaprzyjaźnienie się z sinusem i cosinusem. + + + +Te dwie podstawowe funkcje trygonometryczne współpracują ze sobą, aby skonstruować okręgi, które są tak poręczne jak szwajcarski scyzoryk MacGyvera. Warto wiedzieć, jak się zachowują i na jakie sposoby można je łączyć. W skrócie, przyjąwszy kąt (w radianach), zwrócą one współrzędne *x* ([cosinus](../glossary/?search=cos)) i *y* ([sinus](../glossary/?search=sin)) punktu na brzegu okręgu o promieniu równym 1. Jednak fakt, że zwracają one znormalizowane wartości (wartości pomiędzy -1 a 1) w tak gładki sposób, czyni z nich niesamowite narzędzie. + + + +![](sincos.gif) + +Choć trudno opisać wszystkie związki między funkcjami trygonometrycznymi i okręgami, powyższa animacja pięknie wizualizuje te związki. + + + +
+ +Przyjrzyj się uważnie powyższej fali sinusoidalnej. Zauważ, jak wartości *y* oscylują płynnie między +1 a -1. Jak widzieliśmy w przykładzie z czasem w poprzednim rozdziale, możesz wykorzystać to rytmiczne zachowanie [`sin()`](../glossary/?search=sin) do animowania dowolnych wartości. Jeśli czytasz ten przykład w przeglądarce, spróbuj zmienić kod w powyższym jedno-linjkowym przykładzie i zaobserwuj, jak zmienia się fala. (Uwaga: nie zapomnij o średniku na końcu linii). + + + + +Spróbuj następnujących ćwiczeń i zobacz, co się stanie + +* Dodaj czas (`u_time`) do *x* wewnątrz funkcji `sin`. Zapamiętaj ten **ruch** wzdłuż *x*. + +* Pomnóż *x* przez `PI` wewnątrz funkcji `sin`. Zauważ, jak okres sinusa **zmniejsza się** do 2. Zwiększyliśmy w ten sposób częstotliwość. + +* Pomnóż czas (`u_time`) przez *x* wewnątrz funkcji `sin`. Zobacz jak **częstotliwość** zwiększa się, a okres maleje. Możliwe że u_time może być już bardzo duży, co czyni wykres trudnym do odczytania - odśwież stronę i spróbuj ponownie. + +* Dodaj 1.0 do [`sin(x)`](../glossary/?search=sin). Zobacz jak cała fala jest **przesunięta** w górę i wszystkie wartości są pomiędzy 0.0 a 2.0. + +* Pomnóż [`sin(x)`](../glossary/?search=sin) przez 2.0. Zobacz jak **amplituda** podwaja się. + +* Oblicz wartość bezwzględną ([`abs()`](../glossary/?search=abs)) funkcji `sin(x)`. Wygląda to jak ślad **odbijającej się** piłki. + +* Wyciągnij tylko część ułamkową ([`fract()`](../glossary/?search=fract)) z funkcji [`sin(x)`](../glossary/?search=sin). + +* Dodaj sufit ([`ceil()`](../glossary/?search=ceil)) oraz podłogę ([`floor()`](../glossary/?search=floor)) z [`sin(x)`](../glossary/?search=sin), aby otrzymać falę cyfrową o wartościach 1 i -1. + + + + +### Kilka dodatkowych przydatnych funkcji + +Pod koniec ostatniego ćwiczenia wprowadziliśmy kilka nowych funkcji. Teraz czas na eksperymentowanie z każdą z nich poprzez odkomentowanie poniższych linii po kolei. Poznaj te funkcje i zbadaj jak się zachowują. Wiem, zastanawiasz się... dlaczego? Szybkie wyszukiwanie w google "generative art" powie Ci to. Pamiętaj, że te funkcje to nasz płot. Opanowujemy ruch w jednym wymiarze, w górę i w dół. Już niedługo przyjdzie czas na dwa, trzy i cztery wymiary! + + + +![Anthony Mattox (2009)](anthony-mattox-ribbon.jpg) + +
+ + + +### Zaawansowane funkcje kształtujące + +[Golan Levin](http://www.flong.com/) ma świetną dokumentację bardziej złożonych funkcji kształtujących, które są niezwykle pomocne. Samodzielene przeniesienie ich do GLSL jest dobrym krokiem w stronę budowania własnego zasobu snippetów kodu. + + + +* Wielomianowe Funkcje Kształtujące: [www.flong.com/archive/texts/code/shapers_poly](http://www.flong.com/archive/texts/code/shapers_poly/) + +* Wykładnicze Funkcje Kształtujące: [www.flong.com/archive/texts/code/shapers_exp](http://www.flong.com/archive/texts/code/shapers_exp/) + +* Kołowe i Eliptyczne Funkcje Kształtujące: [www.flong.com/archive/texts/code/shapers_circ](http://www.flong.com/archive/texts/code/shapers_circ/) + +* Parametryczne (Beziera) Funkcje Kształtujące: [www.flong.com/archive/texts/code/shapers_bez](http://www.flong.com/archive/texts/code/shapers_bez/) + + + + +
+ +Podobnie jak szefowie kuchni, którzy zbierają przyprawy i egzotyczne składniki, artyści cyfrowi i kreatywni koderzy mają szczególne zamiłowanie do pracy nad własnymi funkcjami kształtującymi. + + + +[Iñigo Quiles](http://www.iquilezles.org/) ma wspaniałą kolekcję [użytecznych funkcji](http://www.iquilezles.org/www/articles/functions/functions.htm). Po przeczytaniu [tego artykułu](http://www.iquilezles.org/www/articles/functions/functions.htm) spójrz na poniższe tłumaczenie tych funkcji na GLSL. Zwróć uwagę na wymagane małe zmiany, jak stawianie "." (kropki) na liczbach zmiennoprzecinkowych i używanie nazw GLSL dla funkcji *C*; na przykład zamiast `powf()` użyj `pow()`: + +[Iñigo Quiles](http://www.iquilezles.org/) has a great collection of [useful functions](http://www.iquilezles.org/www/articles/functions/functions.htm). After reading [this article](http://www.iquilezles.org/www/articles/functions/functions.htm) take a look at the following translation of these functions to GLSL. Pay attention to the small changes required, like putting the "." (dot) on floating point numbers and using the GLSL name for *C functions*; for example instead of `powf()` use `pow()`: + +
+ +To keep your motivation up, here is an elegant example (made by [Danguafer](https://www.shadertoy.com/user/Danguafer)) of mastering the shaping-functions karate. + + + +In the *Next >>* chapter we will start using our new moves. First with mixing colors and then drawing shapes. + +#### Exercise + +Take a look at the following table of equations made by [Kynd](http://www.kynd.info/log/). See how he is combining functions and their properties to control the values between 0.0 and 1.0. Now it's time for you to practice by replicating these functions. Remember the more you practice the better your karate will be. + +![Kynd - www.flickr.com/photos/kynd/9546075099/ (2013)](kynd.png) + +#### For your toolbox + +Here are some tools that will make it easier for you to visualize these types of functions. + +* Grapher: if you have a MacOS computer, type `grapher` in your spotlight and you'll be able to use this super handy tool. + +![OS X Grapher (2004)](grapher.png) + +* [GraphToy](http://www.iquilezles.org/apps/graphtoy/): once again [Iñigo Quilez](http://www.iquilezles.org) made a tool to visualize GLSL functions in WebGL. + +![Iñigo Quilez - GraphToy (2010)](graphtoy.png) + +* [Shadershop](http://tobyschachman.com/Shadershop/): this amazing tool created by [Toby Schachman](http://tobyschachman.com/) will teach you how to construct complex functions in an incredible visual and intuitive way. + +![Toby Schachman - Shadershop (2014)](shadershop.png) diff --git a/Questions_to_author.txt b/Questions_to_author.txt index ba283c8..695b5c6 100644 --- a/Questions_to_author.txt +++ b/Questions_to_author.txt @@ -5,4 +5,10 @@ Podać polskie tłumaczenie słowa pipeline Podać angielskie tłumaczenie wejście i wyjście -Wytłumaczyć "hot reloading" (04) \ No newline at end of file +Wytłumaczyć "hot reloading" (04) +użyć "akceleracja sprzętowa" zamiast "zaimplementowane w hardware" +"linii" vs "linijce" +blending - blending +shapin - kształtowanie +shaping functions - funkcje kształtujące +kreatywni koderzy \ No newline at end of file