diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..0b89b95
Binary files /dev/null and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f626852
--- /dev/null
+++ b/.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
diff --git a/fractal.js b/fractal.js
new file mode 100644
index 0000000..df3aa55
--- /dev/null
+++ b/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.
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2c43467
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Rasskin.com
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+