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-210
  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
  42 function drawImage() {
  43   var canvas = document.getElementById("mbrotImage");
  44   var context = canvas.getContext("2d");
  45
  46   document.getElementById("calcTime").textContent = "--";
  47
  48   gColorPalette = getColorPalette(document.getElementById("palette").value);
  49
  50   var Cr_min = -2.0;
  51   var Cr_max = 1.0;
  52   try {
  53     Cr_min = parseFloat(document.getElementById("Cr_min").value);
  54     Cr_max = parseFloat(document.getElementById("Cr_max").value);
  55   }
  56   catch (e) { }
  57   if ((Cr_min < -2) || (Cr_min > 2) ||
  58       (Cr_max < -2) || (Cr_max > 2) || (Cr_min >= Cr_max)) {
  59     Cr_min = -2.0; Cr_max = 1.0;
  60   }
  61   document.getElementById("Cr_min").value = Cr_min;
  62   document.getElementById("Cr_max").value = Cr_max;
  63
  64   var Ci_min = -1.5;
  65   var Ci_max = 1.5;
  66   try {
  67     Ci_min = parseFloat(document.getElementById("Ci_min").value);
  68     Ci_max = parseFloat(document.getElementById("Ci_max").value);
  69   }
  70   catch (e) { }
  71   if ((Ci_min < -2) || (Ci_min > 2) ||
  72       (Ci_max < -2) || (Ci_max > 2) || (Ci_min >= Ci_max)) {
  73     Ci_min = -1.5; Ci_max = 1.5;
  74   }
  75   document.getElementById("Ci_min").value = Ci_min;
  76   document.getElementById("Ci_max").value = Ci_max;
  77
  78   //var algorithm = gPref.getCharPref("mandelbrot.use_algorithm");
  79   var iterMax = parseInt(document.getElementById("iterMax").value);
  80   var algorithm = "numeric"; //"oo"
  81
  82   var iWidth = canvas.width;
  83   if ((iWidth < 10) || (iWidth > 5000)) {
  84     iWidth = 300;
  85     canvas.width = iWidth;
  86   }
  87   var iHeight = canvas.height;
  88   if ((iHeight < 10) || (iHeight > 5000)) {
  89     iHeight = 300;
  90     canvas.height = iHeight;
  91   }
  92
  93   context.fillStyle = "rgba(255, 255, 255, 127)";
  94   context.fillRect(0, 0, canvas.width, canvas.height);
  95
  96   gStartTime = new Date();
  97
  98   drawLine(0, [Cr_min, Cr_max, Ci_min, Ci_max],
  99               canvas, context, iterMax, algorithm);
 100 }
 101
 102 function drawLine(line, dimensions, canvas, context, iterMax, algorithm) {
 103     var Cr_min = dimensions[0];
 104     var Cr_max = dimensions[1];
 105     var Cr_scale = Cr_max - Cr_min;
 106
 107     var Ci_min = dimensions[2];
 108     var Ci_max = dimensions[3];
 109     var Ci_scale = Ci_max - Ci_min;
 110
 111     var lines = Math.min(canvas.height - line, 8);
 112     var imageData = context.createImageData(canvas.width, lines);
 113     var pixels = imageData.data;
 114     var idx = 0;
 115     for (var img_y = line; img_y < canvas.height && img_y < line+8; img_y++)
 116       for (var img_x = 0; img_x < canvas.width; img_x++) {
 117         var C = new complex(Cr_min + (img_x / canvas.width) * Cr_scale,
 118                             Ci_min + (img_y / canvas.height) * Ci_scale);
 119         var colors = drawPoint(context, img_x, img_y, C, iterMax, algorithm);
 120         pixels[idx++] = colors[0];
 121         pixels[idx++] = colors[1];
 122         pixels[idx++] = colors[2];
 123         pixels[idx++] = colors[3];
 124       }
 125     context.putImageData(imageData, 0, line);
 126
 127     if (img_y < canvas.height)
 128       setTimeout(drawLine, 0, img_y, dimensions, canvas, context, iterMax, algorithm);
 129     else if (gStartTime)
 130       EndCalc();
 131 }
 132
 133 function EndCalc() {
 134   var endTime = new Date();
 135   var timeUsed = (endTime.getTime() - gStartTime.getTime()) / 1000;
 136   document.getElementById("calcTime").textContent = timeUsed.toFixed(3) + " seconds";
 137 }
 138
 139 function complex(aReal, aImag) {
 140   this.r = aReal;
 141   this.i = aImag;
 142 }
 143 complex.prototype = {
 144   square: function() {
 145     return new complex(this.r * this.r - this.i * this.i,
 146                        2 * this.r * this.i);
 147   },
 148   dist: function() {
 149     return Math.sqrt(this.r * this.r + this.i * this.i);
 150   },
 151   add: function(aComplex) {
 152     return new complex(this.r + aComplex.r, this.i + aComplex.i);
 153   }
 154 }
 155
 156 function mandelbrotValueOO (aC, aIterMax) {
 157   // this would be nice code in general but it looks like JS objects are too heavy for normal use.
 158   var Z = new complex(0.0, 0.0);
 159   for (var iter = 0; iter < aIterMax; iter++) {
 160     Z = Z.square().add(aC);
 161     if (Z.r * Z.r + Z.i * Z.i > 256) { break; }
 162   }
 163   return iter;
 164 }
 165
 166 function mandelbrotValueNumeric (aC, aIterMax) {
 167   // optimized numeric code for fast calculation
 168   var Cr = aC.r, Ci = aC.i;
 169   var Zr = 0.0, Zi = 0.0;
 170   var Zr2 = Zr * Zr, Zi2 = Zi * Zi;
 171   for (var iter = 0; iter < aIterMax; iter++) {
 172     Zi = 2 * Zr * Zi + Ci;
 173     Zr = Zr2 - Zi2 + Cr;
 174
 175     Zr2 = Zr * Zr; Zi2 = Zi * Zi;
 176     if (Zr2 + Zi2 > 256) { break; }
 177   }
 178   return iter;
 179 }
 180
 181 function getColor(aIterValue, aIterMax) {
 182   var standardizedValue = Math.round(aIterValue * 1024 / aIterMax);
 183   if (gColorPalette && gColorPalette.length)
 184     return gColorPalette[standardizedValue];
 185
 186   // fallback to simple b/w if for some reason we don't have a palette
 187   if (aIterValue == aIterMax)
 188     return [0, 0, 0, 255];
 189   else
 190     return [255, 255, 255, 255];
 191 }
 192
 193 function getColorPalette(palName) {
 194   var palette = [];
 195   switch (palName) {
 196     case 'bw':
 197       for (var i = 0; i < 1024; i++) {
 198         palette[i] = [255, 255, 255, 255];
 199       }
 200       palette[1024] = [0, 0, 0, 255];
 201       break;
 202     case 'kairo':
 203       // outer areas
 204       for (var i = 0; i < 32; i++) {
 205         var cc1 = Math.floor(i * 127 / 31);
 206         var cc2 = 170 - Math.floor(i * 43 / 31);
 207         palette[i] = [cc1, cc2, cc1, 255];
 208       }
 209       // inner areas
 210       for (var i = 0; i < 51; i++) {
 211         var cc = Math.floor(i * 170 / 50);
 212         palette[32 + i] = [cc, 0, (170-cc), 255];
 213       }
 214       // corona
 215       for (var i = 0; i < 101; i++) {
 216         var cc = Math.floor(i * 200 / 100);
 217         palette[83 + i] = [255, cc, 0, 255];
 218       }
 219       // inner corona
 220       for (var i = 0; i < 201; i++) {
 221         var cc1 = 255 - Math.floor(i * 85 / 200);
 222         var cc2 = 200 - Math.floor(i * 30 / 200);
 223         var cc3 = Math.floor(i * 170 / 200);
 224         palette[184 + i] = [cc1, cc2, cc3, 255];
 225       }
 226       for (var i = 0; i < 301; i++) {
 227         var cc1 = 170 - Math.floor(i * 43 / 300);
 228         var cc2 = 170 + Math.floor(i * 85 / 300);
 229         palette[385 + i] = [cc1, cc1, cc2, 255];
 230       }
 231       for (var i = 0; i < 338; i++) {
 232         var cc = 127 + Math.floor(i * 128 / 337);
 233         palette[686 + i] = [cc, cc, 255, 255];
 234       }
 235       palette[1024] = [0, 0, 0, 255];
 236       break;
 237     case 'rainbow-linear1':
 238       for (var i = 0; i < 256; i++) {
 239         palette[i] = [i, 0, 0, 255];
 240         palette[256 + i] = [255, i, 0, 255];
 241         palette[512 + i] = [255 - i, 255, i, 255];
 242         palette[768 + i] = [i, 255-i, 255, 255];
 243       }
 244       palette[1024] = [0, 0, 0, 255];
 245       break;
 246   }
 247   return palette;
 248 }
 249
 250 function drawPoint(context, img_x, img_y, C, iterMax, algorithm) {
 251   var itVal;
 252   switch (algorithm) {
 253     case 'oo':
 254       itVal = mandelbrotValueOO(C, iterMax);
 255       break;
 256     case 'numeric':
 257     default:
 258       itVal = mandelbrotValueNumeric(C, iterMax);
 259       break;
 260   }
 261   return getColor(itVal, iterMax);
 262 }
 263
 264 // ########## UI functions ##########
 265
 266 function toggleSettings() {
 267   var fs = document.getElementById("settings");
 268   if (fs.style.display != "block") {
 269     fs.style.display = "block";
 270   }
 271   else {
 272     fs.style.display = "none";
 273   }
 274 }