function getScriptPath(foo) { return window.URL.createObjectURL( new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]] , {type: 'text/javascript'}) ); } var worker = new Worker(getScriptPath(function() { function hsv_to_rgb(h, s, v) { if ( v > 1.0 ) v = 1.0; var hp = h / 60.0; var c = v * s; var x = c*(1 - Math.abs((hp % 2) - 1)); var rgb = [0,0,0]; if ( 0<=hp && hp<1 ) rgb = [c, x, 0]; if ( 1<=hp && hp<2 ) rgb = [x, c, 0]; if ( 2<=hp && hp<3 ) rgb = [0, c, x]; if ( 3<=hp && hp<4 ) rgb = [0, x, c]; if ( 4<=hp && hp<5 ) rgb = [x, 0, c]; if ( 5<=hp && hp<6 ) rgb = [c, 0, x]; var m = v - c; rgb[0] += m; rgb[1] += m; rgb[2] += m; rgb[0] *= 255; rgb[1] *= 255; rgb[2] *= 255; rgb[0] = parseInt ( rgb[0] ); rgb[1] = parseInt ( rgb[1] ); rgb[2] = parseInt ( rgb[2] ); return rgb; } self.addEventListener('message', function(e) { var img = e.data.img; var x0 = e.data.x0; var x1 = e.data.x1; var y0 = e.data.y0; var y1 = e.data.y1; var w = e.data.w; var width = e.data.width; var height = e.data.height; var maxIteration = e.data.maxIteration; var iData = 0; for(var y = 0; y < height; y++) { for(var x = 0; x < width; x++) { var i = 0; var cx = x0 + x * (x1 - x0) / width; var cy = y0 + y * (y1 - y0) / height; var zx = 0; var zy = 0; do { var xt = zx * zy; zx = zx * zx - zy * zy + cx; zy = 2 * xt + cy; i++; } while (i < maxIteration && (zx * zx + zy * zy) < 4); var hue = 360; if (i < maxIteration) { hue = (i + 1 - Math.log(Math.log(Math.sqrt(zx * zx + zy * zy))) / Math.log(2)); //hue = i / maxIteration * 360; hue = 20.0 * hue % 360; } var rgb = hsv_to_rgb(hue, 0.8, 1.0); img.data[iData++] = rgb[0]; img.data[iData++] = rgb[1]; img.data[iData++] = rgb[2]; img.data[iData++] = 255; } self.postMessage({end: false}); } self.postMessage({end: true, img: img}); }, false); })); worker.addEventListener('message', function(e) { if (e.data.end) { context.putImageData(e.data.img, 0, 0); } else { progress.value++; } }, false); var x0; var y0; var w; var maxIteration; var canvas; var context; var img; var progress; function updateInputs() { document.getElementById("x").value = x0; document.getElementById("y").value = y0; document.getElementById("w").value = w; document.getElementById("mi").value = maxIteration; document.getElementById("xml").value = "\n\t" + x0 + "\n\t" + y0 + "\n\t" + w + "\n\t" + maxIteration + "\n"; } window.onload = function() { alert("Click or touch on image to Zoom\n" + "Play with variables to see amazing images\n" + "Share your favorite images with copy and paste XML\n" + "Upvote if you like" ); x0 = 0; y0 = 0; w = 2.5; maxIteration = 256; canvas = document.getElementById("canvas"); context = canvas.getContext("2d"); img = context.getImageData(0, 0, canvas.width, canvas.height); progress = document.getElementById("progress"); progress.value = 0; progress.max = canvas.height; updateInputs(); document.getElementById("canvas").addEventListener('click', function(evt) { x0 += (evt.pageX - canvas.offsetLeft) / canvas.width * 2 * w; y0 += (evt.pageY - canvas.offsetTop) / canvas.height * 2 * w * canvas.height/canvas.width; w /= 2; updateInputs(); StartDraw(); }, false); document.getElementById("form1").addEventListener('submit', function(evt) { evt.preventDefault(); x0 = document.getElementById("x").value; y0 = document.getElementById("y").value; w = document.getElementById("w").value; maxIteration = document.getElementById("mi").value; updateInputs(); StartDraw(); }, false); document.getElementById("form2").addEventListener('submit', function(evt) { evt.preventDefault(); var parser = new DOMParser(); var xmlDoc = parser.parseFromString(document.getElementById("xml").value, "text/xml"); x0 = xmlDoc.getElementsByTagName("x")[0].childNodes[0].nodeValue; y0 = xmlDoc.getElementsByTagName("y")[0].childNodes[0].nodeValue; w = xmlDoc.getElementsByTagName("w")[0].childNodes[0].nodeValue; maxIteration = xmlDoc.getElementsByTagName("mi")[0].childNodes[0].nodeValue; updateInputs(); StartDraw(); }, false); document.getElementById("form3").addEventListener('submit', function(evt) { evt.preventDefault(); x0 = 0; y0 = 0; w = 2.5; maxIteration = 256; updateInputs(); StartDraw(); }, false); StartDraw(); } function StartDraw() { progress.value = 0; x0 = x0 - w; x1 = x0 + 2 * w; y0 = y0 - w * canvas.height / canvas.width; y1 = y0 + 2 * w * canvas.height / canvas.width; worker.postMessage({img: img, x0: x0, x1: x1, y0: y0, y1: y1, w: w , width: canvas.width, height: canvas.height, maxIteration: maxIteration}); }

Mandelbrot set Fractal