From becdac357a7eb5f111b25338924ea2cca7f90b01 Mon Sep 17 00:00:00 2001 From: Robert Kaiser Date: Sun, 18 Dec 2011 02:47:17 +0100 Subject: [PATCH] enable zooming in mandelbrot app and add a few other things to the code for later improvement --- index.html | 7 +- js/mandelbrot.js | 376 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 351 insertions(+), 32 deletions(-) diff --git a/index.html b/index.html index 32648f7..e77bb9e 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,14 @@ - +

KaiRo.at Mandelbrot Web

Image data @@ -37,6 +39,9 @@ Max: + + +

diff --git a/js/mandelbrot.js b/js/mandelbrot.js index ed49cc4..ace0ded 100644 --- a/js/mandelbrot.js +++ b/js/mandelbrot.js @@ -38,6 +38,173 @@ var gColorPalette = []; var gStartTime = 0; +var gCurrentImageData; +var gLastImageData; + +function Startup() { + var img = document.getElementById("mbrotImage"); + img.addEventListener("mouseup", imgEvHandler, false); + img.addEventListener("mousedown", imgEvHandler, false); + img.addEventListener("mousemove", imgEvHandler, false); + img.addEventListener("touchstart", imgEvHandler, false); + img.addEventListener("touchend", imgEvHandler, false); + img.addEventListener("touchcancel", imgEvHandler, false); + img.addEventListener("touchleave", imgEvHandler, false); + img.addEventListener("touchmove", imgEvHandler, false); +} + +function getAdjustVal(aName) { + var value; + switch (aName) { + case "image.width": + case "image.height": + value = 0; + try { + value = document.getElementById(aName.replace(".", "_")).value; + } + catch (e) { } + if ((value < 10) || (value > 5000)) { + value = 300; + //document.getElementById(aName.replace(".", "_")).value = value; + } + return value; + case "last_image.Cr_*": + var Cr_min = -2.0; + var Cr_max = 1.0; + try { + Cr_min = parseFloat(document.getElementById("Cr_min").value); + Cr_max = parseFloat(document.getElementById("Cr_max").value); + } + catch (e) { } + if ((Cr_min < -3) || (Cr_min > 2) || + (Cr_max < -3) || (Cr_max > 2) || (Cr_min >= Cr_max)) { + Cr_min = -2.0; Cr_max = 1.0; + } + document.getElementById("Cr_min").value = Cr_min; + document.getElementById("Cr_max").value = Cr_max; + return {Cr_min: Cr_min, Cr_max: Cr_max}; + case "last_image.Ci_*": + var Ci_min = -1.5; + var Ci_max = 1.5; + try { + Ci_min = parseFloat(document.getElementById("Ci_min").value); + Ci_max = parseFloat(document.getElementById("Ci_max").value); + } + catch (e) { } + if ((Ci_min < -2.5) || (Ci_min > 2.5) || + (Ci_max < -2.5) || (Ci_max > 2.5) || (Ci_min >= Ci_max)) { + Ci_min = -1.5; Ci_max = 1.5; + } + document.getElementById("Ci_min").value = Ci_min; + document.getElementById("Ci_max").value = Ci_max; + return {Ci_min: Ci_min, Ci_max: Ci_max}; + case "iteration_max": + value = 500; + try { + value = document.getElementById("iterMax").value; + } + catch (e) { + setIter(value); + } + if (value < 10 || value > 10000) { + value = 500; + setIter(value); + } + return value; + case "use_algorithm": + value = "numeric"; + try { + value = document.getElementById("algorithm").value; + } + catch (e) { + setAlgorithm(value); + } + return value; + case "color_palette": + value = "kairo"; + try { + value = document.getElementById("palette").value; + } + catch(e) { + setPalette(value); + } + return value; + case "syncProportions": + value = true; + try { + value = document.getElementById("proportional").value; + } + catch(e) { + document.getElementById("proportional").value = value; + } + return value; + default: + return false; + } +} + +function setVal(aName, aValue) { + switch (aName) { + case "image.width": + case "image.height": + document.getElementById(aName.replace(".", "_")).value = value; + break; + case "last_image.Cr_*": + document.getElementById("Cr_min").value = aValue.Cr_min; + document.getElementById("Cr_max").value = aValue.Cr_max; + break; + case "last_image.Ci_*": + document.getElementById("Ci_min").value = aValue.Ci_min; + document.getElementById("Ci_max").value = aValue.Ci_max; + break; + case "iteration_max": + setIter(aValue); + break; + case "use_algorithm": + setAlgorithm(aValue); + break; + case "color_palette": + setPalette(valueaValue); + break; + case "syncProportions": + document.getElementById("proportional").value = aValue; + break; + } +} + +function adjustCoordsAndDraw(aC_min, aC_max) { + var iWidth = getAdjustVal("image.width"); + var iHeight = getAdjustVal("image.height"); + + // correct coordinates + if (aC_min.r < -2) + aC_min.r = -2; + if (aC_max.r > 2) + aC_max.r = 2; + if ((aC_min.r > 2) || (aC_max.r < -2) || (aC_min.r >= aC_max.r)) { + aC_min.r = -2.0; aC_max.r = 1.0; + } + if (aC_min.i < -2) + aC_min.i = -2; + if (aC_max.i > 2) + aC_max.i = 2; + if ((aC_min.i > 2) || (aC_max.i < -2) || (aC_min.i >= aC_max.i)) { + aC_min.i = -1.3; aC_max.i = 1.3; + } + + var CWidth = aC_max.r - aC_min.r; + var CHeight = aC_max.i - aC_min.i; + var C_mid = new complex(aC_min.r + CWidth / 2, aC_min.i + CHeight / 2); + + var CRatio = Math.max(CWidth / iWidth, CHeight / iHeight); + + setVal("last_image.Cr_*", {Cr_min: C_mid.r - iWidth * CRatio / 2, + Cr_max: C_mid.r + iWidth * CRatio / 2}); + setVal("last_image.Ci_*", {Ci_min: C_mid.i - iHeight * CRatio / 2, + Ci_max: C_mid.i + iHeight * CRatio / 2}); + + drawImage(); +} function drawImage() { var canvas = document.getElementById("mbrotImage"); @@ -45,39 +212,22 @@ function drawImage() { document.getElementById("calcTime").textContent = "--"; + if (gCurrentImageData) { + gLastImageData = gCurrentImageData; + } + gColorPalette = getColorPalette(document.getElementById("palette").value); - var Cr_min = -2.0; - var Cr_max = 1.0; - try { - Cr_min = parseFloat(document.getElementById("Cr_min").value); - Cr_max = parseFloat(document.getElementById("Cr_max").value); - } - catch (e) { } - if ((Cr_min < -2) || (Cr_min > 2) || - (Cr_max < -2) || (Cr_max > 2) || (Cr_min >= Cr_max)) { - Cr_min = -2.0; Cr_max = 1.0; - } - document.getElementById("Cr_min").value = Cr_min; - document.getElementById("Cr_max").value = Cr_max; - - var Ci_min = -1.5; - var Ci_max = 1.5; - try { - Ci_min = parseFloat(document.getElementById("Ci_min").value); - Ci_max = parseFloat(document.getElementById("Ci_max").value); - } - catch (e) { } - if ((Ci_min < -2) || (Ci_min > 2) || - (Ci_max < -2) || (Ci_max > 2) || (Ci_min >= Ci_max)) { - Ci_min = -1.5; Ci_max = 1.5; - } - document.getElementById("Ci_min").value = Ci_min; - document.getElementById("Ci_max").value = Ci_max; + var Cr_vals = getAdjustVal("last_image.Cr_*"); + var Cr_min = Cr_vals.Cr_min; + var Cr_max = Cr_vals.Cr_max; - //var algorithm = gPref.getCharPref("mandelbrot.use_algorithm"); - var iterMax = parseInt(document.getElementById("iterMax").value); - var algorithm = "numeric"; //"oo" + var Ci_vals = getAdjustVal("last_image.Ci_*"); + var Ci_min = Ci_vals.Ci_min; + var Ci_max = Ci_vals.Ci_max; + + var iterMax = getAdjustVal("iteration_max"); + var algorithm = getAdjustVal("use_algorithm"); var iWidth = canvas.width; if ((iWidth < 10) || (iWidth > 5000)) { @@ -90,6 +240,14 @@ function drawImage() { canvas.height = iHeight; } + gCurrentImageData = { + C_min: new complex(Cr_min, Ci_min), + C_max: new complex(Cr_max, Ci_max), + iWidth: iWidth, + iHeight: iHeight, + iterMax: iterMax + }; + context.fillStyle = "rgba(255, 255, 255, 127)"; context.fillRect(0, 0, canvas.width, canvas.height); @@ -243,6 +401,59 @@ function getColorPalette(palName) { } palette[1024] = [0, 0, 0, 255]; break; + case 'rainbow-squared1': + for (var i = 0; i < 34; i++) { + var cc = Math.floor(i * 255 / 33); + palette[i] = [cc, 0, 0, 255]; + } + for (var i = 0; i < 137; i++) { + var cc = Math.floor(i * 255 / 136); + palette[34 + i] = [255, cc, 0, 255]; + } + for (var i = 0; i < 307; i++) { + var cc = Math.floor(i * 255 / 306); + palette[171 + i] = [255 - cc, 255, cc, 255]; + } + for (var i = 0; i < 546; i++) { + var cc = Math.floor(i * 255 / 545); + palette[478 + i] = [cc, 255 - cc, 255, 255]; + } + palette[1024] = [0, 0, 0, 255]; + break; + case 'rainbow-linear2': + for (var i = 0; i < 205; i++) { + var cc = Math.floor(i * 255 / 204); + palette[i] = [255, cc, 0, 255]; + palette[204 + i] = [255 - cc, 255, 0, 255]; + palette[409 + i] = [0, 255, cc, 255]; + palette[614 + i] = [0, 255 - cc, 255, 255]; + palette[819 + i] = [cc, 0, 255, 255]; + } + palette[1024] = [0, 0, 0, 255]; + break; + case 'rainbow-squared2': + for (var i = 0; i < 19; i++) { + var cc = Math.floor(i * 255 / 18); + palette[i] = [255, cc, 0, 255]; + } + for (var i = 0; i < 74; i++) { + var cc = Math.floor(i * 255 / 73); + palette[19 + i] = [255 - cc, 255, 0, 255]; + } + for (var i = 0; i < 168; i++) { + var cc = Math.floor(i * 255 / 167); + palette[93 + i] = [0, 255, cc, 255]; + } + for (var i = 0; i < 298; i++) { + var cc = Math.floor(i * 255 / 297); + palette[261 + i] = [0, 255 - cc, 255, 255]; + } + for (var i = 0; i < 465; i++) { + var cc = Math.floor(i * 255 / 464); + palette[559 + i] = [cc, 0, 255, 255]; + } + palette[1024] = [0, 0, 0, 255]; + break; } return palette; } @@ -263,6 +474,87 @@ function drawPoint(context, img_x, img_y, C, iterMax, algorithm) { // ########## UI functions ########## +var zoomstart; +var imgBackup; +var zoomTouchID; + +var imgEvHandler = { + handleEvent: function(aEvent) { + var canvas = document.getElementById("mbrotImage"); + var context = canvas.getContext("2d"); + var touchEvent = aEvent.type.indexOf('touch') != -1; + + // Bail out if this is neither a touch nor left-click. + if (!touchEvent && aEvent.button != 0) + return; + + // Bail out if the started touch can't be found. + if (touchEvent && zoomstart && + !aEvent.changedTouches.identifiedTouch(zoomTouchID)) + return; + + var coordObj = touchEvent ? + aEvent.changedTouches.identifiedTouch(zoomTouchID) : + aEvent; + + switch (aEvent.type) { + case 'mousedown': + case 'touchstart': + if (touchEvent) { + zoomTouchID = aEvent.changedTouches.item(0).identifier; + coordObj = aEvent.changedTouches.identifiedTouch(zoomTouchID); + } + // left button - start dragzoom + zoomstart = {x: coordObj.clientX - canvas.offsetLeft, + y: coordObj.clientY - canvas.offsetTop}; + imgBackup = context.getImageData(0, 0, canvas.width, canvas.height); + break; + case 'mouseup': + case 'touchend': + if (zoomstart) { + context.putImageData(imgBackup, 0, 0); + var zoomend = {x: coordObj.clientX - canvas.offsetLeft, + y: coordObj.clientY - canvas.offsetTop}; + + // make sure zoomend is bigger than zoomstart + if ((zoomend.x == zoomstart.x) || (zoomend.y == zoomstart.y)) { + // cannot zoom what has no area, discard it + zoomstart = undefined; + return; + } + if (zoomend.x < zoomstart.x) + [zoomend.x, zoomstart.x] = [zoomstart.x, zoomend.x]; + if (zoomend.y < zoomstart.y) + [zoomend.y, zoomstart.y] = [zoomstart.y, zoomend.y]; + + // determine new "coordinates" + var CWidth = gCurrentImageData.C_max.r - gCurrentImageData.C_min.r; + var CHeight = gCurrentImageData.C_max.i - gCurrentImageData.C_min.i; + var newC_min = new complex( + gCurrentImageData.C_min.r + zoomstart.x / gCurrentImageData.iWidth * CWidth, + gCurrentImageData.C_min.i + zoomstart.y / gCurrentImageData.iHeight * CHeight); + var newC_max = new complex( + gCurrentImageData.C_min.r + zoomend.x / gCurrentImageData.iWidth * CWidth, + gCurrentImageData.C_min.i + zoomend.y / gCurrentImageData.iHeight * CHeight); + + adjustCoordsAndDraw(newC_min, newC_max); + } + zoomstart = undefined; + break; + case 'mousemove': + case 'touchmove': + if (zoomstart) { + context.putImageData(imgBackup, 0, 0); + context.strokeStyle = "rgb(255,255,31)"; + context.strokeRect(zoomstart.x, zoomstart.y, + coordObj.clientX - canvas.offsetLeft - zoomstart.x, + coordObj.clientY - canvas.offsetTop - zoomstart.y); + } + break; + } + } +}; + function toggleSettings() { var fs = document.getElementById("settings"); if (fs.style.display != "block") { @@ -271,4 +563,26 @@ function toggleSettings() { else { fs.style.display = "none"; } -} \ No newline at end of file +} + +function goBack() { + if (gLastImageData) { + document.getElementById("iterMax").value = gLastImageData.iterMax; + // use gLastImageData.iWidth, gLastImageData.iHeight ??? + adjustCoordsAndDraw(gLastImageData.C_min, gLastImageData.C_max); + gLastImageData = undefined; + } +} + +function setIter(aIter) { + document.getElementById("iterMax").value = aIter; +} + +function setPalette(aPaletteID) { + document.getElementById("palette").value = aPaletteID; + gColorPalette = getColorPalette(aPaletteID); +} + +function setAlgorithm(algoID) { + //document.getElementById("algorithm").value = algoID; +} -- 2.35.3