Working zoom in

.gitignore

@@ -0,0 +1,65 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+firebase-debug.log*
+
+# Firebase cache
+.firebase/
+
+# Firebase config
+
+# Uncomment this if you'd like others to create their own Firebase project.
+# For a team working on the same Firebase project(s), it is recommended to leave
+# it commented so all members can deploy to the same project(s) in .firebaserc.
+# .firebaserc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

fractal.js

@@ -0,0 +1,294 @@
+function hslToRgb(h, s, l) 
+// source https://gist.github.com/mjackson/5311256
+{
+  var r, g, b;
+
+  if (s == 0) {
+    r = g = b = l; // achromatic
+  } else {
+    function hue2rgb(p, q, t) {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1/6) return p + (q - p) * 6 * t;
+      if (t < 1/2) return q;
+      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      return p;
+    }
+
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    var p = 2 * l - q;
+
+    r = hue2rgb(p, q, h + 1/3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1/3);
+  }
+
+  return [ r * 255, g * 255, b * 255 ];
+}
+
+function mandelDepth(a, b, h, w, iteration) {
+	let ca = a;
+	let cb = b;
+
+	var n = 0;
+
+	while (n < iteration) {
+		let aa = a * a - b * b;
+	    let bb = 2 * a * b;
+	    a = aa + ca;
+	    b = bb + cb;
+	    if (a * a + b * b > 5) {
+	      break;
+	    }
+		n++;
+	}
+	return n;
+}
+
+let genericMandel = function(c, div, w, h){
+	function genericMandelHelper(p){
+		let iteration;
+		let flags;
+		//let  w = 900;
+		//let  h = 700;
+		p.setup = function(){
+			p.createCanvas(w, h);
+			p.pixelDensity(1);
+			p.frameRate(5);
+			iteration = 0;
+			//flags = new Array(w*h).fill(0);
+		};
+
+		p.draw = function(){
+			p.loadPixels();
+			for (var x = 0; x < w; x++){
+				for (var y = 0; y < h; y++){
+					if(true){
+
+						let a = p.map(x, 0, w, -2.3, 1.3);
+						let b = p.map(y, 0, h, -1.5, 1.5);
+
+						let n = mandelDepth(a, b, h, w, iteration);
+
+					    //if(n < iteration) flags[x+y*w] = 1; // hit the limit, no need to recalc
+
+					    let color = iteration == 0? 0 : hslToRgb(c, 1, ( (n/iteration)));
+
+						let pix = (x + y * w) * 4;
+
+						p.pixels[pix + 0] = color[0];
+						p.pixels[pix + 1] = color[1];
+						p.pixels[pix + 2] = color[2];
+						p.pixels[pix + 3] = 255; // alpha channel
+					}
+				} 
+			}
+			iteration++;
+			if(iteration == 30){ 
+				iteration = 0;
+				//flags.fill(0);
+			}
+			p.updatePixels();
+		}
+	}
+	return new p5(genericMandelHelper, div);
+}
+
+let genericStaticMandel = function(c, div, w, h, deep){
+	function genericMandelHelper(p){
+		//let iteration;
+		let flags;
+		//let  w = 900;
+		//let  h = 700;
+		p.setup = function(){
+			p.createCanvas(w, h);
+			p.pixelDensity(1);
+
+			p.loadPixels();
+
+			for (var x = 0; x < w; x++){
+				for (var y = 0; y < h; y++){
+					if(true){
+
+						let a = p.map(x, 0, w, -2.3, 1.3);
+						let b = p.map(y, 0, h, -1.3, 1.3);
+						let n = mandelDepth(a, b, h, w, deep);
+						let color =  hslToRgb(c, 1, ( (n/deep)));
+						let pix = (x + y * w) * 4;
+
+						p.pixels[pix + 0] = color[0];
+						p.pixels[pix + 1] = color[1];
+						p.pixels[pix + 2] = color[2];
+						p.pixels[pix + 3] = 255; // alpha channel
+					}
+				} 
+			}
+		p.updatePixels();
+		var event = new Event('setupDone');
+		document.getElementById(div).dispatchEvent(event);
+		}
+	}
+	return new p5(genericMandelHelper, div);
+}
+
+let genericInteractiveMandel = function(c, div, w, h, deep, ox1, ox2, oy1, oy2, x1, x2, y1, y2){
+	function genericMandelHelper(p){
+		//let iteration;
+		let flags;
+		//let  w = 900;
+		//let  h = 700;
+		p.setup = function(){
+			p.createCanvas(w, h);
+			p.pixelDensity(1);
+
+			p.loadPixels();
+
+			let lx = p.map(x1, 0, w, ox1, ox2);
+			let rx = p.map(x2, 0, w, ox1, ox2);
+			let ly = p.map(y1, 0, h, oy1, oy2);
+			let ry = p.map(y2, 0, h, oy1, oy2);
+
+			for (var x = 0; x < w; x++){
+				for (var y = 0; y < h; y++){
+					if(true){
+
+						let a = p.map(x, 0, w, lx, rx);
+						let b = p.map(y, 0, h, ly, ry);
+						let n = mandelDepth(a, b, h, w, deep);
+						let color =  hslToRgb(c, 1, ( (n/deep)));
+						let pix = (x + y * w) * 4;
+
+						p.pixels[pix + 0] = color[0];
+						p.pixels[pix + 1] = color[1];
+						p.pixels[pix + 2] = color[2];
+						p.pixels[pix + 3] = 255; // alpha channel
+					}
+				} 
+			}
+		p.updatePixels();
+		let evt = new CustomEvent('setupDone', {detail: {x1: lx, 
+					x2: rx, 
+					y1: ly, 
+					y2: ry}});
+		document.getElementById(div).dispatchEvent(evt);
+		}
+	}
+	return new p5(genericMandelHelper, div);
+}
+
+let squareOverlay = function(div, w, h) {
+		function squareOverlayHelper(p){
+		//let iteration;
+		let draws;
+		let square;
+		let xcoord1, xcoord2, ycoord1, ycoord2;
+		//let  w = 900;
+		//let  h = 700;
+		p.setup = function(){
+			p.createCanvas(w, h);
+			p.pixelDensity(1);
+			p.stroke(255, 204, 0);
+			p.noFill();
+			function Sqr() {
+				this.display = function() {
+					p.rect(Math.min(xcoord1, xcoord2), 
+						   Math.min(ycoord1, ycoord2), 
+						   Math.max(xcoord1, xcoord2) - Math.min(xcoord1, xcoord2), 
+						   Math.max(ycoord1, ycoord2) - Math.min(ycoord1, ycoord2));
+				}
+			}
+
+			square = new Sqr();
+
+			function firstCorner() {
+				xcoord1 = p.pmouseX;
+				ycoord1 = p.pmouseY;
+				xcoord2 = p.pmouseX;
+				ycoord2 = p.pmouseY;
+
+				draws = 1;
+				document.getElementById(div).removeEventListener("mousedown", firstCorner);
+				document.getElementById(div).addEventListener("mouseup", secondCorner);
+			}
+
+			function secondCorner() {
+				xcoord2 = p.pmouseX;
+				ycoord2 = p.pmouseY;
+				draws = 0;
+				document.getElementById(div).removeEventListener("mouseup", secondCorner);
+				document.getElementById(div).addEventListener("mousedown", firstCorner);
+				let evt = new CustomEvent('zoom', {detail: {x1: Math.min(xcoord1, xcoord2), 
+					x2: Math.max(xcoord1, xcoord2), 
+					y1: Math.min(ycoord1, ycoord2), 
+					y2: Math.max(ycoord1, ycoord2)}});
+				document.getElementById(div).dispatchEvent(evt);
+			}
+
+			document.getElementById(div).addEventListener("mousedown", firstCorner);
+		}
+
+		p.draw = function() {
+			p.clear();
+			xcoord2 = p.pmouseX;
+			ycoord2 = p.pmouseY;
+			if(draws) {
+				square.display();
+				// console.log(Math.min(xcoord1, xcoord2), Math.min(ycoord1, ycoord2), Math.max(xcoord1, xcoord2), Math.max(ycoord1, ycoord2));
+			}
+		}
+	}
+	return new p5(squareOverlayHelper, div);
+}
+/*
+for (i = 1; i < 10; i++){
+	var x = document.createElement("div");
+	x.id = 'c' + i;
+	genericMandel(1/i, 'c'+i);
+}*/
+window.onload = function() {
+	/*
+	let colors = [0.9, 0.3, 0.6]
+	let i = 0;
+	setInterval(function() {
+		document.getElementById("c1").innerHTML = '';
+		col = Math.random();
+		de = Math.floor(Math.random()*70);
+		genericStaticMandel(col, 'c1', 1000, 700, de);
+		console.log(col + ': ' + de);
+		//i = (i+1)%colors.length;
+	}, 1000);
+	*/
+	document.getElementById("c1").addEventListener('setupDone', function(e) {
+		document.getElementById("c1").childNodes[0].nodeValue = '';
+		ox1 = e.detail.x1;
+		ox2 = e.detail.x2;
+		oy1 = e.detail.y1;
+		oy2 = e.detail.y2;
+	});
+	w = 1200;
+	h = 800;
+
+	let ox1 = -2.3;
+	let ox2 = 1.3;
+	let oy1 = -1.3;
+	let oy2 = 1.3;
+
+	genericInteractiveMandel(0.8115176388506955, 'c1', w, h, 200, ox1, ox2, oy1, oy2, 0, w, 0, h);
+	squareOverlay('c2', w, h);
+	document.getElementById('c2').addEventListener('zoom', function(e) {
+		document.getElementById("c1").innerHTML = '';
+		console.log(e)
+		console.log(ox1, ox2, oy1, oy2, e.detail.x1, e.detail.y1, e.detail.x2, e.detail.y2)
+		genericInteractiveMandel(0.8115176388506955, 'c1', w, h, 200, ox1, ox2, oy1, oy2, e.detail.x1, e.detail.x2, e.detail.y1, e.detail.y2);
+		console.log('this worked')
+	})
+};
+
+function reset() {
+	location.reload();
+}
+
+
+
+// Simple example, see optional options for more configuration.
+