Zoomable Mandelbrot

var x, y, zr, zi, zr2, zi2, cr, ci, n;

var zmx1, zmx2, zmy1, zmy2, f, di, dj;

var fn1, fn2, fn3, re, gr, bl, xt, yt, i=0, j=0;

let tc = [];

var nbIterByDraw;

var nmax=64;

var progress=0;

function setup() {

  nbIterByDraw=nmax*300;  // keep drawing while nIterTot<nbIterByDraw, equals 300 pixels in black (inside Mandelbrot set)

  background(0);

  cnv = createCanvas(800,600);

  di = 0;

  dj = 0;

  f = 1.5;  // zoom factor

  for(var i=0;i<nmax;i++){

    var col=((i+128)%16)*16;

    tc[i*4]=col;

    tc[i*4+1]=255-col;

    tc[i*4+2]=col * 0.3;

  }

  zmx1 = (width / 4)/(width/height);

  zmx2 = 3;

  zmy1 = (height / 4);

  zmy2 = 2;

  i=0;

  j=0;

  // fill(0);

  textSize(10);

}

function draw() {

  // display nbIter

  fill(0);

  strokeWeight(0);

  rect(0, height-12, 70, 12);

  fill(255);

  text('iterMax='+nmax, 2, height-2);

  strokeWeight(1);

  // set color of horizontal progress bar

  if (i==0) progress=255-progress;

  // display x columns of mandelbrot set, x varying along scene complexity

  for (var nIterTot=0;nIterTot<nbIterByDraw;){

    if (i <= width) i++;

    x =  (i +  di) / zmx1 - zmx2;

    for (var j = 0; j <= height; j++) {

      var y = zmy2 - (j + dj) / zmy1, zr=0, zi = 0, cr = x, ci = y, n = 0;

      for (;n < nmax;n++) {

        zi2 = zi * zi;

        zr2 = zr * zr;

        if ((zr2 + zi2) >= 4) break;

        zi *= zr; zi += zi; zi += ci; // zi = 2 * zi * zr + ci;

        zr = zr2 - zi2 + cr;

      }

      if (n<nmax){

        stroke(tc[(n*4)&63], tc[(n*4+1)&63], tc[(n*4+2)&63]); 

        point(i, j);

      }

      else{

        stroke(0);

        point(i, j);

      }

      nIterTot+=n;

    }

    // display horizontal progress bar

    stroke(progress); 

    point(i, 0);

  }

}

function mousePressed() {

  // zoom-in or zoom-out, and start redrawing from the left 

  if (mouseButton === LEFT) zoom=f; else zoom=1.0/f;

  // background(0); 

  xt = mouseX;

  yt = mouseY;

  di = di + xt - float(width / 2);

  dj = dj + yt - float(height / 2);

  zmx1 = zmx1 * zoom;

  zmx2 = zmx2 * (1 / zoom);

  zmy1 = zmy1 * zoom;

  zmy2 = zmy2 * (1 / zoom);

  di = di * zoom;

  dj = dj * zoom;

  i = 0;

}

function mouseWheel(event) {

  // constinue drawing but with different nmax;

  nmax += event.delta < 0 ? 1 : -1; if (nmax<2) nmax=2;

  // nbIterByDraw=nmax*300;

  if (i >= width) i=0;  // if finished drawing restart from the left

}

​