Pole Siły: Szum Gradientowy + Cząstki

Niezauważna mapa wiatru

Pole przepływu przypisuje kierunek θ(x, y) każdemu punktowi na płótnie – to niezauważny map wind, który mówi cząstce przechodzącej przez siebie, w którą stronę się skręcić. Wprowadź wystarczającą liczbę cząstek do tego wiatru i pozwól im biec, a agregacja ich ścieżek ujawnia ukrytą strukturę pola: wiry, wgłibia, splątane strumienie. Technika, popularyzowana przez twórców generatywnych takich jak Tyler Hobbs na platformie Processing/p5.js, jest wystarczająco krótka, aby ją zbudować od podstaw w prostym Canvas 2D w mniej niż godzinę. Wygląda organicznie, a nie losowo, ponieważ opiera się o ciągły, przestrzennie skorelowany szum: punkty w pobliżu otrzymują podobne kąty, więc cząstki rozpoczynające się blisko siebie będą dryfować razem przez pewien czas, zanim pole odwróci je od siebie – to samo zachowanie jakościowe, jakiego doświadczamy w dymie, piasku pod wpływem wiatru lub liniach prądu rzeki.

Od szumów Perlinowych do pola wektorowego

Funkcja kąta musi płynnie zmieniać się w przestrzeni, dlatego szumy Perlinowe – ciągłe, o zakresie około [-1, 1], bez artefaktów siatki – stanowią klasyczny wybór, przeskalowane do zakresu obrotów: θ(x, y, t) = noise(x·s, y·s, t·s_t) · 2π · n, gdzie s jest skalą szumu przestrzennego, s_t skalą czasową, a n określa liczbę pełnych obrotów, na które mapowany jest zakres szumu. Dodanie członu czasowego oznacza, że pole samo się powoli rozwija, więc cząsteczka, która w przeciwnym razie ustabilizowałaby się w zamkniętym obrocie, stale odkrywa nowe terytoria – bez tego animacja zamiera w ciągu kilku sekund na nieruchomym obrazie. Każda cząsteczka następnie porusza się z x += cos(kąta)·prędkość, y += sin(kąta)·prędkość co klatkę, a jeśli wypycha się poza ekran, albo się obraca, albo odradza.

θ(x, y, t) = noise(x·s, y·s, t·s_t) · 2π · n
x += cos(θ) · speed;  y += sin(θ) · speed
Trail fade: ctx.fillStyle = "rgba(10,10,20,0.03)"; ctx.fillRect(0,0,w,h)

Kluczem jest to, czego nie wyczyścisz

Charakterystyczny wygląd pochodzi z braku pełnego czyszczenia płótna w każdym kadrze: zamiast ctx.clearRect(), maluj prawie przezroczyste prostokąt na całe płótno przed narysowaniem nowych pozycji cząstek. Niski poziom alfa (0,01–0,02) powoduje długie, pomrańczowe ślady; wyższy poziom alfa (0,08–0,15) tworzy krótkie ogonki komety, które wyraźniej pokazują kształt pola w danym momencie – ten pojedynczy parametr jest największym wizualnym elementem w całym szkicowaniu. Kolor zazwyczaj pochodzi z mapowania kąta pola lokalnego na barwę (barwa = kąt/(2π)·360), dosłownie czyniąc widzialny wektorowy pole – 3 000–5 000 cząstek przy 60 fps jest komfortowe dla Canvas 2D na większości laptopów, a skala szumu, skala czasu, liczba cząstek, alfa śladu i prędkość każda handlują gęstością, żywotnością i liczbą klatek na sekundę w stosunku do siebie.

Frequently asked questions

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz the simulation i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.