Воссоздайте 2D эффект боковой волны из игры Worms

Я пытаюсь воссоздать эффект волн / воды от червей (см. Здесь http://youtu.be/S6lrRqst9Z4?t=31s ) Из того, что я понимаю, на самом деле это не спрайт, а процедурно генерируемый чем-то вроде синусоидальной волны.

Кто-нибудь создал что-то подобное раньше? или есть идеи как мне это сделать?

2d mathematics special-effects graphics-design

— Ciarán
источник

Да, вы правы, этот 2D эффект воды можно смоделировать с помощью математической функции синуса :

wave = sin(phase + t * frequency) * amplitude

введите описание изображения здесь

phase константа, ставь все что хочешь.
установить tгоризонтальное положение обрабатываемого пикселя / вершины:t = x;
изменяться amplitudeсо временем (это заставит волны двигаться вверх и вниз):

amplitude = sin(t * wave_speed) * wave_height
объедините несколько волн, чтобы получить более эффектный эффект:

wave_final = wave0 + wave1 + ... ,

Для каждой волны немного измените некоторые параметры (например: фаза, частота, ...).

Вот быстрый пример, который я сделал, используя только две волны:

http://glslsandbox.com/e#4988.0 (требуется недавний браузер и включенный WebGL)

ПРИМЕЧАНИЕ: это шейдер, но для этого используются 2D примитивы.

РЕДАКТИРОВАТЬ: вы не указываете какие-либо рамки или 2d системы рендеринга, но вот как это может быть визуализировано с использованием полигонов / треугольных полос:

введите описание изображения здесь

— tigrou
источник

Вау, это потрясающий ответ, спасибо за очень полный ответ. Да, я использую HTML5 Canvas API для рендеринга. Еще раз спасибо за это, очень полезно!

— Ciarán

Правильно, хотя волны в червях явно не просто синусы, а более сложные; очень возможно просто суперпозиции синусов.

— leftaroundabout

@leftaroundabout - Технически , каждая волновая функция на самом деле является просто суперпозицией бесконечного числа синусов. Практически это все еще верно, но более грубые приближения могут облегчить вашу жизнь.

— Поддельное имя