js/mandelbrot.js

   1 /* ***** BEGIN LICENSE BLOCK *****
   2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   3  *
   4  * The contents of this file are subject to the Mozilla Public License Version
   5  * 1.1 (the "License"); you may not use this file except in compliance with
   6  * the License. You may obtain a copy of the License at
   7  * http://www.mozilla.org/MPL/
   8  *
   9  * Software distributed under the License is distributed on an "AS IS" basis,
  10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11  * for the specific language governing rights and limitations under the
  12  * License.
  13  *
  14  * The Original Code is KaiRo.at Mandelbrot, XULRunner version.
  15  *
  16  * The Initial Developer of the Original Code is
  17  * Robert Kaiser <kairo@kairo.at>.
  18  * Portions created by the Initial Developer are Copyright (C) 2008-2011
  19  * the Initial Developer. All Rights Reserved.
  20  *
  21  * Contributor(s):
  22  *   Robert Kaiser <kairo@kairo.at>
  23  *   Boris Zbarsky <bzbarsky@mit.edu>
  24  *
  25  * Alternatively, the contents of this file may be used under the terms of
  26  * either the GNU General Public License Version 2 or later (the "GPL"), or
  27  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  28  * in which case the provisions of the GPL or the LGPL are applicable instead
  29  * of those above. If you wish to allow use of your version of this file only
  30  * under the terms of either the GPL or the LGPL, and not to allow others to
  31  * use your version of this file under the terms of the MPL, indicate your
  32  * decision by deleting the provisions above and replace them with the notice
  33  * and other provisions required by the GPL or the LGPL. If you do not delete
  34  * the provisions above, a recipient may use your version of this file under
  35  * the terms of any one of the MPL, the GPL or the LGPL.
  36  *
  37  * ***** END LICENSE BLOCK ***** */
  38
  39 var gColorPalette = [];
  40 var gStartTime = 0;
  41 var gCurrentImageData;
  42 var gLastImageData;
  43
  44 function Startup() {
  45   var img = document.getElementById("mbrotImage");
  46   img.addEventListener("mouseup", imgEvHandler, false);
  47   img.addEventListener("mousedown", imgEvHandler, false);
  48   img.addEventListener("mousemove", imgEvHandler, false);
  49   img.addEventListener("touchstart", imgEvHandler, false);
  50   img.addEventListener("touchend", imgEvHandler, false);
  51   img.addEventListener("touchcancel", imgEvHandler, false);
  52   img.addEventListener("touchleave", imgEvHandler, false);
  53   img.addEventListener("touchmove", imgEvHandler, false);
  54 }
  55
  56 function getAdjustVal(aName) {
  57   var value;
  58   switch (aName) {
  59     case "image.width":
  60     case "image.height":
  61       value = 0;
  62       try {
  63         value = document.getElementById(aName.replace(".", "_")).value;
  64       }
  65       catch (e) { }
  66       if ((value < 10) || (value > 5000)) {
  67         value = 300;
  68         //document.getElementById(aName.replace(".", "_")).value = value;
  69       }
  70       return value;
  71     case "last_image.Cr_*":
  72       var Cr_min = -2.0;
  73       var Cr_max = 1.0;
  74       try {
  75         Cr_min = parseFloat(document.getElementById("Cr_min").value);
  76         Cr_max = parseFloat(document.getElementById("Cr_max").value);
  77       }
  78       catch (e) { }
  79       if ((Cr_min < -3) || (Cr_min > 2) ||
  80           (Cr_max < -3) || (Cr_max > 2) || (Cr_min >= Cr_max)) {
  81         Cr_min = -2.0; Cr_max = 1.0;
  82       }
  83       document.getElementById("Cr_min").value = Cr_min;
  84       document.getElementById("Cr_max").value = Cr_max;
  85       return {Cr_min: Cr_min, Cr_max: Cr_max};
  86     case "last_image.Ci_*":
  87       var Ci_min = -1.5;
  88       var Ci_max = 1.5;
  89       try {
  90         Ci_min = parseFloat(document.getElementById("Ci_min").value);
  91         Ci_max = parseFloat(document.getElementById("Ci_max").value);
  92       }
  93       catch (e) { }
  94       if ((Ci_min < -2.5) || (Ci_min > 2.5) ||
  95           (Ci_max < -2.5) || (Ci_max > 2.5) || (Ci_min >= Ci_max)) {
  96         Ci_min = -1.5; Ci_max = 1.5;
  97       }
  98       document.getElementById("Ci_min").value = Ci_min;
  99       document.getElementById("Ci_max").value = Ci_max;
 100       return {Ci_min: Ci_min, Ci_max: Ci_max};
 101     case "iteration_max":
 102       value = 500;
 103       try {
 104         value = document.getElementById("iterMax").value;
 105       }
 106       catch (e) {
 107         setIter(value);
 108       }
 109       if (value < 10 || value > 10000) {
 110         value = 500;
 111         setIter(value);
 112       }
 113       return value;
 114     case "use_algorithm":
 115       value = "numeric";
 116       try {
 117         value = document.getElementById("algorithm").value;
 118       }
 119       catch (e) {
 120         setAlgorithm(value);
 121       }
 122       return value;
 123    case "color_palette":
 124       value = "kairo";
 125       try {
 126         value = document.getElementById("palette").value;
 127       }
 128       catch(e) {
 129         setPalette(value);
 130       }
 131       return value;
 132    case "syncProportions":
 133       value = true;
 134       try {
 135         value = document.getElementById("proportional").value;
 136       }
 137       catch(e) {
 138         document.getElementById("proportional").value = value;
 139       }
 140       return value;
 141     default:
 142       return false;
 143   }
 144 }
 145
 146 function setVal(aName, aValue) {
 147   switch (aName) {
 148     case "image.width":
 149     case "image.height":
 150       document.getElementById(aName.replace(".", "_")).value = value;
 151       break;
 152     case "last_image.Cr_*":
 153       document.getElementById("Cr_min").value = aValue.Cr_min;
 154       document.getElementById("Cr_max").value = aValue.Cr_max;
 155       break;
 156     case "last_image.Ci_*":
 157       document.getElementById("Ci_min").value = aValue.Ci_min;
 158       document.getElementById("Ci_max").value = aValue.Ci_max;
 159       break;
 160     case "iteration_max":
 161       setIter(aValue);
 162       break;
 163     case "use_algorithm":
 164       setAlgorithm(aValue);
 165       break;
 166    case "color_palette":
 167       setPalette(valueaValue);
 168       break;
 169    case "syncProportions":
 170       document.getElementById("proportional").value = aValue;
 171       break;
 172   }
 173 }
 174
 175 function adjustCoordsAndDraw(aC_min, aC_max) {
 176   var iWidth = getAdjustVal("image.width");
 177   var iHeight = getAdjustVal("image.height");
 178
 179   // correct coordinates
 180   if (aC_min.r < -2)
 181     aC_min.r = -2;
 182   if (aC_max.r > 2)
 183     aC_max.r = 2;
 184   if ((aC_min.r > 2) || (aC_max.r < -2) || (aC_min.r >= aC_max.r)) {
 185     aC_min.r = -2.0; aC_max.r = 1.0;
 186   }
 187   if (aC_min.i < -2)
 188     aC_min.i = -2;
 189   if (aC_max.i > 2)
 190     aC_max.i = 2;
 191   if ((aC_min.i > 2) || (aC_max.i < -2) || (aC_min.i >= aC_max.i)) {
 192     aC_min.i = -1.3; aC_max.i = 1.3;
 193   }
 194
 195   var CWidth = aC_max.r - aC_min.r;
 196   var CHeight = aC_max.i - aC_min.i;
 197   var C_mid = new complex(aC_min.r + CWidth / 2, aC_min.i + CHeight / 2);
 198
 199   var CRatio = Math.max(CWidth / iWidth, CHeight / iHeight);
 200
 201   setVal("last_image.Cr_*", {Cr_min: C_mid.r - iWidth * CRatio / 2,
 202                              Cr_max: C_mid.r + iWidth * CRatio / 2});
 203   setVal("last_image.Ci_*", {Ci_min: C_mid.i - iHeight * CRatio / 2,
 204                              Ci_max: C_mid.i + iHeight * CRatio / 2});
 205
 206   drawImage();
 207 }
 208
 209 function drawImage() {
 210   var canvas = document.getElementById("mbrotImage");
 211   var context = canvas.getContext("2d");
 212
 213   document.getElementById("calcTime").textContent = "--";
 214
 215   if (gCurrentImageData) {
 216     gLastImageData = gCurrentImageData;
 217     document.getElementById("backButton").disabled = false;
 218   }
 219
 220   gColorPalette = getColorPalette(document.getElementById("palette").value);
 221
 222   var Cr_vals = getAdjustVal("last_image.Cr_*");
 223   var Cr_min = Cr_vals.Cr_min;
 224   var Cr_max = Cr_vals.Cr_max;
 225
 226   var Ci_vals = getAdjustVal("last_image.Ci_*");
 227   var Ci_min = Ci_vals.Ci_min;
 228   var Ci_max = Ci_vals.Ci_max;
 229
 230   var iterMax = getAdjustVal("iteration_max");
 231   var algorithm = getAdjustVal("use_algorithm");
 232
 233   var iWidth = canvas.width;
 234   if ((iWidth < 10) || (iWidth > 5000)) {
 235     iWidth = 300;
 236     canvas.width = iWidth;
 237   }
 238   var iHeight = canvas.height;
 239   if ((iHeight < 10) || (iHeight > 5000)) {
 240     iHeight = 300;
 241     canvas.height = iHeight;
 242   }
 243
 244   gCurrentImageData = {
 245     C_min: new complex(Cr_min, Ci_min),
 246     C_max: new complex(Cr_max, Ci_max),
 247     iWidth: iWidth,
 248     iHeight: iHeight,
 249     iterMax: iterMax
 250   };
 251
 252   context.fillStyle = "rgba(255, 255, 255, 127)";
 253   context.fillRect(0, 0, canvas.width, canvas.height);
 254
 255   gStartTime = new Date();
 256
 257   drawLine(0, [Cr_min, Cr_max, Ci_min, Ci_max],
 258               canvas, context, iterMax, algorithm);
 259 }
 260
 261 function drawLine(line, dimensions, canvas, context, iterMax, algorithm) {
 262     var Cr_min = dimensions[0];
 263     var Cr_max = dimensions[1];
 264     var Cr_scale = Cr_max - Cr_min;
 265
 266     var Ci_min = dimensions[2];
 267     var Ci_max = dimensions[3];
 268     var Ci_scale = Ci_max - Ci_min;
 269
 270     var lines = Math.min(canvas.height - line, 8);
 271     var imageData = context.createImageData(canvas.width, lines);
 272     var pixels = imageData.data;
 273     var idx = 0;
 274     for (var img_y = line; img_y < canvas.height && img_y < line+8; img_y++)
 275       for (var img_x = 0; img_x < canvas.width; img_x++) {
 276         var C = new complex(Cr_min + (img_x / canvas.width) * Cr_scale,
 277                             Ci_min + (img_y / canvas.height) * Ci_scale);
 278         var colors = drawPoint(context, img_x, img_y, C, iterMax, algorithm);
 279         pixels[idx++] = colors[0];
 280         pixels[idx++] = colors[1];
 281         pixels[idx++] = colors[2];
 282         pixels[idx++] = colors[3];
 283       }
 284     context.putImageData(imageData, 0, line);
 285
 286     if (img_y < canvas.height)
 287       setTimeout(drawLine, 0, img_y, dimensions, canvas, context, iterMax, algorithm);
 288     else if (gStartTime)
 289       EndCalc();
 290 }
 291
 292 function EndCalc() {
 293   var endTime = new Date();
 294   var timeUsed = (endTime.getTime() - gStartTime.getTime()) / 1000;
 295   document.getElementById("calcTime").textContent = timeUsed.toFixed(3) + " seconds";
 296 }
 297
 298 function complex(aReal, aImag) {
 299   this.r = aReal;
 300   this.i = aImag;
 301 }
 302 complex.prototype = {
 303   square: function() {
 304     return new complex(this.r * this.r - this.i * this.i,
 305                        2 * this.r * this.i);
 306   },
 307   dist: function() {
 308     return Math.sqrt(this.r * this.r + this.i * this.i);
 309   },
 310   add: function(aComplex) {
 311     return new complex(this.r + aComplex.r, this.i + aComplex.i);
 312   }
 313 }
 314
 315 function mandelbrotValueOO (aC, aIterMax) {
 316   // this would be nice code in general but it looks like JS objects are too heavy for normal use.
 317   var Z = new complex(0.0, 0.0);
 318   for (var iter = 0; iter < aIterMax; iter++) {
 319     Z = Z.square().add(aC);
 320     if (Z.r * Z.r + Z.i * Z.i > 256) { break; }
 321   }
 322   return iter;
 323 }
 324
 325 function mandelbrotValueNumeric (aC, aIterMax) {
 326   // optimized numeric code for fast calculation
 327   var Cr = aC.r, Ci = aC.i;
 328   var Zr = 0.0, Zi = 0.0;
 329   var Zr2 = Zr * Zr, Zi2 = Zi * Zi;
 330   for (var iter = 0; iter < aIterMax; iter++) {
 331     Zi = 2 * Zr * Zi + Ci;
 332     Zr = Zr2 - Zi2 + Cr;
 333
 334     Zr2 = Zr * Zr; Zi2 = Zi * Zi;
 335     if (Zr2 + Zi2 > 256) { break; }
 336   }
 337   return iter;
 338 }
 339
 340 function getColor(aIterValue, aIterMax) {
 341   var standardizedValue = Math.round(aIterValue * 1024 / aIterMax);
 342   if (gColorPalette && gColorPalette.length)
 343     return gColorPalette[standardizedValue];
 344
 345   // fallback to simple b/w if for some reason we don't have a palette
 346   if (aIterValue == aIterMax)
 347     return [0, 0, 0, 255];
 348   else
 349     return [255, 255, 255, 255];
 350 }
 351
 352 function getColorPalette(palName) {
 353   var palette = [];
 354   switch (palName) {
 355     case 'bw':
 356       for (var i = 0; i < 1024; i++) {
 357         palette[i] = [255, 255, 255, 255];
 358       }
 359       palette[1024] = [0, 0, 0, 255];
 360       break;
 361     case 'kairo':
 362       // outer areas
 363       for (var i = 0; i < 32; i++) {
 364         var cc1 = Math.floor(i * 127 / 31);
 365         var cc2 = 170 - Math.floor(i * 43 / 31);
 366         palette[i] = [cc1, cc2, cc1, 255];
 367       }
 368       // inner areas
 369       for (var i = 0; i < 51; i++) {
 370         var cc = Math.floor(i * 170 / 50);
 371         palette[32 + i] = [cc, 0, (170-cc), 255];
 372       }
 373       // corona
 374       for (var i = 0; i < 101; i++) {
 375         var cc = Math.floor(i * 200 / 100);
 376         palette[83 + i] = [255, cc, 0, 255];
 377       }
 378       // inner corona
 379       for (var i = 0; i < 201; i++) {
 380         var cc1 = 255 - Math.floor(i * 85 / 200);
 381         var cc2 = 200 - Math.floor(i * 30 / 200);
 382         var cc3 = Math.floor(i * 170 / 200);
 383         palette[184 + i] = [cc1, cc2, cc3, 255];
 384       }
 385       for (var i = 0; i < 301; i++) {
 386         var cc1 = 170 - Math.floor(i * 43 / 300);
 387         var cc2 = 170 + Math.floor(i * 85 / 300);
 388         palette[385 + i] = [cc1, cc1, cc2, 255];
 389       }
 390       for (var i = 0; i < 338; i++) {
 391         var cc = 127 + Math.floor(i * 128 / 337);
 392         palette[686 + i] = [cc, cc, 255, 255];
 393       }
 394       palette[1024] = [0, 0, 0, 255];
 395       break;
 396     case 'rainbow-linear1':
 397       for (var i = 0; i < 256; i++) {
 398         palette[i] = [i, 0, 0, 255];
 399         palette[256 + i] = [255, i, 0, 255];
 400         palette[512 + i] = [255 - i, 255, i, 255];
 401         palette[768 + i] = [i, 255-i, 255, 255];
 402       }
 403       palette[1024] = [0, 0, 0, 255];
 404       break;
 405     case 'rainbow-squared1':
 406       for (var i = 0; i < 34; i++) {
 407         var cc = Math.floor(i * 255 / 33);
 408         palette[i] = [cc, 0, 0, 255];
 409       }
 410       for (var i = 0; i < 137; i++) {
 411         var cc = Math.floor(i * 255 / 136);
 412         palette[34 + i] = [255, cc, 0, 255];
 413       }
 414       for (var i = 0; i < 307; i++) {
 415         var cc = Math.floor(i * 255 / 306);
 416         palette[171 + i] = [255 - cc, 255, cc, 255];
 417       }
 418       for (var i = 0; i < 546; i++) {
 419         var cc = Math.floor(i * 255 / 545);
 420         palette[478 + i] = [cc, 255 - cc, 255, 255];
 421       }
 422       palette[1024] = [0, 0, 0, 255];
 423       break;
 424     case 'rainbow-linear2':
 425       for (var i = 0; i < 205; i++) {
 426         var cc = Math.floor(i * 255 / 204);
 427         palette[i] = [255, cc, 0, 255];
 428         palette[204 + i] = [255 - cc, 255, 0, 255];
 429         palette[409 + i] = [0, 255, cc, 255];
 430         palette[614 + i] = [0, 255 - cc, 255, 255];
 431         palette[819 + i] = [cc, 0, 255, 255];
 432       }
 433       palette[1024] = [0, 0, 0, 255];
 434       break;
 435     case 'rainbow-squared2':
 436       for (var i = 0; i < 19; i++) {
 437         var cc = Math.floor(i * 255 / 18);
 438         palette[i] = [255, cc, 0, 255];
 439       }
 440       for (var i = 0; i < 74; i++) {
 441         var cc = Math.floor(i * 255 / 73);
 442         palette[19 + i] = [255 - cc, 255, 0, 255];
 443       }
 444       for (var i = 0; i < 168; i++) {
 445         var cc = Math.floor(i * 255 / 167);
 446         palette[93 + i] = [0, 255, cc, 255];
 447       }
 448       for (var i = 0; i < 298; i++) {
 449         var cc = Math.floor(i * 255 / 297);
 450         palette[261 + i] = [0, 255 - cc, 255, 255];
 451       }
 452       for (var i = 0; i < 465; i++) {
 453         var cc = Math.floor(i * 255 / 464);
 454         palette[559 + i] = [cc, 0, 255, 255];
 455       }
 456       palette[1024] = [0, 0, 0, 255];
 457       break;
 458   }
 459   return palette;
 460 }
 461
 462 function drawPoint(context, img_x, img_y, C, iterMax, algorithm) {
 463   var itVal;
 464   switch (algorithm) {
 465     case 'oo':
 466       itVal = mandelbrotValueOO(C, iterMax);
 467       break;
 468     case 'numeric':
 469     default:
 470       itVal = mandelbrotValueNumeric(C, iterMax);
 471       break;
 472   }
 473   return getColor(itVal, iterMax);
 474 }
 475
 476 // ########## UI functions ##########
 477
 478 var zoomstart;
 479 var imgBackup;
 480 var zoomTouchID;
 481
 482 var imgEvHandler = {
 483   handleEvent: function(aEvent) {
 484     var canvas = document.getElementById("mbrotImage");
 485     var context = canvas.getContext("2d");
 486     var touchEvent = aEvent.type.indexOf('touch') != -1;
 487
 488     // Bail out if this is neither a touch nor left-click.
 489     if (!touchEvent && aEvent.button != 0)
 490       return;
 491
 492     // Bail out if the started touch can't be found.
 493     if (touchEvent && zoomstart &&
 494         !aEvent.changedTouches.identifiedTouch(zoomTouchID))
 495       return;
 496
 497     var coordObj = touchEvent ?
 498                    aEvent.changedTouches.identifiedTouch(zoomTouchID) :
 499                    aEvent;
 500
 501     switch (aEvent.type) {
 502       case 'mousedown':
 503       case 'touchstart':
 504         if (touchEvent) {
 505           zoomTouchID = aEvent.changedTouches.item(0).identifier;
 506           coordObj = aEvent.changedTouches.identifiedTouch(zoomTouchID);
 507         }
 508         // left button - start dragzoom
 509         zoomstart = {x: coordObj.clientX - canvas.offsetLeft,
 510                      y: coordObj.clientY - canvas.offsetTop};
 511         imgBackup = context.getImageData(0, 0, canvas.width, canvas.height);
 512         break;
 513       case 'mouseup':
 514       case 'touchend':
 515         if (zoomstart) {
 516           context.putImageData(imgBackup, 0, 0);
 517           var zoomend = {x: coordObj.clientX - canvas.offsetLeft,
 518                          y: coordObj.clientY - canvas.offsetTop};
 519
 520           // make sure zoomend is bigger than zoomstart
 521           if ((zoomend.x == zoomstart.x) || (zoomend.y == zoomstart.y)) {
 522             // cannot zoom what has no area, discard it
 523             zoomstart = undefined;
 524             return;
 525           }
 526           if (zoomend.x < zoomstart.x)
 527             [zoomend.x, zoomstart.x] = [zoomstart.x, zoomend.x];
 528           if (zoomend.y < zoomstart.y)
 529             [zoomend.y, zoomstart.y] = [zoomstart.y, zoomend.y];
 530
 531           if (gCurrentImageData) {
 532             // determine new "coordinates"
 533             var CWidth = gCurrentImageData.C_max.r - gCurrentImageData.C_min.r;
 534             var CHeight = gCurrentImageData.C_max.i - gCurrentImageData.C_min.i;
 535             var newC_min = new complex(
 536                 gCurrentImageData.C_min.r + zoomstart.x / gCurrentImageData.iWidth * CWidth,
 537                 gCurrentImageData.C_min.i + zoomstart.y / gCurrentImageData.iHeight * CHeight);
 538             var newC_max = new complex(
 539                 gCurrentImageData.C_min.r + zoomend.x / gCurrentImageData.iWidth * CWidth,
 540                 gCurrentImageData.C_min.i + zoomend.y / gCurrentImageData.iHeight * CHeight);
 541           }
 542           else {
 543             var newC_min = new complex(-2, -1.5);
 544             var newC_max = new complex(1, 1.5);
 545           }
 546
 547           adjustCoordsAndDraw(newC_min, newC_max);
 548         }
 549         zoomstart = undefined;
 550         break;
 551       case 'mousemove':
 552       case 'touchmove':
 553         if (zoomstart) {
 554           context.putImageData(imgBackup, 0, 0);
 555           context.strokeStyle = "rgb(255,255,31)";
 556           context.strokeRect(zoomstart.x, zoomstart.y,
 557                              coordObj.clientX - canvas.offsetLeft - zoomstart.x,
 558                              coordObj.clientY - canvas.offsetTop - zoomstart.y);
 559         }
 560         break;
 561     }
 562   }
 563 };
 564
 565 function drawIfEmpty() {
 566   if (!gCurrentImageData) {
 567     drawImage();
 568   }
 569 }
 570
 571 function toggleSettings() {
 572   var fs = document.getElementById("settings");
 573   if (fs.style.display != "block") {
 574     fs.style.display = "block";
 575   }
 576   else {
 577     fs.style.display = "none";
 578   }
 579 }
 580
 581 function goBack() {
 582   if (gLastImageData) {
 583     document.getElementById("iterMax").value = gLastImageData.iterMax;
 584     // use gLastImageData.iWidth, gLastImageData.iHeight ???
 585     adjustCoordsAndDraw(gLastImageData.C_min, gLastImageData.C_max);
 586     gLastImageData = undefined;
 587     document.getElementById("backButton").disabled = true;
 588   }
 589 }
 590
 591 function setIter(aIter) {
 592   document.getElementById("iterMax").value = aIter;
 593 }
 594
 595 function setPalette(aPaletteID) {
 596   document.getElementById("palette").value = aPaletteID;
 597   gColorPalette = getColorPalette(aPaletteID);
 598 }
 599
 600 function setAlgorithm(algoID) {
 601   //document.getElementById("algorithm").value = algoID;
 602 }