Trigonometria para criação de jogos em javascript - UC - Unidade Central

Introdução

A trigonometria é uma área da matemática essencial para o desenvolvimento de jogos. Ela nos permite calcular posições, movimentos, colisões e diversos efeitos visuais que tornam os jogos mais realistas e divertidos.

Neste tutorial, vamos explorar como os conceitos de seno, cosseno e tangente podem ser aplicados na criação de jogos em JavaScript, com exemplos práticos e animações interativas.

Conceitos Básicos de Trigonometria

A trigonometria é o estudo das relações entre os lados e ângulos de triângulos. Seu nome vem do grego "trigonon" (triângulo) e "metron" (medida). Embora tenha surgido para resolver problemas de astronomia e navegação, hoje é fundamental em diversas áreas, incluindo o desenvolvimento de jogos.

O Triângulo Retângulo

Um triângulo retângulo possui um ângulo de 90° (ângulo reto). Neste tipo de triângulo, definimos:

• Hipotenusa: o lado oposto ao ângulo reto (o maior lado)
• Cateto adjacente: o lado adjacente ao ângulo que estamos considerando
• Cateto oposto: o lado oposto ao ângulo que estamos considerando

O Círculo Trigonométrico

O círculo trigonométrico é um círculo de raio 1 centrado na origem de um plano cartesiano. Ele nos permite visualizar e calcular valores de seno, cosseno e tangente para qualquer ângulo.

No círculo trigonométrico:

• A coordenada x de um ponto no círculo é o cosseno do ângulo
• A coordenada y de um ponto no círculo é o seno do ângulo

Radianos vs. Graus

Em matemática e programação, os ângulos podem ser medidos em graus ou radianos:

• Graus: uma volta completa tem 360°
• Radianos: uma volta completa tem 2π radianos (aproximadamente 6,28)

Em JavaScript, as funções trigonométricas (Math.sin, Math.cos, Math.tan) trabalham com ângulos em radianos, não em graus. Portanto, é importante converter os ângulos quando necessário.

// Função para converter graus em radianos
function degreesToRadians(degrees) {
    return degrees * Math.PI / 180;
}

// Função para converter radianos em graus
function radiansToDegrees(radians) {
    return radians * 180 / Math.PI;
}

// Exemplo: calcular o seno de 30 graus
const sin30 = Math.sin(degreesToRadians(30)); // 0.5

O Círculo Trigonométrico

O círculo trigonométrico é uma ferramenta visual poderosa para entender as funções trigonométricas. Ele nos permite visualizar como os valores de seno, cosseno e tangente variam conforme o ângulo muda.

Na animação abaixo, você pode observar:

• A linha vermelha representa o raio do círculo, que forma o ângulo com o eixo x positivo
• A linha azul tracejada representa o seno do ângulo (componente vertical)
• A linha verde tracejada representa o cosseno do ângulo (componente horizontal)
• O arco amarelo mostra a medida do ângulo

Observe como os valores de seno, cosseno e tangente mudam à medida que o ângulo aumenta. Note também os padrões:

• O seno varia entre -1 e 1, completando um ciclo a cada 360° (2π radianos)
• O cosseno também varia entre -1 e 1, mas está "deslocado" em relação ao seno
• A tangente tem "assíntotas" (pontos onde o valor tende ao infinito) a cada 90° (π/2 radianos)

Esta visualização é fundamental para entender como usar estas funções em jogos, onde frequentemente precisamos calcular posições em movimento circular ou oscilatório.

Seno (sin)

O seno é uma das funções trigonométricas fundamentais. No contexto do círculo trigonométrico, o seno de um ângulo corresponde à coordenada y do ponto no círculo.

A função seno tem as seguintes características:

• Seu domínio é todos os números reais (qualquer ângulo)
• Sua imagem é o intervalo [-1, 1] (valores entre -1 e 1)
• É uma função periódica, com período 2π (360°)
• É uma função ímpar: sin(-θ) = -sin(θ)

