📐 Matemática Elementar: Trigonometria Aplicada

🚀 Acesse o Projeto Online

👆 Clique no botão acima para ver o projeto em ação!

⚡ Acesso instantâneo - Não é necessário download ou instalação. Basta abrir o link no navegador!

---

📋 Sobre o Projeto

Este projeto é uma simulação interativa de navegação 2D desenvolvida para demonstrar visualmente os conceitos fundamentais de trigonometria através de um sistema de GPS estilo GTA. O projeto permite visualizar em tempo real como as fórmulas trigonométricas são aplicadas na prática para calcular distâncias, ângulos, velocidades e movimentação no plano cartesiano.

🎯 Objetivo

Demonstrar de forma visual e interativa como a trigonometria é utilizada em sistemas de navegação, movimento e física computacional, tornando os conceitos matemáticos abstratos em visualizações concretas e compreensíveis.

---

👥 Autores

• EDILSON ENZO DA SILVA VALENCUELA
• VINÍCIUS DA SILVA SANTOS

---

🔬 Aplicações da Trigonometria no Projeto

1. Cálculo de Distância (Teorema de Pitágoras)

Fórmula:

d = √((x₂ - x₁)² + (y₂ - y₁)²)

Aplicação:

• Calcula a distância euclidiana entre o veículo e o ponto de destino
• Forma a base para todos os cálculos de navegação
• A distância é a hipotenusa do triângulo retângulo formado pelos catetos Δx e Δy

Código:

function calcularDistancia(x1, y1, x2, y2) {
    const dx = x2 - x1;  // Cateto adjacente (Δx)
    const dy = y2 - y1;  // Cateto oposto (Δy)
    const distancia = Math.hypot(dx, dy);  // Hipotenusa: √(dx² + dy²)
    return { dx, dy, distancia };
}

---

2. Cálculo de Ângulo (Função atan2)

Fórmula:

θ = atan2(Δy, Δx)

Aplicação:

• Determina o ângulo necessário para o veículo apontar em direção ao destino
• Utiliza atan2 em vez de atan para obter o ângulo correto em todos os 4 quadrantes
• Retorna valores no intervalo [-π, π] (equivalente a [-180°, 180°])

Vantagens do atan2:

• Considera os sinais de ambos os argumentos
• Evita divisão por zero (quando Δx = 0)
• Retorna o ângulo correto em todos os quadrantes

Quadrantes:

• Q1 (0° a 90°): Δx > 0, Δy > 0 → θ ∈ [0, π/2]
• Q2 (90° a 180°): Δx < 0, Δy > 0 → θ ∈ [π/2, π]
• Q3 (-180° a -90°): Δx < 0, Δy < 0 → θ ∈ [-π, -π/2]
• Q4 (-90° a 0°): Δx > 0, Δy < 0 → θ ∈ [-π/2, 0]

Código:

function calcularAnguloAlvo(x1, y1, x2, y2) {
    const dx = x2 - x1;  // Cateto adjacente
    const dy = y2 - y1;  // Cateto oposto
    return Math.atan2(dy, dx);  // Retorna ângulo em radianos
}

---

3. Razões Trigonométricas no Triângulo Retângulo

Fórmulas Fundamentais:

sin(θ) = cateto oposto / hipotenusa = Δy / d
cos(θ) = cateto adjacente / hipotenusa = Δx / d
tan(θ) = cateto oposto / cateto adjacente = Δy / Δx

Aplicação:

• Calcula as razões trigonométricas do triângulo formado entre o veículo e o destino
• Essas razões são exibidas visualmente no HUD do jogo
• Demonstra a relação entre os lados do triângulo e o ângulo

Identidade Trigonométrica Fundamental:

sin²(θ) + cos²(θ) = 1

Esta identidade é verificada e exibida no painel de informações, demonstrando que:

(Δy/d)² + (Δx/d)² = (Δy² + Δx²)/d² = d²/d² = 1 ✓

Código:

const sinTriangulo = catetoOposto / hipotenusa;      // sin(θ) = op/h
const cosTriangulo = catetoAdjacente / hipotenusa;   // cos(θ) = adj/h
const tanTriangulo = catetoOposto / catetoAdjacente; // tan(θ) = op/adj

---

4. Decomposição Vetorial (Seno e Cosseno)

Fórmulas:

vₓ = v × cos(θ)  (componente horizontal)
vᵧ = v × sin(θ)  (componente vertical)

Aplicação:

• Decompõe o vetor velocidade em componentes cartesianas X e Y
• Essencial para o movimento do veículo no plano 2D
• Permite visualizar como a velocidade é distribuída nos eixos

Relação Vetorial:

v⃗ = vₓî + vᵧĵ  (notação vetorial)
|v⃗| = √(vₓ² + vᵧ²) = v  (magnitude do vetor)

