Com poucas linhas, consegui criar um navegador de Mandelbrot. Basta clicar num ponto, que o programa amplia a região em volta dele. Para voltar ao início, basta recarregar a página.
O código abaixo funciona no Firefox. Não o testei em outros navegadores, exceto pelo IE8, no qual ele não funciona.
<html>
<head>
</head>
<body>
<canvas id="canvas" width="256" height="256"></canvas>
<script>
function mandel(x,y) {
var c=0;
var r=0;
var i=0;
var MAXITER=1000;
while(r*r+i*i<4 && c<MAXITER) {
var nr=r*r-i*i+x;
var ni=2*r*i+y;
r=nr;
i=ni;
c+=1;
}
return c;
}
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var imageData=ctx.getImageData(0,0,256,256);
var minx=-2;
var miny=-2;
var maxx=2
var maxy=2;
function plot() {
var deltax=(maxx-minx)/256;
var deltay=(maxy-miny)/256;
for(var x=0; x<256; x++) {
for(var y=0; y<256; y++) {
var c=mandel(minx+x*deltax, miny+y*deltay);
var red=(c*8)%255;
var green=(c*9)%255;
var blue=(255-c*4)%255;
var index=(x+y*imageData.width)*4;
imageData.data[index+0]=red;
imageData.data[index+1]=green;
imageData.data[index+2]=blue;
imageData.data[index+3]=0xff;
}
}
ctx.putImageData(imageData,0,0);
}
plot();
function zoom(e) {
var x=minx+(maxx-minx)*((e.clientX-canvas.offsetLeft)/256);
var y=miny+(maxy-miny)*((e.clientY-canvas.offsetTop)/256);
var dx=(maxx-minx)/4;
var dy=(maxy-miny)/4;
minx=x-dx;
maxx=x+dx;
miny=y-dy;
maxy=y+dy;
plot();
}
canvas.onclick=zoom;
</script>
</body>
</html>
Não é muito código para o que o programa faz. Percebi que o navegador vai se tornar uma plataforma interessante para a criação de jogos.
O número máximo de iterações está fixo em 1000. No início, 64 são suficientes, mas com zoom muito grande mesmo 1000 são poucas. Então, é preciso achar uma maneira de ir aumentando aos poucos o número de iterações. Deixo isso como exercício para o leitor.
Nenhum comentário:
Postar um comentário