Aplicações do Seno em Jogos

A função seno é extremamente útil em jogos para criar:

• Movimento vertical oscilatório - Ideal para objetos que flutuam, como plataformas, nuvens ou inimigos
• Efeitos de respiração - Para animar personagens "respirando"
• Movimento de pêndulo - Para objetos que balançam
• Componente vertical em movimento circular - Para posicionar objetos em trajetórias circulares

// Exemplo: Objeto flutuando verticalmente
function update() {
    // Tempo atual em segundos
    const time = Date.now() / 1000;
    
    // Amplitude da oscilação (altura máxima)
    const amplitude = 50;
    
    // Frequência da oscilação (velocidade)
    const frequency = 2;
    
    // Calcula a posição y usando seno
    const y = baseY + amplitude * Math.sin(frequency * time);
    
    // Atualiza a posição do objeto
    object.y = y;
}

Cosseno (cos)

O cosseno é outra função trigonométrica fundamental. No contexto do círculo trigonométrico, o cosseno de um ângulo corresponde à coordenada x do ponto no círculo.

A função cosseno tem as seguintes características:

• Seu domínio é todos os números reais (qualquer ângulo)
• Sua imagem é o intervalo [-1, 1] (valores entre -1 e 1)
• É uma função periódica, com período 2π (360°)
• É uma função par: cos(-θ) = cos(θ)
• Está "deslocada" em relação ao seno por π/2 (90°): cos(θ) = sin(θ + π/2)

Aplicações do Cosseno em Jogos

A função cosseno é extremamente útil em jogos para criar:

• Movimento horizontal oscilatório - Ideal para objetos que se movem de um lado para outro
• Efeitos de balanço lateral - Para animar personagens caminhando ou objetos balançando
• Componente horizontal em movimento circular - Para posicionar objetos em trajetórias circulares
• Rotação de objetos - Quando combinado com seno para calcular pontos em um círculo

// Exemplo: Objeto movendo-se horizontalmente
function update() {
    // Tempo atual em segundos
    const time = Date.now() / 1000;
    
    // Amplitude da oscilação (distância máxima)
    const amplitude = 100;
    
    // Frequência da oscilação (velocidade)
    const frequency = 1.5;
    
    // Calcula a posição x usando cosseno
    const x = baseX + amplitude * Math.cos(frequency * time);
    
    // Atualiza a posição do objeto
    object.x = x;
}

Tangente (tan)

A tangente é a terceira função trigonométrica fundamental. Ela é definida como a razão entre o seno e o cosseno de um ângulo.

A função tangente tem as seguintes características:

• Seu domínio é todos os números reais, exceto (2n+1)π/2, onde n é um número inteiro
• Sua imagem é todos os números reais (de -∞ a +∞)
• É uma função periódica, com período π (180°)
• É uma função ímpar: tan(-θ) = -tan(θ)
• Tem assíntotas verticais quando cos(θ) = 0, ou seja, quando θ = (2n+1)π/2

Aplicações da Tangente em Jogos

A função tangente é menos utilizada diretamente que o seno e o cosseno, mas ainda tem aplicações importantes:

• Cálculo de ângulos - Para determinar o ângulo entre dois pontos ou vetores
• Direção de movimento - Para calcular a direção em que um objeto deve se mover
• Inclinação de terrenos - Para simular superfícies inclinadas
• Efeitos visuais especiais - Para criar distorções ou deformações

// Exemplo: Calcular o ângulo entre dois pontos
function calcularAngulo(x1, y1, x2, y2) {
    // Calcula as diferenças
    const dx = x2 - x1;
    const dy = y2 - y1;
    
    // Calcula o ângulo usando arctangente (atan2)
    // atan2 é uma função que retorna o ângulo em radianos
    const angulo = Math.atan2(dy, dx);
    
    return angulo;
}

