Recrie o efeito de onda lateral 2D do jogo Worms

Respostas:

14

Sim, você está certo, este efeito de água 2D pode ser simulado usando a função math sine :

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

insira a descrição da imagem aqui

  • phase é uma constante, coloque o que quiser.
  • defina tpara a posição horizontal do pixel / vértice que você está processando:t = x;
  • mudar ao amplitudelongo do tempo (que fará as ondas subirem e descerem):

    amplitude = sin(t * wave_speed) * wave_height

  • combine várias ondas para obter um efeito mais relástico:

    wave_final = wave0 + wave1 + ... .

    Para cada onda, altere alguns parâmetros um pouco (por exemplo: fase, frequência, ...).

Aqui está um exemplo rápido que fiz, usando apenas duas ondas:

http://glslsandbox.com/e#4988.0 (requer navegador recente e WebGL ativado)

NOTA: este é um sombreador, mas fazer isso usando primitivas 2D é a mesma abordagem.

EDIT: você não especifica nenhum framework ou sistema de renderização 2D, mas aqui está como ele pode ser renderizado usando polígonos / tiras de triângulo:

insira a descrição da imagem aqui

tigrou
fonte
Uau, essa é uma resposta incrível, obrigado pela resposta muito abrangente. Sim, estou usando a API HTML5 Canvas para renderização. Mais uma vez obrigado por isso, extremamente útil !!
Ciarán
Certo, embora as ondas em Worms claramente não sejam meramente sinos, mas mais complexas; muito possivelmente apenas superposições de senos.
leftaroundabout
1
@leftaroundabout - techincally , cada função de onda é realmente apenas uma superposição de um número infinito de senos. Na prática, isso ainda é verdade, mas aproximações mais grosseiras podem facilitar sua vida.
Fake Name