Atividades Computacionais
para o Ensino de Física

Este site foi desenvolvido como produto educacional da disciplina Atividades Computacionais para o Ensino de Física (CH: 80h), optativa do curso de Licenciatura em Física do Instituto Federal de Santa Catarina — IFSC.

OBJETIVO

Oferecer ao estudante de Física um ambiente interativo para explorar o Movimento Uniforme por meio de três abordagens complementares: simulação computacional, rastreamento experimental via câmera e análise quantitativa de dados.

SEÇÕES DO PRODUTO

• 01 · Tecnologias Web — demonstração prática de HTML5, CSS3 e JavaScript Vanilla
• 02 · Rastreador de Vídeo — aquisição de dados de posição e velocidade via câmera com detecção de cor RGB
• 03 · Simulador de MU — simulação interativa com coleta manual de dados, análise estatística e gráfico x×t
• 04 · Quiz — 5 questões sorteadas de um banco de 30, abrangendo MU, rastreamento e análise de dados

TECNOLOGIAS

HTML5 · CSS3 (Grid, Flexbox, variáveis, keyframes) · JavaScript ES6+ Vanilla · Canvas 2D API · MediaDevices API · IntersectionObserver · Blob/CSV export · Sem frameworks, sem dependências externas.

ESTRUTURA SEMÂNTICA

• <nav> — barra de navegação com links âncora para cada seção
• <section> — delimita cada bloco temático do site
• <footer> — rodapé com informações institucionais

ELEMENTOS INTERATIVOS

• <canvas> — simulação do MU, gráficos x×t e partículas animadas no hero
• <video autoplay muted playsinline> — stream da câmera para rastreamento
• <input type="range"> — sliders de parâmetros (velocidade, posição, tolerância de cor)
• <table> — tabelas de dados dinâmicas com seleção de linhas

OUTROS RECURSOS

• SVG inline — favicon de átomo e ícone da navbar desenhados vetorialmente
• data-* — atributos customizados nos botões do quiz para índice de resposta
• <link rel="icon"> — favicon SVG sem dependência de imagem externa

PADRÕES E ESTRUTURA

• IIFE (Immediately Invoked Function Expression) — cada módulo (câmera, simulador, quiz) é encapsulado em uma função autoexecutável, evitando poluição do escopo global
• Closures — estado interno (tableData, tracking, stream) mantido privado dentro de cada módulo
• Arrow functions, destructuring, const/let, template literals e optional chaining (?.) — ES6+

WEB APIS UTILIZADAS

• Canvas 2D API — renderização da simulação de MU, trilha do objeto, gráficos x×t e partículas do hero
• MediaDevices API — getUserMedia() para acesso à câmera e rastreamento de cor em tempo real
• requestAnimationFrame — loop de animação sincronizado com a taxa de atualização do monitor (~60 fps)
• IntersectionObserver — detecta elementos visíveis na viewport para ativar animação de entrada
• Blob + URL.createObjectURL — exportação de dados como arquivo CSV sem servidor
• performance.now() — medição de tempo em milissegundos para cálculo preciso de Δt no rastreamento

ALGORITMOS IMPLEMENTADOS

• Detecção de cor por distância RGB — centroide dos pixels dentro da tolerância define a posição da esfera
• Regressão linear mínimos quadrados — calcula x(t) = a·t + b a partir dos dados coletados
• Análise estatística — média, desvio padrão e coeficiente de variação calculados dinamicamente
• Shuffle de Fisher-Yates — embaralhamento das questões e opções do quiz

01 · MOVIMENTO UNIFORME

No Movimento Uniforme (MU) a velocidade é constante e a aceleração é nula. A posição varia linearmente com o tempo.

02 · INTERPRETAÇÃO DE GRÁFICOS

Gráfico x × t: reta com inclinação igual à velocidade v e interseção com o eixo y igual à posição inicial x₀.
Gráfico v × t: reta horizontal (v = constante).
Regressão linear x(t) = a·t + b → coeficiente angular a = velocidade, coeficiente linear b = x₀.