// Exemplo de uso: calcular para onde um inimigo deve olhar para "ver" o jogador
const anguloParaJogador = calcularAngulo(inimigo.x, inimigo.y, jogador.x, jogador.y);
inimigo.rotacao = anguloParaJogador;

Note que em JavaScript, geralmente usamos a função Math.atan2(y, x) em vez de Math.atan(y/x), pois ela lida corretamente com todos os quadrantes e casos especiais (como quando x = 0).

Aplicações em Jogos

A trigonometria é uma ferramenta poderosa no desenvolvimento de jogos, permitindo criar movimentos realistas, efeitos visuais interessantes e mecânicas de jogo envolventes. Vamos explorar algumas das aplicações mais comuns:

1. Movimento de Personagens e Objetos

As funções trigonométricas são essenciais para calcular a posição e o movimento de personagens e objetos em um jogo:

• Movimento em linha reta em uma direção específica:

// Movimento em uma direção específica
function moverNaDirecao(objeto, angulo, velocidade) {
    // Calcula os componentes x e y do movimento
    objeto.x += Math.cos(angulo) * velocidade;
    objeto.y += Math.sin(angulo) * velocidade;
}

• Perseguição de alvos (como inimigos perseguindo o jogador):

// Perseguição de alvo
function perseguirAlvo(perseguidor, alvo, velocidade) {
    // Calcula o ângulo entre o perseguidor e o alvo
    const dx = alvo.x - perseguidor.x;
    const dy = alvo.y - perseguidor.y;
    const angulo = Math.atan2(dy, dx);
    
    // Move o perseguidor na direção do alvo
    perseguidor.x += Math.cos(angulo) * velocidade;
    perseguidor.y += Math.sin(angulo) * velocidade;
}

2. Sistemas de Física

A trigonometria é fundamental para implementar sistemas de física em jogos:

• Cálculo de trajetórias balísticas (projéteis, saltos):

// Lançamento de projétil
function lancarProjetil(projetil, angulo, velocidadeInicial) {
    const gravidade = 9.8;
    let tempo = 0;
    
    function atualizar() {
        tempo += 0.016; // Aproximadamente 60 FPS
        
        // Componentes da velocidade inicial
        const vx = velocidadeInicial * Math.cos(angulo);
        const vy = velocidadeInicial * Math.sin(angulo);
        
        // Posição atual
        projetil.x = projetil.xInicial + vx * tempo;
        projetil.y = projetil.yInicial + vy * tempo - 0.5 * gravidade * tempo * tempo;
        
        // Continua atualizando até atingir o solo
        if (projetil.y > solo) {
            requestAnimationFrame(atualizar);
        }
    }
    
    atualizar();
}

3. Câmeras e Visualização

A trigonometria ajuda a controlar câmeras e perspectivas em jogos:

• Rotação de câmera ao redor de um objeto:

// Câmera orbitando um objeto
function atualizarCameraOrbital(camera, alvo, distancia, anguloHorizontal, anguloVertical) {
    // Calcula a posição da câmera usando coordenadas esféricas
    camera.x = alvo.x + distancia * Math.cos(anguloVertical) * Math.cos(anguloHorizontal);
    camera.y = alvo.y + distancia * Math.sin(anguloVertical);
    camera.z = alvo.z + distancia * Math.cos(anguloVertical) * Math.sin(anguloHorizontal);
    
    // Aponta a câmera para o alvo
    camera.olharPara(alvo);
}

4. Detecção de Colisão

A trigonometria é útil para implementar sistemas de colisão mais sofisticados:

• Colisão entre objetos rotacionados:

