Apresentação do Círculo Trigonométrico Interativo

Este artigo detalha o processo de criação do círculo trigonométrico interativo apresentado em Aplicativo 1, Círculo Trigonométrico Interativo. Aqui, explicaremos os trechos do código javascript (NextJs) utilizado para criar as funcionalidades de ajuste de ângulo e exibição das funções trigonométricas.

Estrutura do Código

A estrutura central do código é composta por uma imagem SVG dinâmica que representa o círculo trigonométrico, além de um controle deslizante (input range) para que o usuário ajuste o ângulo. Este valor de ângulo, armazenado no estado angle, é usado para calcular os valores de seno, cosseno e tangente em tempo real.

Componentes Visuais do Círculo

O SVG inclui os eixos, a linha do ângulo, e as projeções de seno e cosseno. Além disso, usamos circle e line para exibir as linhas e pontos que representam visualmente as funções trigonométricas:

• Círculo Principal: Representa a circunferência do círculo trigonométrico.
• Eixos X e Y: Marcam as direções de 0°/180° e 90°/270°, respectivamente.
• Linha do Ângulo: Move-se conforme o ângulo, projetando a posição no círculo com base no seno e cosseno do ângulo.
• Projeção da Tangente: A linha tangente é representada como projeção na reta à direita do círculo, quando definida (tangentes de 90 ou 270 graus, por exemplos, não têm definição).

Calculo do Seno, Cosseno e Tangente

Para calcular os valores de seno, cosseno e tangente, convertemos o ângulo para radianos: rad = (angle * Math.PI) / 180 . Usamos então as funções Math.sin, Math.cos e a proporção seno/cosseno para a tangente.

A tangente é calculada como tan = sin / cos, mas é mostrada como "Indefinido" se o cosseno estiver próximo de zero, evitando valores infinitos.

A projeção do cosseno é criada com uma linha que vai da origem (ponto (0,0)) até o ponto (cos(rad), 0).

A projeção do seno é criada com uma linha que vai da origem (ponto (0,0)) até o ponto (0, sin(rad)).

Interatividade com o Usuário

O controle deslizante (input range) permite ao usuário ajustar o ângulo de 0° a 360°. Cada vez que o valor é atualizado, as funções trigonométricas são recalculadas e os elementos visuais no SVG são reposicionados.

As bolinhas que se movem representam o ponto de interseção do ângulo com o círculo e a linha tangente.