Rispetto alla versione HTML5 pura ci sono alcune differenze
Per prima cosa e' stato necessario aggiungere un pulsante di Reset perche' premendo il pulsante Home del telefono l'applicazione non viene chiusa ma solo nascosta ed al successivo riavvio si presenta con l'ultimo livello di zoom impostato
In esecuzione sull'emulatore
In esecuzione su Alcatel One Touch Fire
Inoltre poter passare la validazione del Market di Firefox e' stato necessario dividere la parte HTML dalla sezione Javascript
Da questo link di puo' scaricare il file zip dell'applicazione
manifest.webapp
------------------------------------------------------------------------
{
"version": "0.5",
"name": "MandExplorer",
"description": "A simple Mandelbrot Explorer with zoom function",
"launch_path": "/index.html",
"icons": {
"16": "/app-icons/icon-16.png",
"32": "/app-icons/icon-32.png",
"48": "/app-icons/icon-48.png",
"60": "/app-icons/icon-60.png",
"90": "/app-icons/icon-90.png",
"120": "/app-icons/icon-120.png",
"128": "/app-icons/icon-128.png",
"256": "/app-icons/icon-256.png"
},
"developer": {
"name": "Luca Innocenti",
"url": "http://debiaonoldcomputers.blogspot.com/"
},
"locales": {
"en": {
"description": "A simple Mandelbrot Explorer with zoom function",
"developer": {
"url": "http://debiaonoldcomputers.blogspot.com/"
}
},
"it": {
"description": "Un semplice visualizzatore con zoomabile dell'insieme di Mandelbrot",
"developer": {
"url": "http://debiaonoldcomputers.blogspot.com/"
}
}
},
"default_locale": "en"
}
------------------------------------------------------------------------
index.html
------------------------------------------------------------------------
<!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" />
</head>
<body>
<script src="./js/calcola.js"></script>
<canvas id="mandelbrot" height="400" width="320">
Il Browser non supporta HTML5.
<!-- Utile per inserire informazioni di default -->
</canvas><br>
<center><input type="button" id="reset" value="Reset"></center>
</body>
</html>
------------------------------------------------------------------------
calcola.js
------------------------------------------------------------------------
//inizializza le variabili
//dimensioni dello schermo
var SCREEN_HEIGHT = 400;
var SCREEN_WIDTH = 320;
//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 = 25;
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-1,i-1,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);
}
function res(event)
{
a1 = -2.0;
b1 = -1.2;
a2 = 1.0;
b2 = 1.2;
it = 25;
disegna(a1,b1,a2,b2,it);
}
window.onload = function()
{
//riscala alla dimensione della finestra
var canvas = document.getElementById("mandelbrot");
var button = document.getElementById("reset");
//aggiunge l'evento click del mouse
canvas.addEventListener("mousedown",doMouseDown,false);
button.addEventListener("click", res,false);
disegna(a1,b1,a2,b2,it);
}