// Verificar se um ponto está dentro de um retângulo rotacionado
function pontoDentroRetanguloRotacionado(ponto, retangulo, angulo) {
    // Translada o ponto para a origem relativa ao centro do retângulo
    const dx = ponto.x - retangulo.x;
    const dy = ponto.y - retangulo.y;
    
    // Aplica a rotação inversa ao ponto
    const cosA = Math.cos(-angulo);
    const sinA = Math.sin(-angulo);
    
    const pontoRotacionadoX = dx * cosA - dy * sinA;
    const pontoRotacionadoY = dx * sinA + dy * cosA;
    
    // Verifica se o ponto está dentro do retângulo não rotacionado
    return (
        Math.abs(pontoRotacionadoX) <= retangulo.largura / 2 &&
        Math.abs(pontoRotacionadoY) <= retangulo.altura / 2
    );
}

5. Efeitos Visuais e Animações

A trigonometria permite criar efeitos visuais impressionantes:

• Efeitos de onda (água, bandeiras):

// Efeito de ondulação em água
function criarOndaAgua(canvas, amplitude, frequencia, velocidade) {
    const ctx = canvas.getContext('2d');
    const width = canvas.width;
    const height = canvas.height;
    let tempo = 0;
    
    function desenhar() {
        ctx.clearRect(0, 0, width, height);
        ctx.beginPath();
        
        // Linha base da água
        const baseY = height * 0.7;
        
        // Desenha a superfície da água
        ctx.moveTo(0, baseY);
        
        for (let x = 0; x < width; x++) {
            // Calcula a altura da onda em cada ponto x
            const y = baseY + amplitude * Math.sin((x * frequencia / width) * Math.PI * 2 + tempo);
            ctx.lineTo(x, y);
        }
        
        // Completa o caminho até o fundo do canvas
        ctx.lineTo(width, height);
        ctx.lineTo(0, height);
        ctx.closePath();
        
        // Preenche a água
        ctx.fillStyle = 'rgba(30, 144, 255, 0.7)';
        ctx.fill();
        
        // Atualiza o tempo para a próxima animação
        tempo += velocidade;
        
        requestAnimationFrame(desenhar);
    }
    
    desenhar();
}

Movimento Circular

O movimento circular é uma das aplicações mais comuns da trigonometria em jogos. Ele é usado para criar órbitas, rotações, ciclos e padrões de movimento.

Para criar um movimento circular, usamos as funções seno e cosseno para calcular as coordenadas x e y de um ponto que se move em um círculo:

Na animação abaixo, você pode observar um objeto se movendo em um círculo. As coordenadas x e y são calculadas usando as fórmulas acima, e o ângulo é incrementado a cada quadro para criar o movimento.

Aplicações do Movimento Circular em Jogos

O movimento circular é usado em diversos elementos de jogos:

• Inimigos patrulhando - Inimigos que se movem em padrões circulares
• Planetas e satélites - Objetos que orbitam ao redor de outros
• Relógios e temporizadores - Ponteiros que giram
• Rodas e engrenagens - Elementos mecânicos que giram
• Padrões de ataque - Projéteis que se movem em padrões circulares

// Exemplo: Objeto movendo-se em círculo
function atualizarMovimentoCircular(objeto, centro, raio, velocidadeAngular) {
    // Atualiza o ângulo
    objeto.angulo += velocidadeAngular;
    
    // Calcula as novas coordenadas
    objeto.x = centro.x + raio * Math.cos(objeto.angulo);
    objeto.y = centro.y + raio * Math.sin(objeto.angulo);
}

Você pode modificar o movimento circular para criar variações interessantes:

• Elipses - Usando raios diferentes para x e y
• Espirais - Aumentando ou diminuindo o raio gradualmente
• Órbitas excêntricas - Combinando movimentos circulares

Movimento Ondulatório

O movimento ondulatório é outro padrão comum em jogos que utiliza funções trigonométricas, especialmente o seno e o cosseno. Ele cria um efeito de oscilação suave que pode ser usado para simular ondas, vibrações e diversos efeitos naturais.

A fórmula básica para um movimento ondulatório é:

Onde:

