If you're seeing this message, it means we're having trouble loading external resources on our website.

Se você está atrás de um filtro da Web, certifique-se que os domínios *.kastatic.org e *.kasandbox.org estão desbloqueados.

Conteúdo principal

Ondas

Se você está dizendo a si mesmo, “Hum, isso tudo é bom e importante, mas o que eu realmente quero é desenhar uma onda na tela,” bem, então a hora chegou. O negócio é, estamos a cerca de 90% de lá. Quando oscilamos um único círculo para cima e para baixo de acordo com a função seno, o que estamos fazendo é olhar para um único ponto ao longo do eixo-x de um padrão de onda. Com um laço for, podemos colocar todo o conjunto desses círculos oscilantes um ao lado do outro.
Esse padrão ondulado poderia ser usado para projetar o corpo ou os membros de uma criatura, bem como para simular uma superfície suave (como a água).
Aqui, vamos encontrar as mesmas questões da amplitude (altura da onda) e do período. Em vez do período se referir ao tempo, entretanto, uma vez que estamos considerando a onda completa, podemos falar sobre o período como a largura (em pixels) de um ciclo de onda completo. E assim como com oscilações simples, temos a opção de computar o padrão de onda de acordo com um período preciso ou simplesmente seguindo o modelo da velocidade angular.
Vamos começar com o caso mais simples, a velocidade angular. Sabemos que precisamos começar com um ângulo, uma velocidade angular e uma amplitude:
var angle = 0;
var angleVel = 0.2;
var amplitude = 100;
Então vamos fazer um laço com todos os valores de x onde queremos desenhar um ponto da onda. Digamos, a cada 24 pixels, por enquanto. Nesse laço, nós queremos fazer três coisas:
  1. Calcular a posição de y de acordo com a amplitude e o seno do ângulo.
  2. Desenhar um círculo na posição (x,y) .
  3. Incrementar o ângulo de acordo com a velocidade angular.
for (var x = 0; x <= width; x += 24) {
    // Calcular a posição y de acordo com a amplitude e o seno do ângulo
    var y = amplitude * sin(angle);
    // Desenhar um círculo na posição x, y
    ellipse(x, y+height/2, 48, 48);
    // Incrementar o ângulo de acordo com a velocidade angular
    angle += angleVel;
}
Vamos olhar os resultados com valores diferentes para angleVel:
Observe como, embora não estejamos computando o período da onda precisamente, quanto maior a velocidade angular, menor será o período. Vale ressaltar também que, conforme o período se torna menor, é cada vez mais difícil perceber a onda em si à medida que a distância entre os pontos individuais aumenta. Uma opção que temos é usar beginShape() e endShape() para conectar os pontos com uma linha.
O exemplo acima é estático. A onda nunca muda, nunca ondula, e isso é o que construímos até aqui. Esta etapa adicional de animar a onda é um pouco complicada. Sua primeira reação pode ser dizer: “Ei, não tem problema, nós simplesmente faremos o ângulo ser uma variável global e deixaremos que aumente de um ciclo a outro através da funçãodraw().”
Embora seja um bom pensamento, ele não vai funcionar. Se você olhar para a onda desenhada estaticamente, a extremidade do lado direito não bate com a do lado esquerdo; a posição onde ela termina em um ciclo de draw() não pode ser a mesma onde ela inicia no próximo ciclo. Em vez disso, o que precisamos fazer é ter uma variável inteiramente dedicada a acompanhar com qual valor de ângulo a onda deve começar. Este ângulo (que chamaremos de startAngle) aumenta com sua própria velocidade angular.
E aqui temos o resultado, com o ângulo inicial incorporado. Use números diferentes para ver o que acontece com a onda em oscilação.

Este curso "Natural Simulations" é um derivado do "The Nature of Code" por Daniel Shiffman, usado sob a Creative Commons Attribution-NonCommercial 3.0 Unported License.

Quer participar da conversa?

Nenhuma postagem por enquanto.
Você entende inglês? Clique aqui para ver mais debates na versão em inglês do site da Khan Academy.