// Maximum number of iterations for each point on the complex plane
const MAX_ITERATIONS = 32;

let cnv_mandel;
let cnv_julia;
let prev_ca = 0, prev_cb = 0; 

let elem_coord = document.getElementById("coord");

function setup() {
  pixelDensity(1);
  createCanvas(320,480);
  
  cnv_mandel = createGraphics(320, 240);
  cnv_julia = createGraphics(320, 240);
  colorMode(HSB);
  
  updateMandel();
  
}

function draw() {
  image(cnv_mandel,0,0);
  updateJulia();
  image(cnv_julia,0,height/2);
}
var zoom = 4;

// function mouseWheel(e) {
//   if (e.delta > 0) {
//     zoom *= 1.1;  
//   } else {
//     zoom /= 1.1;
//   }
  
// }

function updateJulia() {
   //var ca = lerp(prev_ca, map(mouseX, 0, cnv_julia.width, -2, 1),.3);//-0.70176;
   //var cb = lerp(prev_cb, map(mouseY%cnv_julia.height, 0, cnv_julia.height, -1, 1),.3);//-0.70176;
  let ca = map(mouseX, 0, cnv_julia.width, -2, 1);
  let cb = map(mouseY%cnv_julia.height, 0, cnv_julia.height, -1, 1);
  
  prev_ca = ca; 
  prev_cb = cb;
  cnv_julia.background(255);

  elem_coord.innerHTML = ca.toFixed(4) + " + " + cb.toFixed(4) + "i";
  // Establish a range of values on the complex plane
  // A different range will allow us to "zoom" in or out on the fractal

  // It all starts with the width, try higher or lower values
  //float w = abs(sin(angle))*5;
  let w = zoom;
  let h = (w * cnv_julia.height) / cnv_julia.width;

  // Start at negative half the width and height
  let xmin = -w/2;
  let ymin = -h/2;

  // Make sure we can write to the pixels[] array.
  // Only need to do this once since we don't do any other drawing.
  cnv_julia.loadPixels();
  // x goes from xmin to xmax
  let xmax = xmin + w;
  // y goes from ymin to ymax
  let ymax = ymin + h;

  // Calculate amount we increment x,y for each pixel
  let dx = (xmax - xmin) / (cnv_julia.width);
  let dy = (ymax - ymin) / (cnv_julia.height);

  // Start y
  let y = ymin;
  for (let j = 0; j < cnv_julia.height; j++) {
    // Start x
    let x = xmin;
    for (let i = 0; i < cnv_julia.width; i++) {

      // Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
      let a = x;
      let b = y;
      let n = 0;
      while (n < MAX_ITERATIONS) {
        let aa = a * a;
        let bb = b * b;
        // Infinity in our finite world is simple, let's just consider it 16
        if (aa + bb > 8.0) {
          break;  // Bail
        }
        let twoab = 2.0 * a * b;
        a = aa - bb + ca;
        b = twoab + cb;
        n++;
      }

      // We color each pixel based on how long it takes to get to infinity
      // If we never got there, let's pick the color black
      let pix = 4 * (i + j*width);
      
      if (n == MAX_ITERATIONS) {
        cnv_julia.pixels[pix] = 0;
        cnv_julia.pixels[pix+1] = 0;
        cnv_julia.pixels[pix+2] = 0;
        cnv_julia.pixels[pix+3] = 255;
      } else {
        // Gosh, we could make fancy colors here if we wanted
        let hu = ((n / MAX_ITERATIONS) * 360) % 360;
        let c = color(hu,100,Math.pow(n/MAX_ITERATIONS,.25)*100);
        
        cnv_julia.pixels[pix] = red(c); // color(hu, 100, 100);
        cnv_julia.pixels[pix+1] = green(c); // color(hu, 100, 100);
        cnv_julia.pixels[pix+2] = blue(c); // color(hu, 100, 100);
        cnv_julia.pixels[pix+3] = 255; // color(hu, 100, 100);
      }
      x += dx;
    }
    y += dy;
  }
  cnv_julia.updatePixels();
}

function  updateMandel() {
  cnv_mandel.background(255);

  // Start at negative half the width and height
  let xmin = -2;
  let ymin = -1;

  // Make sure we can write to the pixels[] array.
  // Only need to do this once since we don't do any other drawing.
  cnv_mandel.loadPixels();

  // x goes from xmin to xmax
  let xmax = 1;
  // y goes from ymin to ymax
  let ymax = 1;

  // Calculate amount we increment x,y for each pixel
  let dx = (xmax - xmin) / (cnv_mandel.width);
  let dy = (ymax - ymin) / (cnv_mandel.height);

  // Start y
  var y = ymin;
  for (let j = 0; j < cnv_mandel.height; j++) {
    // Start x
    let x = xmin;
    for (let i = 0; i < cnv_mandel.width; i++) {

      // Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
      let a = x;
      let b = y;
      
      let ca = a;
      let cb = b;
      
      let n = 0;
      while (n < MAX_ITERATIONS) {
        let aa = a * a - b * b;
        let bb = 2 * a * b;
        a = aa + ca;
        b = bb + cb;
        if (a * a + b * b > 16) {
          break;
        }
        n++;
      }

      // We color each pixel based on how long it takes to get to infinity
      // If we never got there, let's pick the color black
      let pix = 4 * (i + j*cnv_mandel.width);
      
      if (n == MAX_ITERATIONS) {
        cnv_mandel.pixels[pix] = 0;
        cnv_mandel.pixels[pix+1] = 0;
        cnv_mandel.pixels[pix+2] = 0;
        cnv_mandel.pixels[pix+3] = 255;
      } else {
        // Gosh, we could make fancy colors here if we wanted
        let hu = ((n / MAX_ITERATIONS) * 360) % 360;
        let c = color(hu,100,Math.pow(n/MAX_ITERATIONS,.25)*100);
        
        cnv_mandel.pixels[pix] = red(c); // color(hu, 100, 100);
        cnv_mandel.pixels[pix+1] = green(c); // color(hu, 100, 100);
        cnv_mandel.pixels[pix+2] = blue(c); // color(hu, 100, 100);
        cnv_mandel.pixels[pix+3] = 255; // color(hu, 100, 100);
      }
      x += dx;
    }
    y += dy;
  }
  cnv_mandel.updatePixels();
}