• Amplitude - Determina a altura máxima da onda
• Frequência - Controla quantos ciclos completos ocorrem em um determinado espaço
• Fase - Desloca a onda horizontalmente (geralmente usada para animação)

Na animação abaixo, você pode ajustar a amplitude e a frequência para ver como esses parâmetros afetam o movimento ondulatório:

Aplicações do Movimento Ondulatório em Jogos

O movimento ondulatório é usado em diversos elementos de jogos:

• Água e líquidos - Superfícies de água, lava, etc.
• Objetos flutuantes - Plataformas, nuvens, barcos
• Efeitos de som e música - Visualizações de áudio
• Movimentos de personagens - Natação, voo, balanço
• Efeitos visuais - Magia, energia, portais

// Exemplo: Plataforma flutuante com movimento ondulatório
function atualizarPlataformaFlutuante(plataforma, tempo) {
    // Posição base da plataforma
    const baseY = plataforma.baseY;
    
    // Parâmetros da onda
    const amplitude = 20;
    const frequencia = 1.5;
    const velocidade = 2;
    
    // Calcula a nova posição y usando seno
    plataforma.y = baseY + amplitude * Math.sin(frequencia * tempo * velocidade);
}

Você pode criar efeitos mais complexos combinando múltiplas ondas:

// Exemplo: Combinando múltiplas ondas para efeito mais complexo
function ondaComposta(x, tempo) {
    // Onda primária (grande e lenta)
    const onda1 = 15 * Math.sin(0.3 * x + tempo * 0.5);
    
    // Onda secundária (menor e mais rápida)
    const onda2 = 5 * Math.sin(0.7 * x + tempo * 1.3);
    
    // Onda terciária (pequena e muito rápida)
    const onda3 = 2 * Math.sin(2.0 * x + tempo * 2.0);
    
    // Combina as três ondas
    return onda1 + onda2 + onda3;
}

Rotação de Objetos

A rotação de objetos é uma aplicação fundamental da trigonometria em jogos. Ela permite que personagens, inimigos, projéteis e outros elementos do jogo mudem sua orientação de forma realista.

Em JavaScript e na maioria das engines de jogos, a rotação é geralmente expressa em radianos (embora às vezes seja convertida para graus para exibição). Para rotacionar um objeto, precisamos:

1. Definir um ponto de origem (geralmente o centro do objeto)
2. Aplicar uma transformação de rotação usando funções trigonométricas
3. Desenhar ou renderizar o objeto na nova orientação

Na animação abaixo, você pode ver um objeto (quadrado) rotacionando em torno de seu centro. A velocidade da rotação pode ser ajustada usando o controle deslizante:

Matriz de Rotação

Para rotacionar um ponto (x, y) em torno da origem por um ângulo θ, usamos a seguinte matriz de rotação:

Onde (x', y') são as coordenadas do ponto após a rotação.

Aplicações da Rotação em Jogos

A rotação é usada em diversos elementos de jogos:

• Orientação de personagens - Fazer personagens olharem na direção do movimento
• Mira e tiro - Apontar armas na direção do alvo
• Obstáculos móveis - Plataformas giratórias, serras, etc.
• Efeitos visuais - Partículas, explosões, portais
• Interface do usuário - Mostradores, bússolas, indicadores

// Exemplo: Rotacionar um objeto para apontar na direção do movimento
function rotacionarNaDirecaoDoMovimento(objeto) {
    // Calcula a direção do movimento
    const direcaoX = objeto.velocidadeX;
    const direcaoY = objeto.velocidadeY;
    
    // Calcula o ângulo usando arctangente
    const angulo = Math.atan2(direcaoY, direcaoX);
    
    // Aplica a rotação ao objeto
    objeto.rotacao = angulo;
}

Rotação de Vértices

Para rotacionar formas complexas, precisamos rotacionar cada vértice individualmente:

