Fale

Jeśli mówisz sobie, “zawsze chciałem zrobić sobie taką fajną falę na ekranie”, to właśnie przyszedł na to czas! A właściwie, to prawie za chwile to zrobimy. Kiedy poruszamy jednym okręgiem w górę i w dół względem funkcji sinus, to tak naprawdę patrzymy na pojedynczy punkt na osi X, który należy do naszej fali. Ogarniając parę pętli for, możemy umieścić parę oscylujących (poruszających się w dół i górę) okręgów obok siebie.

Ten falisty wzór mógłby być użyty do zaprojektowania ruchów ciała, kończyn czy innych przybytków pewnej fantastycznej postaci. Równie dobrze mógłby być użyty do stworzenia jakiejś powierzchni (np. falująca woda).

Tutaj napotykamy się na te same zagadnienia: amplitudę (wysokość naszego wzorku) oraz okres. Zamiast okresu odwołującego się do czasu patrzmy na pełną falę: możemy powiedzieć że nasza wartość okresu to szerokość (określona w pikselach) pełnego cyklu fali. I tak jak w wypadku prostej oscylacji (poruszania) mamy możliwość obliczenia wzoru fali względem określonego okresu albo po prostu stosując się do modelu prędkości kątowej.

Przemyślmy jednak prostszy przypadek, konkretnie prędkość kątową. Wiemy że potrzebujemy zacząć z kątem, prędkością kątową, i amplitudą:

var angle = 0;  //kąt
var angleVel = 0.2;  //prędkość kątowa
var amplitude = 100; //amplituda

Następnie chcemy zrobić pętlę w której wszystkie wartości naszego x zostaną przetworzone na konkretne punkty znajdujące się na fali. Powiedzmy sobie że na razie chcemy to zrobić co 24 pixele. W wspomnianej pętli będziemy robić trzy rzeczy:

Wyliczamy położenie y względem amplitudy i sinusa kąta.
Rysujemy okręg w konkretnym punkcie (x,y).
Zwiększamy kąt zgodnie z prędkością kątową.

for (var x = 0; x <= width; x += 24) {
    // Wylicz położenie y względem amplitudy i sinusa kąta.
    var y = amplitude * sin(angle);
    // Rysuj okrąg w punkcie x , y
    ellipse(x, y+height/2, 48, 48);
    // Zwieksz kąt zgodnie z prędkością kątową
    angle += angleVel;
}

Sprawdźmy wyniki jakie otrzymamy po podłożeniu różnych wartości pod zmienną angleVel:

Zauważcie, że nie liczymy tu dokładnie okresu fali: tym większa jest prędkość kątowa, tym krótszy jest okres. Warto wspomnieć także że wraz z zmniejszaniem okresu, coraz trudniejsze jest wyróżnienie fali jako że odległość między pojedynczymi punktami zwiększa się. Jedną z możliwości jakie mamy to użycie beginshape() oraz endShape() by połączyć punkty za pomocą linii.

Powyższy przykład jest statyczny. Fala jest niezmienna, mało tego, nigdy nie faluje. A my własnie chcielibyśmy, żeby sobie pofalowała. Animacja falującej fali to podchwytliwe zadanie. Pewnie pierwsza rzecz która ci przyjdzie do głowy to: “Jaki to problem, przecież mogę sobie ustawić kąt jako zmienną globalną i inkrementować od jednego cyklu draw() (funkcja rysująca) do kolejnego.”

Niestety, nie tak to działa. Gdy przeanalizujemy statycznie rysowaną falę, zauważmy że prawa krawędź nie odpowiada lewej, miejsce gdzie kończy się w jednym cyklu rysowanie funkcji draw() nie może zaczynać się w tym samym miejscu gdy przejdziemy do kolejnego cyklu. Zamiast powyższego, chcemy tak naprawdę mieć zmienną która służy wyłącznie do śledzenia jaką wartość kąta chcemy mieć wraz z początkiem fali. Ten kąt (który nazwiemy sobie startAngle [kąt początkowy]) zwiększamy z jego własną prędkością kątową.

Tutaj mamy dokładnie to: razem z kątem początkowym włączonym w całość. Wprowadź różne wartości by zobaczyć co się dzieje z oscylującą (poruszającą się) falą.

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?

Zaloguj się

Sortuj według

Na razie brak głosów w dyskusji

Rozumiesz angielski? Kliknij tutaj, aby zobaczyć więcej dyskusji na angielskiej wersji strony Khan Academy.