1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
3 * You can obtain one at http://mozilla.org/MPL/2.0/. */
5 // Get the best-available indexedDB object.
6 var iDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
9 var gMainCanvas, gMainContext;
10 var gColorPalette = [];
12 var gCurrentImageData;
18 gMainCanvas = document.getElementById("mbrotImage");
19 gMainContext = gMainCanvas.getContext("2d");
21 gMainCanvas.addEventListener("mouseup", imgEvHandler, false);
22 gMainCanvas.addEventListener("mousedown", imgEvHandler, false);
23 gMainCanvas.addEventListener("mousemove", imgEvHandler, false);
24 gMainCanvas.addEventListener("touchstart", imgEvHandler, false);
25 gMainCanvas.addEventListener("touchend", imgEvHandler, false);
26 gMainCanvas.addEventListener("touchcancel", imgEvHandler, false);
27 gMainCanvas.addEventListener("touchleave", imgEvHandler, false);
28 gMainCanvas.addEventListener("touchmove", imgEvHandler, false);
30 var initTile = new Image();
31 initTile.src = "style/initial-overview.png";
32 gMainContext.drawImage(initTile, 0, 0);
37 var request = iDB.open("MainDB", 1);
38 request.onerror = function(event) {
39 // Errors can be handled here. Error codes explain in:
40 // https://developer.mozilla.org/en/IndexedDB/IDBDatabaseException#Constants
41 //document.getElementById("debug").textContent =
42 // "error opening mainDB: " + event.target.errorCode;
44 request.onsuccess = function(event) {
45 //document.getElementById("debug").textContent = "mainDB opened.";
46 mainDB = request.result;
48 request.onupgradeneeded = function(event) {
49 mainDB = request.result;
50 //document.getElementById("debug").textContent = "mainDB upgraded.";
51 // Create a "prefs" objectStore.
52 var prefsStore = mainDB.createObjectStore("prefs");
53 // Create a "bookmarks" objectStore.
54 var bmStore = mainDB.createObjectStore("bookmarks");
55 mainDB.onversionchange = function(event) {
63 function getAdjustVal(aName) {
70 value = document.getElementById(aName.replace(".", "_")).value;
73 if ((value < 10) || (value > 5000)) {
75 gPrefs.set(prefname, value);
76 //document.getElementById(aName.replace(".", "_")).value = value;
79 case "last_image.Cr_*":
83 Cr_min = parseFloat(document.getElementById("Cr_min").value);
84 Cr_max = parseFloat(document.getElementById("Cr_max").value);
87 if ((Cr_min < -3) || (Cr_min > 2) ||
88 (Cr_max < -3) || (Cr_max > 2) || (Cr_min >= Cr_max)) {
89 Cr_min = -2.0; Cr_max = 1.0;
91 gPrefs.set("Cr_min", Cr_min);
92 gPrefs.set("Cr_max", Cr_max);
93 document.getElementById("Cr_min").value = Cr_min;
94 document.getElementById("Cr_max").value = Cr_max;
95 return {Cr_min: Cr_min, Cr_max: Cr_max};
96 case "last_image.Ci_*":
100 Ci_min = parseFloat(document.getElementById("Ci_min").value);
101 Ci_max = parseFloat(document.getElementById("Ci_max").value);
104 if ((Ci_min < -2.5) || (Ci_min > 2.5) ||
105 (Ci_max < -2.5) || (Ci_max > 2.5) || (Ci_min >= Ci_max)) {
106 Ci_min = -1.5; Ci_max = 1.5;
108 gPrefs.set("Ci_min", Ci_min);
109 gPrefs.set("Ci_max", Ci_max);
110 document.getElementById("Ci_min").value = Ci_min;
111 document.getElementById("Ci_max").value = Ci_max;
112 return {Ci_min: Ci_min, Ci_max: Ci_max};
113 case "iteration_max":
116 value = document.getElementById("iterMax").value;
121 if (value < 10 || value > 10000) {
126 case "use_algorithm":
129 value = document.getElementById("algorithm").value;
135 case "color_palette":
138 value = document.getElementById("palette").value;
144 case "syncProportions":
147 value = document.getElementById("proportional").value;
150 gPrefs.set(prefname, value);
151 document.getElementById("proportional").value = value;
159 function setVal(aName, aValue) {
163 gPrefs.set(aName, value);
164 document.getElementById(aName.replace(".", "_")).value = value;
166 case "last_image.Cr_*":
167 gPrefs.set("Cr_min", Cr_min);
168 gPrefs.set("Cr_max", Cr_max);
169 document.getElementById("Cr_min").value = aValue.Cr_min;
170 document.getElementById("Cr_max").value = aValue.Cr_max;
172 case "last_image.Ci_*":
173 gPrefs.set("Ci_min", Ci_min);
174 gPrefs.set("Ci_max", Ci_max);
175 document.getElementById("Ci_min").value = aValue.Ci_min;
176 document.getElementById("Ci_max").value = aValue.Ci_max;
178 case "iteration_max":
181 case "use_algorithm":
182 setAlgorithm(aValue);
184 case "color_palette":
185 setPalette(valueaValue);
187 case "syncProportions":
188 gPrefs.set(aName, value);
189 document.getElementById("proportional").value = aValue;
194 function adjustCoordsAndDraw(aC_min, aC_max) {
195 var iWidth = getAdjustVal("image.width");
196 var iHeight = getAdjustVal("image.height");
198 // correct coordinates
203 if ((aC_min.r > 2) || (aC_max.r < -2) || (aC_min.r >= aC_max.r)) {
204 aC_min.r = -2.0; aC_max.r = 1.0;
210 if ((aC_min.i > 2) || (aC_max.i < -2) || (aC_min.i >= aC_max.i)) {
211 aC_min.i = -1.3; aC_max.i = 1.3;
214 var CWidth = aC_max.r - aC_min.r;
215 var CHeight = aC_max.i - aC_min.i;
216 var C_mid = new complex(aC_min.r + CWidth / 2, aC_min.i + CHeight / 2);
218 var CRatio = Math.max(CWidth / iWidth, CHeight / iHeight);
220 setVal("last_image.Cr_*", {Cr_min: C_mid.r - iWidth * CRatio / 2,
221 Cr_max: C_mid.r + iWidth * CRatio / 2});
222 setVal("last_image.Ci_*", {Ci_min: C_mid.i - iHeight * CRatio / 2,
223 Ci_max: C_mid.i + iHeight * CRatio / 2});
228 function drawImage() {
229 var canvas = gMainCanvas;
230 var context = gMainContext;
232 document.getElementById("calcTime").textContent = "--";
234 if (gCurrentImageData) {
235 gLastImageData = gCurrentImageData;
236 document.getElementById("backButton").disabled = false;
239 gColorPalette = getColorPalette(document.getElementById("palette").value);
241 var Cr_vals = getAdjustVal("last_image.Cr_*");
242 var Cr_min = Cr_vals.Cr_min;
243 var Cr_max = Cr_vals.Cr_max;
245 var Ci_vals = getAdjustVal("last_image.Ci_*");
246 var Ci_min = Ci_vals.Ci_min;
247 var Ci_max = Ci_vals.Ci_max;
249 var iterMax = getAdjustVal("iteration_max");
250 var algorithm = getAdjustVal("use_algorithm");
252 var iWidth = canvas.width;
253 if ((iWidth < 10) || (iWidth > 5000)) {
255 canvas.width = iWidth;
257 var iHeight = canvas.height;
258 if ((iHeight < 10) || (iHeight > 5000)) {
260 canvas.height = iHeight;
263 gCurrentImageData = {
264 C_min: new complex(Cr_min, Ci_min),
265 C_max: new complex(Cr_max, Ci_max),
271 context.fillStyle = "rgba(255, 255, 255, 127)";
272 context.fillRect(0, 0, canvas.width, canvas.height);
274 gStartTime = new Date();
276 drawLine(0, [Cr_min, Cr_max, Ci_min, Ci_max],
277 canvas, context, iterMax, algorithm);
280 function drawLine(line, dimensions, canvas, context, iterMax, algorithm) {
281 var Cr_min = dimensions[0];
282 var Cr_max = dimensions[1];
283 var Cr_scale = Cr_max - Cr_min;
285 var Ci_min = dimensions[2];
286 var Ci_max = dimensions[3];
287 var Ci_scale = Ci_max - Ci_min;
289 var lines = Math.min(canvas.height - line, 8);
290 var imageData = context.createImageData(canvas.width, lines);
291 var pixels = imageData.data;
293 for (var img_y = line; img_y < canvas.height && img_y < line+8; img_y++)
294 for (var img_x = 0; img_x < canvas.width; img_x++) {
295 var C = new complex(Cr_min + (img_x / canvas.width) * Cr_scale,
296 Ci_min + (img_y / canvas.height) * Ci_scale);
297 var colors = drawPoint(context, img_x, img_y, C, iterMax, algorithm);
298 pixels[idx++] = colors[0];
299 pixels[idx++] = colors[1];
300 pixels[idx++] = colors[2];
301 pixels[idx++] = colors[3];
303 context.putImageData(imageData, 0, line);
305 if (img_y < canvas.height)
306 setTimeout(drawLine, 0, img_y, dimensions, canvas, context, iterMax, algorithm);
312 var endTime = new Date();
313 var timeUsed = (endTime.getTime() - gStartTime.getTime()) / 1000;
314 document.getElementById("calcTime").textContent = timeUsed.toFixed(3) + " seconds";
317 function complex(aReal, aImag) {
321 complex.prototype = {
323 return new complex(this.r * this.r - this.i * this.i,
324 2 * this.r * this.i);
327 return Math.sqrt(this.r * this.r + this.i * this.i);
329 add: function(aComplex) {
330 return new complex(this.r + aComplex.r, this.i + aComplex.i);
334 function mandelbrotValueOO (aC, aIterMax) {
335 // this would be nice code in general but it looks like JS objects are too heavy for normal use.
336 var Z = new complex(0.0, 0.0);
337 for (var iter = 0; iter < aIterMax; iter++) {
338 Z = Z.square().add(aC);
339 if (Z.r * Z.r + Z.i * Z.i > 256) { break; }
344 function mandelbrotValueNumeric (aC, aIterMax) {
345 // optimized numeric code for fast calculation
346 var Cr = aC.r, Ci = aC.i;
347 var Zr = 0.0, Zi = 0.0;
348 var Zr2 = Zr * Zr, Zi2 = Zi * Zi;
349 for (var iter = 0; iter < aIterMax; iter++) {
350 Zi = 2 * Zr * Zi + Ci;
353 Zr2 = Zr * Zr; Zi2 = Zi * Zi;
354 if (Zr2 + Zi2 > 256) { break; }
359 function getColor(aIterValue, aIterMax) {
360 var standardizedValue = Math.round(aIterValue * 1024 / aIterMax);
361 if (gColorPalette && gColorPalette.length)
362 return gColorPalette[standardizedValue];
364 // fallback to simple b/w if for some reason we don't have a palette
365 if (aIterValue == aIterMax)
366 return [0, 0, 0, 255];
368 return [255, 255, 255, 255];
371 function getColorPalette(palName) {
375 for (var i = 0; i < 1024; i++) {
376 palette[i] = [255, 255, 255, 255];
378 palette[1024] = [0, 0, 0, 255];
382 for (var i = 0; i < 32; i++) {
383 var cc1 = Math.floor(i * 127 / 31);
384 var cc2 = 170 - Math.floor(i * 43 / 31);
385 palette[i] = [cc1, cc2, cc1, 255];
388 for (var i = 0; i < 51; i++) {
389 var cc = Math.floor(i * 170 / 50);
390 palette[32 + i] = [cc, 0, (170-cc), 255];
393 for (var i = 0; i < 101; i++) {
394 var cc = Math.floor(i * 200 / 100);
395 palette[83 + i] = [255, cc, 0, 255];
398 for (var i = 0; i < 201; i++) {
399 var cc1 = 255 - Math.floor(i * 85 / 200);
400 var cc2 = 200 - Math.floor(i * 30 / 200);
401 var cc3 = Math.floor(i * 170 / 200);
402 palette[184 + i] = [cc1, cc2, cc3, 255];
404 for (var i = 0; i < 301; i++) {
405 var cc1 = 170 - Math.floor(i * 43 / 300);
406 var cc2 = 170 + Math.floor(i * 85 / 300);
407 palette[385 + i] = [cc1, cc1, cc2, 255];
409 for (var i = 0; i < 338; i++) {
410 var cc = 127 + Math.floor(i * 128 / 337);
411 palette[686 + i] = [cc, cc, 255, 255];
413 palette[1024] = [0, 0, 0, 255];
415 case 'rainbow-linear1':
416 for (var i = 0; i < 256; i++) {
417 palette[i] = [i, 0, 0, 255];
418 palette[256 + i] = [255, i, 0, 255];
419 palette[512 + i] = [255 - i, 255, i, 255];
420 palette[768 + i] = [i, 255-i, 255, 255];
422 palette[1024] = [0, 0, 0, 255];
424 case 'rainbow-squared1':
425 for (var i = 0; i < 34; i++) {
426 var cc = Math.floor(i * 255 / 33);
427 palette[i] = [cc, 0, 0, 255];
429 for (var i = 0; i < 137; i++) {
430 var cc = Math.floor(i * 255 / 136);
431 palette[34 + i] = [255, cc, 0, 255];
433 for (var i = 0; i < 307; i++) {
434 var cc = Math.floor(i * 255 / 306);
435 palette[171 + i] = [255 - cc, 255, cc, 255];
437 for (var i = 0; i < 546; i++) {
438 var cc = Math.floor(i * 255 / 545);
439 palette[478 + i] = [cc, 255 - cc, 255, 255];
441 palette[1024] = [0, 0, 0, 255];
443 case 'rainbow-linear2':
444 for (var i = 0; i < 205; i++) {
445 var cc = Math.floor(i * 255 / 204);
446 palette[i] = [255, cc, 0, 255];
447 palette[204 + i] = [255 - cc, 255, 0, 255];
448 palette[409 + i] = [0, 255, cc, 255];
449 palette[614 + i] = [0, 255 - cc, 255, 255];
450 palette[819 + i] = [cc, 0, 255, 255];
452 palette[1024] = [0, 0, 0, 255];
454 case 'rainbow-squared2':
455 for (var i = 0; i < 19; i++) {
456 var cc = Math.floor(i * 255 / 18);
457 palette[i] = [255, cc, 0, 255];
459 for (var i = 0; i < 74; i++) {
460 var cc = Math.floor(i * 255 / 73);
461 palette[19 + i] = [255 - cc, 255, 0, 255];
463 for (var i = 0; i < 168; i++) {
464 var cc = Math.floor(i * 255 / 167);
465 palette[93 + i] = [0, 255, cc, 255];
467 for (var i = 0; i < 298; i++) {
468 var cc = Math.floor(i * 255 / 297);
469 palette[261 + i] = [0, 255 - cc, 255, 255];
471 for (var i = 0; i < 465; i++) {
472 var cc = Math.floor(i * 255 / 464);
473 palette[559 + i] = [cc, 0, 255, 255];
475 palette[1024] = [0, 0, 0, 255];
481 function drawPoint(context, img_x, img_y, C, iterMax, algorithm) {
485 itVal = mandelbrotValueOO(C, iterMax);
489 itVal = mandelbrotValueNumeric(C, iterMax);
492 return getColor(itVal, iterMax);
495 // ########## UI functions ##########
502 handleEvent: function(aEvent) {
503 var canvas = document.getElementById("mbrotImage");
504 var context = canvas.getContext("2d");
505 var touchEvent = aEvent.type.indexOf('touch') != -1;
507 // Bail out if this is neither a touch nor left-click.
508 if (!touchEvent && aEvent.button != 0)
511 // Bail out if the started touch can't be found.
512 if (touchEvent && zoomstart &&
513 !aEvent.changedTouches.identifiedTouch(zoomTouchID))
516 var coordObj = touchEvent ?
517 aEvent.changedTouches.identifiedTouch(zoomTouchID) :
520 switch (aEvent.type) {
524 zoomTouchID = aEvent.changedTouches.item(0).identifier;
525 coordObj = aEvent.changedTouches.identifiedTouch(zoomTouchID);
527 // left button - start dragzoom
528 zoomstart = {x: coordObj.clientX - canvas.offsetLeft,
529 y: coordObj.clientY - canvas.offsetTop};
530 imgBackup = context.getImageData(0, 0, canvas.width, canvas.height);
535 context.putImageData(imgBackup, 0, 0);
536 var zoomend = {x: coordObj.clientX - canvas.offsetLeft,
537 y: coordObj.clientY - canvas.offsetTop};
539 // make sure zoomend is bigger than zoomstart
540 if ((zoomend.x == zoomstart.x) || (zoomend.y == zoomstart.y)) {
541 // cannot zoom what has no area, discard it
542 zoomstart = undefined;
545 if (zoomend.x < zoomstart.x)
546 [zoomend.x, zoomstart.x] = [zoomstart.x, zoomend.x];
547 if (zoomend.y < zoomstart.y)
548 [zoomend.y, zoomstart.y] = [zoomstart.y, zoomend.y];
550 if (gCurrentImageData) {
551 // determine new "coordinates"
552 var CWidth = gCurrentImageData.C_max.r - gCurrentImageData.C_min.r;
553 var CHeight = gCurrentImageData.C_max.i - gCurrentImageData.C_min.i;
554 var newC_min = new complex(
555 gCurrentImageData.C_min.r + zoomstart.x / gCurrentImageData.iWidth * CWidth,
556 gCurrentImageData.C_min.i + zoomstart.y / gCurrentImageData.iHeight * CHeight);
557 var newC_max = new complex(
558 gCurrentImageData.C_min.r + zoomend.x / gCurrentImageData.iWidth * CWidth,
559 gCurrentImageData.C_min.i + zoomend.y / gCurrentImageData.iHeight * CHeight);
562 var newC_min = new complex(-2, -1.5);
563 var newC_max = new complex(1, 1.5);
566 adjustCoordsAndDraw(newC_min, newC_max);
568 zoomstart = undefined;
573 context.putImageData(imgBackup, 0, 0);
574 context.strokeStyle = "rgb(255,255,31)";
575 context.strokeRect(zoomstart.x, zoomstart.y,
576 coordObj.clientX - canvas.offsetLeft - zoomstart.x,
577 coordObj.clientY - canvas.offsetTop - zoomstart.y);
584 function drawIfEmpty() {
585 if (!gCurrentImageData) {
590 function toggleSettings() {
591 var fs = document.getElementById("settings");
592 if (fs.style.display != "block") {
593 fs.style.display = "block";
596 fs.style.display = "none";
601 if (gLastImageData) {
602 document.getElementById("iterMax").value = gLastImageData.iterMax;
603 // use gLastImageData.iWidth, gLastImageData.iHeight ???
604 adjustCoordsAndDraw(gLastImageData.C_min, gLastImageData.C_max);
605 gLastImageData = undefined;
606 document.getElementById("backButton").disabled = true;
610 function setIter(aIter) {
611 gPrefs.set("iteration_max", aIter);
612 document.getElementById("iterMax").value = aIter;
615 function setPalette(aPaletteID) {
616 gPrefs.set("color_palette", aPaletteID);
617 document.getElementById("palette").value = aPaletteID;
618 gColorPalette = getColorPalette(aPaletteID);
621 function setAlgorithm(algoID) {
622 gPrefs.set("use_algorithm", algoID);
623 //document.getElementById("algorithm").value = algoID;
629 get: function(aKey, aCallback) {
632 var transaction = mainDB.transaction([this.objStore]);
633 var request = transaction.objectStore(this.objStore).get(aKey);
634 request.onsuccess = function(event) {
635 aCallback(request.result, event);
637 request.onerror = function(event) {
638 // Errors can be handled here.
639 aCallback(undefined, event);
643 set: function(aKey, aValue, aCallback) {
647 var transaction = mainDB.transaction([this.objStore], "readwrite");
648 var objStore = transaction.objectStore(this.objStore);
649 var request = objStore.put(aValue, aKey);
650 request.onsuccess = function(event) {
653 aCallback(success, event);
655 request.onerror = function(event) {
656 // Errors can be handled here.
658 aCallback(success, event);
662 unset: function(aKey, aCallback) {
666 var transaction = mainDB.transaction([this.objStore], "readwrite");
667 var request = transaction.objectStore(this.objStore).delete(aKey);
668 request.onsuccess = function(event) {
671 aCallback(success, event);
673 request.onerror = function(event) {
674 // Errors can be handled here.
676 aCallback(success, event);
682 objStore: "bookmarks",
684 getList: function(aCallback) {
687 var transaction = mainDB.transaction([this.objStore]);
688 var objStore = transaction.objectStore(this.objStore);
689 if (objStore.getAll) { // currently Mozilla-specific
690 objStore.getAll().onsuccess = function(event) {
691 aCallback(event.target.result);
694 else { // Use cursor (standard method).
696 objStore.openCursor().onsuccess = function(event) {
697 var cursor = event.target.result;
699 BMs[cursor.key] = cursor.value;
709 get: function(aKey, aCallback) {
712 var transaction = mainDB.transaction([this.objStore]);
713 var request = transaction.objectStore(this.objStore).get(aKey);
714 request.onsuccess = function(event) {
715 aCallback(request.result, event);
717 request.onerror = function(event) {
718 // Errors can be handled here.
719 aCallback(undefined, event);
723 set: function(aKey, aValue, aCallback) {
727 var transaction = mainDB.transaction([this.objStore], "readwrite");
728 var objStore = transaction.objectStore(this.objStore);
729 var request = objStore.put(aValue, aKey);
730 request.onsuccess = function(event) {
733 aCallback(success, event);
735 request.onerror = function(event) {
736 // Errors can be handled here.
738 aCallback(success, event);
742 unset: function(aKey, aCallback) {
746 var transaction = mainDB.transaction([this.objStore], "readwrite");
747 var request = transaction.objectStore(this.objStore).delete(aKey);
748 request.onsuccess = function(event) {
751 aCallback(success, event);
753 request.onerror = function(event) {
754 // Errors can be handled here.
756 aCallback(success, event);
760 clear: function(aCallback) {
764 var transaction = mainDB.transaction([this.objStore], "readwrite");
765 var request = transaction.objectStore(this.objStore).clear();
766 request.onsuccess = function(event) {
769 aCallback(success, event);
771 request.onerror = function(event) {
772 // Errors can be handled here.
774 aCallback(success, event);