Tutorial JS de Detecção de Agito

Para detectar um agito, usamos a API devicemotion do navegador. Este tutorial aborda a matemática, os requisitos de permissão do iOS e a implementação final.

Passo 1: A Matemática (Medindo a Força G)

O acelerômetro fornece valores para os eixos X, Y e Z. Para detectar um agito independentemente da orientação do telefone, calculamos a magnitude total do vetor de aceleração.

Usamos accelerationIncludingGravity. Um telefone parado tem uma magnitude de aproximadamente 9.8 (gravidade da Terra). Um agito geralmente produz um pico acima de 15 ou 20.

Passo 2: Lidando com Permissões no iOS 13+

iPhones modernos exigem que o usuário conceda permissão manualmente para usar sensores de movimento. Você não pode apenas começar a ouvir; deve acionar a solicitação por meio de uma interação do usuário, como um clique de botão.

function requestPermission() {
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    DeviceMotionEvent.requestPermission()
      .then(response => {
        if (response == 'granted') {
          window.addEventListener('devicemotion', handleMotion);
        }
      })
      .catch(console.error);
  } else {
    // Dispositivos não-iOS não precisam de permissão
    window.addEventListener('devicemotion', handleMotion);
  }
}

Passo 3: A Lógica do Agito

Adicionamos um temporizador "Debounce". Sem isso, um único agito físico poderia disparar o código 50 vezes em um segundo. Forçamos o código a esperar (ex: 1000ms) antes de detectar um novo agito.

let lastShake = 0;
const MIN_INTERVAL = 1000; // Aguarde 1 seg entre agitos

function handleMotion(event) {
  const acc = event.accelerationIncludingGravity;
  if (!acc) return;

  // Calcular Magnitude
  const total = Math.sqrt(acc.x**2 + acc.y**2 + acc.z**2);

  // Limite de 15 é um bom ponto de partida
  if (total > 15) {
    const now = Date.now();
    if (now - lastShake > MIN_INTERVAL) {
      lastShake = now;
      alert("Agito Detectado!"); 
    }
  }
}

Demonstração Ao Vivo

Teste o código aqui mesmo. Se estiver em um dispositivo móvel, clique no botão abaixo e agite seu telefone.