If you're seeing this message, it means we're having trouble loading external resources on our website.

Jeżeli jesteś za filtrem sieci web, prosimy, upewnij się, że domeny *.kastatic.org i *.kasandbox.org są odblokowane.

Główna zawartość

Dwuwymiarowy szum

Koncept wartości szumu zawartych w jednowymiarowej przestrzeni jest bardzo istotny, gdyż prowadzi nas wprost do omówienia przestrzeni dwuwymiarowej. Pomyślmy o tym przez chwilę. Jednowymiarowy szum dawał nam sekwencję wartości w których każda wartość była podobna do wartości sąsiednich. Z racji, że wartości te są tylko w jednym wymiarze, każda wartość posiada tylko dwóch sąsiadów: wartość która ją poprzedza(na lewo od niej na wykresie), oraz wartość następną(na prawo).
Obrazek z "Natury Kodu"
Rysunek I.10: Szum jednowymiarowy
Dwuwymiarowy szum działa dokładnie w ten sam sposób. Różnica jest taka, że nie szukamy wartości po ścieżce liniowej, ale wartości znajdujących się na siatce. Pomyślcie o kartce papieru w kratkę, w którym na każdej kratce znajduje się liczba. Wybrana wartość musi być podobna do wszystkich swoich sąsiadów: na górze, na dole, na prawo od niej, na lewo i po skosie.
Obrazek z "Natury Kodu"
Rysunek I.11: Szum dwuwymiarowy
Gdybyśmy chcieli odtworzyć tą kartkę przypisując każdej wartości jasność koloru, otrzymalibyśmy coś, co wygląda jak chmury. Białe znajdują się obok jasnych szarych, które znajdują się obok szarych, które z kolei znajdują się obok ciemnych szarych, który znajduje się obok czarnych, które znajdują się obok ciemnych szarych i tak dalej.
Obrazek z "Natury Kodu"
Dlatego właśnie szum został wymyślony. Modyfikuje się parametry lub zmienia koloru aby końcowy obraz przypominał marmur, drewno albo inną tego typu teksturę.
Rzućmy okiem na to, jak stworzyć szum dwuwymiarowy w ProcessingJS. Jeżeli chcielibyśmy pomalować każdy piksel w oknie w sposób losowy, potrzebowalibyśmy zagnieżdżonej pętli, która odnosiła by się do każdego piksela i nadawała mu losową jasność.
Aby pomalować każdy piksel na podstawie funkcji noise(), zrobimy dokładnie to samo, tylko zamiast używać random() użyjemy noise().
var bright = map(noise(x,y), 0, 1, 0, 255);
To całkiem niezły start—otrzymamy wartość dla każdej pary (x,y) w naszej przestrzeni dwuwymiarowej. Problem w tym, że nie otrzymamy takiej jakości chmur, jaką byśmy chcieli. Różnica między pikselem 200 a pikselem 201 ma za duży skok w przypadku szumu. Pamiętajcie, że pracując z szumem jednowymiarowym zwiększaliśmy naszą wartość czasu o 0.01 co klatkę, a nie o 1! Całkiem dobrym rozwiązaniem tego problemu jest użycie innych zmiennych jako argumentów szumu. Dla przykładu możemy zwiększać zmienną xoff za każdym razem gdy przemieszczamy się w poziomie, a yoff za każdym razem gdy przesuwamy się pionowo w naszej zagnieżdżonej pętli.
Opisaliśmy wiele popularnych sposobów na użycie szumu Perlina w tym poradniku. Za pomocą szumu jednowymiarowego byliśmy w stanie uzyskać wrażenie płynnego przemieszczania się obiektu. Za pomocą szumu dwuwymiarowego stworzyliśmy wzór podobny do chmur na płaszczyźnie pikseli. Musicie jednak pamiętać, że wartości szumu Perlina są tylko wartościami. Nie są powiązane z położeniem pikseli lub kolorem. Każdy przykład w naszych samouczkach posiadający zmienne może być opisany przez szum Perlina. Gdy modelujemy siłę wiatru, jego siła może być sterowana przez szum Perlina. To samo dotyczy kątów pomiędzy poszczególnymi gałęziami fraktala przedstawiającego drzewo, albo prędkości i kierunku obiektów poruszających się wzdłuż siatki w symulacji przepływu, tak jak w poniższym programie.
Na początku ostatniego poradnika omówiliśmy to, jak losowość może być dużym udogodnieniem. W wielu przypadkach najbardziej oczywistym typem pytania które zadajemy to pytanie, jak dany obiekt powinien się przemieszczać. Jaki powinien mieć kolor? Oczywista odpowiedź nie musi jednak wymagać od nas dużego nakładu pracy.
Na koniec tego poradnika warto wspomnieć o tym, że bardzo łatwo wpaść w pułapkę używania szumu Perlina do wszystkiego. Jak ten obiekt powinien się przemieszczać? Na podstawie szumu Perlina! Jaki powinien mieć kolor? Na podstawie szumu Perlina! Jak szybko powinien rosnąć? Na podstawie szumu Perlina!
Nie chodzi bynajmniej o to, że powinniście lub nie powinniście używać losowości. Albo, żeby używać albo nie używać szumu Perlina. Chodzi o to, że zasady działania waszego systemu są ustalane przez was, a im większą macie paletę narzędzi, tym większy wybór będziecie mieli podczas implementacji tych zasad. Celem tych poradników jest poszerzanie tej palety. Jeżeli znacie tylko jeden rodzaj losowości, wszystkie wasze projekty będą zawierać tylko ten jeden typ. Szum Perlina to kolejne narzędzie do losowości którego możecie użyć w swoich programach. Po odrobinie praktyki z szumem Perlina przejdziemy do kolejnego rodzaju narzędzi - wektorów!

Ten kurs "Symulacje Natury" jest pochodną z "Natury Kodu " stworzonej przez Daniela Shiffmana, użytej pod licencją Creative Commons Attribution-NonCommercial 3.0 Unported License.

Chcesz dołączyć do dyskusji?

Na razie brak głosów w dyskusji
Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.