Desenhando com π

O número π sempre me interessou. É um número irracional — uma dízima infinita não periódica —, por isso é impossível representá-lo por uma fração. E, no entanto, é ele próprio o resultado de uma divisão: o perímetro de uma circunferência a dividir pelo seu diâmetro.

Num dos meus projetos com π resolvi usá-lo de uma forma, digamos, pouco ortodoxa. E nada melhor do que o dia π (14 de março) para publicar este artigo.

A ideia

Sempre gostei de explorar a matemática através da programação. O π tem sido um tema recorrente e, desta vez, surgiu a ideia de desenhar com ele: usar o π para fazer algo diferente — mostrá-lo graficamente.

A teoria

Usar os algarismos que compõem o π para desenhar retas com o comprimento de cada algarismo e, a cada algarismo, rodar 90°.

A prática

O algoritmo é este:

1. O primeiro algarismo de π é 3: começando na vertical, traçar uma reta com comprimento 3 e rodar 90° no sentido dos ponteiros do relógio.
2. O segundo algarismo é 1: no fim da reta anterior, agora na horizontal e no sentido positivo, traçar uma reta com comprimento 1 e rodar mais 90°.
3. O terceiro algarismo é 4: no fim da reta anterior, traçar uma reta vertical com comprimento 4, agora no sentido negativo, e rodar mais 90°.
4. O quarto algarismo é 1: no fim da reta anterior, traçar uma reta horizontal com comprimento 1, agora no sentido negativo, e rodar mais 90°.
5. O quinto algarismo é 5: no fim da reta anterior, traçar uma reta vertical com comprimento 5, no sentido positivo, e rodar mais 90°.
6. O sexto algarismo é 9: no fim da reta anterior, traçar uma reta horizontal com comprimento 9, no sentido positivo.

E assim sucessivamente: cada algarismo é um passo — uma reta, seguida de uma rotação.

Passo a passo

O resultado

O resultado é… diferente. Eis os primeiros cinquenta algarismos de π:

Os primeiros quinhentos:

E, finalmente, os primeiros mil e quinhentos:

Bom… o resultado é estranho, caótico, mas também geométrico, labiríntico e intrigante — tal como o π. Ao olhar para o desenho, parecem formar-se aglomerados de pequenos retângulos, enquanto outras zonas parecem menos congestionadas. Até onde irá isto? Provavelmente até ao infinito e mais além. :)

Experimente

Uma versão interativa, refeita em 2026 com Canvas: escolha quantos algarismos quer desenhar, avance ou recue um algarismo de cada vez com as setas, ou veja o desenho crescer sozinho.

O código

Esta é a função original, de 2021, que desenha as retas a partir dos algarismos de π, em SVG:

function desenhar_com_pi()
{
    // vars
    var svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); // canvas
    var margem = 0;
    var screenWidth = screen.width - margem; // get width
    var screenHeight = screen.height + 1000; // get height
    var num_decimais = 1500;
    // constante pi calculada noutro script que criei (Spigot)
    const str_pi = "31415926535897932384626433832795028841971693993751"; // (1500 algarismos; encurtada aqui)
    var deci_pi = 0;
    var st = "";
    var x1, y1, x2, y2, angulo, linha;
    // define canvas
    svg.setAttribute("height", screenHeight); // set screen height
    svg.setAttribute("width", screenWidth); // set screen width
    svg.setAttribute("shape-rendering","optimizeSpeed"); // need for speed
    x1 = screenWidth / 2;
    y1 = screenHeight / 2;
    angulo = 0;
    for (n = 0; n < num_decimais ; n++)
    {
        deci_pi = str_pi.substr(n,1);
        if (deci_pi != -1)
        {
            switch (angulo)
            {
                case 0:
                    x2 = x1;
                    y2 = y1 - (parseInt(deci_pi) * 10);
                    angulo += 90;
                    break;
                case 90:
                    x2 = x2 + (parseInt(deci_pi) * 10);
                    y2 = y1;
                    angulo += 90;
                    break;
                case 180:
                    x2 = x1;
                    y2 = y1 + (parseInt(deci_pi) * 10);
                    angulo += 90;
                    break;
                case 270:
                    x2 = x1 - (parseInt(deci_pi) * 10);
                    y2 = y1;
                    angulo = 0;
                    break;
            }
            linha = document.createElementNS("http://www.w3.org/2000/svg", 'line');
            linha.setAttribute('id','lin');
            linha.setAttribute('x1', x1);
            linha.setAttribute('y1', y1);
            linha.setAttribute('x2', x2);
            linha.setAttribute('y2', y2);
            st = "stroke:rgb(255,0,0);stroke-width:2";
            linha.setAttribute("style", st)
            svg.appendChild(linha);
            x1 = x2;
            y1 = y2;
        }
    }
    document.body.appendChild(svg);
}

Acho que é fácil de perceber, por isso não vou detalhar o funcionamento. Só uma nota: por simplicidade, optei por guardar no código uma constante com os primeiros 1500 algarismos de π. Estes algarismos foram calculados com o algoritmo Spigot; a minha implementação em JavaScript fica para outro artigo.

Para quem quiser brincar um pouco, o código completo está em github.com/nunodevops/desenhando-com-pi.

Ficha técnica

versão original

JavaScript · SVG · HTML (2021)

versão interativa

JavaScript · Canvas (2026)

algarismos

1500, calculados com o algoritmo Spigot

Aviso legal. A informação desta página destina-se a fins lúdicos e não deve ser usada em contextos profissionais. Foram tomados todos os cuidados para que os conteúdos sejam rigorosos e atuais; ainda assim, o autor não se responsabiliza por erros ou omissões e pode alterar ou retirar a informação a qualquer momento, sem aviso prévio. Todo o conteúdo é disponibilizado sem qualquer garantia.