Rastro do Mouse (Mouse Trail)

Um efeito visual interativo onde partículas são criadas na posição do cursor do mouse e se movem em direções aleatórias, criando um rastro colorido e dinâmico.

Algoritmo Principal

O algoritmo responde ao movimento do mouse:

1. Detecção: Detecta a posição do mouse
2. Criação: Cria múltiplas partículas na posição do cursor
3. Movimento: Cada partícula se move em uma direção aleatória
4. Colisão: Partículas rebatem nas bordas da tela
5. Decaimento: Partículas diminuem de tamanho e desaparecem

Equações Implementadas

No código:

// Criação na posição do mouse
x = mouseX
y = mouseY

// Velocidade aleatória
directionX = random(-5, 5)
directionY = random(-5, 5)

// Atualização
x += directionX
y += directionY

// Colisão com bordas
if (x < 0 || x > width) directionX *= -1
if (y < 0 || y > height) directionY *= -1

// Decaimento
size -= 0.3

Complexidade de Compreensão

Nível: Básico

• Conceitos necessários: Eventos do mouse, partículas, física básica
• Matemática: Física básica (movimento, colisão)
• Programação: Event listeners, arrays, animação

Referências e Recursos para Estudo

Artigos e Documentação

• MDN - Mouse Events - Eventos do mouse
• MDN - Canvas Animation - Animações
• Wikipedia - Particle System - Sistemas de partículas

Tutoriais e Código

• The Coding Train - Mouse Interaction - Interatividade
• Processing Examples - Mouse - Exemplos
• MDN - Canvas Tutorial - Tutorial canvas

Aprofundamento Matemático

• Interactive Computer Graphics - Angel - Gráficos interativos
• Real-Time Rendering - Renderização

Visualizações Interativas

• Interactive Art Examples - Exemplos interativos
• CodePen - Mouse Trail - Exemplos no CodePen