Sobre
Caleidoscópio
Um caleidoscópio digital interativo que cria padrões simétricos através de reflexões múltiplas. O padrão é gerado a partir do movimento do mouse e refletido múltiplas vezes para criar simetria radial.
Algoritmo Principal
O algoritmo usa reflexões múltiplas:
- Base: Desenha um padrão base na posição do mouse
- Reflexões: Aplica reflexões múltiplas usando transformações de canvas
- Simetria: Cria simetria radial com número variável de espelhos (1-6)
- Rotação: Rotaciona o padrão para criar efeito dinâmico
Equações Implementadas
No código:
// Número de espelhos
mirrors = random(1, 6)
angle = π / mirrors
// Para cada reflexão
for (i = 0; i < mirrors; i++) {
ctx.save()
ctx.rotate(i * angle)
ctx.scale(1, -1) // Reflexão
drawPattern(mouseX, mouseY)
ctx.restore()
}
O padrão é desenhado apenas quando o mouse está pressionado, criando um efeito interativo.
Complexidade de Compreensão
Nível: Intermediário
- Conceitos necessários: Transformações geométricas, reflexões, simetria radial
- Matemática: Geometria, transformações 2D, simetria
- Programação: Transformações de canvas, eventos do mouse, gráficos
Referências e Recursos para Estudo
Artigos e Documentação
- Wikipedia - Kaleidoscope - Caleidoscópio físico
- MDN - Canvas Transformations - Transformações
- MathWorld - Symmetry - Simetria matemática
Tutoriais e Código
- The Coding Train - Transformations - Tutoriais
- Processing Examples - Transformations - Exemplos
- MDN - Canvas Tutorial - Tutorial
Aprofundamento Matemático
- Geometry - Khan Academy - Fundamentos
- Computer Graphics - Foley & Van Dam - Gráficos
Visualizações Interativas
- Kaleidoscope Generator - Gerador interativo
- Interactive Geometry - Geometria interativa
Arquivo do processo
Todas as gerações — incluindo as ruins — fazem parte do processo.
10quadros