Como desenhar uma espiral de Fibonacci com código próprio
Muita gente acha que precisa de software caro ou de uma calculadora especial pra construir uma espiral de Fibonacci. Na prática, com um bloco de notas e um navegador, você resolve isso em meia hora. O problema é que a maioria dos tutoriais que você encontra na internet pula a parte mais chata — os detalhes de renderização — e acaba gerando espirais que parecem certas até você comparar com uma foto real de uma concha ou de uma girassol. Vou mostrar como fiz a minha ferramenta caseira, e porque ela funciona melhor do que as calculadoras online que aparecem no topo da busca.
espiral de fibonacci: a base que ninguém explica direito
A espiral de Fibonacci não é um conceito místico. É uma construção geométrica simples baseada na sequência numérica: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89... Cada termo é a soma dos dois anteriores. A espiral em si é desenhada traçando arcos de círculo dentro de quadrados whose side lengths seguem essa sequência. O primeiro arco tem raio 1, o segundo raio 1, o terceiro raio 2, o quarto raio 3, e assim por diante. A razão áurea, aproximadamente 1,618, surge naturalmente quando você divide qualquer termo pelo anterior — quanto mais longe você vai na sequência, mais próximo o resultado fica desse valor. Isso é importante porque a espiral de Fibonacci é apenas uma aproximação da verdadeira espiral logarítmica dourada. Na prática, para a maioria dos usos, a diferença é imperceptível. Mas se você está construindo algo que vai ser ampliado ou impresso em alta resolução, a divergência começa a aparecer.
implementação prática com SVG
O jeito mais direto é gerar um arquivo SVG. SVG é baseado em XML, então cada arco é uma tag path com comandos de curva. Aqui está a lógica que eu usei: Para cada número na sequência de Fibonacci, você desenha um quarto de círculo (90 graus). A posição do centro do arco muda a cada passo, e a direção de traçado alterna entre horário e anti-horário. O código JavaScript para gerar esses pontos é razoavelmente curto:
function fibonacciSpiral(n) {
let fib = [1, 1];
for (let i = 2; i < n; i++) {
fib.push(fib[i-1] + fib[i-2]);
}
let x = 0, y = 0;
let direction = 0; // 0=direita, 1=baixo, 2=esquerda, 3=cima
let path = '';
for (let i = 0; i fib.length; i++) {
let r = fib[i];
let startAngle = direction * 90;
let endAngle = startAngle + 90;
// Cálculo dos pontos de início e fim do arco
let startX = x + r * Math.cos(startAngle * Math.PI / 180);
let startY = y - r * Math.sin(startAngle * Math.PI / 180);
let endX = x + r * Math.cos(endAngle * Math.PI / 180);
let endY = y - r * Math.sin(endAngle * Math.PI / 180);
path += `M ${startX} ${startY} A ${r} ${r} 0 0 ${direction % 2 === 0 ? 1 : 0} ${endX} ${endY} `;
// Atualiza a posição para o próximo quadrado
x = endX;
y = endY;
direction = (direction + 1) % 4;
}
return path;
}Esse código gera um path SVG válido. Você pode salvar como um arquivo .svg e abrir no navegador ou importar no Illustrator. O problema é que ele precisa de ajustes finos — a direção dos arcos, o sentido de rotação, e o ponto de origem precisam ser calibrados para o seu caso específico.
o problema que eu encontrei e como resolvi
Quando eu estava construindo minha primeira versão funcional, enfrentei um problema que nenhum tutorial mencionava: a espiral ia se afastando cada vez mais do canto superior esquerdo da tela. Em termos técnicos, o ponto de ancoragem original não permanecia fixo conforme a espiral crescia. O resultado era uma espiral que literalmente "escorregava" pela tela, e eu não entendia por quê. A causa era um erro conceitual simples. Eu estava atualizando a posição do centro a cada iteração, mas não estava levando em conta que o centro do próximo quadrado depende da orientação do arco anterior. A correção foi calcular a posição do próximo vértice com base na geometria completa do quadrado atual, não apenas no ponto final do arco.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Minha solução foi adicionar uma função que calcula as coordenadas exatas dos quatro vértices de cada quadrado antes de traçar o arco, e usar esses vértices como referência para o próximo passo. O código corrigido ficou assim:
function fibonacciSpiralFixed(n, scale = 10) {
let fib = [1, 1];
for (let i = 2; i < n; i++) {
fib.push(fib[i-1] + fib[i-2]);
}
let paths = [];
let offsetX = 0, offsetY = 0;
let rotation = 0;
for (let i = 0; i fib.length; i++) {
let r = fib[i] * scale;
let arcPath = '';
// Determina a direção do arco baseado no índice
let isClockwise = i % 2 === 0;
let sweepFlag = isClockwise ? 1 : 0;
let startX, startY, endX, endY;
if (i === 0) {
startX = offsetX;
startY = offsetY;
endX = offsetX + r;
endY = offsetY;
} else {
let prevR = fib[i-1] * scale;
startX = offsetX + prevR;
startY = offsetY;
endX = offsetX;
endY = offsetY + r;
}
arcPath = `M ${startX} ${startY} A ${r} ${r} 0 0 ${sweepFlag} ${endX} ${endY}`;
paths.push(arcPath);
// Atualiza o offset para o próximo quadrado
if (i % 4 === 0) {
offsetX -= r;
} else if (i % 4 === 1) {
offsetY += r;
} else if (i % 4 === 2) {
offsetX += r;
} else if (i % 4 === 3) {
offsetY -= r;
}
}
return paths.join(' ');
}Com essa correção, a espiral permanece ancorada no ponto inicial e cresce de forma previsível. Ajustei também o fator de escala — 10 pixels por unidade Fibonacci funciona bem para telas padrão, mas se você precisa de algo maior ou menor, basta multiplicar o valor final por um coeficiente.
onde conseguir uma espiral pronta
Se você não quer programar, existem opções boas. Eu uso o Gerador de Espiral de Fibonacci do mathsisfun.com para visualizações rápidas, e o desmos.com para criar versões animadas. Para quem trabalha com design vetorial, o plugin "Golden Spiral" do Adobe Illustrator gera a espiral automaticamente a partir de um ponto central e um raio inicial. Para quem prefere algo mais robusto, recomendo o código-fonte completo do projeto fibonacci-spiral.js no GitHub. Ele inclui suporte para exportação em SVG, PNG, e até geração de animações frame a frame. O repositório tem issues ativas e o autor responde em geralmente menos de 48 horas.
limitações que todo mundo ignora
A espiral de Fibonacci tem limitações sérias que raramente são discutidas em materiais introdutórios. A primeira é que ela só é uma aproximação da espiral dourada verdadeira. A espiral dourada segue a função polar r = a * e^(b*), onde b = ln() / (/2). A espiral de Fibonacci se aproxima disso com o aumento dos termos, mas para aplicações que exigem precisão — como arquitetura, engenharia de estruturas curvas, ou simulações físicas — a diferença acumulada ao longo de muitos términos pode ser significativa. A segunda limitação é mais prática: a espiral cresce exponencialmente. Com apenas 15 termos, o último arco já tem raio 987 vezes maior que o primeiro. Isso significa que em telas padrão, você consegue visualizar talvez 10 a 12 termos antes que o desenho ultrapasse os limites do viewport. Se você precisa de mais iterações, precisa redimensionar o canvas ou usar uma técnica de zoom progressivo.
Uma terceira limitação que vale a pena mencionar: a espiral de Fibonacci não aparece na natureza da forma como muitos dizem. Conchas, galáxias e flores frequentemente exibem espirais logarítmicas, mas raramente seguem exatamente a sequência de Fibonacci. A associação é mais cultural do que científica. Se você está usando a espiral de Fibonacci para algum trabalho sério — modelagem 3D, simulação, pesquisa — considere usar a espiral logarítmica dourada diretamente, calculada pela fórmula exponencial, em vez da aproximação discreta dos arcos quadrados. Se precisar de ajuda com o código ou tiver alguma dúvida específica sobre implementação, posso dar uma olhada. O projeto no GitHub está aberto a contribuições, e já tem alguns fixes pendentes que eu mesmo deixei para depois.
