Amplitude e período da oscilação

Já está impressionado? Na seção sobre movimento angular, vimos alguns usos muito interessantes da tangente (para calcular o ângulo de um vetor), do seno e do cosseno (para converter de coordenadas polares para coordenadas Cartesianas). Poderíamos parar por aqui e nos dar por satisfeitos. Mas não. Isso é só o começo. O que o seno e o cosseno podem fazer por você vai além de fórmulas matemáticas e triângulos retângulos.

Vamos analisar um gráfico da função seno, em que y = seno(x)

Você vai perceber que o resultado da função seno é uma curva suave que alterna entre –1 e 1. Este tipo de comportamento é chamado de oscilação, um movimento periódico entre dois pontos. Dedilhar as cordas de um violão, balançar um pêndulo, saltar em um pula-pula — são todos exemplos de movimento de oscilação.

Então, é com alegria que descobrimos que podemos simular a oscilação em um programa em ProcessingJS, atribuindo o resultado da função seno à posição de um objeto. Observe que esse processo seguirá a mesma metodologia que aplicamos ao ruído de Perlin, na seção sobre ruído.

Vamos começar com um cenário bem básico. Queremos que um círculo oscile do lado esquerdo para o lado direito da nossa tela.

Isso é o que chamamos de movimento harmônico simples (ou, um pouco mais chique, “oscilação periódica sinusoidal de um objeto”). Esse será um programa simples de se escrever, mas antes de começarmos a codificar, é melhor nos familiarizarmos um pouco com a terminologia da oscilação (e das ondas).

O movimento harmônico simples pode ser expresso como qualquer posição (no nosso caso, a posição x) como uma função do tempo, com os dois elementos a seguir:

Analisando o gráfico de seno acima, podemos ver que a amplitude é 1, e o período é TWO_PI. O resultado do seno nunca é superior a 1 ou inferior a -1. E a cada TWO_PI radianos (ou 360 graus), o padrão de onda se repete.

Agora, no mundo de ProcessingJS em que vivemos, o que é amplitude e o que é período? A amplitude pode ser medida mais facilmente em pixels. No caso de uma janela com 200 pixels de largura, teríamos uma oscilação de 100 pixels do centro para a direita, e de 100 pixels do centro para a esquerda. Portanto:

Período é o tempo necessário para um ciclo completo, mas o que é o tempo no nosso mundo de ProcessingJS? Ou seja, certamente poderíamos dizer que queremos que o círculo oscile a cada três segundos. E poderíamos acompanhar os milissegundos transcorridos em nosso programa (usando millis()) e desenvolver um algoritmo elaborado para fazer oscilar um objeto, de acordo com o tempo do mundo real.

No entanto, ainda temos outra opção: podemos usar a informação de que os programas em ProcessingJS têm uma noção de "quadros" e que, por padrão, um programa tenta executar 30 "quadros por segundo." ProcessingJS nos dá a variável frameCount para descobrir em qual quadro estamos no momento, e a função frameRate(), para mudar os quadros por segundo. A taxa de quadros padrão é 30 QPS, uma vez que essa é uma velocidade interessante para produzir uma animação suave para brincar com o cérebro humano, mas, às vezes, pode ser útil reduzir a taxa de quadros, por exemplo, durante a depuração.

Assim, podemos decidir basear nosso período em um número de quadros já exibidos, pois, como sabemos que isso é estreitamente relacionado ao tempo do mundo real, podemos dizer que o movimento oscilante deve se repetir a cada 30, 50 ou 1.000 quadros, e assim por diante.

Agora que já sabemos qual é a amplitude e o período, chegou a hora de escrever uma fórmula para calcular x como uma função do tempo, que substituirá o contador de quadros atual.

Vamos decompor um pouco mais a fórmula, para tentar entender cada componente. O primeiro é, provavelmente, o mais fácil. Tudo o que estiver fora da função seno é multiplicado pela amplitude. Sabemos que o seno oscilará entre -1 e 1. Se multiplicarmos esse valor pela amplitude, obteremos o resultado desejado: um valor que oscila entre -amplitude e amplitude. (Observação: aqui também poderíamos usar a função map() de ProcessingJS para projetar o resultado do seno para um intervalo personalizado).

Agora, vamos dar atenção ao que está dentro da função seno:

O que temos aqui? Vamos começar com o que sabemos. Sabemos que o seno se repetirá a cada 2PI radianos — ou seja, ele começará em 0 e se repetirá em 2PI, 4PI, 6PI etc. Se o período tem 120 quadros, significa que queremos que o movimento oscilatório se repita quando frameCount estiver em 120 quadros, 240 quadros, 360 quadros, etc. frameCount é realmente a única variável. Ela começa em 0 e é incrementada. Vejamos qual será o resultado da fórmula com esses valores.

frameCount dividido pelo período nos diz quantos ciclos já completamos — estamos na metade do caminho do primeiro ciclo? Já completamos dois ciclos? Ao multiplicar esse número por TWO_PI, obtemos o resultado que esperamos, já que TWO_PI é o número de radianos necessários para que um seno complete um ciclo.

Juntando tudo, aqui está o programa que faz oscilar a posição x de um círculo com uma amplitude de 100 pixels e um período de 120 quadros.

Também vale mencionar o termo frequência: o número de ciclos por unidade de tempo. Frequência é igual a 1 dividido pelo período. Se o período é igual a 120 quadros, apenas 1/120 de um ciclo é concluído em um quadro, logo, frequência = 1/120 ciclos/quadro. No exemplo acima, optamos simplesmente por definir a taxa de oscilação em função do período, portanto, uma variável para frequência não foi necessária.

Observe que fizemos tudo isso usando a função seno (sin() em ProcessingJS), mas as mesmas ideias são aplicáveis se estivermos usando a função cosseno. O período é o mesmo nos dois casos, e a principal diferença é apenas se a amplitude inicial começa em 1 ou em 0.

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.