Exemplos Práticos:

• θ = 0°: vₓ = v, vᵧ = 0 (movimento horizontal direito)
• θ = 90°: vₓ = 0, vᵧ = v (movimento vertical para cima)
• θ = 45°: vₓ = v/√2, vᵧ = v/√2 (movimento diagonal)
• θ = 180°: vₓ = -v, vᵧ = 0 (movimento horizontal esquerda)

Código:

function decomporVelocidade(velocidade, angulo) {
    return {
        vx: velocidade * Math.cos(angulo),  // Componente horizontal
        vy: velocidade * Math.sin(angulo)   // Componente vertical
    };
}

---

5. Movimento no Plano Cartesiano

Fórmulas de Movimento:

x(t+1) = x(t) + v × cos(θ) × Δt
y(t+1) = y(t) + v × sin(θ) × Δt

Aplicação:

• Atualiza a posição do veículo a cada frame usando as componentes vetoriais
• Simula movimento realista baseado em física
• Onde:
  • x(t), y(t): posição atual
  • v: velocidade escalar
  • θ: ângulo de direção
  • Δt: intervalo de tempo (timeScale)

Código:

const passo = this.speed * timeScale;  // Distância percorrida neste frame
this.x += Math.cos(this.angle) * passo;  // Atualização X (cosseno)
this.y += Math.sin(this.angle) * passo;  // Atualização Y (seno)

---

6. Velocidade Baseada em Alinhamento (Cosseno)

Fórmula:

v_alvo = v_max × max(0.1, cos(Δθ))

Aplicação:

• Ajusta a velocidade do veículo baseado no alinhamento com o destino
• Utiliza o cosseno da diferença angular para determinar a velocidade
• Simula comportamento realista: veículos reduzem velocidade em curvas fechadas

Propriedades do Cosseno:

• cos(0°) = 1 → totalmente alinhado → velocidade máxima
• cos(90°) = 0 → perpendicular → velocidade reduzida (10%)
• cos(180°) = -1 → oposto → velocidade mínima (10%)

Comportamento:

• Quando alinhado (Δθ ≈ 0°): velocidade máxima
• Quando perpendicular (Δθ = 90°): velocidade reduzida
• Quando oposto (Δθ = 180°): velocidade mínima (10% para evitar parada total)

Código:

function calcularVelocidadeAlvo(velocidadeMaxima, diferencaAngular) {
    const fatorCosseno = Math.cos(diferencaAngular);
    const fatorRotacao = Math.max(0.1, fatorCosseno);  // Mínimo 10%
    return velocidadeMaxima * fatorRotacao;
}

---

7. Círculo Trigonométrico

Conceito: O círculo trigonométrico é a representação geométrica das funções trigonométricas no plano cartesiano, com raio unitário (r = 1).

Fórmulas no Círculo Unitário:

sin(θ) = coordenada Y do ponto no círculo
cos(θ) = coordenada X do ponto no círculo
tan(θ) = inclinação da reta que passa pela origem e pelo ponto

Propriedades:

• Raio do círculo: r = 1 (unitário)
• Ponto no círculo: (cos(θ), sin(θ))
• Distância da origem: √(cos²(θ) + sin²(θ)) = 1 (identidade fundamental)

Quadrantes e Sinais:

• Q1 (0°-90°): sin > 0, cos > 0, tan > 0
• Q2 (90°-180°): sin > 0, cos < 0, tan < 0
• Q3 (180°-270°): sin < 0, cos < 0, tan > 0
• Q4 (270°-360°): sin < 0, cos > 0, tan < 0

Aplicação no Projeto:

• Visualização interativa do círculo trigonométrico
• Exibe os valores de sin(θ) e cos(θ) em tempo real
• Mostra em qual quadrante o ângulo atual se encontra
• Gráficos de seno e cosseno em tempo real

---

🎮 Funcionalidades do Sistema

Modo HUD (Visão de Dados)

O modo HUD exibe visualizações matemáticas completas:

1. Triângulo Retângulo Visual

   • Mostra os catetos (Δx, Δy) e a hipotenusa (distância)
   • Exibe as razões trigonométricas calculadas
   • Visualiza o ângulo θ formado

2. Decomposição Vetorial

   • Mostra o vetor velocidade total
   • Decompõe em componentes X e Y
   • Exibe as fórmulas: vₓ = v·cos(θ) e vᵧ = v·sin(θ)

3. Círculo Trigonométrico Interativo

   • Círculo unitário com raio destacado
   • Linhas de seno e cosseno
   • Gráficos de seno/cosseno em tempo real
   • Indicador de quadrante atual

