Efeito de Respiração (Breathing Effect)

Um efeito visual onde círculos (representando olhos) crescem e diminuem de tamanho continuamente, simulando um efeito de respiração ou pulsação. O tamanho dos círculos varia baseado na posição do mouse.

Algoritmo Principal

O algoritmo anima círculos que “respiram”:

1. Criação: Gera múltiplos círculos (olhos) em posições aleatórias
2. Crescimento: Cada círculo cresce ou diminui baseado em um sinal
3. Limites: Quando atinge limites (mínimo ou máximo), inverte a direção
4. Interatividade: O tamanho pode variar baseado na posição do mouse

Equações Implementadas

No código:

class Eye {
  constructor(x, y, radius) {
    this.x = x
    this.y = y
    this.radius = radius
    this.add = random() * signal  // Incremento (positivo ou negativo)
  }
  
  update() {
    // Cresce ou diminui
    this.radius += this.add
    
    // Inverte quando atinge limites
    if (this.radius <= 3 || this.radius >= 80) {
      this.add *= -1
    }
  }
  
  draw() {
    // Calcula ângulo para olhar para o mouse
    dx = mouseX - this.x
    dy = mouseY - this.y
    angle = atan2(dy, dx)
    
    // Desenha círculo
    arc(this.x, this.y, this.radius, 0, 2π)
  }
}

Complexidade de Compreensão

Nível: Básico a Intermediário

• Conceitos necessários: Animação, interatividade, funções trigonométricas básicas
• Matemática: Física básica (movimento oscilatório), trigonometria básica
• Programação: Animações, eventos do mouse, loops

Referências e Recursos para Estudo

Artigos e Documentação

• MDN - Canvas Animation - Animações
• MDN - Mouse Events - Eventos do mouse
• Wikipedia - Animation - Animações

Tutoriais e Código

• The Coding Train - Animation - Tutoriais
• Processing Examples - Animation - Exemplos
• MDN - Canvas Tutorial - Tutorial

Aprofundamento Matemático

• Physics for Game Developers - Bourg - Física básica
• Real-Time Rendering - Renderização

Visualizações Interativas

• Animation Examples - Exemplos interativos
• CodePen - Breathing - Exemplos no CodePen