falowany obrazek

Wątek przeniesiony 2020-06-12 21:40 z C/C++ przez kq.

BO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 93
0

Chciałbym zrobić sobie takie ruchome logo, az pomocą falowania.

  1. biorę dowolny obrazek, np. taki:
    smothing
  2. i teraz ma to falować, jak np. po uderzeniu w taflę wody, albo w gorącym powietrzu nad jezdnią, itd.

jest jakaś gotowa maszyneria do tego typu efektów?

Chodzi mi jedynie o wyliczanie kolejnych faz tej deformacji obrazka,
który będę sobie potem wywalał na ekran, np. co 50ms.

wave(image, dt); // przelicza te fale w czasie o dt

out(image); // wywalam na ekran

Spine
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 6990
1

Takie coś za Ciebie wygooglowałem...

https://www.bypeople.com/water-drop-effect-html-css-js/

BO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 93
0

Coś w tym stylu, tylko na desktop, nie na.. internet.

chociaż trochę niedorobione to jest - mało realne, np. brak odbić fal od ścian, itd.

Tworzymy siatkę z punktów: n x n, którą sobie falujemy... z nałożoną teksturą w postaci naszego obrazka.

Spine
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 6990
1

"Siatka punktów" nie da Ci takiego gładkiego efektu, jak mapa wypukłości...

Chyba powinieneś napisać shader i generować w nim odpowiednie wypukłości dla swojego efektu.

Odbicia fal od siebie i ścian oraz nakładanie się fal to nie jest taka trywialna rzecz. Taka skomplikowana symulacja trochę więcej wymaga od kodera, niż zwykłe krople bez interakcji między sobą...

Na pierwszy rzut takie coś znalazłem: https://www.shadertoy.com/view/4sBcDh

katakrowa
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Chorzów
  • Postów: 1670
2

Żeby było "realnie" => realistycznie to musisz ogarnąć rachunek różniczkowy, równania przepływu Bernoulliego, zdobyć wiedzę o przepływie turbulentnym no i potem to jeszcze zaimplementować :-)

BO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 93
0
katakrowa napisał(a):

Żeby było "realnie" => realistycznie to musisz ogarnąć rachunek różniczkowy, równania przepływu Bernoulliego, zdobyć wiedzę o przepływie turbulentnym no i potem to jeszcze zaimplementować :-)

Bez problemu mogę tak to sobie rozwiązywać, znaczy równanie falowe dla fal płaskich.
Tyle że liczyłem na gotowy algorytm... bo szkoda mi czasu robienie tego od zera.

A zresztą efekt falowania nad gorącym ogniskiem byłby chyba lepszy,
a takie coś tu już raczej refrakcja - optyka, a nie proste równanie falowe.

BO
  • Rejestracja: dni
  • Ostatnio: dni
  • Postów: 93
0
Spine napisał(a):

"Siatka punktów" nie da Ci takiego gładkiego efektu, jak mapa wypukłości...

No to przecież załaduję to np. w opengl, a on to już powygładza jak należy;
ostatecznie można to własnoręcznie interpolować, co da gładkość.

katakrowa
  • Rejestracja: dni
  • Ostatnio: dni
  • Lokalizacja: Chorzów
  • Postów: 1670
0

Z tego co wiem akceleracja "wody" jest realizowana przez niektóre karty graficzne więc być może są jakieś gotowe funkcje do tego nawet w WebGL.
Znalazłem taki przykład implementacji:
http://madebyevan.com/webgl-water/ ( kulką można ruszać a basen obracać ).

Myślę, że przykład powinien zaspokoić potrzeby kolegi @bonifacy
Obsługa "wody" http://madebyevan.com/webgl-water/water.js

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.