Desenhando com Pi
Desenhando com π
na comemoração do dia π
O número π sempre me interessou.
Número irracional, dizima não periódica, é impossível representa-lo por uma fração, no entanto, é ele próprio o resultado de uma fração, a divisão entre o perímetro e o diâmetro de uma circunferência..
Num dos meus projetos com π resolvi aplicar o número de uma forma, digamos, pouco ortodoxa e claro nada melhor que aproveitar o dia π, (14 de Março), para postar este artigo.
A IDEIA
Desde sempre que gosto de explorar matemática através da programação. π tem sido um tema recorrente, desta vez surgiu a ideia de desenhar com π.
Utilizar π para fazer qualquer coisa diferente, mostrar π graficamente.
A TEORIA
Utilizando os dígitos que compõem π, desenhar retas com o comprimento de cada dígito e a cada iteração/dígito realizar uma rotação de 90º.
A PRÁTICA
Desenhar utilizando o seguinte algoritmo:
- Primeiro dígito de π é 3, começando na vertical no eixo das ordenadas, traçar uma reta com o comprimento 3.
- Realizar uma rotação de 90º no sentido dos ponteiros do relógio.
- O segundo dígito de π é 1, no final da reta anterior e agora na horizontal e no sentido positivo, traçar uma reta com o comprimento 1.
- Realizar uma nova rotação de 90º no sentido dos ponteiros do relógio.
- O terceiro dígito de π é 4, no final da reta anterior, traçar uma reta na vertical com o comprimento 4 agora no sentido negativo.
- Realizar uma nova rotação de 90º no sentido dos ponteiros do relógio.
- O quarto dígito de π é 1, no final da reta anterior na horizontal e agora no sentido negativo, traçar uma reta com o comprimento 1.
- Realizar uma nova rotação de 90º no sentido dos ponteiros do relógio.
- O quinto dígito de π é 5, no final da reta anterior, traçar uma reta na vertical com o comprimento 4, no sentido positivo.
- Realizar uma nova rotação de 90º no sentido dos ponteiros do relógio.
- O sexto dígito de π é 9, no final da reta anterior, traçar uma reta na horizontal com o comprimento 9, no sentido positivo.
E assim sucessivamente, reta, rotação, reta, rotação…
PASSO A PASSO
O RESULTADO
O resultado é… diferente…
Exemplo para os primeiros cinquenta dígitos de π.
e para os primeiros quinhentos dígitos de π.
e finalmente para os primeiros mil e quinhentos dígitos de π.
Bom… posso dizer que o resultado é estranho, caótico, mas também geométrico, labiríntico e intrigante, tal como π. Ao olhar para o desenho parecem formar-se aglomerados de pequenos retângulos ao mesmo tempo que outras áreas parecem menos congestionadas. Até onde isto irá? Provavelmente até ao infinito e mais além. 🙂
O CÓDIGO
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 = "314159265358979323846264338327950288419716939937510582097494459230781640628620899862803482534211706798214808651328230664709384460955058223172535940812848111745028410270193852110555964462294895493038196442881097566593344612847564823378678316527120190914564856692346034861045432664821339360726024914127372458700660631558817488152092096282925409171536436789259036001133053054882046652138414695194151160943305727036575959195309218611738193261179310511854807446237996274956735188575272489122793818301194912983367336244065664308602139494639522473719070217986094370277053921717629317675238467481846766940513200056812714526356082778577134275778960917363717872146844090122495343014654958537105079227968925892354201995611212902196086403441815981362977477130996051870721134999999837297804995105973173281609631859502445945534690830264252230825334468503526193118817101000313783875288658753320838142061717766914730359825349042875546873115956286388235378759375195778185778053217122680661300192787661119590921642019893809525720106548586327886593615338182796823030195203530185296899577362259941389124972177528347913151557485724245415069595082953311686172785588907509838175463746493931925506040092770167113900984882401285836160356370766010471018194295559619894676783744944825537977472684710404753464620804668425906949129331367702898915210475216205696602405803815019351125338243003558764024749647326391419927260426992279678235478163600934172164121992458631503028618297455570674983850549458858692699569092721079750930295";
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);
}FICHA TÉCNICA
AVISO LEGAL
A informação fornecida nesta página é puramente para utilização lúdica e não deverá ser utilizada em contextos profissionais. Foram tomados todos os cuidados para assegurar que os conteúdos disponibilizados são rigorosos e atualizados, no entanto, o autor desta página não se responsabiliza por quaisquer erros ou omissões. O autor da página poderá alterar ou retirar a informação a qualquer momento e sem aviso prévio. Todo o conteúdo é disponibilizado sem qualquer garantia.
