martedì 18 dicembre 2012

Mandelbrot in HTML5

In questo esempio e' stato impiegato QtCreator con le estensioni della Nokia in modo da poter utilizzare l'emulatore di telefono (nel caso specifico un Nokia N900)

Per creare l'insieme di Mandelbrot e' stato definito un Canvas di 400x800 e, direttamente dalla funzione OnLoad, e' stato il grafico basandosi sugli esempi gia scritti in C.

La trasformazione del codice da C a JavaScript e' stata sostanzialmente indolore

-----------------------------------------

<!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 type="text/css">
            body { margin: 0; font-size: 2em; background-color: white; }

            #quit { background-color: gray; color: white; font-weight: bold; display: block; text-align: right; }
        </style>
        <script type="text/javascript">
            window.onload = function()
            {
            var canvas = document.getElementById("esempio");
                if (canvas.getContext) {
                  var context = canvas.getContext("2d");

                    var re_min = -2.0;
                    var im_min = -1.2;

                    var re_max = 1.0;
                    var im_max = 1.2;

                    var iterazioni = 255;

                    var r;

                    var a,b;
                    var x,y,x_new,y_new;

                    var test;

                    var k,j,i;
                    var SCREEN_HEIGHT = 400;
                    var SCREEN_WIDTH = 800;

                    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)
                        {
                        r = k%2;
                        if (r == 1)
                            {
                            context.beginPath();
                            context.fillRect(j,i,1,1);
                            context.stroke();
                            }

                        break;
                        }
                       x = x_new;
                       y = y_new;
                       }

                      }

                     }
                }

                document.getElementById("quit").onmousedown = function()
                {
                    Qt.quit();
                };
            }
        </script>
    </head>
    <body>
        <a id="quit">X</a>
        <canvas id="esempio" height="400" width="800">
        Il Browser non supporta HTML5.
        <!-- Utile per inserire informazioni di default -->
        </canvas>
    </body>
</html>


-----------------------------------------
Il programma in funzione sull'emulatore Nokia N900

Il programma in funzione direttamente in Chrome

Sull'emulatore il codice e' piuttosto lento mentre in Chrome il risultato e' sostanzialmente istantaneo