4. Painéis de Informações

   • Distância e coordenadas
   • Razões trigonométricas (sin, cos, tan)
   • Ângulos (atual, alvo, diferença)
   • Velocidade e componentes vetoriais

---

🚀 Como Usar

Requisitos

• Navegador moderno (Chrome, Firefox, Edge, Safari)
• Nenhuma instalação necessária - projeto 100% client-side
• Nenhum servidor necessário - funciona abrindo diretamente o arquivo HTML

Instruções

1. Abrir o arquivo:

   • Abra o arquivo index.html diretamente no navegador
   • Ou use um servidor local simples (opcional, apenas para desenvolvimento)

2. Interagir:

   • Clique em qualquer ponto do mapa para definir um destino
   • O veículo calculará automaticamente a rota usando pathfinding

3. Ativar o Modo HUD:

   • Clique no botão "VISÃO DE DADOS (HUD)"
   • Todas as visualizações trigonométricas serão exibidas em tempo real

4. Ajustar Velocidade:

   • Use o slider "TIME SCALE" para acelerar ou desacelerar a simulação

---

📊 Estrutura do Código

Funções Matemáticas Principais

• calcularDistancia() - Calcula distância euclidiana
• calcularAnguloAlvo() - Calcula ângulo usando atan2
• normalizarAngulo() - Normaliza ângulo para [-π, π]
• calcularDiferencaAngular() - Calcula diferença angular
• calcularVelocidadeAlvo() - Calcula velocidade baseada em cosseno
• decomporVelocidade() - Decompõe vetor em componentes X e Y

Classe Car

A classe Car implementa a física do veículo:

• Calcula distância até o alvo
• Determina ângulo necessário
• Ajusta velocidade baseado em alinhamento
• Atualiza posição usando decomposição vetorial

Visualização

A função desenharHUDUnificado() renderiza:

• Triângulo retângulo com labels
• Vetores de velocidade decompostos
• Círculo trigonométrico interativo
• Painéis informativos

---

🧮 Conceitos Matemáticos Demonstrados

1. ✅ Teorema de Pitágoras
2. ✅ Funções Trigonométricas (sin, cos, tan)
3. ✅ Função atan2 (cálculo de ângulos)
4. ✅ Decomposição Vetorial
5. ✅ Círculo Trigonométrico
6. ✅ Identidade Trigonométrica Fundamental
7. ✅ Movimento no Plano Cartesiano
8. ✅ Normalização de Ângulos
9. ✅ Razões Trigonométricas no Triângulo Retângulo

---

🛠️ Tecnologias Utilizadas

Este projeto é 100% front-end, utilizando apenas tecnologias web nativas:

• HTML5 - Estrutura e marcação
• CSS3 - Estilização e animações
• JavaScript (ES6+) - Lógica, cálculos trigonométricos e física
• Canvas API - Renderização 2D e gráficos
• Pathfinding (BFS) - Algoritmo de busca de caminho implementado em JavaScript

Sem Dependências Externas

• ✅ Sem frameworks - JavaScript puro (Vanilla JS)
• ✅ Sem bibliotecas - Apenas APIs nativas do navegador
• ✅ Sem servidor - Funciona offline, abrindo diretamente o arquivo HTML
• ✅ Sem instalação - Basta abrir no navegador

---

📝 Notas Técnicas

Arquitetura do Projeto

• Arquivo único: Todo o código está em index.html
• Client-side apenas: Toda a lógica roda no navegador
• Sem backend: Não requer servidor ou processamento server-side
• Offline: Funciona completamente offline após carregado

Sistema de Coordenadas

• Origem (0, 0) no centro do mapa
• Eixo X: positivo à direita
• Eixo Y: positivo para baixo (convenção de tela)
• Ângulos: medidos em radianos, 0° aponta para a direita

Conversões

• Radianos para Graus: graus = radianos × 180 / π
• Graus para Radianos: radianos = graus × π / 180

Precisão

• Todos os cálculos trigonométricos utilizam a precisão nativa do JavaScript
• Valores são arredondados para exibição (3-4 casas decimais)
• Cálculos internos mantêm precisão máxima
• Utiliza Math.hypot(), Math.atan2(), Math.sin(), Math.cos() nativos

---

📚 Referências Matemáticas

• Trigonometria Básica: Relações entre lados e ângulos de triângulos retângulos
• Círculo Trigonométrico: Representação geométrica das funções trigonométricas
• Vetores: Decomposição de vetores em componentes cartesianas
• Física: Movimento em duas dimensões usando componentes vetoriais

---

📄 Licença

Este projeto foi desenvolvido para fins educacionais como parte de um trabalho acadêmico sobre Matemática Elementar - Trigonometria.

---

Desenvolvido com ❤️ para demonstrar a beleza da matemática aplicada.