// Exemplo: Rotacionar todos os vértices de uma forma
function rotacionarForma(forma, angulo) {
    // Para cada vértice da forma
    for (let i = 0; i < forma.vertices.length; i++) {
        const vertice = forma.vertices[i];
        
        // Coordenadas originais relativas ao centro
        const x = vertice.x - forma.centroX;
        const y = vertice.y - forma.centroY;
        
        // Aplica a rotação
        const cosA = Math.cos(angulo);
        const sinA = Math.sin(angulo);
        
        const novoX = x * cosA - y * sinA;
        const novoY = x * sinA + y * cosA;
        
        // Atualiza as coordenadas do vértice
        vertice.x = novoX + forma.centroX;
        vertice.y = novoY + forma.centroY;
    }
}

Mini-Jogo: Colete as Estrelas

Este mini-jogo demonstra vários conceitos trigonométricos que aprendemos. As estrelas se movem em padrões circulares (usando seno e cosseno), enquanto o jogador pode se mover livremente para coletá-las.

Conceitos Trigonométricos no Jogo

Este simples jogo utiliza vários conceitos que exploramos:

• Movimento Circular - As estrelas se movem em órbitas circulares ao redor do centro
• Rotação - O jogador (nave) gira constantemente
• Cálculo de Distância - A colisão entre o jogador e as estrelas é detectada usando o teorema de Pitágoras

O código do jogo utiliza as seguintes funções trigonométricas:

• Math.cos() e Math.sin() para posicionar as estrelas em movimento circular
• Math.sqrt() junto com o teorema de Pitágoras para calcular distâncias

// Trecho do código do jogo que usa trigonometria
// Movimento circular das estrelas
star.angle += star.rotationSpeed;
star.x = gameCanvas.width / 2 + star.distance * Math.cos(star.angle);
star.y = gameCanvas.height / 2 + star.distance * Math.sin(star.angle);

// Detecção de colisão usando distância
const dx = player.x - star.x;
const dy = player.y - star.y;
const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < player.radius + star.radius) {
    // Colisão detectada!
    star.collected = true;
    gameScore++;
}

Este é apenas um exemplo simples, mas os mesmos princípios são usados em jogos comerciais muito mais complexos. A trigonometria é a base matemática para praticamente todos os tipos de movimento, rotação e posicionamento em jogos 2D e 3D.

Recursos Adicionais

Se você deseja aprofundar seus conhecimentos sobre trigonometria e sua aplicação em jogos, aqui estão alguns recursos úteis:

Bibliotecas e Frameworks JavaScript para Jogos

• Phaser - Um poderoso framework para jogos HTML5 que facilita o uso de trigonometria
• PixiJS - Uma biblioteca de renderização 2D rápida que é excelente para jogos
• Three.js - Uma biblioteca 3D que utiliza extensivamente trigonometria
• p5.js - Ótima para visualizações e protótipos rápidos

Tutoriais e Artigos

• MDN Web Docs: Objeto Math - Documentação oficial das funções matemáticas em JavaScript
• Khan Academy: Trigonometria - Excelentes aulas sobre os fundamentos da trigonometria
• Red Blob Games - Tutoriais interativos sobre matemática para jogos
• GameDev.net - Comunidade com muitos artigos sobre desenvolvimento de jogos

Livros Recomendados

• "Matemática para Game Developers" por Christopher Tremblay
• "Game Programming Patterns" por Robert Nystrom
• "Physics for Game Developers" por David M. Bourg
• "The Nature of Code" por Daniel Shiffman (disponível online gratuitamente)

Ferramentas Online

• Desmos - Calculadora gráfica online para visualizar funções trigonométricas
• GeoGebra - Software de matemática dinâmica para explorar geometria e trigonometria
• Wolfram Alpha - Ferramenta de computação para resolver problemas matemáticos

Lembre-se que a prática é essencial! Experimente modificar os exemplos deste tutorial, crie seus próprios jogos simples e vá aumentando a complexidade à medida que se sentir mais confortável com os conceitos.