martedì 25 marzo 2014

Fractal Explorer in HTML5

Per provare a creare una applicazione per Firefox OS ho modificato il programmino in HTML5 per generare l'insieme di Mandelbrot per renderlo interattivo
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>