In pratica cliccando sullo schermo con il mouse viene effettuato uno zoom centrato sul punto cliccato diminuendo la finestra di visualizzazione di 1/4
Il programma in esecuzione
Rispetto alla versione precedente e' stata creata anche una semplice palette da 12 colori
-----------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</style>
</head>
<body>
<canvas id="mandelbrot" height="400" width="800">
Il Browser non supporta HTML5.
<!-- Utile per inserire informazioni di default -->
</canvas>
<script type="text/javascript">
//inizializza le variabili
//dimensioni dello schermo
var SCREEN_HEIGHT = 0;
var SCREEN_WIDTH = 0;
//finestra di visualizzazione in coordinate Mandelbrot
var a1 = -2.0;
var b1 = -1.2;
var a2 = 1.0;
var b2 = 1.2;
//numero di cicli
var it = 100;
var delta_x ;
var delta_y;
// palette di 12 colori
var colori = ["#FFFFFF","#FF0000","#00FF00","#0000FF","#FF00FF","#FFFF00","#00FFFF","#FFaa00","#abcedf","#fedc0a","#ab16dd","#d00fba","#edabcc","#ddacff"];
//function punto(x1,y1,
function disegna(r_mi,i_mi,r_ma,i_ma,ite)
{
//effettua il calcolo dell'insieme date le dimensioni della finestra
var canvas = document.getElementById("mandelbrot");
if (canvas.getContext) {
var context = canvas.getContext("2d");
//rende il fondo nero
context.fillStyle="rgb(0,0,0)";
context.fillRect(0, 0, canvas.width, canvas.height);
var re_min = r_mi;
var im_min = i_mi;
var re_max = r_ma;
var im_max = i_ma;
var iterazioni = ite;
var r;
var a,b;
var x,y,x_new,y_new;
var test;
var k,j,i;
var re_factor = (re_max-re_min);
var im_factor = (im_max-im_min);
for (var i=0;i<SCREEN_HEIGHT;i++)
{
for (var j=0;j<SCREEN_WIDTH;j++)
{
a = re_min+(j*re_factor/SCREEN_WIDTH);
b = im_min+(i*im_factor/SCREEN_HEIGHT);
x = 0;
y = 0;
test = 0;
for (var k=0;k<iterazioni;k++)
{
x_new = (x*x)-(y*y)+a;
y_new = (2*x*y)+b;
if (((x_new*x_new)+(y_new*y_new))>4)
{
// colora il punto
r = k%12;
context.beginPath();
context.fillRect(j,i,1,1);
context.fillStyle=colori[r];
context.stroke();
break;
}
x = x_new;
y = y_new;
}
}
}
}
}
function doMouseDown(event)
{
canvas_x = event.pageX;
canvas_y = event.pageY;
//calcola il punto in coordinate Mandelbrot
var p1 = (((a2-a1)/SCREEN_WIDTH)*canvas_x) + a1;
var p2 = (((b2-b1)/SCREEN_HEIGHT)*canvas_y) + b1;
//calcola la dimensione della finestra (riduzione di 1/4)
var delta_x = (a2-a1)/4;
var delta_y = delta_x*(SCREEN_WIDTH/SCREEN_WIDTH);
//aumenta il numero di iterazioni per ogni ciclo
it = it + 75;
//definisce la finestra intorno al punto cliccato
a1 = p1 - delta_y;
b1 = p2 - delta_x;
a2 = p1 + delta_y;
b2 = p2 + delta_x;
disegna(a1,b1,a2,b2,it);
}
window.onload = function()
{
//riscala alla dimensione della finestra
var canvas = document.getElementById("mandelbrot");
if (canvas.width < window.innerWidth)
{
canvas.width = window.innerWidth;
SCREEN_WIDTH = canvas.width;
}
if (canvas.height < window.innerHeight)
{
canvas.height = window.innerHeight;
SCREEN_HEIGHT = canvas.height;
}
//aggiunge l'evento click del mouse
canvas.addEventListener("mousedown",doMouseDown,false);
disegna(a1,b1,a2,b2,it);
}
</script>
</body>
</html>
Nessun commento:
Posta un commento